Dropcaps
Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis felisi eger id justo maurisus convallicitur. Donec a erat in enim cursus gravida id non urna. Vivamus feugiat mauris sed sem tristique non eleifend lorem elementum. Integer imperdiet vestibulum leo ut tincidunt. In sagittis diam ut leo convallis vel rutrum mauris ullamcorper.
Dropcaps can also have coloured backgrounds e.g.
Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis felisi eger id justo maurisus convallicitur. Donec a erat in enim cursus gravida id non urna. Vivamus feugiat mauris sed sem tristique non eleifend lorem elementum. Integer imperdiet vestibulum leo ut tincidunt. In sagittis diam ut leo convallis vel rutrum mauris ullamcorper.
Adding Colour to Dropcaps
To add colour simply add one of the following default colour class names: blue, green, grey, dkgrey, orange, purple, red, yellow. e.g
Default - No Colour
<span class="dropcap">D</span>ropcaps
With Colour (red)
<span class="dropcap red">D</span>ropcaps
Pure CSS Circles
CSS Circles are still not fully supported by all browsers and have their own problems when used in responsive layouts. So we suggest only using them when you can be very specific, overwriting the default styling at all times.
We created the elements solely for testing, but were persuaded to leave them in for future use.
Current typical useage is for font icons and normal image based icons.
We have created four default sizes: xsmall, small medium & large.
HTML:
<div class="circle xsmall"></div> <div class="circle small"></div> <div class="circle medium"></div> <div class="circle large"></div>
To add colour simply add one of the default colour class names e.g.
Red
<div class="circle xsmall bg_red"></div>
Underlined Headlines
<h1> - Headline Colour and Size
<h2> - Headline Colour and Size
<h3> - Headline Colour and Size
<h4> - Headline Colour and Size
<h5> - Headline Colour and Size
<h6> - Headline Colour and Size
To create a short emphasised underline as well as a bottom border on a headline tag we use the CSS pseudo ":after" element to create content via CSS.
In some cases using this type of styling is not suitable as screen readers etc. can not read CSS created content, but as we are only using it for styling purposes there is no harm done.
Using this method is simple, all you have to do is wrap the content of the headline tag in a <span></span> tag
HTML:
<h1><span><h1> - Headline Colour and Size</span></h1> <h2><span><h2> - Headline Colour and Size</span></h2> <h3><span><h3> - Headline Colour and Size</span></h3> <h4><span><h4> - Headline Colour and Size</span></h4> <h5><span><h5> - Headline Colour and Size</span></h5> <h6><span><h6> - Headline Colour and Size</span></h6>
There are obviously other methods that can be used to implement this solution but we have gone down this road as we use the headline tags in other ways as well.
Other methods could include: styling a class and adding the class to the headline tag or directly addressing all headline tags.
Quotes + Blockquotes
Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam. Metadipiscing eget facilis elit sagittis felisi eger id justo maurisus convallicitur. Donec a erat in enim cursus gravida id non urna. Donec sed odio dui. Nulla vitae elit libero.
Vivamus feugiat mauris sed sem tristique non eleifend lorem elementum. Integer imperdiet vestibulum leo ut tincidunt. In sagittis diam ut leo convallis vel rutrum mauris ullamcorper. Vestibulum adipiscing erat sit amet justo luctus molestie. In hac habitasse platea dictumst. In lacinia erat id ante faucibus tristique. Integer egestas elementum risus vel rutrum. Mauris vel augue sit amet lectus hendrerit auctor non nec purus.
Donec sed odio dui. Nulla vitae elit libero. Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam.