Page elements
This blog is based on Inclusion framework, so it's tools allow us to decorate our content. Just add predefined classname to our markup element - and that's all! Here is orifinal description:
Here you can see live examples of page elements that were created with Inclusion. There are about eight groups of elements with it's own styles: headings and text, images, blockquotes, lists, code blocks, abstract blocks (with spoilers) that used as containers for different content, tables and buttons. Basic inclusions like section, chapter or navigation are not shown here.
Inclusion description
Let me say a few words about these demo posts. We have 9 chapters that contain code snippets and their result examples. Each chapter represented as separate post. Here is a list with links to related chapters:
Headings and text
This paragraph is example of common text block with normal font and justified alignement. Let's add some lorem ipsum to see how it works!
Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat
<h4 class="typo typo_sans typo_center">Centered subtitle with normal font</h4>
<h4 class="typo typo_serif typo_center">Centered subtitle with serif font</h4>
<h4 class="typo typo_condensed typo_center">Centered subtitle with condensed font</h4>
Centered subtitle with normal font
Centered subtitle with serif font
Centered subtitle with condensed font
<h4 class="typo typo_sans typo_left">Left aligned subtitle with normal font</h4>
<h4 class="typo typo_serif typo_left">Left aligned subtitle with serif font</h4>
<h4 class="typo typo_condensed typo_left">Left aligned subtitle with condensed font</h4>
Left aligned subtitle with normal font
Left aligned subtitle with serif font
Left aligned subtitle with condensed font
<h4 class="typo typo_sans typo_right">Right aligned subtitle with normal font</h4>
<h4 class="typo typo_serif typo_right">Right aligned subtitle with serif font</h4>
<h4 class="typo typo_condensed typo_right">Right aligned subtitle with condensed font</h4>
Right aligned subtitle with normal font
Right aligned subtitle with serif font
Right aligned subtitle with condensed font
Note, that we can use floated headings andd text blocks within special float block, and we'll check this in chapter Blocks
Conclusion
We've checked styling content with Inclusion framework. Of course for common post you can use only markdown syntax without html inclusion. By the way, for default markdown for this blog is kramdown, so you're able to add desired classname right to the markdown element, like this: {: class="typo typo_serif typo_center"} More details you can find here and here. Ok, I think that's all, thank you for watching and have a nice blogging ;)