1 1.0079 H Hydrogen

Light as air.

GitHub

Ultra-lightweight

Weighs in at just ~2.3KB (937 bytes gzipped).


Unopinionated

Serves as the perfect base, leaving the decisions up to you.


Responsive

Infinitely flexible grid, and optional preset responsive grid units.


Install

Hydrogen is a modern CSS foundation. I avoid the use of the word "framework", because it implies bias. Hydrogen is entriely unbiased and offering up only a starting point with the intention of being overriden. It is small enough to be justifiable on small projects, and customizable enough to use on large applications.


To get started simply download the base CSS file (~2.3KB / 937 bytes gzipped) and the optional grid units file.



Typograph

h1 Heading

h2 Heading

h3 Heading

h4 Heading


Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut nisl nec urna faucibus posuere quis a est. Vestibulum eu dui augue. Sed interdum erat neque, a finibus risus condimentum scelerisque. Aliquam ac dui leo. Praesent pellentesque nunc ut orci egestas venenatis. Nunc nec mi vitae nibh ullamcorper fermentum. Quisque dictum consectetur pharetra. Morbi rhoncus mi nisl, in fringilla nunc dictum id. Nunc condimentum aliquam semper. Aliquam sit amet scelerisque urna. Integer vitae laoreet leo. Proin auctor, tellus at dignissim vehicula, mauris arcu luctus velit, eu ullamcorper erat nisi pulvinar lectus. Morbi et rhoncus nisl. Curabitur sagittis orci nec felis pharetra porta. Aenean interdum id mi eget fringilla. Quisque volutpat in sem at cursus.



Lists

Unordered

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut nisl nec urna faucibus posuere quis a est. Vestibulum eu dui augue. Sed interdum erat neque, a finibus risus condimentum scelerisque. Aliquam ac dui leo. Praesent pellentesque nunc ut orci egestas venenatis. Nunc nec mi vitae nibh ullamcorper fermentum.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut nisl nec urna faucibus posuere quis a est. Vestibulum eu dui augue. Sed interdum erat neque, a finibus risus condimentum scelerisque. Aliquam ac dui leo. Praesent pellentesque nunc ut orci egestas venenatis. Nunc nec mi vitae nibh ullamcorper fermentum.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut nisl nec urna faucibus posuere quis a est. Vestibulum eu dui augue. Sed interdum erat neque, a finibus risus condimentum scelerisque. Aliquam ac dui leo. Praesent pellentesque nunc ut orci egestas venenatis. Nunc nec mi vitae nibh ullamcorper fermentum.

Ordered

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut nisl nec urna faucibus posuere quis a est. Vestibulum eu dui augue. Sed interdum erat neque, a finibus risus condimentum scelerisque. Aliquam ac dui leo. Praesent pellentesque nunc ut orci egestas venenatis. Nunc nec mi vitae nibh ullamcorper fermentum.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut nisl nec urna faucibus posuere quis a est. Vestibulum eu dui augue. Sed interdum erat neque, a finibus risus condimentum scelerisque. Aliquam ac dui leo. Praesent pellentesque nunc ut orci egestas venenatis. Nunc nec mi vitae nibh ullamcorper fermentum.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut nisl nec urna faucibus posuere quis a est. Vestibulum eu dui augue. Sed interdum erat neque, a finibus risus condimentum scelerisque. Aliquam ac dui leo. Praesent pellentesque nunc ut orci egestas venenatis. Nunc nec mi vitae nibh ullamcorper fermentum.
<!-- Unordered --> <ul class="h-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> <!-- Ordered --> <ol class="h-list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ol>


<!-- Vertical --> <ul class="h-menu"> <li> <span>Heading</span> </li> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li> </ul> <!-- Horizontal --> <ul class="h-menu h-menu-inline"> <li> <span>Heading</span> </li> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li> </ul>

Tables

# Header Header Header Header
1,001 Lorem ipsum dolor sit
1,002 amet consectetur adipiscing elit
1,003 Integer nec odio Praesent
1,003 libero Sed cursus ante
1,004 dapibus diam Sed nisi
1,005 Nulla quis sem at
1,006 nibh elementum imperdiet Duis
1,007 sagittis ipsum Praesent mauris
1,008 Fusce nec tellus sed
1,009 augue semper porta Mauris
1,010 massa Vestibulum lacinia arcu
1,011 eget nulla Class aptent
1,012 taciti sociosqu ad litora
1,013 torquent per conubia nostra
1,014 per inceptos himenaeos Curabitur
1,015 sodales ligula in libero
<table class="h-tbl"> <thead> ... </thead> <tbody> ... </tbody> </table>

Buttons

<button class="h-btn"> A Button </button> <button class="h-btn" disabled> A Disabled Button </button>

Forms

A compact inline form

A stacked form
<!-- Inline --> <form class="h-form"> ... </form> <!-- Stacked --> <form class="h-form h-form-stack"> ... </form>

Grid

By default, Hydrogen's grid provides you with the foundation to build fully custom, responsive grids. Enabling you to truly program for the responsive medium that is the web.

<style> @media screen and (min-width: 50em){ .content { width: 75%; } .sidebar { width: 25%; } } </style> <div class="h-g"> <div class="h-u content"> ... </div> <div class="h-u sidebar"> ... </div> </div>

Grid Units

To make development faster, Hydrogen ships with a separate grid-units file. That offers preset grid units on the 12th scale, with triggers at the follow breakpoints:


Key Media Query Applies
sm 
@media screen and min-width(30em) { ... }
 ≥480px
md 
@media screen and min-width(48em) { ... }
 ≥768px
lg 
@media screen and min-width(64em) { ... }
 ≥1024px
sm 
@media screen and min-width(76.5em) { ... }
 ≥1224px
<div class="h-g"> <div class="h-u h-u-sm-8-12"> ... </div> <div class="h-u h-u-sm-4-12"> ... </div> </div>