Grunt: grunt-spritesmith for retina

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

A grunt plugin “grunt-spritesmith” is really helpful for creating sprite images.
In default, it does not support for retina displays, so we need to add extra mixins for it.
Referring to “CSSスプライトを生成する「grunt-spritesmith“, I tried it. BUT, it did not work on my console!

SCSS by spritesmith

I got some icons for a sprite image (icon1.png, icon2.png, icon3.png, icon4.png), and the plugin outputs the following scss file.

Extra mixins for retina

Problem

I thought the setting above worked without any problem, but the output css shows a weird result.

Oops! What is it? Do I have to cast the value in $sprite list ($icon1: 32px 70px -32px -70px 25px 22px 215px 188px ‘../img/sprite.gif’;)? NO, NO, you just upgrade Sass!!

Upgrade Sass & compass

Sass

OK!

compass

After the upgrade of Sass, compass got an error, so updated compass as well.

Result

Done!

CSS rules based on SMACSS

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Scalable and Modular Architecture for CSS, or SMACSS, is literally for scalable site design.

Categories of CSS rules

1. Base
2. Layout
3. Module
4. State
5. Theme

Base

In short, it reset styles for elements using element selectors.
CSS resets file is the one.

Layout

Styles for sections of a page.
“Layout styles can also be divided into major and minor styles based on reuse.”
Major ones are header, footer, sidebar, and main sections which are of ID elements.

Modules

Modules sit inside Layout component, like carousel, pager, navigation, buttons, and so on.
To keep “ambiguity” is the key, in other words, the more semantic elements are , the more likely to cause conflicts.

State

The book says..
1. State styles can apply to layout and/or module styles; and

2. State styles indicate a JavaScript dependency.

As a major use case of it is for showing active/inactive or on-hover/off-hover states.

Theme

It handles color, typography, and other factor which has impact on page themes.

Applying to Sass

In working with Sass, we need to care about,
1. Place all Base rules into their own file.
2. Depending on the type of layouts you have, either place all of them into a single file or major layouts into separate files.
3. Put each module into its own file.
4. Depending on size of project, place sub-modules into their own file.
5. Place global states into their own file.
6. Place layout and module states, including media queries that affect those layouts and modules, into the module files.

Sass/Compass changing sprite image path
Sprite画像のパスを書き換える

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Grunt.js is one of the hot trends in JS world today.
I am also applying it to my projects and taking advantage of it.
One of my projects implements Compass sprite image solution and we need to change the path automatically generated by it.
This is because the following.

Minifying & move CSS

The directory for images, scss, and css files is like this.
The images under “/image/sprite-icons/sprites” are automatically merged and turn into a sprite image “sprites.png”.

A scss “main.scss” will be compiled to a css “main.css” at “/style/sp/work”.
Grunt will minify “main.css” and move it to the upper layer “/style/sp/” as “style.min.css”.
This causes a problem because the sprite paths in minified “style.min.css” do not work because the paths are relative from original “main.css”.

It must be..

Therefore, the paths need to be replaced to correct ones.

Customise config.rb

Sass config.rb can handle the text replacement.
The following realises what you expect.

L36 is the function to replace the relative paths and sprites names in “main.css”.

autoprefixer – post-processor for CSS -

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Sass and Less both are well known as CSS pre-processor.
The autoprefixer is a post-processor which handles vendor pre-fixes in compiled CSS.
»ai/autoprefixer

This tool is based on Can I use, so you don’t need to check the latest prefix matter by browsing it. :)

Example

CSS

CSS post-processed

Actually, CSSO will optimise the post-processed CSS by minifying it.
This time introduces how to bundle autoprefix to compass.

Install

Just run gem install.

Settings

Add the following codes to config.rb as follows.

That’s it! You are ready for tasting the awesome tool!

Result

SCSS

CSS

CSSO optimises the code by minifying.