I’ve been playing around with various CSS frameworks for the past eight years. All these frameworks like Foundation, Bootstrap and Blueprint have really only served one purpose for me: to disguise the fact that until now, layout in CSS has been a hack.
Continue reading “Moving from CSS Frameworks to CSS Grid”Tag: css
Rachel Andrew’s List on Developments in CSS
If you’re at all interested in new CSS features and their implementations in browsers, bookmark this:
https://rachelandrew.co.uk/archives/2017/05/01/whats-happening-in-css/
Debugging SASS in Chrome
In Firefox, viewing the original SASS line number directly has been possible using Firebug and FireSass. Similar, or even better functionality has very recently arrived in the stable release of Chrome. I just tried this out and it works wonderfully. See here for instructions:
How to make Chrome understand the SASS/SCSS in your rails app
Don’t worry about the Rails stuff, these instructions work just as well for stand-alone SASS. If you’re using Compass like me, you need to set sass_options = {:debug_info => true} in the config.rb file of your project.
If you look at your css files after doing the above, you’ll see they are quite a mess. From a comment by Paul Irish in the above post I learnt better stuff is on its way thanks to the upcoming SASS 3.3, and Source Map support in Chrome:
Debugging SASS with Source Maps
Exciting times!
SASS, LESS and nesting overload
Both SASS and LESS are really nice tools for CSS developers. Both have the ability to nest selectors like this:
#header {
h1 { font-size: 3em }
p { font-size: 1.2em }
}
…which compiles to
#wrapper h1 { font-size: 3em }
#wrapper p { font-size: 1.2em }
Nesting is really useful, just don’t go more than 2-3 levels deep. I’m currently wading through a bunch of code which was generated from LESS files, and the (huge) stylesheet is full of selectors like this:
html body #wrapper #header #access div.menu-header ul.menu li.menu-item-home.current-page-item a:link { ... }
You have been warned!
On Pragmatic Responsive Design
Responsive design shouldn’t be just about checking screen width and removing stuff on mobile devices, even though this is what it often amounts to. I also admit to doing this myself. Designing with a mobile first approach is sensible, but we run into problems with the typical wireframes/photoshop/html pixel-perfect workflow.
Stephanie Rieger made this excellent presentation on pragmatic responsive design with lots of good points.
You should check out her other presentations too.