Cameron Lock, of Yammer fame, describes the complexities involved that led her and the team to a simpler, more modular approach to the mobile application design. The most important bit after grouping everything into modules, practically, I think, is this:
We stopped defining margins between modules. Instead, all the spacing in the app would come from padding within the modules — specifically, top padding. Bottom padding would have worked, too; just not both. The key is to choose one of the two and stick with it.
I don’t do a lot of front-end work these days, but I am genuinely interested in approaches that help build modular systems, especially when the subject is something as messy and as context-dependent as CSS.
Recently, I came across the Block-Element-Modifier approach, aka BEM, which I find interesting.
If you’re not familiar with BEM, it’s a naming methodology that provides a rather strict way to arrange CSS classes into independent components. It stands for Block Element Modifier and a common one looks like this:
The principles are simple — a Block represents an object (a person, a login form, a menu), an Element is a component within the block that performs a particular function (a hand, a login button, a menu item) and a Modifier is how we represent the variations of a block or an element (a female person, a condensed login form with hidden labels, a menu modified to look differently in the context of a footer).
This follow-up article provides more details and examples.
From this article, I’ve learned about an excellent (for our times) 10k Apart competition:
Think you’ve got what it takes? You have until September 30th.
I can’t wait to see the submissions and all the ways to squeeze the awesomeness of the modern web into just 10 kilobytes. This reminds me of the Perl Golf posts over at PerlMonks and
Assembly PC 64K Intro from my childhood early days (here are some examples).
Here are a few coding style guides for those of you on the front lines using SASS:
Every Bootstrap Website Ever – a hilarious outcry (I’m guessing, of a designer) about the similarity of the websites based on Twitter Bootstrap. I get the joke. It’s funny. But I still think that Bootstrap is the best thing since sliced bread. It saves lives. :)
After spending years and years in close proximity to web and user interface design, I’m still amazed sometimes at a variety of ways to solve even the simplest of problems. The growth of the web users on mobile devices has brought us the hamburger icon, which usually hides the collapsed navigation menu. It looks like this:
Now, when you click on that, something happens. The menu expands or collapses, usually. But what you don’t often notice is a tiny bit of animation that is applied to the icon itself. Here is a collection of such animations. There are 14 different effects, both in 2D and 3D. Wow!
Twitter Bootstrap + Google Material Design = Material Design for Bootstrap :
300+ material UI elements, 1000+ material icons, 74 CSS animations, helpers, templates, SASS files and many more.
All fully responsive. All compatible with different browsers.
Some components are commercial, but the prices for the PRO version are very affordable:
- Personal Single Site / Application : $29
- Developer Multiple Sites / Applications : $69
- Corporate Multiple Sites / Applications : $199
I came across a couple of CSS guidelines while catching up with my feeds over the weekend. Here they are:
- cssguidelin.es – high-level advice and guidelines for writing sane, manageable, scalable CSS.
- grvcoelho/css – opinionated CSS styleguide for scalable applications