Picking Apart CSS Weekly #161 Truly – I don’t do Dreamweaver – I don’t want to do Dreamweaver.

Sass Burger

• 1. Sass Burger

Download on GitHub

Modifying JS Components

• 2. Block, Element, Modifying Your JavaScript Components — SEEK UI Engineering — Medium

"Thanks to BEM’s naming conventions, what used to be a big ball of HTML became a suite of nested components. However, for many of us the component abstraction didn’t go further than the style sheet.

Our single page apps could quickly devolve into a collection of massive controllers with overly bloated templates, combining multiple blocks into a larger, combined view."

Zurb Ink

• 3. Building Responsive Email Templates with Ink | Scotch

Ink is responsive HTML email framework by Zurb – the same folks who make Foundation framework. It is extremely difficult to craft html email for all of the email platforms out there, this tool should help to reduce the pain. Worth a look.


• 4. demosthenes.info – Forcing a Webkit Repaint

“Under certain conditions, Webkit will not repaint the browser window to reflect DOM additions or changes. This is a known bug: in the case of Wednesday’s article on making an automatic image checkerboard with SVG and JavaScript, switching from rectangular to circular clipping areas in Chrome will produce an effect that looks like Figure 1:”

WebKit Repaint

Figure 1: The effect of switching from rectangular to circular clipping paths in the auto image checkerboard in Chrome, without a repaint.

Smashing Magazine

• 5. Extending Sass Without Creating A Mess

"The @extend directive in Sass is a powerful directive that facilitates the sharing of rules and relationships between selectors. However, it can produce undesirable side effects if it is not carefully implemented. Thankfully, there are many strategies for using @extend effectively that can prevent these side effects and produce clean, organized CSS.

By examining @extend in detail and exploring these various strategies, you can:

  • accurately predict exactly what happens when you use @extend,
  • and make more informed decisions about when to use a @mixin and when to use @extend, to ensure optimal organization and to restrict unused styles in your style sheets."