j1_template_mde 2018.4.10

data/lib/starter_web/pages/start/roundtrip/300_typography.adoc

@@ -0,0 +1,518 @@
+---
+title:                                  Roundtrip
+tagline:                                Typography - A crucial Branding Element
+description:                            J1 Template Roundtrip - Typography - A crucial Branding Element
+
+tags:                                   [ Template, Typography ]
+index:                                  [ Roundtrip, Typography ]
+resources:                              []
+regenerate:                             false
+permalink:                              /pages/start/roundtrip/typography/
+
+resource_options:
+
+  - masthead:
+      opacity:                          0.2
+      slides:
+        - url:                          /assets/images/pages/roundtrip/typography-1920.jpg
+          alt:                          Photo by Alice Donovan Rousel on Unsplash
+          caption:                      Photo by Alice Donovan Rouse on Unsplash
+          caption_href:                 https://unsplash.com/alicekat/portfolio
+          caption_color:                rgba(255, 255, 255, 0.8)
+---
+
+// Enable the Liquid Preprocessor
+//
+:page-liquid:
+
+// Set other global page attributes here
+// -------------------------------------------------------------------
+
+
+{% comment %} Liquid procedures
+--------------------------------------------------------------- {% endcomment %}
+{% capture set_env_entry_document %}themes/{{site.template.name}}/procedures/global/set_env_entry_document.proc{%endcapture%}
+
+
+// NOTE: Initialize entry document paths
+//
+{% include {{set_env_entry_document}} init_folders=all %}
+
+// Load tags and urls
+//
+include::{includedir}/attributes.asciidoc[tag=tags]
+include::{includedir}/attributes.asciidoc[tag=urls]
+
+// Additional Asciidoc page attributes goes here
+//
+
+
+== Typography
+
+Typography serves as one the most crucial branding elements for any business.
+Typography matters for any media presenting text - for any sort of reading.
+Text will take on an important role of acting not only as plain text but will
+also serve as something like images.
+
+Get ready for the big, the bold and the beautiful!
+
+
+
+//////////
+=== Mixing font sizes
+
+See the example below. Two cards are tied together by a title of *Your Topic*.
+The *taglines* are different and focus on *different* things. Because the title
+is on each and every card of such a group, it makes sense to give the *upper*
+level headline a smaller font size than the *tagline* that decribes different
+*features*.
+
+To not loose the focus on reading the text, font icons are used to support what
+a card decribes to get the readers orientated better. The left one has a
+camera symbol, the right one a speaker. The reader can expect two features:
+video and audio.
+
+++++
+<div id="roundtrip_example_panel" class="mt-2 mb-3"></div>
+++++
+
+The *body* text is the *smallest* in size. On one hand to save space on other
+hand the readers know in general what they can can expect to read about. To
+focus the body text, it's positioned in the middle and centered for optimal
+placement. A final quote text followed by a button in card footer guides the
+reader to a page to read more.
+
+This simple example shows that content, placement and design of text was not
+choosen per chance. It is a good idea to spend some time on text and design.
+
+//////////
+
+
+
+=== Responsive Text
+
+One common flaw seen in many templates and frameworks (sadly to say: the same
+to Bootstrap) is a lack of support for truly *responsive text*. While elements
+on a page resize fluidly, text still resizes on a fixed basis. To avoiding this
+issue, especially for heavily text focussed pages, J1 Template supports styles
+that fluidly scales text size and line-height to optimize readability for the
+user.
+
+Below you find an example how text behaves if defined on a fixed basis - what
+you'll see quite often. Change the size of your Browser Window to see what
+will happen in terms of responsiveness.
+
+++++
+<div class="col-md-12 col-sm-12 col-xs-12">
+  <div class="card mb-4 raised-z3">
+    <div class="content">
+      <h4 class="notoc card-title">The Extremes of Good and Evil</h4>
+      <h6 class="notoc category text-gray mb-3">Cicero, Paragraph 1.10.32 · Translation by H. Rackham, Issue 1914 - De Finibus</h6>
+      <p class="card-description toggle-description no-r-text">
+        But I must explain to you how all this mistaken idea of denouncing
+        pleasure and praising pain was born and I will give you a complete
+        account of the system, and expound the actual teachings of the great
+        explorer of the truth, the master-builder of human happiness.
+        <br/><br/>
+        No one rejects, dislikes, or avoids pleasure itself, because it is
+        pleasure, but because those who do not know how to pursue pleasure
+        rationally encounter consequences that are extremely painful. Nor
+        again is there anyone who loves or pursues or desires to obtain pain
+        of itself, because it is pain, but because occasionally circumstances
+        occur in which toil and pain can procure him some great pleasure.
+        <br/><br/>
+        To take a trivial example, which of us ever undertakes laborious
+        physical exercise, except to obtain some advantage from it? But who
+        has any right to find fault with a man who chooses to enjoy a pleasure
+        that has no annoying consequences, or one who avoids a pain that
+        produces no resultant pleasure?
+      </p>
+      <div class="card-footer">
+        <button type="button" name="toggle-r-text" class="btn btn btn-danger btn-raised btn-round btn-flex">
+          <i class="toggle-button mdi mdi-toggle-switch-off mdi-lg mdi-md-indigo-50 mr-1"></i>
+          Toggle rtext
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  $('button[name="toggle-r-text"]').on('click', function (e) {
+    $('p.toggle-description').toggleClass('no-r-text r-text-300');
+    $('.toggle-button').toggleClass('mdi-toggle-switch-off mdi-toggle-switch');
+  });
+</script>
+++++
+
+To see Responsive Text `r-text` in action, use the button above to toggle on
+and off Responsive Text to see the difference!
+
+=== Scaling Responsive Text
+
+Responsive Text comes in five different scale factors in a range from 100 to
+500. Scaling `r-text` gives you the flexibility to use `r-text` everywhere. Or
+you can offer different text sizes of your Web for vistors having a visual
+handicap or reading disabilities.
+
+++++
+<div class="col-md-12 col-sm-12 col-xs-12">
+  <div class="card mb-4 raised-z3">
+    <div class="content">
+      <h4 class="notoc card-title">The Extremes of Good and Evil</h4>
+      <h6 class="notoc category text-gray mb-3">Cicero, Paragraph 1.10.33 · Translation by H. Rackham, Issue 1914 - De Finibus</h6>
+      <p class="card-description scale-description r-text-200">
+        On the other hand, we denounce with righteous indignation and dislike men who
+        are so beguiled and demoralized by the charms of pleasure of the moment, so
+        blinded by desire, that they cannot foresee the pain and trouble that are
+        bound to ensue; and equal blame belongs to those who fail in their duty through
+        weakness of will, which is the same as saying through shrinking from toil and pain.
+        <br/><br/>
+        These cases are perfectly simple and easy to distinguish. In a free hour, when
+        our power of choice is untrammelled and when nothing prevents our being able to
+        do what we like best, every pleasure is to be welcomed and every pain avoided.
+        But in certain circumstances and owing to the claims of duty or the obligations
+        of business is will frequently occur that pleasures have to be repudiated and
+        annoyances accepted. The wise man therefore always holds in these matters to
+        this principle of selection: he rejects pleasures to secure other greater
+        pleasures, or else he endures pains to avoid worse pains.
+      </p>
+      <div class="card-footer">
+        <button type="button" name="scale-r-text" class="btn btn btn-danger btn-raised btn-round btn-flex">
+          <i class="scale-button mdi mdi-arrow-up mdi-lg mdi-md-indigo-50 mr-1"></i>
+          Scale rtext
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  $('button[name="scale-r-text"]').on('click', function (e) {
+    $('p.scale-description').toggleClass('r-text-200 r-text-300');
+    $('.scale-button').toggleClass('mdi-arrow-up mdi-arrow-down');
+  });
+</script>
+++++
+
+To see `r-text` scaling in action, click on the button above to resize
+the text from `r-text` level *200* to *300* back and forth. And again: resize
+your Browser and watch the size of this text body change to see responsiveness
+of the text in action.
+
+=== Scale factors
+
+As mentioned, `r-text` comes in five levels of size. The base of `r-text` are
+the Fibonacci numbers extracted from the Fibonacci series. These numbers are
+the most popular division ratios in typography. When speaking of the golden
+ratio (1: 1.618) in typography and graphic design, the Fibonacci numbers are
+usually the base.
+
+The Fibonacci series are translated into CSS Media queries and scale a base
+font size accordingly. Additionaly, the resulting font scale series have
+multipliers (scale factors) ranging from 0.5 (50%) up to 1.0 (100%) of the
+base.
+
+That way, five series are available by the five scale factors. See the following
+table how `r-text` scales.
+
+[cols="3,2,7a", options="header", role="table-responsive mb-5"]
+|===============================================================================
+|Property | Factor |Example text
+
+|`r-text-100`
+|0.5
+|
+[role="r-text-100"]
+Lorem ipsum dolor sit amet, consetetur sadipscing
+elitr, sed diam nonumy eirmod tempor erat, sed diam
+voluptua.
+
+|`r-text-200`
+|0.7
+|
+[role="r-text-200"]
+Lorem ipsum dolor sit amet, consetetur sadipscing
+elitr, sed diam nonumy eirmod tempor erat, sed diam
+voluptua.
+
+|`r-text-300`
+|0.8
+|
+[role="r-text-300"]
+Lorem ipsum dolor sit amet, consetetur sadipscing
+elitr, sed diam nonumy eirmod tempor erat, sed diam
+voluptua.
+
+|`r-text-400`
+|0.9
+|
+[role="r-text-400"]
+Lorem ipsum dolor sit amet, consetetur sadipscing
+elitr, sed diam nonumy eirmod tempor erat, sed diam
+voluptua.
+
+|`r-text-500`
+|1.0
+|
+[role="r-text-500"]
+Lorem ipsum dolor sit amet, consetetur sadipscing
+elitr, sed diam nonumy eirmod tempor erat, sed diam
+voluptua.
+
+|===============================================================================
+
+
+=== Text in Action
+
+User interfaces (UI) enable vistors to interact with a page, explore things
+on their own - playing around. Presenting a service or a product in simple nav
+elements may help to reduce to space needed - more can be placed on page. On
+other hand, navigation elements present by playful and interactive means.
+
+The next two simple examples shows you what type of UI's may helpful to present
+a bunch of information *on a small footprint*: tabbed text by using Bootstrap's
+*Nav Pills*.
+
+The design for the Bootstrap *nav pills* were change into MD Design. As all
+elements available with J1 Template, the _Meterial Design_ color palette is
+used. All Bootstrap base classes can be used to colorize:
+
+[cols="5,7a", options="header", role="table-responsive mb-5"]
+|===============================================================================
+|Property | Example
+
+|`nav-pills-primary`
+|
+++++
+<button type="button" class="btn btn-primary btn-raised btn-round">
+  color example
+</button>
+++++
+
+|`nav-pills-secondary`
+|
+++++
+<button type="button" class="btn btn-secondary btn-raised btn-round">
+  color example
+</button>
+++++
+
+|`nav-pills-info`
+|
+++++
+<button type="button" class="btn btn-info btn-raised btn-round">
+  color example
+</button>
+++++
+
+|`nav-pills-success`
+|
+++++
+<button type="button" class="btn btn-success btn-raised btn-round">
+  color example
+</button>
+++++
+
+|`nav-pills-warning`
+|
+++++
+<button type="button" class="btn btn-warning btn-raised btn-round">
+  color example
+</button>
+++++
+
+|`nav-pills-danger`
+|
+++++
+<button type="button" class="btn btn-danger btn-raised btn-round">
+  color example
+</button>
+++++
+
+|===============================================================================
+
+==== Plain Pills
+
+++++
+<div class="row mt-3">
+  <div class="col-md-6">
+
+    <h5 class="notoc mb-3">Horizontal Tabs</h5>
+    <ul class="nav nav-pills nav-pills-danger mt-2">
+      <li class="nav-item"><a class="nav-link active" href="#pill1" data-toggle="tab" aria-expanded="true">Detracto</a></li>
+      <li class="nav-item"><a class="nav-link" href="#pill2" data-toggle="tab" aria-expanded="false">Facer</a></li>
+      <li class="nav-item"><a class="nav-link" href="#pill3" data-toggle="tab" aria-expanded="false">Dolor</a></li>
+    </ul>
+
+    <div class="tab-content tab-space">
+      <div class="tab-pane active" id="pill1">
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua.
+      </div>
+      <div class="tab-pane" id="pill2">
+        Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint
+        dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo
+        apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae
+        eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius
+        voluptatum pro te, saepe laoreet in est.
+      </div>
+      <div class="tab-pane" id="pill3">
+        Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique
+        omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum
+        his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo
+        cu primis delenit.
+      </div>
+    </div>
+  </div>
+
+  <div class="col-md-6">
+    <h5 class="notoc mb-3">Vertical Tabs</h5>
+    <div class="row">
+
+      <div class="col-md-4">
+        <ul class="nav nav-pills nav-pills-primary nav-stacked mt-2">
+          <li class="nav-item"><a class="nav-link active" href="#tab1" data-toggle="tab">Detracto</a></li>
+          <li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">Facer</a></li>
+          <li class="nav-item"><a class="nav-link" href="#tab3" data-toggle="tab">Dolor</a></li>
+        </ul>
+      </div>
+
+      <div class="col-md-8">
+        <div class="tab-content">
+          <div class="tab-pane active" id="tab1">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+            voluptua.
+          </div>
+          <div class="tab-pane" id="tab2">
+            Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint
+            dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo
+            apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae
+            eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius
+            voluptatum pro te, saepe laoreet in est.
+          </div>
+          <div class="tab-pane" id="tab3">
+            Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique
+            omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum
+            his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo
+            cu primis delenit.
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+++++
+
+==== Pills + Icons
+
+++++
+<div class="row mt-3">
+  <div class="col-md-6">
+  <h5 class="notoc">Horizontal Tabs</h5>
+    <ul class="nav nav-pills nav-pills-danger nav-pills-icons mt-2" role="tablist">
+
+      <li class="nav-item">
+        <a class="nav-link active" href="#h-tabs-1" role="tab" data-toggle="tab" aria-expanded="false">
+          <i class="mdi mdi-bluetooth mt-1 mb-2"></i> Detracto
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#h-tabs-2" role="tab" data-toggle="tab" aria-expanded="false">
+          <i class="mdi mdi-bluetooth-connect mt-1 mb-2"></i> Facer
+        </a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#h-tabs-3" role="tab" data-toggle="tab" aria-expanded="true">
+          <i class="mdi mdi-bluetooth-audio mt-1 mb-2"></i> Dolor
+        </a>
+      </li>
+    </ul>
+    <div class="tab-content tab-space">
+      <div class="tab-pane" id="h-tabs-1">
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua.
+      </div>
+      <div class="tab-pane" id="h-tabs-2">
+        Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint
+        dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo
+        apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae
+        eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius
+        voluptatum pro te, saepe laoreet in est.
+      </div>
+      <div class="tab-pane active" id="h-tabs-3">
+        Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique
+        omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum
+        his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo
+        cu primis delenit.
+      </div>
+    </div>
+  </div>
+  <div class="col-md-6">
+  <h5 class="notoc">Vertical Tabs</h5>
+    <div class="row">
+      <div class="col-md-4">
+        <ul class="nav nav-pills nav-pills-icons nav-stacked mt-2" role="tablist">
+
+          <li class="nav-item">
+            <a class="nav-link active" href="#v-tabs-1" role="tab" data-toggle="tab" aria-expanded="true">
+              <i class="mdi mdi-bluetooth mt-1 mb-2"></i> Detracto
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#v-tabs-2" role="tab" data-toggle="tab" aria-expanded="false">
+              <i class="mdi mdi-bluetooth-connect mt-1 mb-2"></i> Facer
+            </a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="#v-tabs-3" role="tab" data-toggle="tab" aria-expanded="false">
+              <i class="mdi mdi-bluetooth-audio mt-1 mb-2"></i> Dolor
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="col-md-8">
+        <div class="tab-content">
+          <div class="tab-pane active" id="v-tabs-1">
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+            eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+            voluptua.
+          </div>
+          <div class="tab-pane" id="v-tabs-2">
+            Vel justo debitis neglegentur an. Facer doctus inimicus et est, sed ea sint
+            dicant. Per soleat pertinax complectitur et, pro no porro cetero, mea probo
+            apeirian torquatos ut. Habeo dicat errem quo et, ut democritum sententiae
+            eloquentiam cum. Sit ad oblique inciderint reformidans, homero albucius
+            voluptatum pro te, saepe laoreet in est.
+          </div>
+          <div class="tab-pane" id="v-tabs-3">
+            Equidem recteque sea et. Per detracto iracundia ea, duo nusquam denique
+            omittantur in. Nam ex quas saperet, solum convenire vel in, dicant atomorum
+            his ne. Putant bonorum in nam, nostrud neglegentur accommodare eam ad. Quo
+            cu primis delenit.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+++++
+
+
+== What's next?
+
+Have you enjoyed playing with text? We hope so. But more on can the J1 do for
+your web pages. With the examples on that page, icons were used to support the
+meaning what was grouped as text.
+
+J1 template supports 2 popular icons font sets:
+
+* Material Design Icons
+* FontAwesome Icons V5
+
+Would you like learn more about icons? The next example page focus on what's
+possible using link:{roundtrip-icon-fonts}[Material Design Icons].