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”.

Sass/Compass CSS Sprite folder customising
– アイコン一式を異なるフォルダに

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

Standard

The standard CSS sprite with Compass commonly takes the following structure where the generated sprite image and the icon folder are in the same folder.

This can be realised with the following config.rb and mixin.

config.rb

Mixin

Paths are relative with one specified (images_dir) in config.rb.

Custom

What if you do not want to get them in different directory like this?
For example, I worked on a project with the following structure.

config.rb

The sprite image will be generated in “generated_images_dir”, while the icons are in “sprite_load_path”.

Mixin

The path is relative with “sprite_load_path”;

SCSS