<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="Spincommerce Guía de Estilos">
    <meta name="keywords" content="">
    <meta name="author" content="Spincommerce">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300,600,400italic' rel='stylesheet' type='text/css'>

    <title>
      Scaffolding &middot; Spincommerce
    </title>

    <link rel="stylesheet" href="/spincommerce-style-guide/docs.css">

    <!-- Favicons -->
    <link rel="apple-touch-icon-precomposed" href="/spincommerce-style-guide/img/apple-touch-icon-precomposed.png">
    <link rel="icon" href="/spincommerce-style-guide/favicon.ico">
  </head>
  <body>

    <header class="masthead">
      <div class="row">
        <a href="/spincommerce-style-guide/" class="masthead-logo">
          <span class="isotype"></span>
          SpinCommerce
        </a>

        <nav class="masthead-nav">
          <a  href="/spincommerce-style-guide/scaffolding">Docs</a>
          <a  href="/spincommerce-style-guide/about">About</a>
          <a href="https://github.com/Corpspin/spincommerce-style-guide" target="_blank">GitHub</a>
        </nav>
      </div>
    </header>

    

    <div class="row">
      <div class="docs-layout">
  <div class="medium-3 column">
    
      <nav class="menu docs-menu">
  <a class="menu-item selected" href="/spincommerce-style-guide/scaffolding/">
    Scaffolding
  </a>
  <a class="menu-item " href="/spincommerce-style-guide/layout/">
    Layout
  </a>
  <a class="menu-item " href="/spincommerce-style-guide/type/">
    Type
  </a>
  <a class="menu-item " href="/spincommerce-style-guide/buttons/">
    Buttons
  </a>
  <a class="menu-item " href="/spincommerce-style-guide/icons/">
    Icons
  </a>
  <a class="menu-item " href="/spincommerce-style-guide/utilities/">
    Utilities
  </a>
   <a class="menu-item " href="/spincommerce-style-guide/guidelines/">
    Code guidelines
  </a>
</nav>

<nav class="menu docs-menu">
  <a class="menu-item " href="/spincommerce-style-guide/branding/">
    Branding
  </a>
  <a class="menu-item " href="/spincommerce-style-guide/colors/">
    Colors
  </a>
  <a class="menu-item " href="/spincommerce-style-guide/fonts/">
   Fonts
  </a>

</nav>

    
  </div>
  <div class="medium-9 column markdown-body">
    <h1 class="page-title">
      Scaffolding
    </h1>
    <div class="markdown-body">
      <p>Scaffolding refers to the global resets and dependencies that SpinCommerce is built upon.</p>

<h2 id="contents">Contents</h2>

<ul id="markdown-toc">
  <li><a href="#contents" id="markdown-toc-contents">Contents</a></li>
  <li><a href="#html5-doctype" id="markdown-toc-html5-doctype">HTML5 doctype</a></li>
  <li><a href="#box-sizing" id="markdown-toc-box-sizing">Box-sizing</a></li>
  <li><a href="#built-on-normalize" id="markdown-toc-built-on-normalize">Built on Normalize</a></li>
  <li><a href="#based-on-foundation-5" id="markdown-toc-based-on-foundation-5">Based on Foundation 5</a></li>
</ul>

<h2 id="html5-doctype">HTML5 doctype</h2>

<p>SpinCommerce makes use of certain HTML elements and CSS properties that <strong>require</strong> the use of the HTML5 doctype. Include it at the beginning of all your pages.</p>

<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"es"</span><span class="nt">&gt;</span>
  ...
<span class="nt">&lt;/html&gt;</span></code></pre></figure>

<h2 id="box-sizing">Box-sizing</h2>

<p>We reset <code class="highlighter-rouge">box-sizing</code> to <code class="highlighter-rouge">border-box</code> for every element in SpinCommerce. This allows us to more easily assign widths to elements that also have <code class="highlighter-rouge">padding</code> and <code class="highlighter-rouge">border</code>s.</p>

<h2 id="built-on-normalize">Built on Normalize</h2>

<p>For improved cross-browser rendering, we use <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> to correct small inconsistencies across browsers and devices.</p>

<h2 id="based-on-foundation-5">Based on Foundation 5</h2>

<p>SpinCommerce is based on Foundation 5. <a href="http://foundation.zurb.com/sites/docs/v/5.5.3/">Read Docs</a>.</p>

    </div>
  </div>
</div>


      <footer class="footer column small-12">
        Copyright SpinCommerce 2016.<br>
        Created and maintained by SpinCommerce team. <strong>Currently v0.1.</strong>
      </footer>
    </div>

    <script src="/spincommerce-style-guide/js/anchor.min.js"></script>
    <script>
      var selector = '.markdown-body h2, .markdown-body h3';
      anchors.options = {
        placement: 'left',
        class: 'anchor-link'
      };
      anchors.add(selector);
    </script>
  </body>
</html>
