You don't need to create new css class for simple edits.We already did it for you.
Text Align
Right Aligned
class="right-align"
This text is right aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.
Left Aligned
class="left-align"
In English and most European languages where words are read left-to-right, text is usually aligned "flush left", meaning that the text of a paragraph is aligned on the left-hand side with the right-hand side ragged. This is the default style of text alignment on the World Wide Web for left-to-right text Quotations are often indented.
Center Aligned
class="center-align"
Text can also be "centered", or symmetrically aligned along an axis in the middle of a column. This is often used for the title of a work, headlines, and for poems and songs. As with flush-right alignment, centered text is often used to present data in tables. Centered text is considered less readable for a body of text made up of multiple lines because the ragged starting edges make it difficult for the reader to track from one line to the next.
Vertical Align
You can easily vertically center things by adding the class class="valign-wrapper"to the container holding the items you want to vertically align.
This should be vertically aligned
Hiding Content
We provide easy to use classes to hide content on specific screen sizes.
| Screen Range | Display Test | |
|---|---|---|
.hide-on-small-only
|
Hidden for Mobile Only | |
.hide-on-med-only
|
Hidden for Tablet Only | |
.hide-on-med-and-down
|
Hidden for Tablet and Below | |
.hide-on-med-and-up
|
Hidden for Tablet and Above | |
.hide-on-large-only
|
Hidden for Desktop Only |
Truncation
To truncate long lines of text in an ellipsis, add the class="truncate"to the tag which contains the text. See an exaple below of a header being truncated inside a card.
Normal: This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm.
Truncate: This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm.
Hover
The hoverableis a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant for use on cards.
Card Title
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.