RED Interactives SCSS library
CSS JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
mixins
test
.editorconfig
.gitignore
.jshintrc
.npmignore
.travis.yml
LICENSE
README.md
_red-sass.scss
bower.json
changelog.md
contributing.md
contributors.md
package.json

README.md

RED-Sass Build Status

A collection of Sass mixins and helpers

Usage

Install RED-Sass through bower.

bower install red-sass --save

Import RED-Sass into your scss files.

@import "path/to/red-sass";

Mixins

Generic Media Queries

@include width-over($w) {}
@include width-under($w) {}
@include width-between($a, $b) {}
@include height-over($h) {}
@include height-under($h) {}
@include height-between($a, $b) {}

source

Wraps content in a media query.

// scss
body {
  @include width-under(400px)          { color: red; }
  @include width-over(600px)           { color: white; }
  @include width-between(400px, 600px) { color: black; }
}

// css
@media only screen and (max-width: 400px) {
  body { color: red; }
}
@media only screen and (min-width: 600px) {
  body { color: white; }
}
@media only screen and (min-width: 400px) and (max-width: 600px) {
  body { color: black; }
}

Named Device Media Queries

@include phone {}              // width under 320px
@include phone-and-tablet {}   // width under 768px
@include tablet-and-phone {}   // width under 768px
@include tablet {}             // width between 321px and 768px
@include tablet-and-desktop {} // width over 321px
@include desktop-and-tablet {} // width over 321px
@include desktop {}            // width over 769px

These map to the following breakpoints.

0        320        768          ∞
|  phone  |  tablet  |  desktop  |
|         |          |           |
|  phone-and-tablet  |           |
|  tablet-and-phone  |           |
|         |          |           |
|         |  tablet-and-desktop  |
|         |  desktop-and-tablet  |
0        320        768          ∞

Debug

@include debug;

source

Add outlines to elements. The deeper the elements are nested, the higher the hue degree.

This is helpful for quickly seeing how a site's layout is constructed.

// scss
@include debug;

// css
*          { outline: 1px solid  #ff0000; }
*:before   { outline: 1px dotted #800000; }
*:after    { outline: 1px dashed #ff8080; }
* *        { outline: 1px solid  #ff4d00; }
* *:before { outline: 1px dotted #802600; }
* *:after  { outline: 1px dashed #ffa680; }
// ... 20 iterations of this
* * * * * * * * * * * * * * * * * * *          { outline: 1px solid  #ff0099; }
* * * * * * * * * * * * * * * * * * *:before   { outline: 1px dotted #80004c; }
* * * * * * * * * * * * * * * * * * *:after    { outline: 1px dashed #ff80cc; }
* * * * * * * * * * * * * * * * * * * *        { outline: 1px solid  #ff004c; }
* * * * * * * * * * * * * * * * * * * *:before { outline: 1px dotted #800026; }
* * * * * * * * * * * * * * * * * * * *:after  { outline: 1px dashed #ff80a6; }

Timing Functions

source

// scss
div { animation-timing-function: $ease-in-circ; }

// css
div { animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); }

Available timing functions:

in out in-out
quad $ease-in-quad $ease-out-quad $ease-in-out-quad
cubic $ease-in-cubic $ease-out-cubic $ease-in-out-cubic
quart $ease-in-quart $ease-out-quart $ease-in-out-quart
quint $ease-in-quint $ease-out-quint $ease-in-out-quint
sine $ease-in-sine $ease-out-sine $ease-in-out-sine
expo $ease-in-expo $ease-out-expo $ease-in-out-expo
circ $ease-in-circ $ease-out-circ $ease-in-out-circ

Ellipsis

@include ellipsis ($max-width);

source

Add automatic ellipsis to single line of text.

// scss
.ellipsis     { @include ellipsis; }
.ellipsis-314 { @include ellipsis(314px); }

// css
.ellipsis {
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ellipsis-314 {
	max-width: 314px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

Fonts

body { font: 16px/1.4 $helvetica; }
body { font: 16px/1.4 $georgia; }
body { font: 16px/1.4 $lucida-grande; }
body { font: 16px/1.4 $monospace; }
body { font: 16px/1.4 $verdana; }
@include helvetica;
@include georgia;
@include lucida-grande;
@include monospace;
@include verdana;

source

Mixins and variables for common font families.

// scss
.helvetica     { @include helvetica; }
.helvetica2    { font: 16px/1.4 $helvetica; }
.georgia       { @include georgia; }
.lucida-grande { @include lucida-grande; }
.monospace     { @include monospace; }
.verdana       { @include verdana; }

// css
.helvetica     { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.helvetica2    { font: 16px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; }
.georgia       { font-family: Georgia, Cambria, "Times New Roman", Times, serif; }
.lucida-grande { font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; }
.monospace     { font-family: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; }
.verdana       { font-family: Verdana, Geneva, sans-serif; }

Microfix

@include microfix;

source

A small clearfix hack from Nicolas Gallagher.

// scss
.microfix { @include microfix; }

// css
.microfix:before,
.microfix:after { content: ""; display: table; }
.microfix:after { clear: both; }

Position

@include position($position, $parameters);
@include absolute($parameters);
@include relative($parameters);
@include fixed($parameters);

source

A helper for absolute, relative, or fixed positioning.

The parameters match the syntax for padding, margin, and border-width parameters;

// scss
.absolute-0    { @include absolute(0); }
.fixed-12      { @include relative(1px 2px); }
.relative-123  { @include relative(1px 2px 3px); }
.relative-1234 { @include relative(1px 2px 3px 4px); }
.position-1234 { @include position(absolute, 1px 2px 3px 4px); }

// css
.absolute-0    { position: absolute; top: 0;   right: 0;   bottom: 0;   left: 0; }
.fixed-12      { position: fixed;    top: 1px; right: 2px; bottom: 1px; left: 2px; }
.relative-123  { position: relative; top: 1px; right: 2px; bottom: 3px; left: 2px; }
.relative-1234 { position: relative; top: 1px; right: 2px; bottom: 3px; left: 4px; }
.position-1234 { position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px; }

Reset

@include reset;

source

A CSS reset.

// scss
@include reset;

// css
* { margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; box-sizing:border-box; }
article, aside, details, summary, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
body { line-height:1; }
ol, ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
table { border-collapse:collapse; border-spacing:0; }

License

MIT Licensed