Critical CSS
This is a demonstration of the critical CSS used to render the top, visible portion of a page.
Grid system
We use the Bootstrap Grid System as a base. See their documentation for full details, or use the following simple examples.
Stacked-to-horizontal
Using a single set of .col-md-*
grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row
.
Mobile and desktop
Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-*
to your columns. See the example below for a better idea of how it all works.
Typography
Typography is at the core of every web page or app. It may sound incredibly simple, but it will help your users if you choose the right typographic elements to render your content.
Display headings
Display headings are larger headings for the main headings on the page.
Display heading 1
Display heading 2
Display heading 3
Display heading 4
Standard headings
Standard headings are for smaller headings, such as breaking up long blocks of content.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Text sizing
Lead
Useful for a larger textual description, often nested in a well
(as in this example).
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
Text size increase
Useful when you want to make text bigger, but not make it look like a heading.
A third bigger than normal text text-1-3x
Two thirds bigger than normal text text-1-6x
Twice as big as normal text text-2x
Paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Inline text elements
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
Abbreviations
attr
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Naming a quote source
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Reverse layout
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Inline quotations
Useful for short quotations to be displayed inline.
The quotation started with Lorem ipsum dolor sit amet
and continued in that vein.
Definition list
- Description lists
- A description list is perfect for defining terms.
- Euismod
- Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Truncated term is truncated
- Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Lists
Unordered list
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
-
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Ordered list
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
-
Facilisis in pretium nisl aliquet
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Reverse ordering
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
Starting at a number different to 1
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
List Groups
Used to display a list in a more visually pleasing format...
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
List Group States
...which is especially useful when the items can have different states...
- Dapibus ac facilisis in
- Dapibus ac facilisis in
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
Disabled List Group
...or be disabled...
- Dapibus ac facilisis in
- Dapibus ac facilisis in
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
List Group Labels
...or need some additional data.
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
List Group Cards
If you need a each item in a list group to be slightly more separated, you can add the class list-group-cards
. This works especially well in a well
.
- Dapibus ac facilisis in
- Dapibus ac facilisis in
- Dapibus ac facilisis in
- Cras sit amet nibh libero
- Porta ac consectetur ac
- Vestibulum at eros
Code
When displaying code you should escape <, > and " characters.
Inline code snippets
For example, <section>
should be wrapped as inline.
Block of code
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
Variables
y = mx + b
User input
To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
Sample output
The API will give a message stating: You must provide a valid derivative ID