Hi
I have been testing a few CSS Frameworks on some smaller projects (Foundation and Bourbon-Neat, will also try Susy). I do like Bourbon-Neat better because of the "cleaner" html code - not a lot of divs with "columns-xyz". This way is more understandable for me to handle the layout in the css.
But, is there any recommendations on a good html (and CSS?) boilerplate to start from? Like H5BP. I guess you always need some supporting files, like Normalize, Modernize, jquery… So how do you start a new project? Any best practice?
The best boilerplates are the ones you make yourself. I grew tired of having to use other peoples stuff so built my own based on the best parts of each one that I liked.
If you can take the time to do it it's definitely worthwhile.
With new customer projects I rarely use a boilerplate anymore, even my own - I build out a custom grid for each customer based on the designs and styling of course is bespoke for each.
The only common threads are stuff like Modernizr, common HTAccess settings and JQuery, so really the only repeating/boilerplate style setup you have should be files to include, rather than HTML/CSS grids and pre-determined classes and ID's.
@jurotek 's answer is probably the best. Start with the basics and build up from that to your design.
There are other options such as Bootstrap by Twitter which includes LESS, a ton of jQuery functions and responsive design, or you could go for Foundation by Zurb which is fully responsive and includes all their own plugins too. There is also Skeleton which comes with basic styling options and responsive layout. Skeleton would probably have to be my favorite as it only gives you the basic needs which you can customize to accommodate your designs and it's easy to nest div elements without getting too confused. (Fluent code writing with proper spacing and indents help overcome this problem of confusion too, though)
These three are good basic start out points. Nothing wrong with using them, but you're limited to design options unless you make drastic changes across the CSS that will match your own CSS properties.
There are some beautiful designs out there that all use the three frameworks, but you'll feel better knowing that you built your own ways that you can always rely on for future projects. The important thing about doing it yourself is it's good practice for future reference.
Thank You all for your suggestions and insights. Much appreciated and very helpful :)
It' so easy to be blinded by all the features a framework have… But, it's very true that it's much easier to understand (and change) the code you have written by yourself.
Just a little tip with creating your own grids. Usually you're going to be floating grid elements left, but you may leave one empty for later.
Suddenly your sidebar is where your main content was going to be, even though you've put the main content div in there.
That's because it has no height, so the right side elements come over to the left. Tip is thus, add min-height: 1px; to your grid item and then get no surprises.
@john_2_878 , you do realize the spam you're constantly posting will have a lovely repercussion? Damn spammers. @andy_unleash, very nifty little trick right there!
@magnus_vb Hello, I'm new here but seeing your question I decided to give my own opinion.
On every site I use several CSS Boilerplates.
"Skeleton 1.2", to achieve great responsiveness in designs.
"CSS Reset" (by Eric Meyner), since I think it the most rightfull reseting code
Finally, an "HTML and CSS template" I my self wrote that has all the basic structure of every site, and even all the default styles every site has and must have.
[ Plugins I consider best on what they are supposed to do are "Camera" by Pixedelic, to make great desktop and mobile slideshows and "WordPress" is also a great CMS and blogging system ]
I tend to overall start with H5BP for quickstarting the HTML, and then add Normalize and Typeplate to quickstart the CSS. For grids my preferred start at the moment is Golden Grid System, though I've also looked into some others, but I will echo the need for simple and understandable to a complex grid.
Anything else gets, generally, added in as I see the need for it, though I have some mixins from various sources as well.
@AndyHowells, the thing I don't like about the method you mentioned is this: If you use the class .one-quarter at desktop, it makes sense, but at a tablet size, it may be 50% and at mobile, you have it set to 100%. The class naming doesn't seem semantic to me that way. Why not create a more "generic" class that doesn't specify a size and change it at every breakpoint? I typically will use a class called something like ".group", as an example, then set the sizes based on the media queries. This way, every classed section called ".group" doesn't specify anything other than that the sections it wraps are grouped into a clump that will fill a certain % width. Hope this makes sense, but it works really well and keeps the class meanings the same at all breakpoints. You can get surprisingly more detailed using just one class name than you might imagine. For super complex layouts, you may need to create a second class to go alone with it, although I've never had to do that. Just target correctly and it works like a charm!
Class names don't have to be semantic although you make a reasonable point.
I do have one question...if you have a class of .group that has its width set in a media query, do you have another class of .group-2 for another group with a different width?
@dfogge - Definitely on the money - instead of a lengthy and complex grid for our new site, I simply created an uber simple framework;
Lovely code Andy, really. But as long as it involves figures like 22.105%, 48.05% and 30.73% I'm not sure we can still talk about an "uber simple" thing.
@Paulie_D: Here's a very quick and messy example of what I was talking about. Of course, it's better when you have a real layout to plan so it's not as messy as this. Most of the time you can create grids with the existing div or p tags, but sometimes you may want to create a class (such as .group), so you can get more complex. My designs aren't usually overly complex, so I normally just use divs to create basic grids.
Hi I have been testing a few CSS Frameworks on some smaller projects (Foundation and Bourbon-Neat, will also try Susy). I do like Bourbon-Neat better because of the "cleaner" html code - not a lot of divs with "columns-xyz". This way is more understandable for me to handle the layout in the css.
But, is there any recommendations on a good html (and CSS?) boilerplate to start from? Like H5BP. I guess you always need some supporting files, like Normalize, Modernize, jquery… So how do you start a new project? Any best practice?
Magnus
The best boilerplates are the ones you make yourself. I grew tired of having to use other peoples stuff so built my own based on the best parts of each one that I liked.
If you can take the time to do it it's definitely worthwhile.
With new customer projects I rarely use a boilerplate anymore, even my own - I build out a custom grid for each customer based on the designs and styling of course is bespoke for each.
The only common threads are stuff like Modernizr, common HTAccess settings and JQuery, so really the only repeating/boilerplate style setup you have should be files to include, rather than HTML/CSS grids and pre-determined classes and ID's.
concur with @andy_unleash, and as far as grid itself, I am using this and customize it based on design requirements.
I use a modified version of skeleton - it's a nice grid system and you can modify it easily to create something a bit more bespoke for yourself.
@jurotek 's answer is probably the best. Start with the basics and build up from that to your design.
There are other options such as Bootstrap by Twitter which includes LESS, a ton of jQuery functions and responsive design, or you could go for Foundation by Zurb which is fully responsive and includes all their own plugins too. There is also Skeleton which comes with basic styling options and responsive layout. Skeleton would probably have to be my favorite as it only gives you the basic needs which you can customize to accommodate your designs and it's easy to nest div elements without getting too confused. (Fluent code writing with proper spacing and indents help overcome this problem of confusion too, though)
These three are good basic start out points. Nothing wrong with using them, but you're limited to design options unless you make drastic changes across the CSS that will match your own CSS properties.
There are some beautiful designs out there that all use the three frameworks, but you'll feel better knowing that you built your own ways that you can always rely on for future projects. The important thing about doing it yourself is it's good practice for future reference.
this post by chris coyier changed my entire outlook on using boilerplate code to lay out grids: http://css-tricks.com/dont-overthink-it-grids/
the control you get from writing it all yourself easily makes up for the time it takes to write it.
@dfogge - Definitely on the money - instead of a lengthy and complex grid for our new site, I simply created an uber simple framework;
that's beautiful, andy. it really is comforting knowing EXACTLY what your code is doing, and the only way to achieve that is to write it yourself.
hm, now that i think about it, the only 'boilerplate' css i'm still using is the normalize reset.
Thank You all for your suggestions and insights. Much appreciated and very helpful :) It' so easy to be blinded by all the features a framework have… But, it's very true that it's much easier to understand (and change) the code you have written by yourself.
Have to re-read Chris post about grids.
Thanks again, Magnus
Just a little tip with creating your own grids. Usually you're going to be floating grid elements left, but you may leave one empty for later.
Suddenly your sidebar is where your main content was going to be, even though you've put the main content div in there.
That's because it has no height, so the right side elements come over to the left. Tip is thus, add
min-height: 1px;to your grid item and then get no surprises.Thanks Andy for the inside tip!
@john_2_878 , you do realize the spam you're constantly posting will have a lovely repercussion? Damn spammers. @andy_unleash, very nifty little trick right there!
@magnus_vb Hello, I'm new here but seeing your question I decided to give my own opinion.
On every site I use several CSS Boilerplates.
"Skeleton 1.2", to achieve great responsiveness in designs.
"CSS Reset" (by Eric Meyner), since I think it the most rightfull reseting code
Finally, an "HTML and CSS template" I my self wrote that has all the basic structure of every site, and even all the default styles every site has and must have.
[ Plugins I consider best on what they are supposed to do are "Camera" by Pixedelic, to make great desktop and mobile slideshows and "WordPress" is also a great CMS and blogging system ]
Well, this is all. Just to share! Luck!
I tend to overall start with H5BP for quickstarting the HTML, and then add Normalize and Typeplate to quickstart the CSS. For grids my preferred start at the moment is Golden Grid System, though I've also looked into some others, but I will echo the need for simple and understandable to a complex grid.
Anything else gets, generally, added in as I see the need for it, though I have some mixins from various sources as well.
@AndyHowells, the thing I don't like about the method you mentioned is this: If you use the class .one-quarter at desktop, it makes sense, but at a tablet size, it may be 50% and at mobile, you have it set to 100%. The class naming doesn't seem semantic to me that way. Why not create a more "generic" class that doesn't specify a size and change it at every breakpoint? I typically will use a class called something like ".group", as an example, then set the sizes based on the media queries. This way, every classed section called ".group" doesn't specify anything other than that the sections it wraps are grouped into a clump that will fill a certain % width. Hope this makes sense, but it works really well and keeps the class meanings the same at all breakpoints. You can get surprisingly more detailed using just one class name than you might imagine. For super complex layouts, you may need to create a second class to go alone with it, although I've never had to do that. Just target correctly and it works like a charm!
Class names don't have to be semantic although you make a reasonable point.
I do have one question...if you have a class of .group that has its width set in a media query, do you have another class of .group-2 for another group with a different width?
Perhaps I'm not getting it.
Lovely code Andy, really. But as long as it involves figures like
22.105%,48.05%and30.73%I'm not sure we can still talk about an "uber simple" thing.@Paulie_D: Here's a very quick and messy example of what I was talking about. Of course, it's better when you have a real layout to plan so it's not as messy as this. Most of the time you can create grids with the existing div or p tags, but sometimes you may want to create a class (such as .group), so you can get more complex. My designs aren't usually overly complex, so I normally just use divs to create basic grids.
CodePen Example