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

Colors

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 g-0">
  <div class="col-4">4/12</div>
  <div class="col-4">4/12</div>
  ...
</div>

You can use class .g-(0, 4, 8, 12, 16, 20, 24, 28, 32) to change row spacing.

Equal

<div class="row">
  <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 very 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.

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

Form Inline

Tables

Basic

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

Bordered

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

Rounded

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

Striped

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

Boxes

Single box

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

Box Group

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

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

Colorful

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

<div class="boxes bg-primary text-white">
  <div class="box bg-primary">box</div>
  <div class="box bg-primary">box</div>
  <div class="box bg-primary">box</div>
</div>

Styles

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

Nested boxes

<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

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