CSS Classes 🤩

START FORM A WIREFRAME. 
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.
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. 

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.
magic-wandcogheartcamera-videopicturecarttaggiftdownloadwarningquestion-circleframe-expandlayerstext-sizehighlight