This is a demonstration of the critical CSS used to render the top, visible portion of a page.
We use the Bootstrap Grid System as a base. See their documentation for full details, or use the following simple examples.
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
.
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 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 are larger headings for the main headings on the page.
Standard headings are for smaller headings, such as breaking up long blocks of content.
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.
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
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.
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.
attr
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Useful for short quotations to be displayed inline.
The quotation started with Lorem ipsum dolor sit amet
and continued in that vein.
Used to display a list in a more visually pleasing format...
...which is especially useful when the items can have different states...
...or be disabled...
...or need some additional data.
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
.
When displaying code you should escape <, > and " characters.
For example, <section>
should be wrapped as inline.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
y = mx + b
To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
The API will give a message stating: You must provide a valid derivative ID