Article Title
Inline Formating
Paragraph Styles
Body text here with some inline formating like strong text, emphasis text, and hyperlink.
Headings
This style sheet has four heading types to use.
.title heading
The title class can be applied to any heading tp force uppercase and centering.
h1 - Major Heading
H1 is best left outside of the flexgrid and tends to have issues when placed inside of it. The best way to use h1 is as the banner.
You'll also find that h1 has the some very large top and bottom margins.
h2 - Article Heading
h2 works within the flex grid but is best used outside of it to mark the start and end of artcles and major sections.
h3 - Subheading
h3 is when the headings get light, it only has a top margin meaning it works to create sections of content and still feels attached.
h4 - Tiny Heading
h4 is the same size and the body text and has no margins. Good for breaking up large sections of content.
Blocks
Light blocks
In this section we showcase the formating for block items such as lists, quotes and box types.
This is what a blockquote looks like!
List Styles
Baseline list
- Baseline list item
- Baseline list item
- Baseline list item
Clean List
- Clean List item
- Clean List item
- Clean List item
Boxes & Contaniers
Bordered Box
All boxes have the same base .box class and have a few more classes to refine them. This box uses .box .bordered!
Borderless Box
This is what the .box .borderless class looks like.
Overflow Box
This is what the .box .overflow class looks like.
The overflow class has a max-hight set through the root var --height-max.
Fixed Formating
In this section we showcase the grid and element formating like images and tables.
Images
Baseline IMG
Baseline image is designed for any aspect ratio. All the base class does is round the edges and center the image.
The Profile picture
The .pfp class centers the image, adds a drop shadow applies a 100% border radius. It's perfect to use for logos and other profile like images.
This image class also has a max size of 512px.
The Flex Grid
The flex grid can also be set up to fit the space needed using the .short, .medium and .full classes.
This set-up lets you create asymetric flex grids following the 33% 66% 100% set up for fine controle over the layout of the page!
However if one item in the .flex3 has a size class all others must do too! This is the prevent the smaller size classes from getting overrun creating odd ratios. We also have extream cases in the form of .vShort at 15% to match with the .central at 70%.
A very short section
The short sections are terible for text but good for small graphics, buttons and lists!
A central section
The scalling only truly works if you have the content to fill in each column, otherwise the aspect rations fall apart very quickly due to the adaptive nature of the felxgrid.
And another very short section!
The Photo Wall
Another usefull class we have is the .photoWall and it's sub classes. With this we can create a wall of images like an art gallary!
The photo wall can also be used to display text!
