<!DOCTYPE html>
  <html lang="en-US" dir="ltr">
  
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="Layton Utah Web Development Studio that focuses on the latest in technology including HTML5, CSS3, jQuery, Responsive Web Design and more" />
    <meta name="keywords" content="HTML5, CSS3, Web Design, Web Design Studio, jQuery, Responsive Web Design, Web Application, Mobile, Logos, Branding, Print Services" />
    
    <title>Layton Web Development - Cibgraphics Design Studio - Blog</title>
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
    <meta name="google-site-verification" content="j8Yb8ozOEQth8sR0RBw8LiqmR5oMixcJb1z2ivs4NaQ" />
    <meta name="msapplication-TileColor" content="#4c3924" /><!-- Windows 8 Start Screen Tile Color -->
    <meta name="msapplication-TimeImage" content="win8-tile-logo.png"><!-- Windows 8 Start Screen Tile Image. Size: 144x144 PNG -->
    <meta name="application-name" content="Vanilla5 Project" /> <!-- Used for Windows 8 Tile Title -->
    <meta name="format-detection" content="telephone=no" /><!-- Use <a href="tel:xxx-xxxx"> to use for mobile  -->
    
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://www.cibgraphics.com/?css=styles/style.v.1390589235" />
    <link rel="stylesheet" href="http://www.cibgraphics.com/?css=styles/blog-examples.v.1390952385" />
    <link rel="stylesheet" href="http://www.cibgraphics.com/?css=styles/print.v.1378760389"  media="print" />
    <link rel="icon" type="image/ico" href="http://cibgraphics.com/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png">
  </head>
  
  <body>
    
    <header class="masthead outer-container">
      <div class="container">
        <a href="/" class="logo">
          <img src="/images/logo.svg" alt="Cibgraphics Design Studio" width="193" height="41" />
        </a>
        <nav>
          <a href="#" class="pull"><i class="icon-reorder"></i></a>
          <ul>
            <li><a href="/services">Services</a></li>
            <li><a href="/work">My Work</a></li>
            <li class="active"><a href="/blog">Blog</a></li>
            <li><a href="/faqs">FAQs</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        </nav>
      </div>
    </header>
    
    
    <div class="main-content outer-container">
      <div class="container">
    

<h1>Blog</h1>

<section class="blog clear-fix">
  <div class="blog-articles layout-stack-tablet">
    
    <div class="clearfix layout-stack-tablet article">
      <header>
        <h2><a href="http://www.cibgraphics.com/blog/article/working-with-rem-and-viewport-sized-typography">Working with REM and Viewport Sized Typography</a></h2>
      </header>
      <div class="blog-meta clear-fix">
        <time datetime="2014-01-28T16:54:00-07:00">
          <span class="day">28</span>
          <span class="month-year">Jan 2014</span>
          <span class="comment-amount"><a href="http://www.cibgraphics.com/blog/article/working-with-rem-and-viewport-sized-typography">1 Comments</a></span>
        </time>
      </div>
    
      <article>
        <a href='http://www.cibgraphics.com/blog/article/working-with-rem-and-viewport-sized-typography'>
            <img src="http://www.cibgraphics.com/images/blog-images/viewport-sized-typography.jpg" alt="Working with REM and Viewport Sized Typography" class="blog-main-img">
        </a>
        
        <p>Ready to geek out? Ready to use some typography that isn&#8217;t based on px? Enter the world of REM and Viewport sized typography. Each one is it&#8217;s own world so we are going to take it slow, go over how they are used and some of the advantages and disadvantages of them. So let&#8217;s get started and learning.</p>
        
      </article>
      <hr />
    </div>
    
    
    
    <div class="clearfix layout-stack-tablet article">
      <header>
        <h2><a href="http://www.cibgraphics.com/blog/article/pure-css-triangles">Pure CSS Triangles</a></h2>
      </header>
      <div class="blog-meta clear-fix">
        <time datetime="2014-01-24T11:37:00-07:00">
          <span class="day">24</span>
          <span class="month-year">Jan 2014</span>
          <span class="comment-amount"><a href="http://www.cibgraphics.com/blog/article/pure-css-triangles">0 Comments</a></span>
        </time>
      </div>
    
      <article>
        <a href='http://www.cibgraphics.com/blog/article/pure-css-triangles'>
            <img src="http://www.cibgraphics.com/images/blog-images/css-triangles.jpg" alt="Pure CSS Triangles" class="blog-main-img">
        </a>
        
        <p>Ever since I redid my website a often requested tutorial is from those looking how to do pure CSS triangles. It was my most visited tutorial and one that showed up well in search rankings. That showed me that people were eager to learn how to do it. I am happy to redo the tutorial so people can read it again years later. So without further adieu read on to learn how to do pure CSS triangles.</p>
        
      </article>
      <hr />
    </div>
    
    
    
    <div class="clearfix layout-stack-tablet article">
      <header>
        <h2><a href="http://www.cibgraphics.com/blog/article/tutorials-about-to-start">Tutorials About to Start</a></h2>
      </header>
      <div class="blog-meta clear-fix">
        <time datetime="2014-01-23T12:33:00-07:00">
          <span class="day">23</span>
          <span class="month-year">Jan 2014</span>
          <span class="comment-amount"><a href="http://www.cibgraphics.com/blog/article/tutorials-about-to-start">0 Comments</a></span>
        </time>
      </div>
    
      <article>
        <a href='http://www.cibgraphics.com/blog/article/tutorials-about-to-start'>
            <img src="http://www.cibgraphics.com/images/blog-images/tutorial-start.jpg" alt="Tutorials About to Start" class="blog-main-img">
        </a>
        
        <p>So i must admit. When you launch a new site with a blog, it would be wise to actually do something with that blog. I haven&#8217;t done a great job of that. It will change. I have in mind some great articles.</p>
        
      </article>
      <hr />
    </div>
    
    
    
        
    <div class="blog-controls clear-fix">
      <div class="layout-half-left layout-stack-mobile">
        
      </div>
      <div class="layout-half-right layout-stack-mobile">
        <p class="text-right"><a href="http://www.cibgraphics.com/blog/atom/P3" class="button">Older Articles <i class="icon-angle-right icon-right"></i></a></p>
      </div>
    </div>
        
    
  </div>


  <aside class="layout-stack-tablet">
    <h3>About Me</h3>
    <p>I have been a graphic designer and front end developer since 2004. I have worked with and for companies such as LG, HTC, Overstock.com, Franklin Covey, and Huawei. I am a specialist in HTML5, CSS, and responsive web design. The web is my passion as well as web standards and new trends.</p>
    
<p>Visit my <a href="http://www.linkedin.com/in/cibgraphics" target="_blank">LinkedIn</a> profile for my experience.</p>
  </aside>

</section>

        
      </div>
    </div>
    
    <footer class="site-footer outer-container">
      <div class="container">
        <div class="legal">
          <p>Cibgraphics Design Studio Copyright &copy; 2014 All Rights Reserved</p>
          <p><a href="/projects"><i class="icon-home"></i> Cibgraphics Projects</a></p>
        </div>
        <div class="social">
          <a href="https://www.facebook.com/cibgraphics"><i class="icon-facebook"></i></a>
          <a href="https://twitter.com/cibgraphics"><i class="icon-twitter"></i></a>
          <a href="http://forrst.com/people/cibgraphics"><i class="icon-forrst"></i></a>
          <a href="http://www.flickr.com/photos/mechwd/"><i class="icon-flickr"></i></a>
          <a href="https://github.com/cibgraphics"><i class="icon-github"></i></a>
        </div>
      </div>
    </footer>
    
    <!-- Load jQuery & jQueryUI from CDN. If CDN is not available, load from local copy -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://www.cibgraphics.com/js/bgstretcher"></script>
    <script src="http://www.cibgraphics.com/js/modernizr"></script>
    <script src="http://www.cibgraphics.com/js/blueberry"></script>
    <script src="http://www.cibgraphics.com/js/selectivizr"></script>
    <script src="http://www.cibgraphics.com/js/custom"></script>
    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-1928070-1']); //Enter tracking code for your Google Analytics between the ''
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
  </body>
</html>