Prototyping Utilities

Quickly prototype layouts and UI with Foundation's Prototyping Utilities. These optional classes and mixins are great for quickly turning sketches and mockups into coded prototypes.

Prototype to Production

Prototyping allows us to see problems more clearly—and often earlier—in the development process. Designs in sketches or wireframes only get us so far in understanding the behavior, feasibility, and cost (time or resources) of implementation. Prototyping processes foster collaboration where designers and developers work closely together find better solutions.

Sometimes prototype code is meant to be thrown away, and that's ok. While in early stage development it's extremely valuable to get ideas and interactions up and shared with stakeholders for scrutiny. This is how ideas get fleshed out and improved. It's not code we're delivering, it's a solution to a problem. Get the idea out, get feedback, iterate, repeat. Then when all parties are satisfied the right approach is being taken, go back to clean it up and refactor.

Foundation's Prototyping Utilities help you build coded prototypes from scratch ultra-fast. This allows you to get to right answer faster through feedback and experimentation. From positioning to visual styles, there are a range of utilities to choose from. Every Utility has a mixin, so you can use your own custom classes or swap classes for mixins in production for cleaner markup.

Prototype mode is disabled by default!

Not all projects require Prototyping Utilities and adding utility classes like these increase your CSS file size especially if you're not using all of them. For these reasons Prototype mode is disabled by default.

Many Prototype classes use `!important` to ensure that these they aren't overridden by more specific selectors. This framework conscientiously avoids using `!important` declarations. Please note that we have only inserted `!important` on those specific **CSS** properties which in no case should be overridden.


Enabling Prototype Mode

Prototyping classes like these below should only be used for prototyping tasks. Also if you are using **Sass**, we encourage you to use **[Prototyping Mixins](#sass-mixins)** instead.

Using the Sass version of Foundation, you can enable prototype mode in two ways:

If you use the foundation-everything() mixin in your main Sass file, just pass in $prototype: true to enable the prototype mode.

@include foundation-everything($prototype: true);

If you included each component manually (like our starter projects do), open up your app.scss file and simply comment in:

// @include foundation-prototype-classes;

So it will look like:

@include foundation-prototype-classes;

You can instead import only the specific utility classes that you need. To make it easy, the full list is included below:

@include foundation-prototype-typescale;
@include foundation-prototype-text-utilities;
@include foundation-prototype-text-transformation;
@include foundation-prototype-text-decoration;
@include foundation-prototype-font-styling;
@include foundation-prototype-list-style-type;
@include foundation-prototype-rounded;
@include foundation-prototype-bordered;
@include foundation-prototype-shadow;
@include foundation-prototype-arrow;
@include foundation-prototype-separator;
@include foundation-prototype-overflow;
@include foundation-prototype-display;
@include foundation-prototype-position;
@include foundation-prototype-border-box;
@include foundation-prototype-border-none;
@include foundation-prototype-sizing;
@include foundation-prototype-spacing;

Looking for more customization? Click here for the Sass Reference


Responsive breakpoints

Responsive breakpoints is disabled by default.

These prototype classes also have an optional mobile first responsive classes so that setting a class will apply to the small breakpoint and large unless overridden by a class for a larger breakpoint.
You can easily enable these classes by setting $global-prototype-breakpoints to true.

<p class="medium-text-uppercase">This text will be uppercase for medium and up.</p>
<p class="large-text-lowercase">This text will be lowercase for large breakpoint.</p>

You can also customise things by choosing to add responsive breakpoints only for specific prototype helpers that you would need as responsive classes.
For example, text transformation classes have a breakpoint variable $prototype-transformation-breakpoints which is set to $global-prototype-breakpoints which is set to false by default. For enabling responsive breakpoints for text transformation classes, simply set:

$prototype-transformation-breakpoints: true;

Component Styling

These .radius, .rounded, .bordered & .shadow classes can be used independently or together to style the component by rounding its corners, giving light borders, and creating shadow to it respectively. Mostly used in buttons, cards, tables, images and many more.

**Sass Tip**: You can use [Shadow](#shadow) mixin to create something like `shadow-hover-focus`. [Codepen example](https://codepen.io/IamManchanda/pen/XMRMwo)

Watch this part in video

Buttons

<button type="button" class="button radius bordered shadow primary">Primary</button>
<button type="button" class="button rounded bordered shadow secondary">Secondary</button>
<button type="button" class="button radius bordered shadow success">Success</button>
<button type="button" class="button rounded bordered shadow alert">Alert</button>
<button type="button" class="button radius bordered shadow warning">Warning</button>

Switches

Add the .rounded class to .switch to make it rounded.

<div class="switch rounded">
  <input class="switch-input" id="exampleSwitch" type="checkbox" name="exampleSwitch">
  <label class="switch-paddle" for="exampleSwitch">
    <span class="show-for-sr">Download Kittens</span>
  </label>
</div>

Cards

<div class="radius bordered shadow card">
  <img src="https://placehold.it/500x250">
  <div class="card-divider">
    Styled Card
  </div>
  <div class="card-section">
    <h4>This is a card.</h4>
    <p>It has an easy to override visual style, and is appropriately subdued.</p>
  </div>
</div>
Styled Card

This is a card.

It has an easy to override visual style, and is appropriately subdued.

Styled Card

This is a card.

It has an easy to override visual style, and is appropriately subdued.

Styled Card

This is a card.

It has an easy to override visual style, and is appropriately subdued.

Tables

<table class="radius bordered shadow">
    <!-- My Table goes here -->
</table>
Table Header Table Header Table Header Table Header
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here
Content Goes Here This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here

Images

<img src="https://placehold.it/150x150" class="radius">

Arrow Utility

Mostly used as dropdown arrows for navigation.

<div class="arrow-down"></div>
<div class="arrow-up"></div>
<div class="arrow-right"></div>
<div class="arrow-left"></div>

Separator

This creates a tiny separator below the heading of an element and is usually used within the heading of a section.

You don't need to use [Text alignment classes](typography-helpers.html#text-alignment) as this separator utility deals with the alignment of the text itself.
<h3 class="separator-left">Lorem</h3>
<h3 class="separator-center">Ipsum Dolor</h3>
<h3 class="separator-right">Tempor</h3>

Lorem

Ipsum Dolor

Tempor


Font Styling

You can use font styling to style your text. You can change the font styling by adding font-normal, font-bold, font-italic to an element. You can also larger the text of an element with font-wide.

<p class="font-wide">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="font-normal">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="font-bold">Perspiciatis tempore cumque, magni aspernatur, quidem. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</p>
<p class="font-italic">Lorem minus, placeat, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.iure voluptas aliquam tempora neque?</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Perspiciatis tempore cumque, magni aspernatur, quidem. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

Lorem minus, placeat, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.iure voluptas aliquam tempora neque?


List Styling

Please note that [Unbulleted lists](typography-helpers.html#un-bulleted-list), `.no-bullet` is enabled by default for both ordered and unordered lists.

Unordered Lists

<ul class="no-bullet"></ul>
<ul class="list-disc"></ul>
<ul class="list-circle"></ul>
<ul class="list-square"></ul>

Ordered Lists

<ol class="no-bullet"></ol>
<ol class="list-decimal"></ol>
<ol class="list-lower-alpha"></ol>
<ol class="list-lower-latin"></ol>
<ol class="list-lower-roman"></ol>
<ol class="list-upper-alpha"></ol>
<ol class="list-upper-latin"></ol>
<ol class="list-upper-roman"></ol>

Text Helpers

Image Replacement (Text Hide)

You can include an image with visually hidden helper text for the sake of accessibility and improving SEO. The .text-hide class will visually hide an element’s text within the context of an image.

<a href="#" class="text-hide">
  <img src="https://placehold.it/100x30" alt="zurb logo">
  Zurb <!-- Logo Text  -->
</a>
zurb logo Zurb

Text Transformation

Text transformation lets you control the capitalization of text. You can change the text transformation by adding .text-uppercase, text-lowercase, text-capitalize to an element.

<p class="text-uppercase"><!-- Text here --></p>
<p class="text-lowercase"><!-- Text here --></p>
<p class="text-capitalize"><!-- Text here --></p>

This is a upper-cased text. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

This is a lower-cased text. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

This is a caPitAlized teXt. Set in the yEar 0 F.E. ("Foundation Era"), The PsychohisTorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

Note: `.text-capitalize` changes the first letter of every single word, leaving the case of other letters unaffected.

Text Decoration

Text Decoration can be used to underline, overline, or line-through a text. You can change the text decoration by adding .text-underline, .text-overline, or .text-line-through to an element.

<p class="text-underline">Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p class="text-overline">Perspiciatis tempore cumque, magni aspernatur, quidem</p>
<p class="text-line-through">Lorem minus, placeat, iure voluptas aliquam tempora neque?</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Perspiciatis tempore cumque, magni aspernatur, quidem

Lorem minus, placeat, iure voluptas aliquam tempora neque?


Text Truncate

The .text-truncate class will truncate your text and display an elipsis. This class works for a single line of text.

<p class="text-truncate">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!


Text No-wrap

If you would like to prevent the text wrapping into the next line you can utilize .text-nowrap. Please note that the text will continue to be in same line unless the <br> tag is used.

<p class="text-nowrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>

Text Wrap

To force text to wrap to the next line, you can use .text-wrap.

<p class="text-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!</p>

Margin Helpers

Generate spacing around elements with these easy to use margin classes.

Please note that here below, `1 = 1 * $global-margin` and so on. By default `$global-margin` is equal to `1rem` which you can easily customize through [Sass Variables](#sass-variables).

Watch this part in video

Margin (All Sides)

<div class="margin-0"></div>
<div class="margin-1"></div>
<div class="margin-2"></div>
<div class="margin-3"></div>

Margin Top

<div class="margin-top-0"></div>
<div class="margin-top-1"></div>
<div class="margin-top-2"></div>
<div class="margin-top-3"></div>

Margin Bottom

<div class="margin-bottom-0"></div>
<div class="margin-bottom-1"></div>
<div class="margin-bottom-2"></div>
<div class="margin-bottom-3"></div>

Margin Left

<div class="margin-left-0"></div>
<div class="margin-left-1"></div>
<div class="margin-left-2"></div>
<div class="margin-left-3"></div>

Margin Right

<div class="margin-right-0"></div>
<div class="margin-right-1"></div>
<div class="margin-right-2"></div>
<div class="margin-right-3"></div>

Margin Left Right (Horizontal Axis)

<div class="margin-horizontal-0"></div>
<div class="margin-horizontal-1"></div>
<div class="margin-horizontal-2"></div>
<div class="margin-horizontal-3"></div>

Margin Top Bottom (Vertical Axis)

<div class="margin-vertical-0"></div>
<div class="margin-vertical-1"></div>
<div class="margin-vertical-2"></div>
<div class="margin-vertical-3"></div>

Margin: Usage as a Mixin

.foo {
  @include margin(1, 0, 2, null);
}

This above code will generate the below output

.foo {
  margin-top: 1rem !important;
  margin-right: 0 !important;
  margin-bottom: 2rem !important;
}

Note: The margin-left property wasn't printed as this mixin also accept null as a value to reduce CSS output. See Sass Reference here


Padding Helpers

Generate spaces around the content with these easy to use padding classes.

Please note that here below, `1 = 1 * $global-padding` and so on. By default `$global-padding` is equal to `1rem` which you can easily customize through [Sass Variables](#sass-variables).

Padding (All Sides)

<div class="padding-0"></div>
<div class="padding-1"></div>
<div class="padding-2"></div>
<div class="padding-3"></div>

Padding Top

<div class="padding-top-0"></div>
<div class="padding-top-1"></div>
<div class="padding-top-2"></div>
<div class="padding-top-3"></div>

Padding Bottom

<div class="padding-bottom-0"></div>
<div class="padding-bottom-1"></div>
<div class="padding-bottom-2"></div>
<div class="padding-bottom-3"></div>

Padding Left

<div class="padding-left-0"></div>
<div class="padding-left-1"></div>
<div class="padding-left-2"></div>
<div class="padding-left-3"></div>

Padding Right

<div class="padding-right-0"></div>
<div class="padding-right-1"></div>
<div class="padding-right-2"></div>
<div class="padding-right-3"></div>

Padding Left Right (Horizontal Axis)

<div class="padding-horizontal-0"></div>
<div class="padding-horizontal-1"></div>
<div class="padding-horizontal-2"></div>
<div class="padding-horizontal-3"></div>

Padding Top Bottom (Vertical Axis)

<div class="padding-vertical-0"></div>
<div class="padding-vertical-1"></div>
<div class="padding-vertical-2"></div>
<div class="padding-vertical-3"></div>

Padding: Usage as a Mixin

.bar {
  @include padding(1, 0, 2, null);
}

This above code will generate the below output

.bar {
  padding-top: 1rem !important;
  padding-right: 0 !important;
  padding-bottom: 2rem !important;
}

Note: The padding-left property wasn't printed as this mixin also accept null as a value to reduce CSS output. See Sass Reference here


Sizing

These width and height classes help you to easily make an element as wide or as tall as needed relative to its parent. By default it supports 25%, 50%, 75% and 100%. You can add more sizes though, through Sass map variable.

Width

<div class="width-25"></div>
<div class="width-50"></div>
<div class="width-75"></div>
<div class="width-100"></div>

<div class="max-width-100"></div>

Height

<div class="height-25"></div>
<div class="height-50"></div>
<div class="height-75"></div>
<div class="height-100"></div>

<div class="max-height-100"></div>

Border box

Border box lets you only add the content, padding and border, but not the margin within the width and height CSS properties.

<div class="border-box"></div>

Border none

Border none lets you quickly resets border to none for any element.

<div class="callout primary border-none">
  Hi! I am a callout with no Borders
</div>
Hi! I am a callout with no Borders

Display Classes

Display classes allow you to change the display property of any element.

<div class="display-inline"></div>
<div class="display-inline-block"></div>
<div class="display-block"></div>
<div class="display-table"></div>
<div class="display-table-cell"></div>

These cover some of the most used display types. There are many other display values as specified by MDN here. If you need some of those classes, then you can add them easily through Sass variables with $prototype-display. Sass Reference here

  • For `display: flex` use `.flex-container`. See [Flexbox Reference](flexbox.html)
  • For `display: none` use `.hide`. or Foundation's [Visibility Classes](visibility.html)

Positioning

Positioning classes help you change an element's position value. By default, an element's postion value is static.

<div class="position-relative"></div>
<div class="position-absolute"></div>
<div class="position-fixed"></div>
<div class="position-fixed-top"></div>
<div class="position-fixed-bottom"></div>
<div class="position-static"></div>

Positioning: Usage as a Mixin

The position mixin can be used to set a position and to set the top right bottom and/or left property all in one.

.foo {
  @include position(fixed, 1, 2, 0, null);
}

This above code will generate the below output

.foo {
  position: fixed !important;
  top: 1rem !important;
  right: 2rem !important;
  bottom: 0 !important;
}

See how the left offset wasn't printed as this mixin also accepts null as a value. Sass Reference here


Overflow

These overflow classes helps you to clip content, render scrollbars or simply just display the content when it overflows its block level container.

All sides

<div class="overflow-visible"></div>
<div class="overflow-hidden"></div>
<div class="overflow-scroll"></div>

Horizontal Axis

<div class="overflow-x-visible"></div>
<div class="overflow-x-hidden"></div>
<div class="overflow-x-scroll"></div>

Vertical Axis

<div class="overflow-y-visible"></div>
<div class="overflow-y-hidden"></div>
<div class="overflow-y-scroll"></div>

Note: Combining overflow: hidden in either the X or Y direction with the overflow: visible in the opposite direction does not work as expected in CSS spec. More info


Sass Mixin Helpers

We also provides some extra utility mixins that you can use for your next prototype project.

Box Mixin

This mixin helps you to easily create a square, rectangle or a circle. Sass Reference here

.foo {
    @include box(1rem, 2rem); // Rectangle
}

.bar {
    @include box(1rem); // Square
}

.baz {
    @include box(1rem, $circle: true); // Circle
}

Rotate Mixin

These Rotate mixins lets you rotate an element to a certain degree. Clockwise is the default direction but adding a - in front of the degrees will make it counter-clockwise.

.foo {
    @include rotate(30); // 30 Degree
}

.bar {
    @include rotateX(60); // 60 Degree on X axis
}

.baz {
    @include rotateY(90); // 90 Degree on Y axis
}

.shaz {
    @include rotateZ(120); // 120 Degree on Z axis
}

Relational Mixins (AKA: nth:child mixins)

These relational mixins helps you to manage styling of :nth-child’ified elements through easy Sass mixins.

@include first($num) {} // applies style to first n children
@include first-child {} // applies style to first child only
@include last($num) {}  // applies style to last n children
@include last-child {}  // applies style to first child only
@include every($num) {} // applies style to every n children
@include first-last {}  // applies style to first and last child only
@include after-first($num) {} // applies style to all after nth child
@include from-last($num) {} // applies style to all after and including nth child
@include from-first-last($num) {} // applies style to nth child from first child and last child
@include all-but($num) {} // applies style to all except nth child
@include all-but-first-last($num) {} // applies style all except first and last child
@include unique {} // applies style to a child who has no siblings
@include not-unique {} // applies style to all children except a child who has no siblings
@include between($first, $last) {} // applies style to all except first and last child
@include even {} // applies style to all even children
@include even-between($first, $last) {} // applies style to all even children except first and last
@include odd {} // applies style to all odd children
@include odd-between($first, $last) {} // applies style to all odd children except first and last
@include number-between($num, $first, $last) {} // applies style to every n children from first child and last child

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$prototype-arrow-directions Map down
up
right
left

Map containing all the arrow direction

$prototype-arrow-size Number 0.4375rem

Width of the Arrow, 0.4375rem by default.

$prototype-arrow-color Color $black

Color of the Arrow, $black by default.

$prototype-border-box-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for border box.

$prototype-border-none-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for border none.

$prototype-bordered-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for bordered utility.

$prototype-border-width Number rem-calc(1)

Default value for prototype-border-width

$prototype-border-type String solid

Default value for prototype-border-type

$prototype-border-color Color $medium-gray

Default value for prototype-border-color defaulted to medium-gray

$prototype-display-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for display classes

$prototype-display Map inline
inline-block
block
table
table-cell

Map containing all the display classes

$prototype-font-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for font styling types

$prototype-wide-letter-spacing Number rem-calc(4)

Letter spacing for .font-wide

$prototype-font-normal Number $global-weight-normal

Default weight for .font-normal, defaulted to global-weight-normal

$prototype-font-bold Number $global-weight-bold

Default weight for .font-bold, defaulted to global-weight-bold

$prototype-list-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for list styling types

$prototype-style-type-unordered Map disc
circle
square

Map containing all the style-type-unordered classes

$prototype-style-type-ordered Map decimal
lower-alpha
lower-latin
lower-roman
upper-alpha
upper-latin
upper-roman

Map containing all the style-type-ordered classes

$prototype-overflow-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for overflow helper classes

$prototype-overflow Map visible
hidden
scroll

Map containing all the overflow classes

$prototype-position-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for position helpers

$prototype-position Map static
relative
absolute
fixed

Map containing all the position classes

$prototype-position-z-index Number 975

z-index for fixed positioning

$prototype-rounded-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for rounded utility.

$prototype-border-radius Number rem-calc(3)

Default value for prototype-border-radius

$prototype-separator-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for separator.

$prototype-separator-align String center

Default alignment of a separator.

$prototype-separator-height Number rem-calc(2)

Height of a separator.

$prototype-separator-width Number 3rem

Width of a separator.

$prototype-separator-background Color $primary-color

Default color of a separator.

$prototype-separator-margin-top Number $global-margin

Top Margin of a separator.

$prototype-shadow-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for shadow utility.

$prototype-box-shadow Number 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12)

Default value for prototype-box-shadow

$prototype-sizing-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for spacing classes (margin and padding)

$prototype-sizing Map width
height

Map containing all the sizing classes

$prototype-sizes Map 25: 25%
50: 50%
75: 75%
100: 100%

Map containing all the sizes.

$prototype-spacing-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for spacing classes (margin and padding)

$prototype-spacers-count Number 3

Default number of spacers count (margin and padding)

$prototype-decoration-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for text decoration classes

$prototype-text-decoration Map overline
underline
line-through

Map containing all the text-decoration classes

$prototype-transformation-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for text transformation classes

$prototype-text-transformation Map lowercase
uppercase
capitalize

Map containing all the text-transformation classes

$prototype-utilities-breakpoints Boolean $global-prototype-breakpoints

Responsive breakpoints for text utilities

$prototype-text-overflow String ellipsis

Default Value for text-overflow variable


Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

border-box

@include border-box;

Border box utility


border-none

@include border-none;

Border none utility


bordered

@include bordered($width, $type, $color);

Bordered Utility: Adds a light border to an element by default.

ParameterTypeDefault ValueDescription
$width Number $prototype-border-width

Width of the border

$type String $prototype-border-type

Type of the border

$color Color $prototype-border-color

Color of the border


box

@include box($width, $height, $circle);

Box Mixin: Easily create a square, rectangle or a circle

ParameterTypeDefault ValueDescription
$width Number None

Width of the box

$height Number $width

Height of the box, defaults to $width to easily make a square

$circle Boolean false

Makes the box a circle, by default false.


display

@include display($display);

Display classes, by default coming through a map $prototype-display

ParameterTypeDefault ValueDescription
$display String None

Display classes


font-wide

@include font-wide($letter-spacing);

Font wide letter spacing!

ParameterTypeDefault ValueDescription
$letter-spacing Number $prototype-wide-letter-spacing

Wide letter spacing for the font


font-normal

@include font-normal($weight);

Font Weight Normal, default value coming through global-weight-normal

ParameterTypeDefault ValueDescription
$weight Number $prototype-font-normal

Weight of the font (normal)


font-bold

@include font-bold($weight);

Font Weight Bold, default value coming through global-weight-bold

ParameterTypeDefault ValueDescription
$weight Number $prototype-font-bold

Weight of the font (bold)


font-italic

@include font-italic;

Font Style Italic


style-type-unordered

@include style-type-unordered($style-type-unordered);

Style type for unordered Lists, by default coming through a map $prototype-style-type-unordered

ParameterTypeDefault ValueDescription
$style-type-unordered String None

Style type for unordered Lists


style-type-ordered

@include style-type-ordered($style-type-ordered);

Style type for ordered Lists, by default coming through a map $prototype-style-type-ordered

ParameterTypeDefault ValueDescription
$style-type-ordered String None

Style type for ordered Lists


overflow

@include overflow($overflow);

Overflow classes, by default coming through a map $prototype-overflow

ParameterTypeDefault ValueDescription
$overflow String None

Overflow classes


overflow-x

@include overflow-x($overflow);

Overflow classes on horizontal axis, by default coming through a map $prototype-overflow

ParameterTypeDefault ValueDescription
$overflow String None

Overflow classes (horizontal axis)


overflow-y

@include overflow-y($overflow);

Overflow classes on vertical axis, by default coming through a map $prototype-overflow

ParameterTypeDefault ValueDescription
$overflow String None

Overflow classes (vertical axis)


position

@include position($position, $top, $right, $bottom, $left);

Position classes, by default coming through a map $prototype-position, whereas all the offset values are multiplied by $global-position which by default is equal to 1rem.

ParameterTypeDefault ValueDescription
$position String None

Position classes, Either static, relative, absolute or fixed

$top Number null

Top offset

$right Number null

Right offset

$bottom Number null

Bottom offset

$left Number null

Left offset


position-fixed-top

@include position-fixed-top($z-index);

Position Fixed on top corners

ParameterTypeDefault ValueDescription
$z-index Number $prototype-position-z-index

z-index for position-fixed-top


position-fixed-bottom

@include position-fixed-bottom($z-index);

Position Fixed on bottom corners

ParameterTypeDefault ValueDescription
$z-index Number $prototype-position-z-index

z-index for position-fixed-bottom


rotate

@include rotate($deg);

Rotate Mixin: Rotate an element to a certain deg

ParameterTypeDefault ValueDescription
$deg Number None

Degree of rotation


rotateX

@include rotateX($deg);

RotateX Mixin: Rotate an element to a certain deg on X-Axis

ParameterTypeDefault ValueDescription
$deg Number None

Degree of rotation


rotateY

@include rotateY($deg);

RotateY Mixin: Rotate an element to a certain deg on Y-Axis

ParameterTypeDefault ValueDescription
$deg Number None

Degree of rotation


rotateZ

@include rotateZ($deg);

RotateZ Mixin: Rotate an element to a certain deg on Z-Axis

ParameterTypeDefault ValueDescription
$deg Number None

Degree of rotation


border-radius

@include border-radius($radius);

Rounded utility (all corners): Adds radius corners (all corners) to an element by default.

ParameterTypeDefault ValueDescription
$radius Number $prototype-border-radius

Border radius (all corners)


border-rounded

@include border-rounded;

Rounded square utility or rectangle utility (all corners): Rounds all corners to an element by default to make a pill shape.


separator

@include separator($align, $height, $width, $background, $top);

Title separator Utility, mostly used to style the main heading of a section

ParameterTypeDefault ValueDescription
$align String $prototype-separator-align

separator Alignment

$height Number $prototype-separator-height

Width

$width Number $prototype-separator-width

Height

$background Color $prototype-separator-background

Background

$top Number $prototype-separator-margin-top

Margin Top


shadow

@include shadow($shadow);

Shadow Utility: Adds a light box shadow to an element by default.

ParameterTypeDefault ValueDescription
$shadow Number $prototype-box-shadow

Box Shadow of a component


max-width-100

@include max-width-100;

Max Width 100 utility.


max-height-100

@include max-height-100;

Max Height 100 utility.


margin

@include margin($top, $right, $bottom, $left);

Margin helper mixin, all the values are multiplied by $global-margin which by default is equal to 1rem

ParameterTypeDefault ValueDescription
$top Number null

Margin Top

$right Number null

Margin Right

$bottom Number null

Margin Bottom

$left Number null

Margin Left


padding

@include padding($top, $right, $bottom, $left);

Padding helper mixin, all the values are multiplied by $global-padding which by default is equal to 1rem

ParameterTypeDefault ValueDescription
$top Number null

Padding Top

$right Number null

Padding Right

$bottom Number null

Padding Bottom

$left Number null

Padding Left


margin-direction

@include margin-direction($dir, $spacer);

Margin classes for specific direction properties

ParameterTypeDefault ValueDescription
$dir String None

Direction

$spacer Number None

Spacer


padding-direction

@include padding-direction($dir, $spacer);

Padding classes for specific direction properties

ParameterTypeDefault ValueDescription
$dir String None

Direction

$spacer Number None

Spacer


text-decoration

@include text-decoration($decoration);

Text Decoration, by default coming through a map $prototype-text-decoration

ParameterTypeDefault ValueDescription
$decoration String None

Text Decoration


text-transform

@include text-transform($transformation);

Text Transformation, by default coming through a map $prototype-text-transformation

ParameterTypeDefault ValueDescription
$transformation String None

Text Transformation


text-hide

@include text-hide;

Image Replacement utility. text-hide


text-truncate

@include text-truncate($overflow);

Truncating the text, elipsis by default.

ParameterTypeDefault ValueDescription
$overflow String $prototype-text-overflow

Text Truncate


text-nowrap

@include text-nowrap;

No wrapping of the text. text-nowrap


text-wrap

@include text-wrap;

Wrapping of the text. text-wrap


first

@include first($num) { }

Select all children from the first to $num.

ParameterTypeDefault ValueDescription
$num Number None

First n numbers of total children


first-child

@include first-child { }

Select the first exact child


last

@include last($num) { }

Select all children from the last to $num.

ParameterTypeDefault ValueDescription
$num Number None

Last n numbers of total children


last-child

@include last-child { }

Select the last exact child


every

@include every($num) { }

Select children every $num.

ParameterTypeDefault ValueDescription
$num Number None

Every n number of all children


first-last

@include first-last { }

Select only the first and last child.


after-first

@include after-first($num) { }

Select all children after the first to $num.

ParameterTypeDefault ValueDescription
$num Number None

After First n numbers of total children


from-last

@include from-last($num) { }

Select all children before $num from the last.

ParameterTypeDefault ValueDescription
$num Number None

From Last n numbers of total children


from-first-last

@include from-first-last($num) { }

Select the $num child from the first and the $num child from the last.

ParameterTypeDefault ValueDescription
$num Number None

n number called from first and last


all-but

@include all-but($num) { }

Select all children but $num.

ParameterTypeDefault ValueDescription
$num Number None

n number that should be excluded from all other children


all-but-first-last

@include all-but-first-last($num) { }

Select all children between the $num first and the $num last.

ParameterTypeDefault ValueDescription
$num Number None

n number excluded from first and last from all other children


unique

@include unique { }

Will only select the child if it's unique. That means that if there are at least 2 children, the style will not be applied.


not-unique

@include not-unique { }

Will only select children if they are not unique. That means that if there are at least 2 children, the style will be applied.


between

@include between($first, $last) { }

Select all children between $first and $last.

ParameterTypeDefault ValueDescription
$first Number None

First nth number

$last Number None

Last nth number


even

@include even { }

Select all even children.


even-between

@include even-between($first, $last) { }

Select all even children between $first and $last.

ParameterTypeDefault ValueDescription
$first Number None

First nth number

$last Number None

Last nth number


odd

@include odd { }

Select all odd children.


odd-between

@include odd-between($first, $last) { }

Select all odd children between $first and $last.

ParameterTypeDefault ValueDescription
$first Number None

First nth number

$last Number None

Last nth number


number-between

@include number-between($num, $first, $last) { }

Select all $num children between $first and $last.

ParameterTypeDefault ValueDescription
$num Number None

Every n number between $first and $last.

$first Number None

First n number

$last Number None

Last n number