Styleguide
Color Schemes
We can set a color scheme to the container of our section by setting .scheme-{theme} class, where "theme" is the name of the scheme:
Light Scheme
This container is using .scheme-light class.
Feature Scheme
This container is using .scheme-feature class.
Dark Scheme
This container is using .scheme-dark class.
These are the default styles fore headings, will be applied in the whole website.
You can set a class to a different heading tag. Eg.
We can set .h2 styles to an H1 element: <h1 class=".h2">Heading<h1> class.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Title headings
These headings will be styled inside of and element that contains .title-bar class.
Sometimes setting .title-bar class to a parent element won't be the best way to apply title styles over headings. In these cases, it would be better/easier to have ability to set a class in order to apply .title class directly to the heading element in order to apply styles.
These classes apply title styles to H1, H2 and H3 elements.
Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.
- List Item 1
- List Item 2
- List Item 3
- List Item 4
Text Helpers
Use .text-{property} class.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultrices quam eget felis hendrerit placerat. Nullam eget finibus elit. Donec scelerisque non libero non vulputate. Duis non mi metus. Sed semper quis dui eu finibus. Suspendisse potenti. Duis nec libero ut quam aliquam sagittis. Morbi arcu felis, iaculis ut varius sit amet, laoreet non metus.
