{"id":361,"date":"2017-05-16T11:28:59","date_gmt":"2017-05-16T11:28:59","guid":{"rendered":"http:\/\/staging.cedaro.com\/inkwise\/?page_id=361"},"modified":"2017-05-16T11:28:59","modified_gmt":"2017-05-16T11:28:59","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/staging.cedaro.com\/modwest\/style-guide\/","title":{"rendered":"Style Guide"},"content":{"rendered":"<p class=\"lead\">Inkwise provides a restrained set of typographic styles to help you organize and present your content with confidence. Consistent typography creates clear hierarchy, increased focus, and a comfortable reading experience.<\/p>\n<p>Below is just about every <abbr title=\"HyperText Markup Language\">HTML<\/abbr> element you might want to use in your blog posts. Check the source code to see the many embedded elements within paragraphs.<\/p>\n<hr \/>\n<h1>Heading 1<\/h1>\n<h2>Heading 2<\/h2>\n<h3>Heading 3<\/h3>\n<h4>Heading 4<\/h4>\n<h5>Heading 5<\/h5>\n<h6>Heading 6<\/h6>\n<p>Lorem ipsum dolor sit amet, <a title=\"test link\" href=\"#\">test link<\/a> adipiscing elit. <strong>This is strong.<\/strong> Nullam dignissim convallis est. Quisque aliquam. <em>This is emphasized.<\/em> Donec faucibus. Nunc iaculis suscipit dui. 5<sup>3<\/sup> = 125. Water is H<sub>2<\/sub>O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. <cite>The New York Times<\/cite> (That&#8217;s a citation). <span style=\"text-decoration: underline\">Underline.<\/span> Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <abbr title=\"HyperText Markup Language\">HTML<\/abbr> and <abbr title=\"Cascading Style Sheets\">CSS<\/abbr> are our tools. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. To copy a file type <code>COPY <var>filename<\/var><\/code>.<\/p>\n<p><del>Dinner&#8217;s at 5:00.<\/del><ins>Let&#8217;s make that 7.<\/ins><\/p>\n<p>This <span style=\"text-decoration: line-through\">text<\/span> has been struck.<\/p>\n<h2>List Types<\/h2>\n<h3>Definition List<\/h3>\n<dl>\n<dt>Definition List Title<\/dt>\n<dd>This is a definition list division.<\/dd>\n<dt>Definition<\/dt>\n<dd>An exact statement or description of the nature, scope, or meaning of something: <em>our definition of what constitutes poetry.<\/em><\/dd>\n<\/dl>\n<h3>Ordered List<\/h3>\n<ol>\n<li>List Item 1<\/li>\n<li>List Item 2\n<ol>\n<li>Nested list item A<\/li>\n<li>Nested list item B<\/li>\n<\/ol>\n<\/li>\n<li>List Item 3<\/li>\n<\/ol>\n<h3>Unordered List<\/h3>\n<ul>\n<li>List Item 1<\/li>\n<li>List Item 2\n<ul>\n<li>Nested list item A<\/li>\n<li>Nested list item B<\/li>\n<\/ul>\n<\/li>\n<li>List Item 3<\/li>\n<\/ul>\n<h2>Table<\/h2>\n<table>\n<thead>\n<tr>\n<th>Beatle<\/th>\n<th>Instrument<\/th>\n<th>Song<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr class=\"odd\">\n<td>John Lennon<\/td>\n<td>Guitar<\/td>\n<td>A Day In the Life<\/td>\n<\/tr>\n<tr class=\"even\">\n<td>George Harrison<\/td>\n<td>Guitar<\/td>\n<td>Old Brown Shoe<\/td>\n<\/tr>\n<tr class=\"odd\">\n<td>Paul McCartney<\/td>\n<td>Bass<\/td>\n<td>Helter Skelter<\/td>\n<\/tr>\n<tr class=\"even\">\n<td>Ringo Starr<\/td>\n<td>Drums<\/td>\n<td>Don\u2019t Pass Me By<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h2>Preformatted Text<\/h2>\n<p>Typographically, preformatted text is not the same thing as code. Sometimes, a faithful execution of the text requires preformatted text that may not have anything to do with code. For\u00a0example:<\/p>\n<pre>\u201cBeware the Jabberwock, my son!\n    The jaws that bite, the claws that catch!\nBeware the Jubjub bird, and shun\n    The frumious Bandersnatch!\u201d<\/pre>\n<h3>Code<\/h3>\n<p>Code can be presented inline, like <code>&lt;?php bloginfo('stylesheet_url'); ?&gt;<\/code>, or within a <code>&lt;pre&gt;<\/code> block.<\/p>\n<pre><code>#container { float: left; margin: 0 -240px 0 0; width: 100%; }<\/code><\/pre>\n<h2>Blockquotes<\/h2>\n<p>Let&#8217;s keep it simple.<\/p>\n<blockquote><p>Good afternoon, gentlemen. I am a HAL 9000 computer. I became operational at the H.A.L. plant in Urbana, Illinois on the 12th of January 1992. My instructor was Mr. Langley, and he taught me to sing a song. If you&#8217;d like to hear it I can sing it for you. <cite>\u2014 <a href=\"http:\/\/en.wikipedia.org\/wiki\/HAL_9000\">HAL 9000<\/a><\/cite><\/p><\/blockquote>\n<p>And here&#8217;s a bit of trailing text.<\/p>\n<hr \/>\n<h1>Advanced Styles<\/h1>\n<p>The styles shown here are advanced styles and require some HTML and CSS knowledge. In most cases, the styles are achieved by adding a class to an HTML element.<\/p>\n<h2>Buttons<\/h2>\n<pre>&lt;a class=\"button\" href=\"#\"&gt;Button Text.&lt;\/a&gt;<\/pre>\n<p><a class=\"button\" href=\"#\">Button<\/a> <a class=\"button button-alt\" href=\"#\">Alternate Button<\/a><\/p>\n<h2>Callouts<\/h2>\n<pre>&lt;p class=\"callout\"&gt;Call this text out with style.&lt;\/p&gt;<\/pre>\n<p class=\"callout\">This is an example of a callout box. Make sure <a href=\"#\">links like this<\/a> are readable.<\/p>\n<h2>Drop Caps<\/h2>\n<pre>&lt;p class=\"drop-cap\"&gt;Add drop cap to this paragraph.&lt;\/p&gt;<\/pre>\n<p class=\"drop-cap\">Some themes include drop-caps. When applied, the first letter of the paragraph is typically larger and often drops below the baseline into the line below it.<\/p>\n<h3 id=\"pull-quotes\">Typography Styles<\/h3>\n<p>To use the pull quote, you simply need to add a class of <b>pull-right<\/b> or <b>pull-left<\/b> to your content. This can be done in the Text editor view. See an example below:<\/p>\n<pre>&lt;span class=\"pull-right\"&gt;Pull this text right.&lt;\/span&gt;<\/pre>\n<p><span class=\"pull-right\">This pull quote is just hanging out on the <em>right<\/em> side of the post. Lorem ipsum dolor sit amet, consectetur.<\/span><\/p>\n<p>A pull quote (also known as a lift-out quote) is a quotation or excerpt from an article that is typically placed in a larger or distinctive typeface on the same page, serving to entice readers into an article or to highlight a key topic. The term is principally used in journalism and publishing.<\/p>\n<p>Placement of a pull quote on a page may be defined in a publication\u2019s or website\u2019s style guide. Such a typographic device may or may not be aligned with a column on the page. Some designers, for example, choose not to align the quote. In that case, the quotation cuts into two or more columns, as in the example shown.<\/p>\n<p><span class=\"pull-left\">And this pull quote is pulling text to the <em>left<\/em>, like a sir. Lorem ipsum dolor sit amet, consectetur.<\/span><\/p>\n<p>Pull quotes need not be a verbatim copy of the text being quoted; depending on a publication\u2019s house style pull quotes may be abbreviated for space and\/or paraphrased for clarity, with or without indication. There are no hard-and-fast rules for the exact formatting of pull quotes. A pull quote (also known as a lift-out quote) is a quotation or excerpt from an article that is typically placed in a larger or distinctive typeface on the same page serving to entice readers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Inkwise provides a restrained set of typographic styles to help you organize and present your content with confidence. Consistent typography creates clear hierarchy, increased focus, &hellip; <\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-361","page","type-page","status-publish","entry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/P8WyHk-5P","_links":{"self":[{"href":"https:\/\/staging.cedaro.com\/modwest\/wp-json\/wp\/v2\/pages\/361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.cedaro.com\/modwest\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/staging.cedaro.com\/modwest\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/staging.cedaro.com\/modwest\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.cedaro.com\/modwest\/wp-json\/wp\/v2\/comments?post=361"}],"version-history":[{"count":0,"href":"https:\/\/staging.cedaro.com\/modwest\/wp-json\/wp\/v2\/pages\/361\/revisions"}],"wp:attachment":[{"href":"https:\/\/staging.cedaro.com\/modwest\/wp-json\/wp\/v2\/media?parent=361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}