A simple, dependency-free CSS micro-framework purpose built for creating responsive websites and user interfaces.
Nucleon features a fully responsive grid system, styled form elements and buttons, tables, utility classes, typography, and more.
Nucleon comes with a flexbox-based grid system that falls back to floated inline-block elements in older browsers. Columns have 1rem of padding-based guttering to provide inner spacing.
All breakpoints are mobile-first, meaning that they apply to that specific breakpoint and all breakpoints above it (unless a breakpoint for a larger size is also specified). For example, a .col-md-6 column is 6 columns wide for medium, large, and extra large devices, but not for small and extra small devices.
Resize your browser window to see it in action.
<!-- Responsive Grid Example -->
<div class="row">
<div class="col-md-6 col-xl-3">.col-md-6 .col-xl-3</div>
<div class="col-md-6 col-xl-3">.col-md-6 .col-xl-3</div>
<div class="col-md-6 col-xl-3">.col-md-6 .col-xl-3</div>
<div class="col-md-6 col-xl-3">.col-md-6 .col-xl-3</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4">.col-sm-6 .col-lg-4</div>
<div class="col-sm-6 col-lg-4">.col-sm-6 .col-lg-4</div>
<div class="col-lg-4">.col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-8 col-md-4">.col-xs-8 .col-md-4</div>
<div class="col-xs-4 col-md-4">.col-xs-4 .col-md-4</div>
<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
</div>
| Class | Device Width |
|---|---|
| .col-xs-* | < 768px Extra Small |
| .col-sm-* | > 768px Small |
| .col-md-* | > 992px Medium |
| .col-lg-* | > 1200px Large |
| .col-xl-* | > 1500px Extra Large |
Nucleon's simple grid columns are specified without a breakpoint (e.g. .col-4). These classes apply to screen sizes greater than 768px. For screen sizes less than 768px, simple columns are 100% width.
In other words, if screen size > 768px, all .col-* elements are N/12 columns wide, otherwise, they are 12 columns wide.
<!-- Simple Grid Example -->
<div class="row">
<div class="col-1">.col-1</div>
<div class="col-11">.col-11</div>
</div>
<div class="row">
<div class="col-2">.col-2</div>
<div class="col-10">.col-10</div>
</div>
<div class="row">
<div class="col-3">.col-3</div>
<div class="col-9">.col-9</div>
</div>
<div class="row">
<div class="col-4">.col-4</div>
<div class="col-8">.col-8</div>
</div>
...
Columns can be auto-sized using the .col-auto class. These columns will be evenly sized in a row element for screen sizes greater than 768px. Auto-sized columns only apply to browsers that support flexbox.
<!-- Auto-Size Columns Example -->
<div class="row">
<div class="col-auto">.col-auto</div>
<div class="col-auto">.col-auto</div>
<div class="col-auto">.col-auto</div>
<div class="col-auto">.col-auto</div>
<div class="col-auto">.col-auto</div>
</div>
All font sizes are based on rems. Body font size is adjusted so that 1rem == 10px (e.g. 1.6rem is 16px).
Headings, labels, and buttons are Source Sans Pro, all other text is Open Sans. Fonts are loaded via CSS import from Google Fonts
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus iste maxime nihil perferendis commodi, voluptate fuga, dicta aliquam vero labore, quaerat. Aliquam, et consequuntur, soluta repellat voluptas similique veritatis ad. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In magni qui excepturi a sed, vel quasi culpa beatae sit, accusamus corrupti. Laborum, error! Ipsum amet, officiis aliquam laboriosam delectus voluptatum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quas, mollitia officiis alias culpa animi, unde cumque quibusdam aperiam ullam illo, in voluptatem temporibus incidunt doloribus vitae. Aliquid, dignissimos, consectetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quas, mollitia officiis alias culpa animi, unde cumque quibusdam aperiam ullam illo, in voluptatem temporibus incidunt doloribus vitae. Aliquid, dignissimos, consectetur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quas, mollitia officiis alias culpa animi, unde cumque quibusdam aperiam ullam illo, in voluptatem temporibus incidunt doloribus vitae. Aliquid, dignissimos, consectetur.
<!-- Card Example -->
<div class="card">
<div class="card-header">
<h5 class="card-title">Card Header</h5>
</div>
<div class="card-body">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Qui quas, mollitia officiis alias culpa animi, unde cumque
quibusdam aperiam ullam illo, in voluptatem temporibus incidunt
doloribus vitae. Aliquid, dignissimos, consectetur.
</p>
</div>
<div class="card-footer">
<span>Card Footer</span>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quasi excepturi necessitatibus voluptatibus ullam explicabo sit, enim nobis quaerat maiores fugiat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quasi excepturi necessitatibus voluptatibus ullam explicabo sit, enim nobis quaerat maiores fugiat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quasi excepturi necessitatibus voluptatibus ullam explicabo sit, enim nobis quaerat maiores fugiat.
<!-- Image Card Example -->
<div class="card">
<img src="img/placeholder-1.jpg" alt="Placeholder Image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quasi excepturi necessitatibus voluptatibus ullam explicabo sit, enim nobis quaerat maiores fugiat.
</p>
<div class="text-center"><button class="btn btn-primary">Read More</button></div>
</div>
</div>
<form action="" method="GET">
<div class="row">
<div class="col-6">
<label for="fName">First Name</label>
<input type="text" id="fName" name="fName" placeholder="Linus">
</div>
<div class="col-6">
<label for="lName">Last Name</label>
<input type="text" id="lName" name="lName" placeholder="Torvalds">
</div>
</div>
<div class="row">
<div class="col-8">
<label for="subject">Subject</label>
<input type="text" id="subject" name="subject" placeholder="Let's Connect">
</div>
<div class="col-4">
<label for="reason">Reason for Contact</label>
<select name="reason" id="reason">
<option value="">Select One</option>
<option value="1">Let's Connect</option>
<option value="2">Give Props</option>
<option value="3">Make a Suggestion</option>
</select>
</div>
</div>
<div class="row">
<div class="col-12">
<label for="message">Message</label>
<textarea name="message" id="message" rows="4" placeholder="Your Message"></textarea>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="submit" class="btn btn-primary" value="Submit">
</div>
</div>
</form>
Nucleon provides the following background, text, and border colors. Each color also comes with a light and dark version. Light/dark variants use the Sass functions lighten( ) and darken( ) at 15%.
Background colors are specified by using the .bg-colorname or .bg-colorname-light/dark classes. For example, to give an element a green background, give it the class .bg-green. For a dark green background, use .bg-green-dark. Note that background classes do not change text color. You can apply the .text-light or .text-dark classes for better contrast.
Text is colored using the .text-colorname or .text-colorname-light/dark classes. For example, to make some text red, apply the .text-red class.
Borders are colored using the .border-colorname or .border-colorname-light/dark classes. To make an elements border dark purple, give it the .border-purple-dark class. Note that the .border-colorname classes do not add borders, they only change the border-color property. To add a border, use the .border or border-2 classes.
Floats |
|
| .cb | Clear floats |
| .float-left .pull-left | Float left |
| .float-right .pull-right | Float right |
Sizing |
|
| .full-width | Full Width |
| .max-full-width | Max-width of 100% - Good for responsive images |
Borders |
|
| .border | 1px solid border |
| .border-2 | 2px solid border |
| .rounded | 3px border radius |
| .round | 50% border radius (circle) |
| .square | No border radius |
Margins |
|
| .mt-0 to .mt-5 | Margin top in rems |
| .mb-0 to .mb-5 | Margin bottom in rems |
| .my-0 to .my-5 | Margin top & bottom in rems |
| .ml-0 to .ml-5 | Margin left in rems |
| .mr-0 to .mr-5 | Margin right in rems |
| .mx-0 to .mx-5 | Margin left & right in rems |
Padding |
|
| .pt-0 to .pt-5 | Padding top in rems |
| .pb-0 to .pb-5 | Padding bottom in rems |
| .py-0 to .py-5 | Padding top & bottom in rems |
| .pl-0 to .pl-5 | Padding left in rems |
| .pr-0 to .pr-5 | Padding right in rems |
| .px-0 to .px-5 | Padding left & right in rems |
Text |
|
| .text-strike | Strikethrough text |
| .text-ul | Underline text |
| .text-ul-none | No underline text |
| .text-cntr | Center text |
| .text-left | Left Align |
| .text-right | Right Align |
| .text-justify | Justify Text |
| .text-hl .pill | Highlight text |
| .text-dark | Dark Text #383838 |
| .text-light | Light Text #FEFEFE |
| .strong | Bold Text |
| .italic | Italic Text |