Introduction

Snack is a minimal CSS framework for web. But the main purpose of this framework is not mini size. For more reason,I hope the framework can simplified the class name which we used and provide a more generally components.

Browser Support

IE Edge Firefox Chrome Safari Opera
10+ ✔️ ✔️ ✔️ ✔️ ✔️

Grids

Basic 12 Grid

1/12
2/12
3/12
3/12
3/12
3/12
4/12
5/12
5/12
7/12
<div class="row">
  <div class="col-1">1/12</div>
  <div class="col-2">2/12</div>
  ...
</div>

Basic 10 Grid

1/10
2/10
3/10
4/10
2/10
8/10
<div class="row cols-10">
  <div class="col-1">1/10</div>
  <div class="col-2">2/10</div>
  ...
</div>

Offset

6/12
5/10
<div class="row">
  <div class="col-6 col-offset-3">6/12</div>
</div>

No-gutters

4/12
4/12
4/12
2/10
3/10
5/10
<div class="row no-gutter">
  <div class="col-4">4/12</div>
  <div class="col-4">4/12</div>
  ...
</div>

You can use gutter helpers in snack-helper to change row spacing.

Equal

1/5
1/5
1/5
1/5
1/5
1/7
1/7
1/7
1/7
1/7
1/7
1/7
<div class="row">
  <div class="col">1/7</div>
  <div class="col">1/7</div>
  ...
</div>

Nested

1/2*9/12
1/2*9/12
3/12
<div class="row">
  <div class="col-9">
    <div class="row">
      <div class="col-6">1/2*9/12</div>
      <div class="col-6">1/2*9/12</div>
    </div>
  </div>
  <div class="col-3">3/12</div>
</div>

Media ( Bootstrap )

The media component is important, but there is no room for improvment, so I use the media of Bootstrap. In addition, I add a avatar class, we can use it as needed.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

<div class="media">
  <div class="media-left">
    <a href="#" class="avatar">
      <img class="media-object" alt="" src="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    <p>...</p>
  </div>
</div>

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Colors

Primary #348fe2
Info #49b6d6
Success #84b547
Danger #ff5b57
Warning #f59c1a
Inverted #2d353c

Typography

Headings

h1 Example Heading subtitle

h2 Example Heading subtitle

h3 Example Heading subtitle

h4 Example Heading subtitle

h5 Example Heading subtitle
h6 Example Heading subtitle
<h1>h1 Example Heading <small>subtitle</small></h1>
<h2>h2 Example Heading <small>subtitle</small></h2>
<h3>h3 Example Heading <small>subtitle</small></h3>
<h4>h4 Example Heading <small>subtitle</small></h4>
<h5>h5 Example Heading <small>subtitle</small></h5>
<h6>h6 Example Heading <small>subtitle</small></h6>

Buttons

Colors Options

<button class="btn default">default</button>
<button class="btn primary">primary</button>
...
<button class="btn link">link</button>

Colors Outline Options

<button class="btn outline default">default</button>
<button class="btn outline primary">primary</button>
...

Pill Button

<button class="btn pill default">default</button>
<button class="btn pill outline primary">primary</button>
...

Button Group

<div class="btns">
  <button class="btn default">default</button>
  <button class="btn default">default</button>
  <button class="btn default">default</button>
</div>
...

Button Group Vertical

<div class="btns vertical">
  <button class="btn default">default</button>
  <button class="btn default">default</button>
  <button class="btn default">default</button>
</div>
...

Button Group Outline

<div class="btns">
  <button class="btn outline default">default</button>
  <button class="btn outline default">default</button>
  <button class="btn outline default">default</button>
</div>
...

Button Group Outline Vertical

<div class="btns vertical">
  <button class="btn outline default">default</button>
  <button class="btn outline default">default</button>
  <button class="btn outline default">default</button>
</div>
...

Forms

Basic Elements

A block of help text that breaks onto a new line and may extend beyond one line.
<div class="form-horizontal">
  <div class="form-group">
    <label for="" class="col-2 form-label">Normal Input</label>
    <div class="col-10">
      <input class="form-control" type="text" />
    </div>
  </div>
  ...
</div>

Checkbox & Radio

The structures of checkbox/radio in snack allow you customize its styles. Demo on CodePen.

<div class="checkbox">
  <input type="checkbox" id="checkbox1" value="">
  <label for="checkbox1">Option one ...</label>
</div>
<div class="radio">
  <input type="radio" name="optionsRadios" id="optionsRadios1" checked="">
  <label for="optionsRadios1">Option one ...</label>
</div>
<div class="checkbox inline">
  <input type="checkbox" id="checkbox1" value="">
  <label for="checkbox1">Option one ...</label>
</div>
<div class="radio inline">
  <input type="radio" name="optionsRadios" id="optionsRadios1" checked="">
  <label for="optionsRadios1">Option one ...</label>
</div>

Tables

Basic

Name Registration Date E-mail address Premium Plan
Nicky Almera September 14, 2013 nicky@hotmail.com No
Edmund Wong January 11, 2014 edmund@yahoo.com Yes
Harvinder Singh May 11, 2014 harvinder@gmail.com Yes
<table class="table hover">
...
</table>

Bordered

Name Registration Date E-mail address Premium Plan
Nicky Almera September 14, 2013 nicky@hotmail.com No
Edmund Wong January 11, 2014 edmund@yahoo.com Yes
Harvinder Singh May 11, 2014 harvinder@gmail.com Yes
<table class="table bordered">
...
</table>

Rounded

Name Registration Date E-mail address Premium Plan
Nicky Almera September 14, 2013 nicky@hotmail.com No
Edmund Wong January 11, 2014 edmund@yahoo.com Yes
Harvinder Singh May 11, 2014 harvinder@gmail.com Yes
<table class="table bordered rounded">
...
</table>

Striped

Name Registration Date E-mail address Premium Plan
Nicky Almera September 14, 2013 nicky@hotmail.com No
Edmund Wong January 11, 2014 edmund@yahoo.com Yes
Harvinder Singh May 11, 2014 harvinder@gmail.com Yes
Terry Khoo June 6, 2013 terry@gmail.com No
Jamie Harington January 15, 2014 jharingonton@yahoo.com Yes
Jill Lewis May 1, 2014 jilsewris22@yahoo.com Yes
<table class="table bordered rounded striped hover">
...
</table>

Boxes

Single Box

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

Basic Box List

box
box
box

Basic Boxes without Background

box
box
box
<div class="boxes default">
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
</div>
<div class="boxes default transparent">
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
</div>

Color Primary

box
box
box

Color Info

box
box
box

Color Success

box
box
box

Color Danger

box
box
box

Color Warning

box
box
box

Color Inverted

box
box
box
<div class="boxes primary">
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
</div>
...

Basic Boxes with header and footer

box box-header
box box-body

Secondary Boxes with header and footer

box box-header
box box-body
<div class="boxes default">
  <div class="box box-header">box</div>
  <div class="box box-body">box</div>
  <div class="box box-footer">box</div>
</div>
<div class="boxes secondary">
  <div class="box box-header">box</div>
  <div class="box box-body">box</div>
  <div class="box box-footer">box</div>
</div>

Raised Boxes

box
box
box
<div class="boxes raised">
  <div class="box">box</div>
  <div class="box">box</div>
  <div class="box">box</div>
</div>

Nested Boxes

box nested
box
box
<div class="boxes default">
  <div class="box">
    <div class="boxes default">
      <div class="box">box nested</div>
    </div>
  </div>
  <div class="box">box</div>
  <div class="box">box</div>
</div>

Utilities

name where i can use description
.pull-left Layout Make Element float left
.pull-right Layout Make Element float right
.clearfix Layout Clear element floats

The Snack had already removed most css helper classes. Please Try Snack-helper if you need it.