gem install stitch
Stitch is an extension for Compass that gives you quick access to CSS design patterns you use every day. It’s pattern ideology extends further than just chunks of code. It aims to create patterns in your workflow and the structure of your CSS to change the way you write CSS.
To get Stitch, grab the gem
sudo gem install stitch
Then include it in your Compass config.rb file,
require 'stitch'
Last, just include it at the top of your Sass file,
@import 'stitch'
Stitch comes with a browser reset. It reduces all text elements, list and form elements back to their defaults. By resetting everything back to standard text and avoiding global styles, you minimise the amount of CSS you need to write further down the track.
@import 'stitch/reset'
Patterns are mixins for common CSS coding patterns. There are dozens of patterns you can use. These are imported separately from the reset:
@import 'stitch/patterns'
All of the patterns are listed below.
Hides content from both screen readers and browsers.
@include hide-from-all
Hides content from browsers, but leaves it available for screen readers.
@include screenreaders-only
Hide content from both screen readers and browsers, but maintain the layout.
@include invisible
Enables hardware acceleration for this element. This creates smoother animations.
@include enable-hardware-acceleration
These easing functions allow you to replicate the easing from jQuery and other javascript frameworks. They are used in conjunction with CSS animations and CSS transitions.
#id {
-webkit-animation: slideOut 1s linear()
}
or
#id {
-webkit-transition: opacity 1s linear()
}
These easing functions available:
Resets the search input in webkit to a standard text input
input[type='search'] {
@include reset-search-field;
}
Sharpen an image if it has become blurry due to upscaling or downscaling
@include sharpen-image;
https://developer.mozilla.org/en/CSS/image-rendering
When photos are upscaled or downscaled, they often get blurry. Don’t use this on flat color images, they will still appear blurry.
@include high-quality-image;
https://developer.mozilla.org/en/CSS/image-rendering
Optimizes the rendering on images so they appear faster, but at a lower quality. Useful for <video>
@include low-quality-image
Replaces text with an image. Just pass it a path to an image in your images directory.
#logo {
@include image-replace('logos/company-logo');
}
Create a really simple, 2 colour gradient. This has two parameters:
This uses CSS3 gradients, so don’t expect this to work in IE.
@include vertical-gradient(#000,#fff);
Create a really simple, 2 colour gradient. This has two parameters:
This uses CSS3 gradients, so don’t expect this to work in IE.
@include horizontal-gradient(#000,#fff);
Float the direct children of an element and apply the clearfix to the parent. This is particularly useful for navigation.
Parameters:
*.left..group-of-elements {
@include float-children;
}Or target a particular selector:
nav ul {
@include float-children('li',right);
}This would result in:
nav ul {
/* Clearfix applied here */
& > li {
float:right
}
}With nav ul extending the .__clearfix class as well.
Position an element absolute and use the parameters to set the position.
Parameters:
Some examples:
.overlay {
@include absolute(0,0,0,0);
}nav {
@include absolute($top:0,$left:0);
}Position an element relative and use the parameters to set the position.
Parameters:
Some examples:
.overlay {
@include relative($right:-10px,$left:-10px);
}h1 {
@include relative(-5px); // Baseline shift
}.box {
@include relative(-50px,false,false,50px);
}Centre a block horizontally as you would any standard container element. This requires a width to work.
@include center-horizontally(500px);
Clear floated children of an element using the micro-clearfix.
@include clear-floats
Easily create text columns using CSS3 columns. Takes 4 parameters:
noneThese are named parameters, so you can use them with or without the parameter name. Without the parameter name, they must be in order.
@include text-columns(2,20px);
But with the parameter name they can be in any order.
@include text-columns($count:2,$width:50px)
In most browsers, the scroll bar isn’t on the side of the window unless the content extends past the bottom of the window. This can sometimes cause the page to look like it is jumping to the left when extra content is added to the page or when moving between pages. This mixin forces to the scroll bar on the window at all times so that the content does not jump across.
html {
@include force-scrollbar
}
Media blocks are a perfect example of how you can save time by using patterns. A media block consists of a float element and a non-floated element. The prime example of this is a block of content with a thumbnail next to it. You don’t want the content to wrap below the image. You have a couple of choices:
Read this article by Nicole Sullivan for a better description of a media block.
This mixin has 4 parameters
.media.blockHere’s an example. Suppose we have this markup:
<article class="news-item">
<img class="media" />
<div class="block">
Content
</div>
</article>
We want the image positioned on the left with 20px spacing between the image and the content.
.news-item {
@include media-block(left,20px);
}
But suppose we wanted more semantic classes:
<article class="news-item">
<img class="news-item-image" />
<div class="news-item-content">
Content
</div>
</article>
We could fill out the class parameters too:
.news-item {
@include media-block(left,20px,'.news-item-image','.news-item-content');
}
Trigger hasLayout in IE7 and below.
@include has-layout;
Make an element display inline block, with fixes for IE6 and 7.
@include inline-block;
Prevent the device from automatically scaling text. Support:
This is usually placed on the root or body element.
html {
@include fixed-sized-text;
}
Appends the content of links and abbreviation elements to the text when printed out. This allows people who print a page to see the href of the link after the link text.
body {
@include append-content;
}
Sets up some standard defaults for print a page. It makes the background transparent, sets the text to a soft black, removes all text shadows, prevents windows and orphans in text, adjusts the colour and display of links and avoids page breaks before or after any headings.
body {
@include printable-text;
}
Returns the font-family property with a list of standard fall-back sans-serif fonts. You can add your own font to the front of the list. Takes a single parameter, $prepend, the prepends anything you give it to the list of fonts.
body {
@include sans-serif('Avenir');
}
This will produce,
body {
font-family: Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Returns the font-family property with a list of standard fall-back serif fonts. You can add your own font to the front of the list. Takes a single parameter, $prepend, the prepends anything you give it to the list of fonts.
body {
@include sans-serif('Baskerville');
}
This will produce,
body {
font-family: Baskerville, "Georgia", Times New Roman, Times, sans-serif;
}
Returns the font-family property with a list of standard fall-back monospace fonts. You can add your own font to the front of the list. Takes a single parameter, $prepend, the prepends anything you give it to the list of fonts.
body {
@include monospace('Inconsolata');
}
This will produce,
body {
font-family: Inconsolata, "Monaco", Courier New, monospace;
}
Hyphenates a block of text if the browser supports it. Takes a single parameter for the hyphens property. Accepted values are:
Default is auto.
@include hyphen(none);
https://developer.mozilla.org/en/CSS/hyphens
Justifies the block of text. Applies hyphenation to prevent large spaces in browsers that support it.
@include justify-text;
This is a function that can be used for em and rem text. This has 3 parameters:
This is very useful when building designs using ems.
body {
font-size: relative-size(12,16);
}
Will return
body {
font-size: 0.75em
}
It will also work with rem text sizing. Set a variable for the global font size and use that each time
$global-font-size: 13px;
html,body {
font-size: $global-font-size;
}
.news-item {
font-size: relative-size(12, $global-font-size, rem);
}
Improves the rendering of text by applying subpixel-antialiasing. Also applies helps render text better in Firefox on Windows.
@include improve-text-rendering
This mixin takes a property and applies a number of vendor prefixes to it. It use 5 default prefixes, -webkit, -moz, -o, -khtml and -ms.
For example:
.box {
@include prefix('border-radius', 10px);
}
Which will return
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-khtml-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
You can adjust the prefixes that are added by using the 3 parameter. This takes a list of prefixes.
.box {
@include prefix('border-radius', 10px, $prefixes: -moz);
}
Which will return,
.box {
-moz-border-radius: 10px;
border-radius: 10px;
}
Works in a similar way to the prefix mixin, but applies it to a property value instead of the property name. For example:
.box {
@include prefix-value(display,box, $prefixes: -webkit, -moz);
}
Will return,
.box {
display: -webkit-box;
display: -moz-box;
}
absolute, relative, float-children