@juiceboxes/cardboard
v0.4.0
Published
Ultralight CSS boilerplate
Downloads
4
Readme
juiceboxes/cardboard
Cardboard is not a UI library or framework, it's a starter kit to help you get off the ground in development.
Relies on juice-grid for CSS Grid and Flexbox Grid solutions
Installing
npm install @juiceboxes/cardboard
Imports
Regular CSS: @import 'node_modules/@juiceboxes/cardboard/cardboard.css'
Minified CSS: @import 'node_modules/@juiceboxes/cardboard/cardboard.min.css'
SCSS with Variable declarations: @import 'node_modules/@juiceboxes/cardboard/cardboard.scss'
Normalize: @import 'node_modules/@juiceboxes/cardboard/normalize.css'
Usage
Components
Components are wrapped on the top level with one element tag and then follows normal HTML structure.
Buttons
Variables: Colors, lighter and darker colors are based on initial color
$accent
: default: #33C3F0
Usage:
- Primary:
<button class='button'> Button Text </button>
<a class='button'> Anchor Button Text </button>
<input class='button' type="submit" value="submit input"> Input Text </input>
<input class='button' type="button" value="submit input"> Input Text </input
- Accent:
<button class='button accent'> Accent Button Text </button>
<a class='button accent'> Anchor Accent Button Text </button>
<input class='button accent' type="submit" value="submit input"> Accent Submit Input Text </input>
<input class='button accent' type="button" value="submit input"> Accent Button Input Tex </input>
Cards
Variables:
$card__border-radius
: card border radius, default: 1.5px
$card__padding
: padding for card contents, default: 15px
Usage:
- Primary:
<button class='button'> Button Text </button>
<a class='button'> Anchor Button Text </button>
<input class='button' type="submit" value="submit input"> Input Text </input>
<input class='button' type="button" value="submit input"> Input Text </input
- Accent:
<button class='button accent'> Accent Button Text </button>
<a class='button accent'> Anchor Accent Button Text </button>
<input class='button accent' type="submit" value="submit input"> Accent Submit Input Text </input>
<input class='button accent' type="button" value="submit input"> Accent Button Input Tex </input>
Tables
Variables:
$table__border-color
: border color under the thead, default: #c7c7c7
$table__background
: even row background color, default: #c7c7c7
Usage:
<table class='table'>
<thead>
<tr>
<th> Table Header 1 </th>
<th> Table Header 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td> Table Data 1 </th>
<td> Table Data 2 </th>
</tr>
<tbody>
</table>
Code
Usage:
<pre><code>.foo {
background: blue;
} </code></pre>
Headers/Titles
Variables:
$header__font-size--max
: max size for headers, default: 4.0rem
;
Usage:
<h1 class='title'> h1 Title </h1>
<h2 class='title'> h2 Title </h2>
.
.
.
Lists
Usage:
<li class='list'>
<li> List Item </li>
<li> List Item </li>
<ol class='list'>
<li> Nested List Item </li>
<li> Nested List Item </li>
</ol>
</li>
Layouts
Cardboard relies on juice-grid for the grid layout and is included with the npm install -- if npm config is in development mode
Container
Should wrap page
Variables:
$container__width
: Width of your page, Default: 80%
.
Usage:
<div class='container'>
.
.
.
</div>