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.

iOS/Safari font-size bug “-webkit-text-size-adjust: 100%;”
– iOS/Safari font-sizeが大きくなるバグ

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

Auto font resize

In orientation change, smartphone OSs adjust its font size automatically which is not welcomed occasionally.
This happened when I implemented a carousel contents…

Wrong

iOS bug font size

Correct

iOS fixed font size

-webkit-text-size-adjust: 100%;

A property “-webkit-text-size-adjust” makes the auto resizing inactive.

Reference

-webkit-text-size-adjust: none を絶対に設定してはいけない理由

Responsive design for IE

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

There are two well-known JavaScript library called “css3-mediaqueries.js” and “respond.js” for making IE responsive.
»css3-mediaqueries.js
»respond.js

css3-mediaqueries.js

Analyze css file and let @media work.
Note that this library does not handle “ ” and “@import”.

respond.js

This is a light-weight script which is of 4k to 10k.

Just a memo….