code

mixins

code-base

@mixin code-base($font-family: sourcecodepro-medium-webfont, $bgcolor: #666, $color: white, $padding: 20px, $whitespace: pre) { ... }

Description

Provides the basis for other code-related mixins. All The attributes are parameterized to make them easier to chage.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$font-family`	font family to use as primary.	`String`	`sourcecodepro-medium-webfont`
`$bgcolor`	background color	`String`	`#666`
`$color`	text-color	`String`	`white`
`$padding`	padding amount	`String`	`20px`
`$whitespace`	how to handle white space	`String`	`pre`

Example

div .code-example {
  @include code-block();
}

Used by

[mixin] code-block
[mixin] code-inline
[mixin] code-editable

Author

Carlos Araya

code-block

@mixin code-block($font-family: sourcecodepro-medium-webfont, $bgcolor: #666, $color: white, $padding: 20px, $whitespace: pre) { ... }

Description

Using the code-base mixin it adds display-block to create Github style fenced code blocks

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$font-family`	font family to use as primary.	`String`	`sourcecodepro-medium-webfont`
`$bgcolor`	background color	`String`	`#666`
`$color`	text-color	`String`	`white`
`$padding`	padding amount	`String`	`20px`
`$whitespace`	how to handle white space	`String`	`pre`

Example

code {
  @include code-inline();
}

Requires

[mixin] code-base

Author

Carlos Araya

code-inline

@mixin code-inline($font-family: sourcecodepro-medium-webfont, $bgcolor: #666, $color: white, $padding: 20px, $whitespace: pre) { ... }

Description

Uses code-base to generate inline code snippets, like GFM's backtick inline code

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$font-family`	font family to use as primary.	`String`	`sourcecodepro-medium-webfont`
`$bgcolor`	background color	`String`	`#666`
`$color`	text-color	`String`	`white`
`$padding`	padding amount	`String`	`20px`
`$whitespace`	how to handle white space	`String`	`pre`

Example

code {
  @include code-inline();
}

Requires

[mixin] code-base

Author

Carlos Araya

code-editable

@mixin code-editable($font-family: sourcecodepro-medium-webfont, $bgcolor: #666, $color: white, $padding: 20px, $whitespace: pre) { ... }

Description

TO be used when create contentEditable regions. It'll change the background color add clear:both and a small margin to the bottom of the element.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$font-family`	font family to use as primary.	`String`	`sourcecodepro-medium-webfont`
`$bgcolor`	background color	`String`	`#666`
`$color`	text-color	`String`	`white`
`$padding`	padding amount	`String`	`20px`
`$whitespace`	how to handle white space	`String`	`pre`

Example

style {
 @include code-editable();
}

Requires

[mixin] code-base

Author

Carlos Araya

columns

mixins

column-attribs

@mixin column-attribs($cols: 2, $gap: 20px, $fill: balance, $span: none, $moz: true, $webkit: true) { ... }

Description

This mixin will create column attributes for the element it's called in

It uses default attributes to make life easier.

We use number of columns rather than width for convenience. Counting width means we have to do percentages or be very strict in the width of our content.

We could simplify the mixin by just using the unprefixed version and let tools like prefixfree or autoprefixer add prefixes where needed but this mixin was designed to work without needing additional tools or script to work...

It can also conditionally remove Mozilla or Webkit prefixed attributes by passing $moz or webkit as false in the mixin include instruction

if you want to change it then go ahead.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$cols`	How many columns.	`String`	`2`
`$gap`	Gap between columns	`String`	`20px`
`$fill`	How to fill column space	`String`	`balance`
`$span`	Do we span accross columns	`String`	`none`
`$moz`	Do we include -moz prefixed declarations	`String`	`true`
`$webkit`	Do we include -webkit prefixed declarations	`String`	`true`

Example

.col2 {
  width: 100%;
  @include column-attribs (2, 20px, $moz: false, $webkit:false);
}

.col3 {
  width: 100%;
  @include column-attribs (3, 10px);
}

Author

Carlos Araya

images

mixins

image-2x

@mixin image-2x($image, $width, $height) { ... }

Description

This mixin automates the use of 2x retina images for devices that can handle them

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$image`	What image to use	`String`	—none
`$width`	Image width	`String`	—none
`$height`	Image height	`String`	—none

Example

Usage

div.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
 }

Result

div.logo {
  background: url("logo.png") no-repeat;
}
@media
  (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6 / 2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {
    div.logo {
      /* on retina, use image that's scaled by 2 */
      background-image: url("logo2x.png");
      background-size: 100px 25px;
    }
  }

Author

Carlos Araya

maps

variables

breakpoints

$breakpoints: (
  small : 480px,
  medium: 700px,
  large : 1024px
);

Description

Defines the break points

Author

Carlos Araya

p-font-sizes

$p-font-sizes: (
  null  : (15px, 1.3),
  small : 16px,
  medium: (17px, 1.4),
  900px : 18px,
  large : (19px, 1.45),
  1440px: 20px,
);

Description

Defines the different sizes for p elements

Author

Carlos Araya

sm-profiles

$sm-profiles: (
  facebook: #3b5998,
  flickr: #0063db,
  github: #4183c4,
  googleplus: #dd4b39,
  linkedin: #007bb6,
  twitter: #00aced,
  vimeo: #aad450,
  youtube: #b00
);

Description

Defines the social media profiles and associated colors

Author

Carlos Araya

mixins

font-size

@mixin font-size($fs-map, $fs-breakpoints: $breakpoints) { ... }

Description

Creates the mediaqueries for the combination of $breakpoints and p-font-sizes. It also takes into account if we have line height attributes for a given breakpoint and adds any value present in p-font-sizes but not in ~breakpoints by using the key from p-font-sizes as the value for the media query.

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$fs-map`	map of sizes and breakpoints	`String`	—none
`$fs-breakpoints`	pre defined breakpoints	`String`	`$breakpoints`

Example

Defining the font sizes for p elements

p {
   @include font-size($p-font-sizes);
}

Result from example above

 p {
   font-size: 15px;
   line-height: 1.3;
 }

 @media screen and (min-width: 480px) {
   p {
     font-size: 16px; }
 }

 @media screen and (min-width: 700px) {
   p {
     font-size: 17px;
     line-height: 1.4; }
 }

@media screen and (min-width: 900px) {
  p {
    font-size: 18px; }
}

@media screen and (min-width: 1024px) {
  p {
    font-size: 19px;
    line-height: 1.45; }
}

@media screen and (min-width: 1440px) {
  p {
    font-size: 20px; }
}

Requires

[mixin] make-font-size

Author

Carlos Araya

make-font-size

@mixin make-font-size($fs-font-size) { ... }

Description

Mixin that actually creates the media queries

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$fs-font-size`	pre defined font-sizes	`String`	—none

Used by

[mixin] font-size

Author

Carlos Araya

media queries

mixins

hdpi

@mixin hdpi($ratio: 1.3) { ... }

Description

Generic HDPI query to handle devices. We could treat this as an extension of the generic-mq but I like to be explicit and there special prefixes to deal with when working with hdpi screens

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$ratio`	hdpi value.	`String`	`1.3`

Content

This mixin allows extra content to be passed (through the @content directive).

Author

Carlos Araya

iphone3

@mixin iphone3($orientation: all, $deviceMinWidth: 320px, $deviceMaxWidth: 480px, $devicePixelRatio: 1) { ... }

Description

Media query to handle iPhone 3 and other non-retina devices

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$orientation`	is the device in portrait or landscape mode or do we use this query for both?	`String`	`all`
`$deviceMinWidth`	minimum device size	`String`	`320px`
`$deviceMaxWidth`	maximum device size	`String`	`480px`
`$devicePixelRatio`	pixels by physical pixel	`String`	`1`

Content

This mixin allows extra content to be passed (through the @content directive).

Author

Carlos Araya

generic-mq

@mixin generic-mq($orientation: all, $deviceMinWidth: 320px, $deviceMaxWidth: 480px, $devicePixelRatio: 1) { ... }

Description

Generic media query to handle devices

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$orientation`	device orientation.	`String`	`all`
`$deviceMinWidth`	no smaller than	`String`	`320px`
`$deviceMaxWidth`	no bigger than	`String`	`480px`
`$devicePixelRatio`	pixel density (retina or not)	`String`	`1`

Content

This mixin allows extra content to be passed (through the @content directive).

Author

Carlos Araya

programming utilities

functions

missing-dependencies

@function missing-dependencies($dependencies) { ... }

Description

This function checks if the parameters (function names) are available in the given context

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$dependencies`	Name of the functions to test	`String`	—none

Example

Usage

@function dummy() {
  @if missing-dependencies(my-function, my-other-function) {
      @warn "Oops! Missing some functions for `dummy`!";
      @return null;
  }

  // `dummy` function's core,
  // obviously needing `my-function` and `my-other-function` to work.
}

Author

Carlos Araya

typography

functions

conditional_font_load

@function conditional_font_load() { ... }

Description

Generates Google Font links only if a given variable is available

Parameters

None.

Example

styles

body {
  font-family: $stack-lato;
}

h1 {
  font-family: $stack-pt-serif;
}

Author

Carlos Araya

calculateRem

@function calculateRem($size) { ... }

Description

Auxiliary function that does the actual conversion from pixel to rem

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	Font size	`Integer`	—none

Used by

[mixin] fontSizeRem

Author

Carlos Araya

calculateEm

@function calculateEm($size, $context: 16) { ... }

Description

Auxiliary function that does the actual conversion from pixel to rem

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	Font size	`Integer`	—none
`$context`	Base value for calculation	`Integer`	`16`

Used by

[mixin] fontSizeEm

Author

Carlos Araya

get-vw

@function get-vw($target) { ... }

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$target`	Target size for conversion	`String`	—none

Example

.headline {
  font-size: 4.5em; // Fallback
  @include vw(72px);
}

Author

Carlos Araya

font-size

@function font-size($size) { ... }

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	Target size for conversion	`String`	—none

Author

Carlos Araya

mixins

font-ligature

@mixin font-ligature() { ... }

Description

Handles font ligatures for different browsers. Since different browsers have adopted different ways to handle the attribute we have to make it a mixin.

Parameters

None.

Author

Carlos Araya

font-kerning

@mixin font-kerning() { ... }

Description

We also need to handle font kerning different for different browsers.

Parameters

None.

Author

Carlos Araya

font-declaration

@mixin font-declaration($font-family, $font-file-name, $weight: normal, $style: normal) { ... }

Description

Generates the necessary font-face declarations to handle most, if not all modern browsers. The only browsers not supported by the mixin are those that require eot lite

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$font-family`	Font-family name to use.	`String`	—none
`$font-file-name`	File name for the font we are loading	`String`	—none
`$weight`	Bold or normal	`String`	`normal`
`$style`	Italic or normal	`String`	`normal`

Example

Using font-declaration mixin to load fonts

@include font-declaration('Roboto Slab', '../fonts/robotoslab-regular-webfont');
@include font-declaration('sourcecodepro-medium-webfont', '../fonts/sourcecodepro-medium-webfont');

Result from example above

@font-face {
  font-family: 'Roboto Slab';
    src: url('../fonts/robotoslab-regular-webfont.eot');
    src: url('../fonts/robotoslab-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/robotoslab-regular-webfont.woff2') format('woff2'),
    url('../fonts/robotoslab-regular-webfont.woff') format('woff'),
    url('../fonts/robotoslab-regular-webfont.ttf') format('truetype'),
    url('../fonts/robotoslab-regular-webfont.svg#Roboto Slab') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'sourcecodepro-medium-webfont';
    src: url('../fonts/sourcecodepro-medium-webfont.eot');
    src: url('../fonts/sourcecodepro-medium-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/sourcecodepro-medium-webfont.woff2') format('woff2'),
    url('../fonts/sourcecodepro-medium-webfont.woff') format('woff'),
    url('../fonts/sourcecodepro-medium-webfont.ttf') format('truetype'),
    url('../fonts/sourcecodepro-medium-webfont.svg#sourcecodepro-medium-webfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

Author

Carlos Araya

ebook-font-declaration

@mixin ebook-font-declaration($font-family, $font-file-name, $weight: normal, $padding: style) { ... }

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$font-family`	Font-family name to use.	`String`	—none
`$font-file-name`	File name for the font we are loading	`String`	—none
`$weight`	Bold or normal	`String`	`normal`
`$padding`	Italic or normal	`String`	`style`

Author

Carlos Araya

fontSizeRem

@mixin fontSizeRem($size: 16px) { ... }

Description

Sets font size in rem with px fallback

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	Font size in pixels	`String`	`16px`

Example

Usage

body {
  @include fontSize(16px);
}

Result

body {
  font-size: 16px;
  font-size: 1rem;
}

fontSizeEm

@mixin fontSizeEm($size: 16) { ... }

Description

Sets font size in em with px fallback

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$size`	Font size in pixels	`Integer`	`16`

Example

Usage

body {
  @include fontSizeEm(48);
}

Result

body {
  font-size: 48px;
  font-size: 3em;
}

Requires

[function] calculateEm

See

[mixin] fontSizeRem

Author

Carlos Araya

utilities

mixins

phone-rendering

@mixin phone-rendering() { ... }

Description

Eliminates ligatures and kearnings in devices with width of less than 480 pixels and smaller form factors

Parameters

None.

Author

Carlos Araya

solid-thin

@mixin solid-thin() { ... }

Description

Creates a 1 pixel solid border

Parameters

None.

Author

Carlos Araya

cf

@mixin cf() { ... }

Description

Basic clearfix. Might change to a placeholder to be extended rather than a mixin to be included

Parameters

None.

Example

Usage

.article {
  font-size: 1em;
  @include cf();
}

Result

.article {
  font-size: 1em; }
.article:after {
  content: " ";
  display: block;
  clear: both;
}

Author

Carlos Araya

border-radius

@mixin border-radius($radius: 5px) { ... }

Description

Border radius mixin to keep your code DRY

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$radius`	how much radius	`String`	`5px`

Author

Carlos Araya

size

@mixin size($width: null, $height: $width) { ... }

Description

Clever way to provide width and height for an element

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$width`	How wide		`null`
`$height`	How hight. Defaults to the width		`$width`

Author

Carlos Araya

box-sizing

@mixin box-sizing() { ... }

Description

This mixin automates the use of 2x retina images for devices that can handle them.

We could also do this as an unprefixed version and just use Autoprefixer, I leave that up to you

Parameters

None.

Example

Usage

div.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
 }

Result

div.logo {
  background: url("logo.png") no-repeat;
}
@media
  (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6 / 2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {
    div.logo {
      /* on retina, use image that's scaled by 2 */
      background-image: url("logo2x.png");
      background-size: 100px 25px;
    }
  }

Author

Carlos Araya

placeholders

center-block

%center-block { ... }

Description

Centers a block element

Author

Carlos Araya

vfx

mixins

blendy

@mixin blendy($img, $color: null, $grad: null, $blend: multiply) { ... }

Description

Provides a basic css blend between an image and the background color

Parameters

parameterName	parameterDescription	parameterType	parameterDefault value
`$img`	image to blend.	`String`	—none
`$color`	color to blend with	`String`	`null`
`$grad`	gradient to use	`String`	`null`
`$blend`	what blending mode to use	`String`	`multiply`

Example

  .blend {
 @include blendy("http://sassbreak.com/assets/mountains.jpg", $grad: $cool-grad);
 width: 200px;
 height: 200px;
 border-radius: 50%;
 background-size: cover;
 margin: 1.5em auto;
}

Author

Carlos Araya

code

mixins

Description

Parameters

Example

Used by

Author

Description

Parameters

Example

Requires

Author

Description

Parameters

Example

Requires

Author

Description

Parameters

Example

Requires

Author

columns

mixins

Description

Parameters

Example

Links

Author

images

mixins

Description

Parameters

Example

Links

Author

maps

variables

Description

Author

Description

Author

Description

Author

mixins

Description

Parameters

Example

Requires

Author

Description

Parameters

Used by

Author

media queries

mixins

Description

Parameters

Content

Author

Description

Parameters

Content

Author

Description

Parameters

Content

Author

programming utilities

functions

Description

Parameters

Example

Links

Author

typography

functions

Description

Parameters

Example