I've been using Foundation for everything lately, and I'm really impressed with it. This new medium grid size thing is a great upgrade.
What I never liked about the Bootstrap/Foundation CSS frameworks was having to mark up my HTML with those damn "small-4 large-8 columns" attributes. It felt to me like that purely-visual stuff should be kept in the CSS, not the HTML.
So I was thrilled when I found I didn't have to put any of that in the HTML - that it could all go in the SCSS, which then parses/compiles it into the final public CSS.
So you can just have:
<div id="sidebar">blah</div>
<div id="article">blah</div>
... then in your SCSS file, do this:
div#sidebar {
@extend .columns;
@extend .small-3;
}
div#article {
@extend .columns;
@extend .small-9;
}
... and that's it! It adds those selectors to the final CSS file and your semantic HTML will have the layout/look you want.
To me, that changed everything, and I've been a fan since.
This has been covered other places, but I don't think it's been covered enough, and I think it was another HN commenter that turned me onto it like this, so just paying it forward in case someone else didn't know yet.
What I never liked about the Bootstrap/Foundation CSS frameworks was having to mark up my HTML with those damn "small-4 large-8 columns" attributes. It felt to me like that purely-visual stuff should be kept in the CSS, not the HTML.
So I was thrilled when I found I didn't have to put any of that in the HTML - that it could all go in the SCSS, which then parses/compiles it into the final public CSS.
So you can just have:
... then in your SCSS file, do this: ... and that's it! It adds those selectors to the final CSS file and your semantic HTML will have the layout/look you want.To me, that changed everything, and I've been a fan since.
This has been covered other places, but I don't think it's been covered enough, and I think it was another HN commenter that turned me onto it like this, so just paying it forward in case someone else didn't know yet.