A list of mixins and placeholders to ease you from of the pain of repeating same code and help you focus on necessary styling.
bower install sass-pattern
npm install sass-pattern
@import "sass-pattern";
These three objects helps you achieve the most common design layouts.
// API:
@mixin Media($left, $right, $gutter: 0, $atRoot: true)
@mixin Flag($left, $right, $align: middle, $gutter: 0, $atRoot: true)
@mixin Balance($left, $right, $height: 0, $atRoot: true)
The media object is an image to the left, with descriptive content to the right.
via http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
Douban Community:
<div class="status">
<div class="status-author"></div>
<div class="status-content"></div>
</div>
.status {
@include Media(
$left: '.status-author',
$right: '.status-content',
$gutter: 10px
);
}
... Where the flag object differs, however, is its ability to vertically align the image and text to the tops, middles or bottoms of each other.
via http://csswizardry.com/2013/05/the-flag-object/
Part of user's profile in Douban:
<div class="collection">
<span class="collection-status"></span>
<ul class="collection-items"></div>
</div>
.collection {
@include Flag(
$left: '.collection-status',
$right: '.collection-items',
$gutter: 5px
);
}
This time, the two elements being arranged are 'floated', one left, one right. But you still have the control of their vertical alignment.
The header of a story in Douban Music:
<header class="event-hd">
<h1 class="event-title"></h1>
<div class="event-share"></div>
</header>
.event-hd {
@include Balance(
$left: '.event-title',
$right: '.event-share'
);
}
// API
@mixin Button {
@content;
}
%Button
Create a button:
.button-primary {
@include Button {
border: 1px solid #ccc;
background: #fff;
padding: 1rem;
font-size: 1.5rem;
};
}
Style a button without worrying about cross-device style differences.
<button class="button-login">Login</button>
<a class="button-login">Login</a>
<span class="button-login">Login</span>
.button-login {
@extend %Button;
border: 1px solid darken($blue, 6%);
background: linear-gradient(top, lighten($blue, 6%) 0%, $blue 100%);
&:hover {
background: linear-gradient(top, lighten($blue, 6%) 10%, $blue 100%);
}
&:active {
background: $blue;
}
}
// API
@mixin SansSerif
%SansSerif
@mixin Smoothing
%Smoothing
@mixin Kerning
%Kerning
// One-line truncating, with ellipsis behind
@mixin Ellipsis
%Ellipsis
// Multiline truncating, with ellipsis behind
@mixin Clamp($lines)
@mixin Retina($img, $img2x, $bgSize: cover)
@mixin HalfPixelBorder($color, $dir)
.sprite {
@include Retina('img.png', 'img@2x.png', 100px 50px);
}
@mixin Rect($width, $height, $radius: 0)
@mixin Square($length, $radius: 0)
@mixin Circle($diameter)
// auto scaling
@mixin Ratio($ratio)
@mixin ResetElement
@mixin ResetMobile
// arguments $h1 ~ $h6 are all optional
@mixin ResetTitle($h1, $h2, $h3, $h4, $h5, $h6) {
@content;
}
@mixin Reset {
@content;
}
@include Reset {
body {
@include SansSerif;
@include Smoothing;
}
a {
text-decoration: none;
}
};
Documentation: