Speaking as someone who has been in the industry for 18 years (My day job is as a Senior Developer and i’ve trained people in web design). I would definitely avoid frameworks like Bootstrap and Foundation. The benefits are over shadowed by the downsides.
These frameworks are very heavy in file size if you used the vanilla version. This can be reduced if you use the alternatives versions which allows you to removed some parts that are not necessary for your current project. In my experience though, they are more trouble than they are worth because you end up fighting the framework sometimes in order to complete your design.
You will have much more fun and learn a heck of alot more if you put your own framework together. I will give you some hints:
Use Gulp
Use SASS
Use Normalize rather then a browser reset (Normalize)
Make your own SASS grid or integrate one already available. I use the Profound Grid (Profound Grid)
Get Typography right. This is hard but something like SASSLine will get you started. (Sass Line)
I think I can just chime in here with a related question: during the last year I used Foundation a lot. For me it was a way to learn more about responsive design and visibility traits. Now I see that I can go without much that they offer in the package (well, it is possible to kick out the unused components). But a great advantage is the setup of different kinds of navigation. Can anybody recommend something similar to Skeleton (which has no navigation) but for navigation?
This site for instance (Responsive Navigation) is a good start, but is there anything else where I can find many and more sophisticated examples in one place?
I made a lot of progress in looking at Bootstrap’s 12-column grid. Unfortunately, their SCSS files are over-complex, so looking at the CSS output can be more helpful to understand how it works. Especially the use of negative margins on grid rows and box-sizing: border-box on the columns eases the pain of using grids a lot.
Just some advice on selector-naming. While I’m using a naming scheme, that is similar to BEM to avoid side effects in my CSS wherever possible, I can only recommend after using something like .grid__column--md--2, that you should prefer something shorter for better readability and easier editing. I went with the following scheme (where “md” and “lg” are breakpoint names):
Note the “/” character within class names? This is totally fine, as long as you escape it in your CSS file by using a backslash "":
.md-1\/2 { width: 50% }
Why? There’s zero chance that these naming schemes will collide with something else if you write your while CSS from scratch and you will probably use your grid a lot in your templates. I also take the step of improving readability a little further by using separators in my class attributes:
Yes, you can safely use separator characters in your class attributes to separate or group class names. Although this may look weird at a first glance, it comes at no cost (okay, a few extra bytes …). If you don’t believe me, see this article by Harry Roberts. Just make sure, that there are always spaces between the separators and your actual class names.
If it’s powerful multilevel drop downs with keyboard accessibility, vertical or horizontal, and with support for mobile devices… that is very tall order and there is only one menu that can do this as far as I know: