A dead simple responsive CSS boilerplate and nothing else.
bareBones styles only a handful of standard HTML elements and includes FlexGrid.
Less then 600 lines (17kb) of CSS code.
Zero compiling or installing necessary.
Responsive and built with mobile devices in mind.
Flexgrid is a responsive 12 column grid, with sizing classes available for elements spanning 1 through 12 columns, so you can easily mix and match column sizes. If you don't need all 12 columns, utility classes are included to center and/or reverse your columns.
<div class="fg-row">
<div class="fg-sm-6">fg-sm-6</div>
<div class="fg-sm-6">fg-sm-6</div>
</div>
/* Utility classes */
.fg-row-align-center
.fg-row-reverse
<div class="fg-row fg-row-align-center">
<div class="fg-md-3 demoGrid">One</div>
<div class="fg-md-3 demoGrid">Two</div>
</div>
<div class="fg-row fg-row-align-center fg-row-reverse">
<div class="fg-md-3 demoGrid">One</div>
<div class="fg-md-3 demoGrid">Two</div>
</div>
Buttons are available in 8 different verieties. Button styles are applied to a number of appropriate form elements, but can also be arbitrarily attached to anchors with a .button class.
Default Primary Secondary Info Success Warning Danger Dark<a class="button">Default</a> <a class="button button-primary">Primary</a> <a class="button button-secondary">Secondary</a> <a class="button button-info">Info</a> <a class="button button-success">Success</a> <a class="button button-warning">Warning</a> <a class="button button-danger">Danger</a> <a class="button button-dark">Dark</a>
Form element styles are included in bareBones.
<form>
<div class="fg-row">
<div class="fg-md-6">
<label for="exampleNameInput">Your Name</label>
<input class="full-width" type="text" placeholder="Jennifer Perrin" id="exampleNameInput" />
</div>
<div class="fg-md-6">
<label for="exampleEmailInput">Email Address</label>
<input class="full-width" type="email" placeholder="example@mail.com" id="exampleEmailInput" />
</div>
<div class="fg-md-6">
<label for="exampleSelect">Dropdown Select</label>
<select class="full-width" id="exampleSelect">
<option value="Option 1">Select One</option>
<option value="Option 2">Select Two</option>
<option value="Option 3">Select Three</option>
</select>
</div>
</div>
<div class="fg-row">
<div class="fg-md-6">
<label class="inline">
<input type="checkbox" name="checkExample" />
<span class="label-body">Checkbox 1</span>
</label>
<label class="inline">
<input type="checkbox" name="checkExample" />
<span class="label-body">Checkbox 2</span>
</label>
<label class="inline">
<input type="checkbox" name="checkExample" />
<span class="label-body">Checkbox 3</span>
</label>
</div>
<div class="fg-md-6">
<label class="inline">
<input type="radio" name="radioExample" />
<span class="label-body">Radio 1</span>
</label>
<label class="inline">
<input type="radio" name="radioExample" />
<span class="label-body">Radio 2</span>
</label>
<label class="inline">
<input type="radio" name="radioExample" />
<span class="label-body">Radio 3</span>
</label>
</div>
</div>
<input class="button-primary" type="submit" value="Submit" />
</form>
<ul>
<li>Lorem Ipsum is simply dummy text</li>
<li>of the printing and typesetting industry
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Proin at massa justo</li>
</ol>
</li>
<li>Vestibulum ante ipsum primis</li>
</ul>
<ol>
<li>Lorem Ipsum is simply dummy text</li>
<li>of the printing and typesetting industry
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Proin at massa justo</li>
</ul>
</li>
<li>Vestibulum ante ipsum primis</li>
</ol>
<ul class="list-group">
<li class="list-group-item">Lorem ipsum dolor sit amet</li>
<li class="list-group-item">of the printing and typesetting industry</li>
<li class="list-group-item">Vestibulum ante ipsum primis</li>
</ul>
Be sure to properly code the table markup with <thead> and <tbody>.
| Name | Salary | Sex | Location |
|---|---|---|---|
| Bob Johnston | $66,000 | Male | New York |
| John Smith | $76,500 | Male | New York |
| Micheal Miles | $74,000 | Female | New Jersey |
<table class="full-width">
<thead>
<tr>
<th>Name</th>
<th>Salary</th>
<th>Sex</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bob Johnston</td>
<td>$66,000</td>
<td>Male</td>
<td>New York</td>
</tr>
<tr>
<td>John Smith</td>
<td>$76,500</td>
<td>Male</td>
<td>New York</td>
</tr>
<tr>
<td>Micheal Miles</td>
<td>$74,000</td>
<td>Female</td>
<td>New Jersey</td>
</tr>
</tbody>
</table>
Media Queries are used for styling your site across multiple devices. The queries are mobile-first, meaning they target min-width. All styles outside of a media query apply to all devices, then larger devices are targeted for enhancement. This helps prevent small devices from having to parse unused CSS.
@media (min-width: 400px) {}
@media (min-width: 540px) {}
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {}
Included are a number of utility classes. Sometimes it's better to use a utility class than create a whole new CSS rule just to change the style of an element.
/* Set element to full width */ .full-width { width: 100%; box-sizing: border-box; } /* Float Elements */ .pull-right { float: right; } .pull-left { float: left; } /* Text colors (matches the button colors) */ .text-primary { color: #3580f0; } .text-secondary { color: #6c757d; } .text-info { color: #33c3f0; } .text-success { color: #30ba74; } .text-warning { color: #e1b42a; } .text-danger { color: #f83345; } .text-dark { color: #2c323b; } /* Align text */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* Clear a float */ .clearfloat { content: ""; display: table; clear: both; }