CSS Classes 🤩
START FORM A WIREFRAME.
CREATE A DIFFERENT webSITE EVERY TIME.
CREATE A DIFFERENT webSITE EVERY TIME.
Wireframe
Classic
Modern
Material
Card subtitle
Wireframe Card
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Watch Category
Classic Watch
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
watch category
Sport Watch
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Card subtitle
Material Watch
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
The idea behind CSS classes
A card element is always selectable with the ".card" selector. Even if it's an elegant card or a playful one, it's always a card. Of course, with a different style and different purposes.
With OxyWireframe every CSS class is already on place. You just need to give it the proper style. You can start from this ".card" selector and give it a different style each time.
Start with this Wireframe as a skeleton for you website and style it according to the your site brand identity.
With OxyWireframe every CSS class is already on place. You just need to give it the proper style. You can start from this ".card" selector and give it a different style each time.
Start with this Wireframe as a skeleton for you website and style it according to the your site brand identity.
Be careful while editing classes style. The same classes are used all over this design set: if you change the style of a class, this will be applied to other sections and components.
You think that there are not enough classes? 🤔
Yes, it may be.
Whenever you need a class, create your own. You can create new blocks, elements, or modifiers. Do you know how BEM pattern works? Give a look here.
You are not required to use BEM pattern, but we suggest doing that because your code will be more clean and organized.
Our kit is evolving hand in hand with our web agency, and our intention it's to extend it and keep improving it.
Whenever you need a class, create your own. You can create new blocks, elements, or modifiers. Do you know how BEM pattern works? Give a look here.
You are not required to use BEM pattern, but we suggest doing that because your code will be more clean and organized.
Our kit is evolving hand in hand with our web agency, and our intention it's to extend it and keep improving it.
Let's see it in practice
In this video you can see a live example of how we start from a wireframe landing page and we create a cool travel blog landing page.
We use all the classes that are already set up and we add more if we need to.
This method speeds up your workflow without making you give up on creativity.
We use all the classes that are already set up and we add more if we need to.
This method speeds up your workflow without making you give up on creativity.