Jarvus UI CSS - Styleguide
Styleguide and dev tests for jui css.
grouping
<hr>
headings
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
images
links
lists
<ul>
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Vestibulum auctor dapibus neque.
<ol>
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Vestibulum auctor dapibus neque.
<dl>
- Definition list
- Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
- Lorem ipsum dolor sit amet
- Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
paragraphs
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
phrasing
small
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
strong
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
em
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
shared (misc)
<address>
You can contact author at jarv.us.
You may also want to visit us:
Jarvus Innovations
908B N 3rd St
Philadelphia, PA 19123
USA
<blockquote>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
<figure>
<pre>
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~
<table>
| A | B | C | D |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 |
collapse
requires js
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
drop down
drop down reverse
flag
Lorem ipsum dolor sit amet
flag reverse
Lorem ipsum dolor sit amet
grids
grid--xs
grid--sm
grid--lg
grid--xl
grid--flush
grid--reverse
grid--middle
grid--bottom
grid--right
grid--center
grid--stretch
grid--auto
media
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
lists
o-list-plain
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
o-list-inline
- list item 1
- list item 2
- list item 3
modal
requires js
o-modalPellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas?
o-modal--center
o-modal--centerpress downs
requires js
press down reverse
tabs
requires js
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
wrapper
buttons
link
Mixins
Intrinsic Ratio
Triangle
Widths
bp all
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
bp1
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
bp2
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
bp3
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
bp4
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
bp5
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
bp0 only
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
bp1 only
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
bp2 only
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
bp3 only
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
bp4 only
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
bp5 only
1/1
1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4
1/5
1/5
1/5
1/5
1/5
1/6
1/6
1/6
1/6
1/6
1/6
1/7
1/7
1/7
1/7
1/7
1/7
1/7
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/8
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/9
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/10
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/11
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12