{"id":18,"date":"2015-03-15T15:53:52","date_gmt":"2015-03-15T15:53:52","guid":{"rendered":"https:\/\/pixelgrade.com\/demos\/adler\/?page_id=18"},"modified":"2015-03-15T15:53:52","modified_gmt":"2015-03-15T15:53:52","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/demos.pixelgrade.com\/adler\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"

You can add an introductory larger size text to your articles by simply wrapping a paragraph in a p tag with the CSS class of \u201cintro\u201d<\/a>. Put simply, larger text will usually be read before smaller text.<\/p>\n

We paid a lot of attention to getting the basics of our typography right in the new WordPress 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<\/strong>.<\/p>\n

Heading Two Formatting<\/h2>\n

D<\/span>ropcap<\/strong> can be added by wrapping the first letter of the first word in a span tag with the CSS class of \u201cdropcap\u201d<\/a>. Instead of using the body text font, we use the display font from our titles. This also ties the two elements together if the display font works well with the body text.openers.\u00a0You can also use a purely decorative font. There are thousands of decorative typefaces, and most of them aren\u2019t appropriate for use in a book\u2019s body text.<\/p>\n

\u201cBlockquotes are a great way to display and format quotations. Insert them using the \u201cquote\u201d button from the visual editor.\u201d<\/p><\/blockquote>\n

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

\n
    \n
  • We took a good long look<\/li>\n
  • At<\/li>\n
  • Unordered<\/li>\n
  • Lists.<\/li>\n<\/ul>\n
      \n
    1. Also we took a good look<\/li>\n
    2. At<\/li>\n
    3. Lists<\/li>\n
    4. Of the ordered variety.<\/li>\n<\/ol>\n<\/div>\n

      Heading Three<\/h3>\n

      Our hard work put us on the map, and our commitment to creative innovation keeps us there. We strive to put that same level of energy into everything we touch, whether building a global campaign or a better neighborhood.<\/p>\n

      \n

      To split the text in a two columns layout you simply need to wrap it into a div container with class \u201ctwocolumn\u201d. Having multiple columns allows for a very versatile ad grid, and, traditionally, news papers were in the 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.<\/p>\n

      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.<\/p>\n<\/div>\n

      Image Styles<\/h3>\n

      Welcome to image alignment!<\/strong> The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let\u2019s get started.<\/p>\n

      \"The
      The image above happens to be a centered full-width example.<\/figcaption><\/figure>\n

      Welcome to image alignment! The best way to demonstrate the ebb and flow of the various image positioning options is to nestle them snuggly among an ocean of words. Grab a paddle and let\u2019s get started.<\/p>\n

      \"Right
      Right aligned image with caption.<\/figcaption><\/figure>\n

      The rest of this paragraph is filler for the sake of seeing the text wrap around a right-aligned image. As you can see there should be some space above, below, and to the left of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like your words. As you can see there should be some space above, below, and to the left of the image. The text should not be creeping on the image. Creeping is just not right. Images need breathing room too. Let them speak like your words.<\/p>\n

      \"Right
      Right aligned image with caption.<\/figcaption><\/figure>\n

      Let them do their jobs without any hassle from the text. In about one more sentence here, we\u2019ll see that the text moves from the right of the image down below the image in a\u00a0seamless transition.<\/p>\n

      Don\u2019t let anyone\u00a0else tell you differently. In just a bit here, you should see the text start to wrap below the left aligned image and settle in nicely. There should still be plenty of room and everything should be sitting pretty. Yeah\u2026 Just like that. It never felt so good to be right.<\/p>\n","protected":false},"excerpt":{"rendered":"

      You can add an introductory larger size text to your articles by simply wrapping a paragraph in a p tag with the CSS class of \u201cintro\u201d. Put simply, larger text will usually be read before smaller text. We paid a lot of attention to getting the basics of our typography right in the new WordPress […]<\/p>\n","protected":false},"author":971,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/demos.pixelgrade.com\/adler\/wp-json\/wp\/v2\/pages\/18"}],"collection":[{"href":"https:\/\/demos.pixelgrade.com\/adler\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demos.pixelgrade.com\/adler\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demos.pixelgrade.com\/adler\/wp-json\/wp\/v2\/users\/971"}],"replies":[{"embeddable":true,"href":"https:\/\/demos.pixelgrade.com\/adler\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":0,"href":"https:\/\/demos.pixelgrade.com\/adler\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"wp:attachment":[{"href":"https:\/\/demos.pixelgrade.com\/adler\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}