Fork me on GitHub
Nucleon Logo

Nucleon

Nucleon Logo

A fully responsive CSS micro-framework


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.


Responsive Grid

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.

.col-md-6 .col-xl-3
.col-md-6 .col-xl-3
.col-md-6 .col-xl-3
.col-md-6 .col-xl-3
.col-sm-6 .col-lg-4
.col-sm-6 .col-lg-4
.col-lg-4
.col-xs-8 .col-md-4
.col-xs-4 .col-md-4
.col-xs-12 .col-md-4
<!-- 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>

Media Query Breakpoints

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

Simple Grid

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.

.col-1
.col-11
.col-2
.col-10
.col-3
.col-9
.col-4
.col-8
.col-5
.col-7
.col-6
.col-6
.col-12
<!-- 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> ...

Auto-Sizing Columns

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.

.col-auto
.col-auto
.col-auto
.col-auto
.col-auto
<!-- 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>

Typography

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!

Heading 1

  5rem (50px)

Heading 2

  4.4rem (44px)

Heading 3

  4rem (40px)

Heading 4

  3.6rem (36px)
Heading 5
  3.2rem (32px)
Heading 6
  2.8rem (28px)

Cards

Card Header

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 Header

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 Header

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>

Cards with Images

Placeholder Image
Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quasi excepturi necessitatibus voluptatibus ullam explicabo sit, enim nobis quaerat maiores fugiat.

Placeholder Image
Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam quasi excepturi necessitatibus voluptatibus ullam explicabo sit, enim nobis quaerat maiores fugiat.

Placeholder Image
Card Title

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>

Buttons

Nucleon comes with 5 button types: standard, primary, success, danger, and warn. An element is styled as a button if it has the .btn class or if it is an input of type="button" or type="submit". For 100% width buttons, use the .btn-block class.

Anchor Button
Anchor Button
Anchor Button
Anchor Button
Anchor Button
<!-- Standard Buttons --> <!-- Button Input --> <input class="btn" type="button" role="button">Button Input</input> <!-- Anchor Button --> <a href="#" class="btn">Anchor Button</a> <!-- Button Element --> <button type="button" role="button">Button Element</button> <!-- Submit Button --> <input type="submit" role="button" value="Submit Button"> <!-- Colored Buttons --> <!-- Primary Button --> <button class="btn btn-primary">Button Primary</button> <!-- Success Button --> <a href="#" class="btn btn-success">Success Button</a> <!-- Danger Button --> <input type="button" class="btn btn-danger" value="Error Button"> <!-- Warning Button --> <input type="submit" class="btn btn-warn" value="Warning Button">

Alerts

<div class="alert">Basic alert</div>
<div class="alert info">Info Alert</div>
<div class="alert warn">Warning Alert</div>
<div class="alert danger">Danger Alert</div>
<div class="alert success">Success Alert</div>

Forms

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

Colors

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

Red
Orange
Amber
Yellow
Green
Teal
Aqua
Nucleon
Blue
Navy
Purple
Plum
Pink
Fuscia

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.


Utility 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