Simple guide to Mobile-First Responsive Design #

Who doesn’t want their web projects to be useable on all devices? If you’ve been looking for a simple primer on the fundamentals of responsive web design, Adam Kaplan’s project, nicely dubbed Grid, is a great resource to visually see what “Responsive” means and how it works.

We want our websites to be useable on all devices by responding to the user’s behavior, screen size and screen orientation.

Check out Grid’s homepage, or the source on GitHub.

Autoprefixer wants you to forget about vendor prefixes #

CSS preprocessors have been around for awhile, but Andrey Sitnik’s Autoprefixer takes the opposite approach: it parses your CSS after you write it and adds any necessary vendor prefixes using data from Can I Use.

As the browser landscape changes, your outputted CSS changes to fit. Without you having to do a thing. Andrey says:

The best tool is a tool you can’t see and one that does the work for you

I have to agree with him on that.

A nice collection of CSS-based loading indicators #

SpinKit from GitHub’s Tobias Ahlin uses CSS animations to create smooth and easily customizable animations, but look out if you need to support older browsers:

The goal is not to offer a solution that works in every browser—if you’re supporting browsers that haven’t implemented the CSS animation property (e.g. IE9 and below), you’ll want to detect support for the animation property, and implement a fallback

The demo features 8 different styles for you to pick from. #6 is pretty rad if you can find a good use case for it. Check ‘em out!

Namespace support is being added to Sass #

Namespace support has been long-requested by those writing CSS the Sass way. The feature is still in development and should hit a Sass version near you soon enough, but it looks to be a very simple and consistent way of dealing with the vast number of use cases for namespaces.

For a deeper take on the history, read this issue and this comment which summarizes the solution and some of the rejected alternative solutions.

Here’s an example use case shared by Chris Eppstein:

@function current-module() {
  @return nth(&, 1);
}

mymodule {
  @at-root {
    .#{current-module()}-header { ... }
    .#{current-module()}-footer { ... }
    .#{current-module()}-body   {
      a          { ... } 
      span       { ... } 
      p          { ... }
      form       {
        button.#{current-module()}-button { ... } }
    }
  }
}

And this would generate CSS like:

.mymodule-header { ... }
.mymodule-footer { ... }
.mymodule-body a { ... }
.mymodule-body span { ... }
.mymodule-body p { ... }
.mymodule-body form button.mymodule-button { ... }

Check out this Gist and this comment to learn more.

CSS Zen Garden turns 10 and the source is now open on GitHub #

If you started a project like CSS Zen Garden today, it would be natural to put the source code on GitHub and ask for contributions via pull request. However, CSS Zen Garden just turned 10, so its life spans beyond that of Git and GitHub for that matter.

So, needless to say, it’s a big deal for Dave Shea to move the codebase to GitHub and follow suit with what we now think is a norm, which is open projects and social coding.

CSS Zen Garden is 10 years old

If you’d like to add a modern CSS Zen Garden design to the mix, fork, branch and submit a pull request! If you’re new to Git and GitHub, and you’re not sure what to do – either learn git (do this!) or use the traditional submission form at mezzoblue.com/zengarden/submit.

Sadly my submission from WAY BACK IN THE DAY was never added as an official design, but can be seen (un-styled) here. I still have the CSS for that so maybe one day I can work it out with Dave to update the CSS src URL for my submission.

Check out the source and fork it on GitHub. Or head to csszengarden.com to see the original design and learn more.

shame.css — a best practice for handling CSS hacks #

Harry Roberts (aka CSS Wizardry) isn’t advocating writing “hacky” CSS, he’s advocating a best practice for handling them.

From his post on the subject:

The idea of shame.css is that you have a totally new stylesheet reserved just for your hacky code. The code you have to write to get the release out on time, but the code that makes you ashamed.

As Harry mentioned in his article, putting your CSS hacks and quick-fixes in their own file called shame.css you do a few things:

  1. You make them stick out like a sore thumb
  2. You keep your ‘main’ codebase clean
  3. You make developers aware that their hacks are made very visible
  4. You make them easier to isolate and fix.
  5. $ git blame shame.css

I don’t know about you, but Harry had me at git blame.

csscss parses your CSS and shows your duplicated declarations #

Yesterday, a neat little gem called csscss celebrated a 1.0 release!

csscss will parse any CSS or Sass file you give it and let you know which rulesets have duplicated declarations.

It’s super easy to use:

$ gem install csscss
$ csscss path/to/styles.css path/to/other-styles.css

{.contact .content .primary} and {article, #comments} share 5 rules
{.profile-picture}, {.screenshot img} and {a.blurb img} share 4 rules
{.work h2:first-child, .archive h2:first-child, .missing h2:first-child, .about h2, .contact h2} and {body.home h2} share 4 rules
{article.blurb:hover} and {article:hover} share 3 rules

Cool! This really helps when you’re trying to get a handle on refactoring. Maybe it’s just me, but I find remembering all of my CSS rules very complicated. There’s a reason I’m more of a back-end developer…

For those who write their CSS in Sass, csscss can also parse Sass files, as well. Just point it at one and it’ll go to town!

Check out the homepage or the source on GitHub for more details.


There’s one other neat part about this gem, but it’s not for users of the gem — it’s for developers. csscss contains, as you’d expect, a full CSS parser written in parselet. I’m sure that others could do need static analysis stuff with CSS if they had a parser that was pre-built for them, as well.

Meet grunticon: a mystical CSS icon solution #

grunticon — yet another cool project by Filament Group — is a Grunt.js task that takes a folder of SVG files and turns them into SVG data urls, PNG data urls, and plain old PNG files to be referenced via CSS.

It also generates a snippet of JavaScript and CSS to asynchronously load the proper icon CSS depending on the browser’s capabilities. This provides some pretty big wins. It:

  1. makes it easy to manage icons and background images for all devices
  2. uses resolution independent SVG icons when supported
  3. obviates the need for CSS sprites

Getting started with grunticon is pretty easy. All you need is PhantomJS, Grunt.js (of course), and npm. Then you:

npm install grunt-grunticon

There are some required configuration settings as well, so be sure to check out the Getting Started and Documentation sections of the project’s README.

Easings.net helps select the right easing for an animation #

If you need help with selecting the right easing for an animation, Easings.net could be the help you’re looking for. It includes an explanation about easing, helpful animated graphs to visually demonstrate each easing as well as “how to” code for jQuery, Sass and CSS.

Since it’s open source, the tool has been forked and translated to European, Slavic and Asian languages.

Fork it and localize it to your language, or check out Easings.net to select the right easing for your next animation.

Flat UI user interface kit from Designmodo #

If you haven’t heard, flat design is pretty trendy right now.

Last September, LayerVault shared their thoughts (and some would say coined the term too) on The Flat Design Era. Since then, many sites and designers have taken to this new trend — including the folks at Designmodo.

A month ago they released Flat UI, a free and open source user interface kit. If you were paying close attention, you’d know that LayerVault slapped them with a DMCA take-down notice issued to GitHub saying “I am the exclusive rights holder for the artwork contained within Flat UI, Free Web User Interface Kit; These exclusive rights are being violated by material available upon your site at the following URL designmodo.github.com/Flat-UI” — but that take-down has since been lifted and the air is clear. In the end LayerVault was simply saying that a few of the icons were way too close to their original flat UI designs and had to defend themselves. It happens.

You should check out Flat UI — even if just to get some ideas on creating your own UI kit.

ZURB Foundation turns 4.0 #

We originally covered Foundation back at 2.0. That was before Foundation 3.0 where they re-wrote the styles in Sass (SCSS) and Compass rather than pure CSS.

Now, ZURB is at it again with Foundation 4.0 and this is what’s new.

Mobile first.

We’ve retooled Foundation from the ground up to be Mobile First. This is no hack job; we didn’t just flip some media queries and call it a day. We went through the framework and rethought how grids should work, how components should work in a mobile-first paradigm, so we could be sure the solution we deliver in Foundation 4 is smart and sturdy.

Semantic.

We’ve built Sass mixins and extensions for almost every component of Foundation. Now you can write whatever markup is most semantic, most representative of what your content really is. Then, simply attach Foundation components to it in your Sass.

New (and Speedier) Javascript.

With Foundation 4, we wanted to make sure that not only were our Orbit, Reveal, Joyride, Clearing and Magellan plugins the best they could possibly be, but also that we were setting Foundation up for even greater plugins in the future. So, we rewrote them all.

We’re also using Zepto.js, a jQuery API compatible library. This dramatically reduces how much your users will need to load (especially on mobile devices) and provides the added benefit of using CSS for animations, taking advantage of hardware acceleration where possible.

HTML Templates.

We’ve created some common layouts for you to start from so you can cook your site faster.

Check out the source on GitHub and the docs to get started.

Custom user styles that simplify the UI and focus on the content of popular websites #

While recording The Industry Radio Show one of our listeners linked out to these custom user styles from Connor Sears, a Product Designer at Pinterest.

user styles for twitter

If you caught our original post on Stylebot a while back, custom user styles like the ones Connor shared become easier to use and far more useful. With 60% of our traffic coming from Google Chrome, I assume that a majority of our readers can appreciate news like this.

Share your custom user styles with us on Twitter, or sign in to stylebot to share them with the community.

Also, check out the source for Connor’s simple user styles site on GitHub.

hint.css makes pure CSS tooltips too easy #

From the hint.css homepage:

hint.css is written as a pure CSS tooltip library which you can use to create cool tooltips for your site. It does not rely on JavaScript, but instead uses data-* attribute, pseudo elements, content property and CSS3 transitions to create the tooltips. hint.css uses BEM naming convention particularly for the modifiers.

The usage is simple. Download one of the 2 library versions to your project and include the CSS file in the <head> of your page.

  1. Full:
    https://raw.github.com/chinchang/hint.css/master/hint.css
  2. Minified:
    https://raw.github.com/chinchang/hint.css/master/hint.min.css

Then, the tooltip text is passed using the data-hint attribute on the element.

For example:

Hello Sir, <span class="hint hint--bottom" data-hint="Thank you!">hover me.</span>

If you’re wanting to contribute, hint.css is developed using Sass. The Sass source files can be found in the src directory of the project on GitHub.

Check out the homepage for more details and demos in action.

Unsemantic, Nathan Smith’s fluid grid successor to 960.gs #

From the homepage:

Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages.

Having worked side-by-side with Nathan for several months, I can really appreciate his humour in naming his successor grid system to 960.gs, Unsemantic. That name is just perfect.

Unsemantic

Unsemantic is a fluid grid system based on percentages, SE-Oh? compliant, built with Sass and Compass (drink!), and also supports both @media queries and Adapt.js to respond and configure your breakpoints.

Check out Unsemantic’s homepage for more info, or dive into the demo to see it in action.

gradientD is a CSS3 Gradient Designer using Dojo #

Tom Pryor:

I wanted to try out Dojo’s new AMD pattern, as well as widigtize (finally) the gradient code spagetti I am currently using in my CSS3 Button Tool (Beta) and I finally got some time to play so I put this dojo widget/mashup together and put it on gitHub in case anyone was interested.

I’m psyched with the much better network performance, but even more importantly (for me) is that I have my first Dojo widget, and I think the next step is to just include it in the buttonMaker… but now I am thinking of upgrading it too to the AMD pattern, before installing this new Dojo AMD widget.

Wow. This is certainly useful, if you’re looking to easily visually create gradients of all types using CSS3/SCSS copy and paste-able code right into your project. The UI design Tom has chosen to go with for the generator could use some work (using Drew Wilson a barometer), but it’s certainly an awesome project that makes it too easy to create CSS3 gradients that’s for sure.

I like how you can double click the sliders to change their color or add new ones by clicking below the horizontal ruler.

Tom does mention support for SCSS in the description of the repo on GitHub, but based on his todo list, that’s not done yet.

Check out the CSS3 Gradient Designer to have some fun creating CSS3 gradients and the source on GitHub.

The Good Man experiments with basic CSS3 animations #

From the readme:

This project is about experimentations. About CSS3 animations and a graduation project. My name is Pedro Ivo Hudson and this is my debut.

And what a debut. Wow, I’m impressed.

Check it out for yourself at thegoodman.cc or check out the source code as well as the about/credits to learn more about how Pedro did this. By the way, Pedro is open to new projects right now, so get in touch if he’s got the skills you need.

Hat tip to Chris Coyier on Google+

Nodefront – Node.js-powered rapid front-end development utility #

Nodefront from Karthik Viswanathan aims to make a front-end developer’s life easier. Built in Node.js, Nodefront bundles a local web server for serving up HTML, CSS, and JavaScript assets and supports live reloading via web sockets. Additionally it ships with a command line interface:

  • nodefront compile – Compiles Jade and Stylus files to HTML and CSS. Can compile upon modification, serve files on localhost, and even automatically refresh the browser/styles when files are changed.

  • nodefront fetch – Automatically fetches CSS/JS libraries for use in your project. Provides an interactive mode to add new libraries.

  • nodefront insert – Inserts CSS/JS libraries directly into your HTML or Jade files.

  • nodefront minify – Minifies CSS and JS files. Can also optimize JPG and PNG images.

Karthik has put together a twenty minute screencast for a full demonstration.

Check out the project web site or source on GitHub for more.