A mid level CSS library built on top of shoulders of great projects like Open Props, Every Layout, Pollen or Utopia.
--font-size--2
Lorem ipsum
--font-size--1
Lorem ipsum
--font-size-0
Lorem ipsum
--font-size-1
Lorem ipsum
--font-size-2
Lorem ipsum
--font-size-3
Lorem ipsum
--font-size-4
Lorem ipsum
--font-size-5
Lorem ipsum
--font-size-body
Lorem ipsum
--font-size-h5
--font-size-h4
--font-size-h3
--font-size-h2
--font-size-h1
--font-lineheight-0
Lorem ipsum
--font-lineheight-1
Lorem ipsum
--font-lineheight-2
Lorem ipsum
--font-lineheight-3
Lorem ipsum
--font-lineheight-4
Lorem ipsum
--line-height-body
Lorem ipsum
--line-height-headings
Lorem ipsum
--font-weight-3
Lorem ipsum
--font-weight-4
Lorem ipsum
--font-weight-5
Lorem ipsum
--font-weight-6
Lorem ipsum
--font-weight-7
Lorem ipsum
--font-weight-body-bold
Lorem ipsum
--font-weight-body
Lorem ipsum
--font-weight-headings
Lorem ipsum
--font-weight-buttons
Lorem ipsum
--font-weight-light
Lorem ipsum
--space-1
space-1
--space-2
space-2
--space-3
space-3
--space-4
space-4
--space-5
space-5
--space-6
space-6
--space-7
space-7
--space-8
space-8
--space-9
space-9
--space-1-2
space-1-2
--space-2-3
space-2-3
--space-3-4
space-3-4
--space-4-5
space-4-5
--space-5-6
space-5-6
--space-6-7
space-6-7
--space-7-8
space-7-8
--space-8-9
space-8-9
--space-3-5
space-3-5
--space-4-6
space-4-6
--size-xxs
Lorem ipsum
--size-xs
Lorem ipsum
--size-sm
Lorem ipsum
--size-md
Lorem ipsum
--size-lg
Lorem ipsum
--size-xl
Lorem ipsum
--size-xxl
Lorem ipsum
--size-content-1
Suscipit a, auctor et, lacinia vitae, nunc. Pellentesque habitant
morbi tristique.
--size-content-2
Suscipit a, auctor et, lacinia vitae, nunc. Pellentesque habitant
morbi tristique.
--size-content-3
Suscipit a, auctor et, lacinia vitae, nunc. Pellentesque habitant
morbi tristique.
--size-header-1
Pellentesque habitant morbi tristique
--size-header-2
Pellentesque habitant morbi tristique
--size-header-3
Pellentesque habitant morbi tristique
--gray-1
Lorem ipsum
--gray-2
Lorem ipsum
--gray-3
Lorem ipsum
--gray-4
Lorem ipsum
--gray-5
Lorem ipsum
--gray-6
Lorem ipsum
--gray-7
Lorem ipsum
--gray-8
Lorem ipsum
--gray-9
Lorem ipsum
--gray-10
Lorem ipsum
--gray-11
Lorem ipsum
--gray-12
Lorem ipsum
--text-color-1
Lorem ipsum
--text-color-2
Lorem ipsum
--surface-0
Lorem ipsum
--surface-1
Lorem ipsum
--surface-2
Lorem ipsum
--surface-3
Lorem ipsum
--surface-4
Lorem ipsum
--brand-color
Lorem ipsum
--brand-color-dim
Lorem ipsum
--brand-color-bright
Lorem ipsum
--accent-color
Lorem ipsum
--caret-color
Lorem ipsum
--focus-color
Lorem ipsum
--text-color-body
Lorem ipsum
--text-color-headings
Lorem ipsum
--bg-color-body
Lorem ipsum
--link-color
Lorem ipsum
--link-color-visited
Lorem ipsum
--positive-color
Lorem ipsum
--negative-color
Lorem ipsum
--error-alert-color
Lorem ipsum
--error-alert-bg-color
Lorem ipsum
--scrollthumb-color
Lorem ipsum
--border-size-1
LoremIpsum
--border-size-2
LoremIpsum
--radius-1
LoremIpsum
--radius-2
LoremIpsum
--radius-round
LoremIpsum
--border-size-default
LoremIpsum
--radius-default
LoremIpsum
--border-1
LoremIpsum
--border-2
LoremIpsum
--border-3
LoremIpsum
--border-4
LoremIpsum
--border-5
LoremIpsum
--shadow-color
--shadow-strength
--inner-shadow-highlight
--inner-shadow-1
Lorem ipsum
--inner-shadow-2
Lorem ipsum
--inner-shadow-3
Lorem ipsum
--inner-shadow-4
Lorem ipsum
--shadow-1
Lorem ipsum
--shadow-2
Lorem ipsum
--shadow-3
Lorem ipsum
--shadow-4
Lorem ipsum
--shadow-5
Lorem ipsum
--shadow-6
Lorem ipsum
--grid-max-width
--grid-gutter
Cras rutrum porta purus. Vivamus lorem.
I'm a grid item 8/12 columns wide on screen size
sm and above.
I'm a grid item 4/12 columns wide on screen size
sm and above.
I'm a grid item 3/12 columns wide on screen size
sm and above.
Consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.
That is centered and has max-width of --grid-max-width
Dolor hic debitis libero dignissimos excepturi et Delectus quos
temporibus eveniet sunt nesciunt Dolores quaerat distinctio quae
consectetur necessitatibus, voluptate quia. Quibusdam laudantium
repellat soluta amet odit!
Some parts might need to .p-popout
Lorem elit aperiam quisquam fugiat doloribus? Minus temporibus quod sed
laboriosam fugit praesentium! Facere quod aperiam eius totam fugiat
Sapiente delectus praesentium dolore architecto quo! Recusandae cumque
magnam corporis iste!
This one is normal
Dolor possimus iure ipsum vel minus. Architecto laborum eum id harum
similique Voluptas repudiandae blanditiis eaque alias beatae deleniti
labore quidem totam. Doloribus expedita itaque perferendis minima harum.
Others might need to .p-inset
Elit elit veniam eligendi deleniti blanditiis. Cum amet magni voluptas
dolor culpa Sint omnis commodi libero odit doloremque. Veniam ducimus
sint blanditiis tenetur nostrum. Vitae nemo voluptatibus aspernatur
quibusdam in.
While this one is .p-full
Consectetur ipsam quaerat nesciunt porro dicta! Vitae accusamus
voluptate modi natus fugit Eum fuga quasi natus mollitia voluptatem
quasi? Ipsum et dignissimos officia laudantium expedita quae molestiae
fugit. Nulla provident?
Wait it was supposed to have padding... .p-full-padded
Elit ad assumenda cum corrupti rerum. Facilis odit odit impedit
voluptatum autem! Quia unde corporis nam velit voluptate! Debitis
suscipit nulla culpa pariatur quisquam dolorum. Adipisicing tempora
pariatur accusamus modi sint. Vitae accusamus perferendis neque possimus
vitae! Aspernatur culpa omnis doloribus nihil veniam? Omnis consequatur
cumque cum maiores ipsam Eius vitae accusantium quae error delectus
What if one need a background? Put .p-full-bg on a
wrapper and add a background-color.
Ipsum quia et ipsa cupiditate accusamus? Excepturi repudiandae culpa
omnis tempora ut omnis Ad voluptas possimus animi fugit quaerat
aliquam. Maxime voluptate alias quam nulla quisquam. Quae distinctio
pariatur ducimus?
This one is normal
Dolor possimus iure ipsum vel minus. Architecto laborum eum id harum
similique Voluptas repudiandae blanditiis eaque alias beatae deleniti
labore quidem totam. Doloribus expedita itaque perferendis minima harum.
Some background for the popout variant with
.p-popout-padded
Sit amet lorem facere reiciendis voluptatem odit. Quasi nulla incidunt
pariatur neque laudantium consequuntur? Ipsum labore cumque molestias
esse dolorem suscipit Ducimus itaque porro animi delectus tenetur earum
Molestiae repellendus.
Or normal content
Amet laborum vero sed omnis praesentium quas magnam Dolores eos quae
nesciunt illum illum Reiciendis atque in maxime unde exercitationem
sunt! Nesciunt repellendus ex libero eius aliquid accusantium Libero
nemo
Or inset content
Consectetur ipsa quos rem nam similique recusandae! Magnam dolore saepe
fugit corrupti optio? Delectus modi quisquam perspiciatis veniam
voluptate Perferendis sint sed tenetur qui nesciunt sint rem? Fugiat
eveniet modi?
This one is normal
Dolor possimus iure ipsum vel minus. Architecto laborum eum id harum
similique Voluptas repudiandae blanditiis eaque alias beatae deleniti
labore quidem totam. Doloribus expedita itaque perferendis minima harum.
And anything can be done only on one side
Ipsum voluptas culpa ipsum placeat voluptas. Consequuntur tempora esse
quis quod quibusdam Mollitia neque numquam at consequatur impedit Harum
aut amet voluptatibus molestiae qui. Vel a sed reiciendis temporibus
aliquid!
Popout left
Sit itaque dolor ea debitis doloribus. Consequuntur esse laboriosam
aperiam deleniti tempore Eveniet perferendis est impedit dolor
architecto! Quo aliquid quod excepturi itaque atque. Doloribus
repellendus harum unde repudiandae ad.
And layouts can be nested.
Amet natus dolores eaque esse dolor, odit. Quis quasi quaerat
distinctio reiciendis sequi! Aut numquam laboriosam accusamus rerum
consequuntur. Sequi vitae repellat laborum qui in adipisci? Nisi
corporis laboriosam modi
.secondary-text-regular
Lorem ipsum
.additional-text-regular
Lorem ipsum
.base-text-bold
Lorem ipsum
.secondary-text-bold
Lorem ipsum
.additional-text-bold
Lorem ipsum
.input-text
Lorem ipsum
.heading-1
Lorem ipsum
.heading-2
Lorem ipsum
.heading-3
Lorem ipsum
.heading-4
Lorem ipsum
.button
.button-secondary
.button-brand
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 | 20040 | |
| Link in table | Table Cell 2 | Table Cell 3 | Table Cell 4 | 12 |
| Table Cell 1 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. | Table Cell 3 | Table Cell 4 | 0 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci minima, doloremque, quisquam, voluptate, molestias. | 11111 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | 1034 |
Based on this html5 test page.
A paragraph (from the Greek paragraphos, “to write beside” or “written beside”) is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text.
It is typically distinguished visually using indentation and a different typeface or smaller size quotation. It may or may not include a citation, usually placed at the bottom.
Said no one, ever.
Example paragraph text.
| Table Heading 1 | Table Heading 2 | Table Heading 3 | Table Heading 4 | Table Heading 5 |
|---|---|---|---|---|
| Table Footer 1 | Table Footer 2 | Table Footer 3 | Table Footer 4 | Table Footer 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
| Table Cell 1 | Table Cell 2 | Table Cell 3 | Table Cell 4 | Table Cell 5 |
Keyboard input: Cmd
Inline code:
<div>code</div>
Sample output: This is sample output from a computer program.
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
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 { | } ~
Strong is used to indicate strong importance.
This text has added emphasis.
The b element is stylistically different text from normal text, without any special importance.
The i element is text that is offset from the normal text.
The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.
This text is deleted and
This text is inserted.
This text has a strikethrough.
Superscript®.
Subscript for things like H2O.
This small text is small for for fine print, etc.
Abbreviation: HTML
This text is a short inline quotation.
This is a citation.
The dfn element indicates a definition.
The mark element indicates a highlight.
The variable element, such as x = y.
The time element:
There is comment here:
There is a comment spanning multiple tags and lines below here.
<figure> element
<figure> element, no
<figcaption>
<figure> element, with a
<figcaption>