Pasta

Simply Delicious

Pasta is a tiny SASS file that provides a great starting place for web projects. It combines a handy reset and light styling for common web elements, yummy.

Download Pasta 


Getting Started


Pasta is a collection of partial SASS files, broken out into their core functions. Individual files can be found in pasta/ingredients/. Place the Pasta directory within your CSS directory and link the file via a common @import function to begin cooking.

Ingredients

Optional Configuration

If all you want to do is adjust basic variables but not core stylings, you can include the declarations before you import Pasta into your main stylesheet:

$type-sans: 'Noto Sans', sans-serif;
$type-serif: 'Noto Serif', serif;
$type-mono: 'Source Code Pro', monospace;
$color-base: #545454;
$color-highlight: #E73C4E;

@import "pasta/start";

After importing Pasta into your main stylesheet, you can use any variables or mixins globally—easily building on top of _eggs.scss as you establish the look and feel of your project.


Complex Mixins


Some of the more powerful mixins Pasta uses include variable conditions that allow the most flexibility without multiple instances of very similar mixins.

Breakpoints

@include bp($point)

The breakpoints mixin allows you to define what happens at different screen widths, each value maps to a common screen size.

Options:

xs, xsl, s, m, ml, l, xl, xxl

In use:

.class {
  height: rem(48);
  @include bp(ml) { height: rem(64); }
}

Padding

@include padding($size, $side)

Everyone loves some padding, so why not make it easy to have responsive padding through a mixin? The mixin takes an argument for $size and $side and scales values when users reach a large screen width to adjust things just so. The default $side that padding is applied is all.

Options for $size:

xs, s, m, l, xl

Options for $sides:

all, t, b, l, r

In use:

.class {
  @include padding(s);
}

(Adds padding to all sides using the small parameter)

Margins

@include margin($size, $side)

Margin is the same idea as padding and is super useful for setting the vertical rhythm of a page. The default value for $side is t for top.

Options for $size:

xs, s, m, l, xl

Options for $sides:

t, b, l, r

In use:

.class + .class {
  @include margin(s,l);
}

(Adds a left margin to an item when it proceeds the same type of item)


Typography


Easily control site-wide typography using simple variables—it’s as easy as setting a numeric value for font-size.

Headings

<h1>

Headline 1

<h2>

Headline 2

<h3>

Headline 3

<h4>

Headline 4

<h5>

Headline 5

<p>

Aenean lacinia bibendum nulla sed consectetur. Nullam I’d dolor I’d nibh ultricies vehicula ut I’d elit. An inline link. Dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod.

Typographic Helper Classes

.type__style--sans

Sans-serif Type.

.type__style--serif

Serif Type.

.type__style--mono

Mono Type.

.type__style--caps

All-caps Type.

.type__align--left

Left-aligned text.

.type__align--center

Centered-aligned text.

.type__align--right

Right-aligned text.

.type__align--legible

Legible text block. Often times we desire a more reasonable line length for blocks of text. This class helps set a max-width for text blocks and centers them horizontally within a parent.

.type__align--inline

Inline text. Can be quite nice.


Lists


When screens reach a width greater than 1024px, styled <ul> and <ol> elements adapt a hanging punctuation format to better align to corresponding text.

Unordered List

<ul>

Ordered List

<ol>

  1. list item
  2. list item
  3. list item

Buttons


Buttons styles are great, they work well as calls to action as well as in forms, but you should be able to use them whereever you like. Our buttons come in two flavors and can be used anywhere via a class.

.btn

Hi There!

.btn.btn--secondary

Hello Again!


Code Samples


For code friendly pages, both inline and <pre> level <code> tags are supported.

Let’s add .this and .that to our <h1> tag.

.this { font-size: 4.5rem; }
.that { color: $super-sweet; }

Responsive Media


Images and video can easily adjust to viewport constraints and respond accordingly.

Responsive Images

<img>

Some Lovely Pasta

Image via Wikipedia

Responsive Video Embeds

Video embeds are made awesome by simply adding a class of .video to a parent containing the embed.

<figure class="video__holder"><Embed_Code></figure>

Video via The Geometry of Pasta


Colors


A global color scale makes it easy to use variations of core colors, keeping UI elements consistent and easy to manage. The color for $color-base defaults to a calculation of a gray tone based on $color-highlight so if your project only has one prominent color, you’re all set!

Base

Highlight