Naming things is by far the most difficult part of writing CSS. This is because we can’t predict the future. A class name might make perfect sense one day, then the design changes, and it’s a misnomer the next day. We’re then tasked with refactoring our markup and styles so that they make sense. Yuck. …
Tag Archives: css
Waves – Click effect inspired by Google’s Material Design
CriticalCSS
Critical CSS opens a page in a browser from the command line, sets the window width to a specified width and height (default is 1200 x 900), and analyzes which styles are applied to elements that fall within the visible portion of that viewport. It then writes those styles to a file that you can …
GitHub’s CSS
I’m always interested in the development details of other products, particularly their styleguides and approach to CSS. Given my penchant for the otherwise inane CSS details, I decided to write a bit about GitHub’s CSS. Always great to see how a company organises its code. It’s an honest piece, also covering stuff that should improve. …
Icons changing colors on scroll
Quite a simple technique: use :before and :after to inject two colored panels, each taking up 50% of the height. Then lay your inverted icons on top of them, and presto. Icons Filling Effect → Icons Filling Effect Demo → If you like this, you’ll definitely like these too: Skrollr – CSS animations linked to …
Pixels are expensive
Forward to the 16:00 mark to get a good overview of how browsers go from receiving a tad of CSS to actual pixels on screen, a process known as the rendering pipeline: Recalc styles Layout Paint Composite Layers If you like reading more than watching a video, a write-up is also available: Pixels are expensive …
CSS3 Grid Layout Module, an Introduction
Warning: Experimental stuff. Demos will only work in Chrome Canary (for now) The CSS3 Grid Layout Module has changed quite a lot since it’s incarnation when it shipped with IE10. At Responsive Day Out 2, Rachel Andrew gave an easy to follow practical talk of the current implementation (as it appears in Google Chrome Canary). …
Kouto Swiss
Stylus is great, but… where’s my Compass/Bourbon? Kouto Swiss offers an answer to that as it’ll make lots of handy functions and mixins available to you. Take this Kouto Swiss provided font-face function for example: font-face( “Roboto”, “./fonts/Roboto-Regular-webfont”, normal ) Which will render into this: @font-face { font-family: “Roboto”; font-weight: normal; src: url(“./fonts/Roboto-Regular-webfont.eot”); src: url(“./fonts/Roboto-Regular-webfont.eot?#iefix”) …
color: rebeccapurple;
From now on, rebeccapurple means #663399. A great tribute to a great man and his daughter who was passed away at the age of just six. Every time Eric blogged about Rebecca’s condition and how it changed over time it tore me into pieces. This is the right thing to do, just as #663399Becca was. …