Introduction

Typographical is a blog theme built on the Bootstrap framework. It is based on typography, minimalist and simple design.

Thank you for purchasing Typographical! These docs provide usage instructions for the theme. If you run into any other problems with the theme, or encounter any bugs, please contact Tutswoods directly through our website.

What's Included

Typographical comes with three different styles, six sample pages, three image-based icon packs and one css-based icon pack.

Styles

This theme comes with the following styles. styles are further explained in this doc.

Fonts

The theme uses a total of five fonts. Changing fonts is explained further in this doc.

Icon packs

This theme comes with a total of 4 icon packs. Three are icon-based icon packs and one is a css-based icon pack.

Pages

This theme comes six html pages. You can add further pages with different functionality.

  • Index/Home page
  • About page
  • Contact page
  • Portfolio page
  • Portfolio item page
  • Blog post page

File structure

  • Typographical theme
    • docs
    • themes
      • typographical
        • css
          • style.css
        • icons
          • kameleon-icons
            • Icons
          • krispicons-icons
            • Icons
          • logotypes-icons
            • Icons
            • small
              • Small icons
        • img
          • banner.jpg
      • css
        • bootstrap.css
        • bootstrap.css.map
        • bootstrap-theme.css
        • bootstrap-theme.css.map
      • js
        • bootstrap.js
      • img
        • portfolio
          • Portfolio images

      • simple-style
        • about.html
        • blog-post.html
        • contact.html
        • index.html
        • portfolio.html
        • portfolio-item.html

      • simple-hero-style
        • about.html
        • blog-post.html
        • contact.html
        • index.html
        • portfolio.html
        • portfolio-item.html

      • sidebar-style
        • about.html
        • blog-post.html
        • contact.html
        • index.html
        • portfolio.html
        • portfolio-item.html

      • sidebar-hero-style
        • about.html
        • blog-post.html
        • contact.html
        • index.html
        • portfolio.html
        • portfolio-item.html
  • HTML structure

    Typographical makes most out of the twitter bootstrap framework's grid system.

    A note on styles

    Typographical comes with four styles, in the documentation we will use other words to refer to these styles such as simple styles - which refers to the default simple style and simple hero style, Sidebar styles - which refers to the default sidebar style and the sidebar hero style, and Hero styles, which refers to the simple hero style and sidebar hero style.

    Beware that there is a difference between sidebar styles and sidebar style, likewise there is also a difference between simple styles and simple style.

    HTML structure for simple styles

    In a simple style page, for every different content, we create a new container with a row and inside it a column in which we put our content, For example in a blog post list, for every blog post we would create a separate container with column inside a row in which we would put the blog post's heading and meta data. The default column for content used in the simple style is a combination of col-lg and col-md, which is col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1.

    Below is a generic page code for a simple style page.

    <div class="container">
     <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
       <h1>Hello there!</h1>
       <p>Lorem ipsum dolor is met.</p>
      </div>
     </div>
    </div>
    

    We use the offsets in order to center the content. This way of displaying content is used in the Simple style and the Simple-Hero style.

    HTML structure for sidebar style

    In sidebar style instead of using many containers for each new content, we have one main container with one row with two columns. The main content has a col-lg-8 column and the sidebar has a col-md-4 column.

    <div class="container">
     <div class="row">
      <div class="col-lg-8">
       <h1>Hello</h1>
       <p>This is the main content column</p>
      </div>
      
      <div class="col-md-4">
       <h1>Hello</h1>
       <p>This is the sidebar column</p>
      </div>
     </div>
    </div>
    

    Header

    The header consists of the navigation menu and the logo.

    The header has a navigation menu with a logo and is aligned using col-lg-8 and col-md-10 columns with offsets of col-lg-offset-2 and col-md-offset-1

    Simple header

    The simple header is used in the simple style and sidebar style.

     <h1 class="logo text-center"><a href="index.html">Blogster</a></h1>
     <div class="spacing"></div>
      <div class="container">
       <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
         <div class="navigation-container">
          <ul class="navigation-menu">
           <li class="active"><a href="index.html">Home</a></li>
           <li><a href="about.html">About</a></li>
           <li><a href="contact.html">Contact</a></li>
           <li><a href="portfolio.html">Portfolio</a></li>
          </ul>
        </div>
       </div>
      </div>
     </div>
    

    Hero header

    The hero header is the same as the simple header except that it is wraped in a div with a hero class. The hero header is used in the hero styles.


     <div class="hero">	
      <h1 class="logo text-center"><a href="index.html">Blogster</a></h1>
      <div class="spacing"></div>
       <div class="container">
        <div class="row">
         <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
          <div class="navigation-container">
           <ul class="navigation-menu">
            <li class="active"><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
           </ul>
         </div>
        </div>
       </div>
      </div>
     </div>
    

    Helper Classes

    Helper classes help you get things done faster.

    Typographical comes with various different helper. Below is a table for quick reference.

    Helper classes quick reference table
    Helper Classes Function
    .img-responsive Makes a image responsive
    .image-with-shadow-and-border Adds shadow and border with radius to a image
    .input-with-radius Adds radius to a input
    .img-center Center a image
    .text-align-left Align text to the left
    .inline-block Add a display property with a value of inline-block
    .list-with-no-underlined-links remove underlines from links in a list
    .spacing Gives space by adding margin
    .mb Add bottom margin
    .mt Add top margin
    .mbzero Remove bottom margin
    .mtzero Remove top margin
    .a-with-no-underlined-link Remove underline from link
    .a-on-hover-no-color-change No color change of links on hover
    .montserrat Use montserrat font
    .bitter Use bitter font
    .georgia Use georgia font
    .enriqueta Use enriqueta font
    .bold Make text bold
    .text-white Change text color to white
    .uppercase Make text uppercase
    .right-vertical-hr Add a vertical right border, equivalent of a horizontal <hr>
    .leftt-vertical-hr Add a vertical left border, equivalent of a horizontal <hr>

    Components

    Components provide a better of doing things.

    Typographical comes with various different helper. Below is a table for quick reference.

    Box

    The box component lets you display information inside a box with a title above it.

    Box can also be used in a sidebar.

     <div class="box mb">
      <p class="title-container"><span>Hello there</span></p>
      <img src="http://i.imgur.com/Fw5hY0H.jpg" class="img-circle img-center">
      <h2 class="text-center">I'm muneeb.</h2>
      <p class="text-center mbzero">A artistic web developer.</p>
     </div>
    

    Popular posts component lets you showcase your popular posts in a professional way by overlaying the post title over the post image thumbnail with a dark effect.

     <div class="popular-post">
      <img src="http://i.imgur.com/mEDdQ2K.png">
       <a class="overlay" href="#">
        <h2 class="montserrat">Man must explore and this is exploration at its greatest</h2>
       </a>
     </div>
    

    Showcasing info

    You can showcase info - such as services you provide, products features, in a more elegant way by using the showcasing info component of the typographical theme. You can also provide visual representation while using showcase info component by using the icons typographical comes with.

     <img src="./icons/kameleon-icons/Settings-2.png" class="info-thumb" alt="image">
     <div class="info">
      <h4 class="strong montserrat">Works like a charm</h4>
      <p class="inline-block">Lorem ipsum dolor sit amet, eum ne placerat principes. Mei purto explicari eu, duo nostrud appetere apeirian eu.</p>
     </div>
    

    Portfolio

    You can use the portfolio component to showcase your work. You can show a preview of the work you did as a image, which will have a nice effect on hover.

     <div class="col-md-4 portfolio">
      <a href="work.html">
       <img src="../img/portfolio/folio03.png" class="img-responsive mb">
      </a>
     </div>
    

    Buttons

    Typographical comes with four buttons. Light to dark button, Blue to dark button, Green to dark button and icon button. To use the first three buttons you assign the bootstrap button base class .btn to a div, then you assign typographical button base class theme-btn and finally you assign the class of the typographical button you want to use. - .btn-light-dark, .btn-blue-dark, .btn-green-dark

    For the icon button you use a image icon from the icon packs that comes with typographical and assign it to the icon button class - icon-btn

    <div class="btn theme-btn btn-light-dark">Lorem Ipsum</div>
    <div class="btn theme-btn btn-blue-dark">Lorem Ipsum</div>
    <div class="btn theme-btn btn-green-dark">Lorem Ipsum</div>
    
    <div class="btn theme-btn btn-light-dark btn-lg">Lorem Ipsum</div>
    <div class="btn theme-btn btn-blue-dark btn-lg">Lorem Ipsum</div>
    <div class="btn theme-btn btn-green-dark btn-lg">Lorem Ipsum</div>
    
    <a href="#"><img src="../icons/logotypes-icons/small/Facebook-circle.png" class="icon-btn" alt="image"></a>
    <a href="#"><img src="../icons/logotypes-icons/small/Twitter-circle.png" class="icon-btn" alt="image"></a>
    <a href="#"><img src="../icons/logotypes-icons/small/Dribble.png" class="icon-btn" alt="image"></a>
    

    Check the pages for solid concept of each component

    Be sure that you check each page typographical comes with as some of the pages show each of the component documented here in action and how it is really used within the twitter bootstrap framework.

    How to

    Change the hero header background.

    By default, Typographical comes with a background taken from unsplash for its hero styles. You can also change it too, There are two ways to do this; You can either do it by changing the hero class background-image property value from the typographical main.css or by settings a new background using inline CSS for the div which has hero as its class.

    Change fonts.

    Below is a table that shows you the line numbers of lines with the font-family property in the typographical main style.css file. You can change the font for each of the element classified below by changing the value of it's font-family property.

    Reference table for usage of font-family property
    Line Default font Font used by
    Line 15 Georgia body
    Line 23 Arial input, textarea
    Line 28 Bitter h1
    Line 42 Bitter h2, h3, h4, h5, h6
    Line 53 Pacifico .logo
    Line 124 Enriqueta .quote
    Line 149 Montserrat .date (on blog post headings)
    Line 175 Montserrat .navigation-menu
    Line 232 Bitter .box .title-container
    Line 376 Montserrat .meta-data (blog posts metas such as likes,comments,date)
    Line 391 Arial .theme-btn