Style Guide

You can add an introductory larger size text to your articles by simply wrapping a paragraph in a p tag with CSS class of “intro”. Put simply, larger text will usually be read before smaller text.

We paid a lot of attention to getting basics of our typography right in new Blog theme. The purpose of this page is to help determine what default settings are with CSS and to make sure that all possible elements are included. For example we looked at headings. Lovely headings.

Heading Two Formatting

Dropcap can be added by wrapping first letter of first word in a span tag with CSS class of “dropcap”. Instead of using body text font, we use display font from our titles. This also ties two elements together if display font works well with body text.openers. You can also use a purely decorative font. There are thousands of decorative typefaces, and most of them aren’t appropriate for use in a book’s body text.

Blockquotes are a great way to display and format quotations. Insert beautiful quotes using “quote” button from visual editor. To add an author just wrap its name in a cite tag.

Are you still making bulleted and numbered lists by manually typing bullets or numbers at beginning of each line? In 21st century, this is a task no one should be doing by hand.

  • We took a good long look
  • At
  • Unordered
  • Lists.
  1. Also we took a good look
  2. At
  3. Lists
  4. Of ordered variety.

Heading Three

This tag styles large blocks of code.

pre {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.5;
}

Tables are useful for lay­outs where text needs to be po­si­tioned side-by-side or float­ing at spe­cif­ic lo­ca­tions on page. If mak­ing these is frus­trat­ing with usu­al lay­out tools, try us­ing a table.

Type Font Description
Humanist Sabon Closely connected to calligraphy
Transitional Baskerville More abstract and less organic
Modern Bodoni Note thin, straight serifs
Slab Serif Clarendon Egyptian typefaces have heavy serifs

To highlight a text, you simply need to wrap it into a <span> with class “highlight”. This can be done in Text editor view.

Two Column Layout

To split text in a two columns layout you simply need to wrap it into a div container with class “twocolumn”. Having multiple columns allows for a very versatile ad grid, and, traditionally, newspapers were in business of selling ads.babies in slings around front.There is a general rule that one line of unjustified text should have around 9-12 words. For justified text these numbers are around 10-15 words. Since some words are longer and some shorter this is not a perfect measurement. Small columns of text are easier to read than large ones. Imagine a newspaper sized line that stretched across an entire page. It would be very easy to skip a line. For justified text these numbers are around 10-15 words. Since some words are longer and some shorter this is not a perfect measuremenYou must ask yourself how to easily achieve these numbers? Don’t worry it is easy, you won’t have to count characters one by one.

Image Styles

Welcome to image alignment! The best way to demonstrate ebb and flow of various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let’s get started.

Death_to_stock_photography_community_premium_5

The rest of this paragraph is filler for sake of seeing text wrap around a right aligned image.

As you can see there should be some space above, below, and to left of image. The text should not be creeping on image. Creeping is just not right. Images need breathing room too. Let them speak like you words.

Death_to_stock_photography_community_premium_5As you can see there should be some space above, below, and to left of image. The text should not be creeping on image. Creeping is just not right. Images need breathing room too. Let them speak like you words.

Let them do their jobs without any hassle from text. In about one more sentence here, we’ll see that text moves from right of image down below image in seamless transition.

Don’t let anyone else tell you differently. In just a bit here, you should see text start to wrap below left aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

Let them do their jobs without any hassle from text. In about one more sentence here, we’ll see that text moves from right of image down below image in seamless transition.
Death_to_stock_photography_community_premium_4And now we’re going to shift things to left align. Again, there should be  plenty of room above, below, and to right of image. Just look at him there… Hey guy! Way to rock that left side. I don’t care what right aligned image says, you look great.

Don’t let anyone else tell you differently. In just a bit here, you should see text start to wrap below left aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah… Just like that. It never felt so good to be right.

And that’s a wrap, yo! You survived tumultuous waters of alignment. In just a bit here, you should see text start to wrap below right aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty.