Bluejay

A mobile-first css framework developed by Kaleb Heitzman using Sass and CSS3 tricks of the trade. Use it in your next project.

Bluejay also uses some Zepto too for Overlays, Scrolling, etc.

Bluejay

A mobile-first CSS3 framework developed by Kaleb Heitzman

Example of a div that stretches to the fullsize of the view port using the .viewport class.

Grid

A mobile first grid with sensible breakpoints and
push and pull columns to create semantic layouts.


.col-1
.col-1-2 .push-1-2
.col-1-2 .pull-1-2
.col-1-3
.col-1-3
.col-1-3
.col-1-4
.col-1-4
.col-1-4
.col-1-4
.col-1-5
.col-1-5
.col-1-5
.col-1-5
.col-1-5

Typography

This is a lead paragraph.

This is a paragraph that follows the lead paragraph with a link to nothing.

Heading 1

Heading 2

Heading 3

Small Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend, velit id ultrices fermentum, nibh nisi hendrerit lectus, at volutpat libero ex id nunc. Curabitur venenatis tristique neque, gravida gravida dolor tristique tempor. Praesent eget rhoncus tortor, volutpat sollicitudin diam. Sed nec lacus tristique, fringilla nulla non, congue augue.

Bold Paragraph Text

Emphasized Paragraph Text

Underlined Paragraph Text

  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

Left Aligned Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend, velit id ultrices fermentum, nibh nisi hendrerit lectus, at volutpat libero ex id nunc. Curabitur venenatis tristique neque, gravida gravida dolor tristique tempor. Praesent eget rhoncus tortor, volutpat sollicitudin diam. Sed nec lacus tristique, fringilla nulla non, congue augue.

Center Aligned Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend, velit id ultrices fermentum, nibh nisi hendrerit lectus, at volutpat libero ex id nunc. Curabitur venenatis tristique neque, gravida gravida dolor tristique tempor. Praesent eget rhoncus tortor, volutpat sollicitudin diam. Sed nec lacus tristique, fringilla nulla non, congue augue.

Right Aligned Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eleifend, velit id ultrices fermentum, nibh nisi hendrerit lectus, at volutpat libero ex id nunc. Curabitur venenatis tristique neque, gravida gravida dolor tristique tempor. Praesent eget rhoncus tortor, volutpat sollicitudin diam. Sed nec lacus tristique, fringilla nulla non, congue augue.

The Almighty Blockquote. Praesent mi velit, aliquet nec congue vitae, pellentesque pharetra arcu. Donec tristique ornare sodales. Aliquam erat volutpat. Nulla cursus consequat libero eu vehicula. Duis vulputate enim metus, sit amet dictum ante gravida a. Curabitur feugiat lorem lectus, ac consequat nibh laoreet in.

Buttons

Default, Primary, Secondary, and Danger buttons are defined by default.

Forms

Form elements that actually look nice for once.

Tables

Header Header Header Header Header
Item Item Item Item Item
Item Item Item Item Item
Item Item Item Item Item
Item Item Item Item Item
Footer Footer Footer Footer Footer

© 2016 Kaleb Heitzman.