lundi 20 avril 2015

Bootstrap File Structure

I am using latest bootstrap for a project. I am confused about the bootstraps mobile first approch and the less file structure

my file structurte is

---css
---js
---less
---mixins
-----..
-----...
----Custom_files
---------main.less
--------- component1.less
--------- component2.less

All my custom less files live in Custom files folder. I am trying to generate a different stylesheet for custom css without touching the bootstrap.min.css at all

In main.less file i have imported all the component less files (component1.less, components.less)

To achieve mobile first approch, in each component file I have included mobile styles as default styles rules and the desktop styles at last of the file

/****Default Styles go here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

My question is When the css is generated it looks like a mess as a combination of default css and media queries instead of having default css first and then media queries

/****Default Styles goes here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

/****Default Styles goes here(mobile)***/
....
/**************************************/


@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){
   /***Desktop styles***/
}
@media(min-width:1200px){}

/****Default Styles goes here(mobile)***/
....
/**************************************/
......

Is this ok? Or if it is wrong what is the proper way of doing ths

Aucun commentaire:

Enregistrer un commentaire