A Look at Zurb Foundation 4 - Semantic Naming and Sass Mixins
Version 4 of Zurb’s foundation was released recently. It sports an emphasis on mobile and better/faster javascript. The last feature, which they don’t give much detail about, is “semantic naming” and sass mixins.
It turns out that this last feature is really cool. Here’s an example. Suppose that your HTML looks like this:
Then you can use the foundation grid like this:
You can use classes and id’s that make sense. The killer feature is that everything is in the css now. For example, if you wanted narrower navigation you could increase the main content area to 10 and reduce the nav to 2: that is changing two lines in a scss file instead of going through all of your pages and replacing “span9” classes with “span10” classes like you’d have to with current Bootstrap.
I made a rails app as an example: https://github.com/phaedryx/foundation-four
3 Notes