Sham by Identified

Spinners

Solid examples

@include sham-spinner-spokes(LightCoral, 44px, 2s);

@include sham-spinner-pinwheel('%23569aaa', 44px, 2s);

Firefox can be fussy about colors in inline svg. Using '%23a3b57b' instead of #a3b57b for your color variable will do the trick.

@include sham-spinner-windmill('%23a3b57b', 44px, 2s);

Rainbow examples

@include sham-spinner-skittles(44px, 2s);

@include sham-spinner-foliage(44px, 2s);

Fading examples

@include sham-spinner-circular-fading(IndianRed, 44px, 2s);

@include sham-spinner-peacock-fading(LightSeaGreen, 44px, 2s);

@include sham-spinner-spokes-fading(LightCoral, 44px, 2s);

@include sham-spinner-dots-fading(Tomato, 44px, 2s);

@include sham-spinner-pinwheel-fading(purple, 44px, 2s);

Installation

Naturally, you'll need SASS to use these mixins. We use the .SCSS variant, which can be @imported into any SASS/SCSS file.

To install using Bower:

bower install sham-spinner

Or include sham-spinner.scss in your project

@import 'sham-spinner';

Usage

Include something like this in your markup:

div class="my-awesome-circular-spinner"

Style it with something like this:

.my-awesome-circular-spinner { @include sham-spinner-circular(black, 44px, 2s); width : 42px; height : 42px;}

You will need to define the container so the background image is visible.

In addition to the name, mixins receive three variables: color, size, and speed:

@include sham-spinner-NAME($color, $size, $speed);

Popups

Installation

Naturally, you'll need SASS to use these mixins. We use the .SCSS variant, which can be @imported into any SASS/SCSS file.

To install using Bower:

bower install sham-popup

Or include sham-popup.scss in your project

@import 'sham-popup';

Usage

Include something like this in your markup:

‹div class="any-container"›  ‹div class="foo"›‹/div›‹/div›

Style it with something like this:

.my-container:hover .my-popup { display:block; }
            .foo { @include popout-bottom('FILL-COLOR', 'BORDER-COLOR','MIN-WIDTH','MAX-WIDTH' ); }

Tips

Top, Bottom, Left, and Right are avaiable.

Width parameters are optional.

Use javascript or media queries to move them around more dynamically.

Or simple simple CSS :hover/:active psuedo classes to show them.

Buttons

3D examples

$color2 isn't needed for this button:

Dimensions!

@include sham-button-three-d (#FC780A, white, 18px, 4px);

Awesome

@include sham-button-three-d (#FC780A, white, 18px, 4px);

Bordered examples

Testing

@include sham-button-bordered (#EF382E, #e6e6e6, white, 14px, 30px);

Testing

@include sham-button-bordered (#A3B57B, #e6e6e6, white, 18px, 0);

Flat examples

$color2 is used for the hover.

Flat

@include sham-button-flat (#c66, #a3b57b, white, 13px, 0); text-transform: uppercase;

Flat and compact

@include sham-button-flat-compact (#c66, #a3b57b, white, 13px, 0);text-transform: uppercase;

This version has a little more breathing room. Feel free to override with padding:

Flat and roomy

@include sham-button-flat-roomy (#c66, #a3b57b, white, 13px, 0); text-transform: uppercase;

Gradient examples

$color1 is the starting color and $color2 is the end color:

Gradient

@include sham-button-gradient (#FDC20E, #ffa403, white, 16px, 2px);

Since we have dark text, we need to override text-shadow:

Another gradient

@include sham-button-gradient (#f6f6f6, #d7d7d7, #555, 13px, 22px);text-shadow: 1px 1px 0px #ffffff;

Installation

Naturally, you'll need Sass to use these mixins.

To install using Bower:

bower install sham-button

Or include sham-button.scss in your project

@import 'sham-button';

Usage

Include something like this in your markup:

<div class="my-fancy-button">Testing</div>

Style it with something like this:

.my-fancy-button {@include sham-button-bordered (#EF382E, #e6e6e6, white, 14px, 30px);}

Grid

Resize the browser window to see sham-grid in action.

%sham-narrow

Extend %sham-narrow in the selector your choice to get a sidebar. You don't need special classes or secret code. In this case our sidebar is:

<aside>Sidebar stuff</aside>

The SCSS:

aside {@extend %sham-narrow;}

Installation

Naturally, you'll need SASS (we use the .SCSS variant) to use these mixins.

To install using Bower:

bower install sham-grid

Or include sham-grid.scss in your project

@import 'sham-grid';

We also set "box-sizing: border-box" so our padding has consistent results across browsers.

%sham-wide

Extend %sham-wide on an element adjacent element to get the other part of you your golden ratio.

<section>Main stuff</section>

The SCSS:

section#main {@extend %sham-wide;}

%sham-third

Extend %sham-third on three adjacent elements to get a three-column layout.

<div class="foo">Bar</div>

The SCSS:

div.foo {@extend %sham-third;}

These columns are nested inside the wide column.

Since padding is used for gutters, you'll need interior elements if you want to add color to your columns, like we've done here:

<div class="foo"><div class="inner">Bar</div></div>

%sham-half

Extend %sham-half on two adjacent elements to get a two-column layout.

<div class="bar">Foo</div>

The SCSS:

div.bar {@extend %sham-half;}

It's easy!

Bonus: a simple box! %sham-single-panel

In case you want a simple mobile-friendly box in the middle of your page.

<div class="baddabing">Baddaboom</div>

The SCSS:

div.baddabing {@extend %sham-single-panel;}

Bonus 2: 80/20 columns

In case the sidebar on the golden-ratio layout is too wide.

div.sidebar {@extend %sham-sidebar;}

div.main {@extend %sham-main;}

Modals

About

A stupidly simple way to do a modal. This works in mordern browsers. (IE9 and below are not modern.)

Add the following to your CSS:


      .my-modal {
          &:empty {
            display: none;
          }
          background-color  : rgba(0, 0, 0, 0.5);
          display           : block;
          display           : block;
          height            : 100%;
          left              : 50%;
          position          : fixed;
          position          : fixed;
          top               : 50%;
          -webkit-transform : translate(-50%, -50%);
          transform         : translate(-50%, -50%);
          width             : 100%;

          .inner {
            background-color  : white;
            border            : rgba(0, 0, 0, 0.8) 1px solid;
            border-radius     : 8px;
            box-shadow        : 3px 3px 3px rgba(0, 0, 0, 0.5);
            display           : block;
            left              : 50%;
            padding           : 3em;
            position          : fixed;
            top               : 50%;
            -webkit-transform : translate(-50%, -50%);
            transform         : translate(-50%, -50%);
            z-index           : 999;
          }
      }

Add the following to your HTML:

        ‹div class="my-modal"›
        ‹div class="inner"›
        ‹/div›‹/div›

When the modal div is empty, it's hidden. When there's something in it, it's a modal. Eezy peezy.

Use javascript to fill or empty it.

Or skip the whole :empty busines and use other states to show and hide it. (The demo below uses the :active psuedo class.)