How my base.less structure look like

While I was reading awesome book of Smashing Magazine, I review my workflow and some basic structure before I start a project.

This structure should be my way to keep track my front-end building blocks in Less CSS.

base.less

@import 'http://fonts.googleapis.com/css?family=Raleway:400,700|Roboto+Slab:300,400)';

// ------------------------------
// THE BASICS
// ------------------------------

@import 'reset.less';
@import 'grid.less';
@import 'variables.less';
@import 'fonts.less';

// ------------------------------
// GLOBAL STYLES
// ------------------------------

@import 'mixins.less';
@import 'global.less';

// ------------------------------
// SECTIONS
// ------------------------------

@import 'sections/post.less';

// ------------------------------
// COMPONENTS
// ------------------------------

@import 'components/panels.less';
@import 'components/buttons.less';
@import 'components/navigation.less';
@import 'components/pagination.less';
@import 'components/icons.less';
@import 'components/post-list.less';
@import 'components/forms.less';
@import 'components/highlight.rainbow.less';

// ------------------------------
// MEDIA QUERIES
// ------------------------------

@import 'media-queries.less';

// ------------------------------
// EXTRAS
// ------------------------------

@import '../css/animate.css';

In the production fase, I always want to minimize everything into a single file.
Enhancing speed and better user experience.

comments powered by Disqus