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

The IE8 just supports parts of features, and it requires use of Respond.js.

Grids

Basic 12 Grid

<div class="row">
  <div class="col-1">1/12</div>
  <div class="col-2">2/12</div>
  ...
</div>

Basic 10 Grid

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

Offset

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

No-gutters

<div class="row no-gutters">
  <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

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

Nested

<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

Typography

Headings

<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

<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-field" 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

<table class="table hover">
...
</table>

Bordered

<table class="table bordered">
...
</table>

Striped

<table class="table bordered striped">
...
</table>

Boxes

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

<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>

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

<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>

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

<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