Ifkit

if-animation

@include if-animation ($name, $duration, $count, $timing)

Makes animations. See above for an example.

if-keyframes

@include if-keyframes($name) { ... }

Defines keyframes for an animation. See above for an example.

if-primary-button
if-default-button

@include if-primary-button

@include if-default-button

<span class='button-1'>Take the tour</span>
<span class='button-2'>Cancel</span>

.button-1 {
  @include if-primary-button; }
.button-2 {
  @include if-default-button; }

Ifkit comes with a few default button styles.

You may override these styles by re-defining them. These are merely built with the other button mixins below.

if-button-color

@include if-button-color ($color, [ $strength, $border-strength, $hover-strength, $active-strength, $highlight-opacity ])

<span class='button-red'>Red button</span>
<span class='button-red-flat'>Flat button</span>

.button-red {
  @include if-button-color(#d33, 0.5, 1.1, 0.8, 0.8, 0.2); }
.button-red-flat {
  @include if-button-color(#d33, 1.0, 1.1, 0.9, 0.8, 0.2); }

You may specify additional parameters. All parameters except $color are optional.

$color

The base color.

$strength

Multiplier for the gradient color. 1.0 makes the button flat, 0 makes the button dark.

$border-strength

Multiplier for the border color. 1.0 makes the border have the same color as the button, < 1 makes it darker, > 1 makes it lighter. none removes the border.

$hover-strength

Multiplier for the hover color.

$active-strength

Multiplier for the color for the active state (depressed) of the button.

$highlight-opacity

Opacity for the highlight. 0.0 makes it invisible, 1.0 makes it completely white.

if-button-height
if-button-radius
if-button-shadow

@include if-button-height ($height, [ $padding ])

@include if-button-radius ($left, [ $right ])

@include if-button-shadow ($shadow)

<span class='button-pill'>Pill button</span>

.button-pill {
  @include if-button-color(#eee, 0.9);
  @include if-button-height(32px, 0 20px);
  @include if-button-radius(16px);
  color: #333;
  font-weight: bold;
  font-size: 11pt;
  text-shadow: 1px 1px 0 rgba(white, 0.5); }

Mixins to enhance if-button-color.

It is encouraged for you to make your own mixins using if-button-color and these, just like the example below.

if-textbox

@include if-textbox

<input class='textbox' type='text' value='Normal text box' />
and
<input class='textbox' disabled='disabled' type='text' value='Disabled text box' />

#{$if-textboxes} {
  &.textbox {
    @include if-textbox; } }

Textbox. Includes styles for disabled, hover, focus, et al. Works great for <input> and <textarea> alike.

if-select

@include if-select ([ $height, $bg, $text-color ])

<select class='my-select'>
  <option>Choose your weapon...</option>
</select>
and
<select class='my-select' disabled='disabled'>
  <option>Disabled</option>
</select>

.my-select {
  @include if-select; }

if-form-layout

@include if-form-layout ([ $label-width, $field-height, $vertical-margin, $horiz-margin, $radio-height, $field, $control-group, $control ])

<form class='my-form'>
  <!-- Basic fields are simply label+input pairs. -->
  <div class='field'>
    <label>Username:</label>
    <input type='text' />
  </div>
  <!-- For most cases, you will want to wrap -->
  <!-- the controls inside `.controls`. -->
  <div class='field'>
    <label>Email:</label>
    <div class='controls'>
      <input type='text' />
      <span class='help'>We will never sell your email address.</span>
    </div>
  </div>
  <!-- Radio button fields have class='radio' -->
  <!-- to reduce the line height. -->
  <div class='field'>
    <label>Gender:</label>
    <div class='controls'>
      <div class='control'>
        <input type='radio' />
        <label>Male</label>
      </div>
      <div class='control'>
        <input type='radio' />
        <label>Female</label>
      </div>
    </div>
  </div>
  <!-- Horizontal layouts have class='horizontal'. -->
  <div class='field'>
    <label>Full name:</label>
    <div class='controls horizontal'>
      <div class='control'>
        <input type='text' />
        <label>First name</label>
      </div>
      <div class='control'>
        <input type='text' />
        <label>Last name</label>
      </div>
    </div>
  </div>
</form>

form.my-form {
  @include if-form-layout($field: '.field');

  fieldset {
    border: 0; }

  #{$if-textboxes}, textarea {
    @include if-textbox; } }

Gives fields in a side-by-side layout. Does not give any visual style to any of the elements, it simply gives them layout. This is often used on fieldset or form. You may specify some selectors:

$field

The field selector. Defaults to .field.

$control-group

Selector for a group of controls to group many controls in a field, say, radio buttons. Defaults to .controls.

$control

Selector for a control+label pair's parent for multi-textbox fields (See "Full name" in the example). Defaults to .control.

Common settings:

• You can use nested fieldsets using fieldset for $field.
• You can use >* for $field as well.

You can add .horizontal (see "Full name" in the example) to the field control group to lay out its controls horizontally.

You can also add .radio or .checkbox to .field for a reduced line-height (see "Gender:").

All parameters are optional.

if-form-widths

@include if-form-widths

<form class='my-form-2'>
  <div class='field'>
    <label>Address:</label>
    <div class='controls horizontal'>
      <div class='control p20'>
        <input type='text' />
        <label>Number</label>
      </div>
      <div class='control p40'>
        <input type='text' />
        <label>Building</label>
      </div>
      <div class='control p40'>
        <input type='text' />
        <label>Complex</label>
      </div>
      <div class='control p50'>
        <input type='text' />
        <label>Street 1</label>
      </div>
      <div class='control p50'>
        <input type='text' />
        <label>Street 2</label>
      </div>
    </div>
  </div>
  <div class='field'>
    <label>Full name:</label>
    <input class='p100' type='text' />
  </div>
  <div class='field'>
    <label>Full name:</label>
    <input class='p100' type='text' />
  </div>
</form>

form.my-form-2 {
  @include if-form-layout;
  @include if-form-widths;

  #{$if-textboxes} {
    @include if-textbox; } }

Adds widths classes to controls. This lets you add .p20 classes to each individual control, where 20 is the width in percent.

Use this in conjunction with if-form-layout, like in the example.

if-form-normalize

@include if-form-normalize

A supplement to CSS resets to ensure consistency of form elements as well. Simply add @include if-form-normalize; to ensure consistency between browsers.

if-form-reset

@include if-form-reset

A supplement to CSS resets to ensure consistency of form elements, as well as reset the appearances of buttons and other elements.

Implies if-form-normalize.

if-phone-portrait
if-phone
if-tablet
if-mobile
if-desktop

@include if-phone-portrait

@include if-phone

@include if-tablet

@include if-mobile

@include if-desktop

Mixins for presets of width ranges. Phone-portrait is < 320px, Phone is <480px, Tablet is 768px to 1024px.

Mobile is 1024px which accounts for typical maximized desktop screens.

Examples:

body {
  @include if-mobile {
    #top, #footer { display: none; } }
  @include if-phone {
    #menu { height: 20px; }
}

if-screen-width

@include if-screen-width ($min, $max)

Screen widths. You may specify min and max as either a px number, or none.

@include if-screen-width(480px, none) { ... }    /* 480px and up */
@include if-screen-width($max: 1024px) { ... }   /* 1024px and below */
@include if-screen-width(none, 1024px) { ... }   /* 1024px and below */

if-retina

@include if-retina

Checks for retina support.

if-portait
if-landscape

@include if-portait

@include if-landscape

Mixins for portait or landscape mode for mobile devices.

if-mobile-reset

@include if-mobile-reset

Disables common tap stuff for iOS webapps such as tap outlines, image save panel, and so on.

# Use it at the top level
@include if-mobile-reset;

References: - http://wiki.phonegap.com/w/page/16494795/iPhone%3A%20Prevent%20callout,%20link%20selection,%20text%20auto-resize - http://www.bitsandpix.com/entry/ios-webkit-uiwebview-remove-tapclick-highlightborder-with-css/

if-content

@include if-content ([ $vertical-margin, $indent, $collapse ])

<div class='content-area'>
  <h2>Hello</h2>
  <p>Dolorem sapiente animi et at. Quaerat quia ipsam ut ipsum non. Vel dolores voluptas similique.</p>
  <p>Aut ipsum vel fugiat id laborum adipisci ullam et. Recusandae nihil qui quod eum laboriosam. Laboriosam officia sunt sit architecto.</p>
  <ul>
    <li>Lorem</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
  </ul>
</div>

.content-area {
  @include if-content; }

Normalizes typography for content areas.

You may specify additional parameters.

$vertical-margin

Margin in between things. Defaults to 20px.

$indent

Indentation for lists, blockquotes and such. Defaults to 25px.

$collapse

If true, ensures that the top/bottom blocks don't have margins. Defaults to true.

if-vertical-margins

@include if-vertical-margins ($vertical-margin)

Adjusts vertical margins between blocks.

<div class='content-area'>
  <h2>Hello</h2>
  <p>Dolorem sapiente animi et at. Quaerat quia ipsam ut ipsum non. Vel dolores voluptas similique.</p>
  <p>Aut ipsum vel fugiat id laborum adipisci ullam et. Recusandae nihil qui quod eum laboriosam. Laboriosam officia sunt sit architecto.</p>
</div>

.contents {
  @include if-vertical-margins(20px); }

if-no-boundary-margins

@include if-no-boundary-margins

Removes top/bottom margins from a content block. Use with if-content.

if-horizontal-dl

@include if-horizontal-dl

Horizontal definition lists.

if-simple-notch

@include if-simple-notch ($color, $size, $direction)

Simple notch.

Unlike if-notch, this one only supports color. It can't do shadows or backgrounds. However, the markup it uses is much simpler, there is no need for an extra element, and it's possible to use it on a :before or :after pseudo-element.

@include if-simple-notch(left, #fff, 10px)

if-notch

@include if-notch ([ $direction: top, $color, $size, $border, $shadow ])

<span class='inotch top'></span>
<span class='inotch left'></span>
<span class='inotch bottom'></span>
<span class='inotch right'></span>

.inotch.top {
  @include if-notch(top, #888); }
.inotch.left {
  @include if-notch(left, #888); }
.inotch.bottom {
  @include if-notch(bottom, #888); }
.inotch.right {
  @include if-notch(right, #888); }

.inotch {
  margin: 3px;
  float: left;
  outline: dotted 1px red; }

Makes a free, notch triangle shape that has display: block.

if-box-notch
if-box-notch

@include if-box-notch ([ $direction, $align ])

@include if-box-notch ([ $direction, $align, ... ])

<div class='notched'>
  <div class='notch'></div>
  Hello.
</div>

.notched {
  width: 200px;
  height: 50px;
  background: #888;
  color: #ddd;
  padding: 10px;
  position: relative;
  .notch {
    @include if-box-notch(top, left, $color: #888) } }

Gives a box a notch. Give it to the notch sub-element of the box.

Note: ensure that the parent box has a position property, even if it's just position: relative.

if-absolute
if-relative
if-fixed

@include if-absolute ($top, $right, $bottom, $left)

@include if-relative ($top, $right, $bottom, $left)

@include if-fixed ($top, $right, $bottom, $left)

Macros for absolute, relative, and fixed positioning.

.toolbar {
  @include if-absolute(0, auto, 50px, 50px); }

.icon {
  @include if-relative($top: 0, $left: 50px); }

if-retina-sprite

@include if-retina-sprite ($name, $sprites, $sprites2x,)

Helper for Retina sprites.

Put your icon sprites in 2 folders: one for 1x assets, and another for 2x assets. Make sure that the filenames are the same (eg, icon/mail.png corresponds to icon2x/mail.png.)

Define 2 sprite maps using the Compass sprite-map helper for these two paths.

It's recommended to make a mixin for defining your icons.

$icon: sprite-map("icon/*.png");
$icon2x: sprite-map("icon2x/*.png");

 @mixin icon($name) {
   @include if-retina-sprite($name, $icon, $icon2x); }

 /* Use it like so: */
 button.mail {
   @include icon(mail); }

You can also define a padding by passing a 4th parameter. Be sure that your sprite maps have enough spacing to allow for this. This is great for expanding the hit area for iPhone assets.

/* Note that spacing in the 2x is twice the spacing of the 1x. */
$icon: sprite-map("icon/*.png", $spacing: 20px);
$icon2x: sprite-map("icon2x/*.png", $spacing: 40px);

 @mixin icon($name, $pad: 0) {
   @include if-retina-sprite($name, $icon, $icon2x, $pad); }

 /* This gives you a padding of 10px. */
 button.mail {
   @include icon(mail, 10px); }

if-gradient

@include if-gradient ($top, $bottom)

Works like linear-gradient, but assumes that it's always vertical and has a background-color fallback.

if-clearfix

@include if-clearfix

Cross-browser PIE clear fix.

if-non-list

@include if-non-list ([ $ul: block, $li: inline ])

Resets a <ul>s styles. If either $ul or $li are given, their respective elements will get that as a display property.

if-horiz-list

@include if-horiz-list

<ul class='non-list'>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

ul.non-list {
  @include if-non-list;

  & {
    background: #555;
    color: #fff;
    padding: 5px; }

  >li {
    padding: 0 10px; } }

Resets a <ul>s styles to make it's <li>s lay out horizontally. Perfect for horizontal menus.

if-center-list

@include if-center-list

<div class='centered-list'>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

div.centered-list {
  background: #555;
  color: #fff;
  padding: 5px;
  overflow: hidden;

  ul {
    @include if-center-list; }

  ul>li {
    padding: 0 10px; } }

Works like if-horiz-list, but centers the list items. Perfect for horizontal menus that are centered. Be sure to overflow: hidden the container!

if-ellipsis

@include if-ellipsis

Truncates text using ellipses. Only works in Webkit and Opera.