Modulr.css

NOTE: We will soon move Modulr.css 2.0 ( pure css ) framework to <a class="link" href="https://github.com/ModulrCSS" target="_blank">Modulr.css Organisation</a> v2 of the framework is broken into seperate modules, that way you can bower install 'modulr-modulename' without using the whole framework. Framework will include a special compiler which will compile the css into a seperate file using only classes that you use in your html project, that way you'll be able to use all of the fw features right in your html files without ever writing a line of the css code. The idea is to create the most advnaced/fastest declerative way to create amazing html/modbile layouts. Also comming; support for most of the major js frameworks out of the box such as react, angular, vue and polymer.

Modulr.css : A fast and modular approach to building powerful web and mobile interfaces.

V1 Docs: Modulr.css

Only 17k in size.

You can find all of the modulr.css core modules in css/modulr/core folder. Place your own modules into css/modulr/modules folder. See gestarted.html file for more on how to include the fw into your own project.

Few examples included to get you started. Click on thumbnails to view live demo.

| Screenshot | Description | Link
|:------------- |:-------------|:-----| | <a class="link" href="http://codepen.io/decorator/full/BKqLvj" target="_blank"><img src="https://decorator.io/modulr/webroot/media/estatetmb.png" width="180"></a> | Responsive Real Estate Homepage |<a class="grid-title" href="http://codepen.io/decorator/full/BKqLvj" target="_blank">View Example</a></p> | | <a class="link" href="http://codepen.io/collection/AVvZMK/" target="_blank"><img src="https://decorator.io/modulr/webroot/media/content.png" width="180"></a> | A Collection Of Getting Stared Content Elements |<a class="grid-title" href="http://codepen.io/collection/AVvZMK/" target="_blank">View Example</a></p> | | <a class="link" href="http://codepen.io/collection/nmyMwm/" target="_blank"><img src="https://decorator.io/modulr/webroot/media/headers.png" width="180"></a> | A Collection Of Getting Stared Headers |<a class="grid-title" href="http://codepen.io/collection/nmyMwm//" target="_blank">View Example</a></p> | | <a class="link" href="http://codepen.io/decorator/full/yOKPyX" target="_blank"><img src="https://decorator.io/modulr/webroot/media/example-one.jpg" width="180"></a> | Responsive Homepage Example |<a class="grid-title" href="http://codepen.io/decorator/full/yOKPyX" target="_blank">View Example</a></p> | | <a class="link" href="http://codepen.io/decorator/full/YqaaOP" target="_blank"><img src="https://decorator.io/modulr/webroot/media/register-example.jpg" width="180"></a> | Responsive Registration Page |<a class="grid-title" href="http://codepen.io/decorator/full/YqaaOP" target="_blank">View Example</a></p> | | <a class="link" href="http://codepen.io/decorator/full/PNRaJL" target="_blank"><img src="https://decorator.io/modulr/webroot/media/feed-example.jpg" width="180"></a> | Responsive Social News Feed |<a class="grid-title" href="http://codepen.io/decorator/full/PNRaJL" target="_blank">View Example</a></p> | | <a class="link" href="http://codepen.io/decorator/full/qZJKyB/" target="_blank"><img src="https://decorator.io/modulr/webroot/media/comments.png" width="180"></a> | Responsive Threaded/Nested - Tree Comments |<a class="grid-title" href="http://codepen.io/decorator/full/qZJKyB/" target="_blank">View Example</a></p> |