manuelramirezio / decorator

Decorator HTML, CSS, and JavaScript Front-End Framework

Decorator Front-End Framework

NOTE:

The framework is being rewritten from scratch. A brand new modular and lighter angular.js supported version of framework and a new extensive and responsive documentation is coming soon here on github and: Decorator.io

---

About:

Decorator, an easy to implement and use component based front-end framework for creating web and mobile supported applications. Decorator is based on HTML, CSS and Javascript. It includes lot's of ready to use pre-built components.

How To:

Step one is to include the main decorator.css file into your projects file head section. If you want to use ttf or spire icons you need to include those css files as well and those need to be included right below the main decorator.css file. Next step is to create a theme.css file and include that one below all of the main decorator files, you can now make all your changes in theme.css file.

Responsive Design:

After you've included the main decorator.css file it's easy to make your layout responsive, all you have to do is add "fluid" class to your layouts body tag. Your layout is now responsive. However, if you want your navbar to act as a responsive menu; then you have to follow few more steps: Step one is to include the jquery into your footer section right above where "body" tag ends. After that's done include dc.menu.js file that comes with decorator js plugins right below jquery. You can now call your navbar selector and add responsive menu to it by adding few more lines of code like in example shown below:

<script type='text/javascript'>

$(document).ready(function(){
    $('.navbar').dcMenu();
});
  	
</script>
  	

IE8 Known Issues: grid system fix:

NOTE: this is not the block system... it's a (ul > li) list based grid as in this example: http://codable.org/templates/grids/

---

Grid System	Selector	jQuery Fix
2 Column	.grid2	$('.grid2 li:nth-child(2n+0)').css({"margin-right": "0"});
3 Column	.grid3	$('.grid3 li:nth-child(3n+0)').css({"margin-right": "0"});
4 Column	.grid4	$('.grid4 li:nth-child(4n+0)').css({"margin-right": "0"});
5 Column	.grid5	$('.grid5 li:nth-child(5n+0)').css({"margin-right": "0"});
6 Column	.grid6	$('.grid6 li:nth-child(6n+0)').css({"margin-right": "0"});

IE8 grid fix code example:

---

<script type='text/javascript'>

$(document).ready(function(){
    $('.grid3 li:nth-child(3n+0)').css({"margin-right": "0"});
});
  	
</script>

Examples:

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

Screenshot	Description	Link
	One Column Responsive Layout	View Example
	Two Column Responsive Layout	View Example
	Three Column Responsive Layout	View Example
	Responsive Grids Layout	View Example
	Responsive Admin Layout	View Example

Freebies:

Some freebies included for now, more free templates soon. All of the upcoming templates will be fully angular.js supported

Screenshot	Description	Demo
	One Page Responsive Portfolio Template	View Demo
	Responsive 5 page Startup Template	View Demo
	6 Page Responsive Parallax Template	View Demo

What's Next?

I'm currently rewriting the framework into a lighter cleaner version with a awesome integration of angular.js Bower, SASS and LESS support will also be incuded. Please stay tuned by following the project here on github.

For more info and examples please check out: Decorator Dox