The Atomic/Functional CSS Movement

When I published Expressive CSS a few months ago, I knew it would be controversial, and it was (as evidenced in the comments on my Content & Display Patterns with Expressive CSS post). In the time since, there have been many articles and projects published by others that also advocate lightweight, scalable CSS using utility classes that are easy to write and understand.

From what I can tell, Thierry Koblentz was the first to really challenge CSS conventional wisdom with what in 2013 he dubbed the atomic approach. Whether you call it atomic, functional, expressive or something else, people are realizing that for too long we have been stuck in this dogmatic pursuit of semantics which has held us back from crafting CSS in a way that is actually maintainable and scalable.

There are still people who strongly reject this approach (for example, the so-called Maintainable CSS project). A few years ago, I would have been one of those people. Read CSS and Scalability and Rationalizing Functional CSS to understand why companies with large CSS architectures are switching to the Atomic/Functional/Expressive approach.

Here are some recent real world implementations:

Marvel Style Guide Screenshot
Marvel Style Guide

Solid by Buzzfeed Screenshot
Solid by Buzzfeed

When companies publish their frameworks, people often ask why not use an existing framework. Just take bootstrap and fork it. Better yet, use BassCSS or Tachyons.

Well, when you write CSS this way, creating a custom CSS architecture designed exactly for your project’s needs is not that hard and is actually fun. And if you do it right, changing things down the road is no big deal if you are using a CSS preprocessor and HTML templates. That is the benefit of the atomic approach!

Simple Responsive Grid

Simple Grid Demo Page on GithubSimple Grid is the responsive grid system I am using on all of my websites these days. View it on Github.

3 years ago I published Extra Strength Responsive Grids, a grid similar to the one in Bootstrap (although we did release ESRG first). My use of the grid has evolved to the point where I wanted to open source this newer, better version.

Simple Grid is similar in function Bootstrap’s grid. The main difference is the inclusion of padding helper classes. Rather than filling up stylesheets with lots of padding declarations, I use these combined with grid classes to handle almost all the spatial arrangements of web pages.

The padding classes also eliminate the need to have .row as a class. With simple grid, you use a .grid-12 with an appropriate padding class applied to it instead of .row.

When I built the ESRG project, the demo page was themed in a humorous way to feel like a sales site for a pain reliever drug. For the Simple Grid demo page, I ditched the silliness and kept it simple and utilitarian. It is probably the smallest stylesheet for a project page that I’ve ever made, just the grid and some CSS to expose the underlying grid scaffolding. No webfonts, colors, images, or styling flourishes, just the business.

Additionally, I have a separate project for the Simple Grid Generator, a SASS mixin that I used to output the Simple Grid CSS. It comes with some different options to customize your own grids, and can also be useful to anyone who wants to see how to make their own SASS grid generator.

How to Get Open Source Project Ideas and Execute Them

A common question people ask me is how I come up with open source project ideas. It is a pretty simple process:

1. Have A Problem
If you are a developer, when you are building stuff you will have to solve problems. On top of those, as a human being you will have problems every day. How can I share responsive web design examples to educate my clients? How can I make a more flexible grid system for responsive web design? How can I help my kid learn his ABC’s? Are my passwords manly enough?

The first thing most of us do is see if that problem has been solved before, and how. It may be that the problem has been solved effectively, and there is no need for you to solve it again. Many times, there are different approaches to solving the problem, but none that work quite the way you’d like. On rare occasions, you have encountered a problem that doesn’t have any good solutions yet, which can be quite exciting.

1a. Come Up With a Cool Name
This is probably the most fun part of the process, haha. Cool names are cool!

2. Solve The Problem
Get on it. Solve that problem. It could be that solving a particular problem is too large and ambitious to pull off. Either find some friends to collaborate with, or break the problem into smaller components then go after them one at a time.

3. Abstractize Your Solution
When possible, craft your solution in such a way that it can be applied more generally, for people who encounter the same problem.

4. Publish
Throw it on Github, of course, but if you want your project to stand out, go the extra mile. Make a great demo page to showcase your project with some clear, easy-to-follow documentation.

5. Don’t Be Shy
If you release a Github project in the woods, does anyone notice it? To get your project noticed, you need to publicize it. Tweet it out and share it up. Send it off to newsletter publications (e.g. JavaScript Weekly, HTML5 Weekly, etc.) Even better, create a tutorial and try to get it published online somewhere like Codrops, Tuts+ or Smashing Magazine.

6. Repeat
The more you projects you publish, the more ideas you will have. I recommend maintaining a list of your project ideas on Google Drive or Trello.

Open Source For The Wins

awwwards-articleI was browsing around some web design award sites today. So much inspiring stuff out there to be found. What do all these beautiful and often amazing award-winning websites have in common? They all use open source projects from Github and elsewhere. As someone who releases open source, it is thrilling when you view the source of one of these sites and see your own code mixed in there.

So I want to thank all the people out their using my code to help them power their creations. Knowing that my projects are being used by talented people all over the world is both tremendously motivating and also a bit mind-blowing.

Here’s a list of some of the latest award-winning sites that use my open source stuff:

Sites using SuperScrollorama (and also Greensock Animation):

Ikea, Life Of One Kitchen
www.zivotjednekuchyne.cz
Won a Smashing Award and was a CSS Awards Site of the Day.

Alpina, Life is Vertical
lifeisvertical.alpina-since1883.com
Won a CSS Design Award and a Smashing Award. Also a Design Inspiration Selection.

New Škoda Octavia
www.nouvelleoctavia.fr
A CSS Awards Site of the Day and Design Licks Site of the Day
FWA Shortlist

Sites using BigVideo.js:

WhiteShoe by Ferragamo
whiteshoe.ferragamo.com
A Smashing Awards winner.

KOJO
kojo.com.au
Awwwards Honorable Mention and featured on Smashing Awards
FWA Shortlist

herrlich media
www.herrlich-media.de
An Awwwards Site of the Day and CSS Design Award Winner and Make Better Websites selection.

Whiteboard Agency
whiteboard.is
An Awwwards Site of the Day and CSS Awards Site of the Day

rocking.tv
rocking.tv
No awards yet, but I think it is pretty slick!

And thanks also to all the other award winning sites using my open source projects that I’ve mentioned in the past.

Lastly, a special shoutout to Alexander Prinzhorn and his magnificent skrollr project. Many a time I have viewed source of a really cool scrolling website in hopes that it was using my code, only to discover that it is a Skrollr site. At which time, I clench my fist and shout “Skrollr! You got me again, haha.”

Update: Here’s a new BigVideo.js winner
L’Attrape Rêve
lattrapereve.fr
Awwwards Site of the Day

Update: BigVideo.js has just got its first FWA Site of the Day via Nectar Estudio!
Lois Jeans
www.loisjeans.com/aw2013
FWA Site of the Day

AuctionsByCellular

I’m thrilled to announce that I’ve been hired by AuctionsByCellular (ABC) as Lead Web Developer. ABC is an exciting new company that uses people-powered technology to help charities improve their fundraising efforts. Not only will I get to do what I love (write lots of code), my efforts will actually help improve the world, so how awesome is that!

ABC BV BC New FrontAuctionsByCellular specializes in mobile bidding for silent auctions at charity events. Not only have they built a great tech platform (which I will be helping build out), ABC has great event staff that help run the event. The way it works is that attendees of the charity event get a text when the auction starts, then bid on items from their phones (or can go to one of the ABC staff who have iPads). Charities love it!

If you are curious to hear more about my new place, there have been lots of articles about ABC in the press lately, including this article featuring my friend (and ABC CEO) Jim Alvarez.

If you or someone you know is with a charity that can benefit from using ABC, please get in touch:

By Phone: 888.748.2323
By Email: partners@auctionsbycellular.com

Techweek Day 2: When Humor is a Serious Business

This was an interview session with Dick Glover, President & CEO, Funny or Die, which launched 6 years ago. User generated content was the future. It started with a question. Why is there not a ‘Hot or Not?’ for YouTube?

Instead of following a Hollywood model, they did a Silicon Valley model. They made Will Farrell and Adam McKay an equity partner in the business. They didn’t get money unless the company was successful.

There was no budget. Go find friends and cameras, and do stuff. This led to the creation of “The Landlord”.

After that viral success, there were other videos, shortly followed by the 2008 market crash and then the emergence of social. They focused on combining A-list talent with social media. Though anyone can contribute videos, most of their popular content features professional talent.

Chicago Tech Events

chicagotechevents-logo-180Throughout the past year, I have been keeping a running list of cool local Chicago tech events and sharing it with friends and the people at work. I’ve decided to make it into a thing and put it out there. So I present to you… chicagotechevents.com

I managed to have some fun building it too. It was my first time using Twig templates, and really liked it. I expect I’m going to be using that on a lot of things in the future. Also, I am trying out a couple AWS products. I built the backend on DynamoDB because why not. I made a simple admin page for adding the events to DynamoDB. Every day, a CRON job runs that goes through the events and makes a JSON file with all the data, and puts it onto S3. When you go to chicagotechevents.com, it is loading that JSON file and smushing it together with a Twig template. Nice and simple.

I am also using Amazon SES for the first time for sending out the email newsletter, because the price was right and integration was easy (so far).

When Inpiration Strikes

The dev ops guy on our team comes up with some creative and hilarious passwords for our web servers. Every time he sends me a new ssh credential, it inevitably cracks me up. He follows the multiword approach with some special characters sprinkled in.

archer-posterSome other guys I work with recently launched a new high-end line of quality room spray. Called Archer Air Superiority it comes in scents like distillery, hunting lodge and european sports car. We have Archer posters all around the office.

When inspiration hits, it is usually when the combination of two or more things collide together in your brain and give birth to something else. This is what happed to me when I was walking around the 18th floor and, boom!, I had an idea. A few days later, I launched Passwords for the Manly Man.

I’ve written before about how I come up with ideas. The key to shipping your ideas out into the world is to strike while the iron is hot. Don’t overthink it, just do it. I’ve posted before about my criteria for the types of ideas I like to pursue. It is good to have that, but ultimately what you want is to come down with a bit of the madness over an idea and just execute.

manlymanpasswords-lg

I enjoy doing funny little bite-sized projects like this. It is great to see people getting some chuckles out of it on Twitter and Reddit.