gridout

gridout.markdown

gridout

A Pen by Gustavo Santamaría on CodePen.

License.

index.html

<div class="layout">
  <!-- header -->
  <div class="header custom-border custom-background">
    
    <h1 class="center">Gridout</h1>
    <p class="center">0.0.1</p>

  </div>
  
  <!-- sidebar -->
  <div class="sidebar contentList custom-border">
    <h5>Table of contents:</h5>
    <ul>
      <li>
        <a href="#gettingStarted">
          Getting started
        </a>
      </li>
      <li>
        <a href="#layoutHelpers">
          CSS helpers
        </a>
      </li>
      <li>
        <a href="#columnSystem">
          Column
        </a>
      </li>
      <li>
        <a href="#responsiveColumns">
          Responsive
        </a>
      </li>
      <li>
        <a href="#columnPosition">
          Custom column position
        </a>
      </li>
    </ul>
  </div>
  
  <div class="content">
    <div class="container">
      
      <!-- getting started -->
      <div class="grid" id="gettingStarted">
        <h2 class="col-12 ">
          Getting Started:
        </h2>
        <p class="col-12">
          Gridout is a 12 column layout that uses <b>CSS grid</b> technology. <br>Download the CSS stylesheet, add the appropriate classes to your markup, and start building beautiful UI.
        </p>
      </div>
      <hr>
      
      <!-- layout system 
      <div class="grid" id="layoutSystem">
        <h2 class="col-12">
          Layout system:
        </h2>
        <p class="col-12">
          By default <b>.layout</b> offers 4 components to build a basic interface: <br>
        </p>
        <p class="col-12 center-center">
          <span>.header</span>
          <span>.sidebar</span>
          <span>.content</span>
          <span>.footer</span>
        </p>

        <div class="col-12 browser-top">
          <div>Gridout layout system</div>
          <div>-</div>
          <div>x</div>
        </div>

        <div class="col-12 browser">
          <div class="layout layout-example">
            <div class="header center-center">
              <span>header</span>
            </div>
            <div class="sidebar center-center">
              <span>sidebar</span>
            </div>
            <div class="content center-center">
              <span>content</span>
            </div>
            <div class="footer center-center">
              <span>footer</span>
            </div>
          </div>
        </div>

        <div class="col-12">
          <xmp class="bgcode">
            <div class="layout">
              <div class="header">header</div>
              <div class="sidebar">sidebar</div>
              <div class="content">content</div>
              <div class="footer">footer</div>
            </div>
          </xmp>
        </div>
      </div>
      <hr>-->

      <!-- layout helpers -->
      <div class="grid" id="layoutHelpers">
        <h2 class="col-12">
          CSS helpers:
        </h2>
        <p class="col-12">
          Default classes and styles designed to help you create more eye-catching and friendly UI Layouts.
        </p>
        
        <!-- font family -->
        <h3 class="col-12">
          Open Sans font-family from Google Fonts.
        </h3>
        <p>
          It was optimized for print, web, and mobile interfaces, and has excellent legibility characteristics in its letterforms.
        </p>
        <div class="col-6 col-sm-12">
          <h1>Header 1</h1>
          <h2>Header 2</h2>
          <h3>Header 3</h3>
          <h4>Header 4</h4>
          <h5>Header 5</h5>
          <h6>Header 6</h6>
          <p>Paragraph</p>
          <b>Bold</b>
        </div>
        <div class="col-6 col-sm-12">
          <h1><i>Header 1</i></h1>
          <h2><i>Header 2</i></h2>
          <h3><i>Header 3</i></h3>
          <h4><i>Header 4</i></h4>
          <h5><i>Header 5</i></h5>
          <h6><i>Header 6</i></h6>
          <p><i>Paragraph</i></p>
          <b><i>Bold</i></b>
        </div>
        
        <!-- Elements positioning -->
        <h3 class="col-12">
          Elements positioning and styling.
        </h3>
        
        <div class="col-4">
          <p class="font-light">.font-light</p>
          <xmp class="bgcode">
  .font-light {
    font-weight: 300;
  }
          </xmp>
        </div>
        
        <div class="col-4">
          <p class="font-regular">.font-regular</p>
          <xmp class="bgcode">
  .font-regular {
    font-weight: 400;
  }
          </xmp>
        </div>
        
        <div class="col-4">
          <p class="font-heavy">.font-heavy</p>
          <xmp class="bgcode">
  .font-heavy {
    font-heavy: 400;
  }
          </xmp>
        </div>
        
        <div class="col-4">
          <p class=".left">.left</p>
          <xmp class="bgcode">
  .left {
    text-align: left;
  }
          </xmp>
        </div>
        
        <div class="col-4">
          <p class="center">.center</p>
          <xmp class="bgcode">
  .center {
    text-align: center;
  }
          </xmp>
        </div>

        <div class="col-4">
          <p class="right">.right</p>
          <xmp class="bgcode">
  .right {
    text-align: right;
  }
          </xmp>
        </div>
        
        <div class="col-4">
          <p>.justify</p>
          <xmp class="bgcode">
  .center-center {
    text-align: justify;
  }
          </xmp>
        </div>
        
        <div class="col-4">
          <p>.container</p>
          <xmp class="bgcode">
  .container {
    width: 80%;
    margin: 1.125rem auto;
  }
          </xmp>
        </div>
        
      </div>
      <hr>

      <!-- Column system -->
      <div class="grid" id="columnSystem">
        <h2 class="col-12">
          Column system:
        </h2>
        <p class="col-12">
          If you have ever used another responsive framework, the column system will seem familiar.
        </p>
        <div class="bg1 col-4 center-center">
          <span>4 of 12</span>
        </div>
        <div class="bg1 col-3 center-center">
          <span>3 of 12</span></div>
        <div class="bg1 col-5 center-center">
          <span>5 of 12</span>
        </div>
        <!-- code -->
        <div class="col-12">
          <xmp class="bgcode">
            <div class="grid">
              <div class="col-4">4 of 12</div>
              <div class="col-3">3 of 12</div>
              <div class="col-5">5 of 12</div>
            </div>
          </xmp>
        </div>
      </div>
      <hr>

      <!-- responsive columns -->
      <div class="grid" id="responsiveColumns">
        <h2 class="col-12">
          Responsive columns:
        </h2>

        <!-- description -->
        <p class="col-12">
          Available break points are:
        </p>
        <ul class="col-12">
          <li>
            <b>col-#/col-sm-#</b> Landscape phones, 576px and up.
          </li>
          <li>
            <b>col-md-#</b> Medium devices,tablets, 768px and up.
          </li>
          <li>
            <b>col-lg-#</b> Large devices, desktops, 992px and up.
          </li>
          <li>
            <b>col-xl-#</b> Extra large devices, large desktops, 1200px and up.
          </li>
        </ul>

        <!-- viewport message -->
        <p class="col-12 center">
          <span class="col-md-hide
                       col-lg-hide
                       col-xl-hide"><b>Viewport size is "sm"</b> all col-# or col-sm-# columns are being applied.
          </span>
          <span class="col-sm-hide
                       col-lg-hide
                       col-xl-hide"><b>Viewport size is "md"</b> all col-md-# columns are being applied.</span>
          <span class="col-sm-hide
                       col-md-hide
                       col-xl-hide"><b>Viewport size is "lg"</b> all col-lg-# columns are being applied.</span>
          <span class="col-sm-hide
                       col-md-hide
                       col-lg-hide"><b>Viewport size is "xl"</b> all col-xl-# columns are being applied.</span>
          <span>To see other applications try changing the size of the window.</span>
        </p>

        <!-- columns example -->
        <div class="bg1 center-center col-6 col-md-4 col-lg-4 col-xl-3">
          <span class="col-md-hide
                       col-lg-hide
                       col-xl-hide">col-6</span>
          <span class="col-hide
                       col-lg-hide
                       col-xl-hide">col-md-4</span>
          <span class="col-hide
                       col-md-hide
                       col-xl-hide">col-lg-4</span>
          <span class="col-hide
                       col-md-hide
                       col-lg-hide">col-xl-3</span>
        </div>
        <div class="bg1 center-center col-6 col-md-8 col-lg-4 col-xl-6">
          <span class="col-md-hide
                       col-lg-hide
                       col-xl-hide">col-6</span>
          <span class="col-hide
                       col-lg-hide
                       col-xl-hide">col-md-8</span>
          <span class="col-hide
                       col-md-hide
                       col-xl-hide">col-lg-4</span>
          <span class="col-hide
                       col-md-hide
                       col-lg-hide">col-xl-6</span>
        </div>
        <div class="bg1 center-center col-12 col-md-12 col-lg-4 col-xl-3">
          <span class="col-md-hide
                       col-lg-hide
                       col-xl-hide">col-12</span>
          <span class="col-hide
                       col-lg-hide
                       col-xl-hide">col-md-12</span>
          <span class="col-hide
                       col-md-hide
                       col-xl-hide">col-lg-4</span>
          <span class="col-hide
                       col-md-hide
                       col-lg-hide">col-xl-3</span>
        </div>

        <!-- code -->
        <div class="col-12">
          <xmp class="bgcode">
            <div class="grid">
              <div class="col-6 col-md-4 col-lg-4 col-xl-3">
                sm: 6 / md: 4 / lg: 4 / xl: 3 of 12.
              </div>
              <div class="col-6 col-md-8 col-lg-4 col-xl-6">
                sm: 6 / md: 8 / lg: 4 / xl: 6 of 12.
              </div>
              <div class="col-12 col-md-12 col-lg-4 col-xl-3">
                sm: 12 / md: 12 / lg: 4 / xl: 3 of 12.
              </div>
            </div>
          </xmp>
        </div>
      </div>
      <hr>

      <!-- Custom column position -->
      <div class="grid" id="columnPosition">
        <h2 class="col-12">
          Custom column position:
        </h2>
        <p class="col-12">
          This implementation can be a bit confusing if you are not used to CSS grid.
        </p>

        <div class="bg2 col-custom center-center" style="--ini: 2; --end: 8;">
          <span>.col-custom | --ini: 2; --end: 8;</span>
        </div>
        <div class="bg2 col-custom center-center" style="--ini: 4; --end: 11;">
          <span>.col-custom | --ini: 4; --end: 11;</span>
        </div>

        <!-- code -->
        <div class="col-12">
          <xmp class="bgcode">
            <div class="grid">
              <div class="col-custom" style="--ini: 2; --end: 8;">
                <span>
                  Column start at grid position 2
                  And end at grid position 7
                </span>
              </div>
              <div class="col-custom" style="--ini: 4; --end: 11;">
                <span>
                  Column start at grid position 4
                  And end at grid position 10
                </span>
              </div>
            </div>
          </xmp>
        </div>
      </div>
    </div> <!-- /container end -->
  </div>

  <!-- footer -->
  <div class="footer custom-border custom-background">
    <a class="center" href="mailto: hi@tavoohoh.com">
      hi@tavoohoh.com
    </a>
  </div>
  
</div>

<!-- in progress flag -->
<div class="inProgress">
  Work in progress.
<div>

style.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i');

/* VARIABLES */
:root {
  --primary: #3e69dc;
  --light: #d6cee5;
}

/* GLOBAL */

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  font-size: 100%;
  overflow: hidden;
}

/* ROOT FONT STYLES */

* {
  font-family: 'Open Sans', sans-serif;
  color: #626263; 
  line-height: 1.5;
  margin: 0;
}

/* TYPOGRAPHY */

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.375rem;
}

h4 {
  font-size: 1.125rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.875rem;
}

p {
  font-size: 1.125rem;
  font-weight: 200;
  line-height: 1.8;
}

.font-light {
  font-weight: 300;
}

.font-regular {
  font-weight: 400;
}

.font-heavy {
  font-weight: 700;
}

/* POSITIONING */

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  display: block;
  text-align: center;
}

.center-center {
  display: table;
}

.center-center * {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  align-self: center;
}

.justify {
  text-align: justify;
}

.container {
  width: 80%;
  margin: 1.125rem auto;
}

hr {
  margin: 2rem -20%;
  border: none;
  border-top: 1px solid var(--light);
}

/* ==== GRID NET SYSTEM === */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 0.8rem;
}

.grid > * {
    grid-column-end: span 12;
}

/* == LAYOUT SYSTEM == */
.layout {
  display: grid;
  grid-template-columns: 300px auto;
  grid-template-rows: min-content auto min-content;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.header, .footer, .sidebar, .content {
  padding: .8em;
}

.header {
  grid-column: 1;
  grid-row: 1;
  border-right: 1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
}
.sidebar {
  grid-column: 1;
  grid-row: 2;
  border-right: 1px solid #dbdbdb;
  border-bottom: 1px solid #dbdbdb;
}
.content {
  grid-column: 2;
  grid-row: 1 / 4;
  max-height: 100%;
  overflow: scroll;
  overflow-x: hidden;
}
.footer {
  grid-row: 3;
  border-right: 1px solid #dbdbdb;
}

/* == COLUMN WITH VARIABLES == */
.col-custom {
  grid-column-start: var(--ini);
  grid-column-end: var(--end); 
}
.col-ini {
  grid-column-end: span var(--ini);
}
.col-end {
  grid-column-end: span var(--end);
}

/* == COLUMN START == */
@media {
  .col-hide { display: none; }
  .col-1 { grid-column-end: span 1; }
  .col-2 { grid-column-end: span 2; }
  .col-3 { grid-column-end: span 3; }
  .col-4 { grid-column-end: span 4; }
  .col-5 { grid-column-end: span 5; }
  .col-6 { grid-column-end: span 6; }
  .col-7 { grid-column-end: span 7; }
  .col-8 { grid-column-end: span 8; }
  .col-9 { grid-column-end: span 9; }
  .col-10 { grid-column-end: span 10; }
  .col-11 { grid-column-end: span 11; }
  .col-12 { grid-column-end: span 12; }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767px){
  .col-sm-hide { display: none; }
  .col-sm-1 { grid-column-end: span 1; }
  .col-sm-2 { grid-column-end: span 2; }
  .col-sm-3 { grid-column-end: span 3; }
  .col-sm-4 { grid-column-end: span 4; }
  .col-sm-5 { grid-column-end: span 5; }
  .col-sm-6 { grid-column-end: span 6; }
  .col-sm-7 { grid-column-end: span 7; }
  .col-sm-8 { grid-column-end: span 8; }
  .col-sm-9 { grid-column-end: span 9; }
  .col-sm-10 { grid-column-end: span 10; }
  .col-sm-11 { grid-column-end: span 11; }
  .col-sm-12 { grid-column-end: span 12; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px){
  .col-md-hide { display: none; }
  .col-md-1 { grid-column-end: span 1; }
  .col-md-2 { grid-column-end: span 2; }
  .col-md-3 { grid-column-end: span 3; }
  .col-md-4 { grid-column-end: span 4; }
  .col-md-5 { grid-column-end: span 5; }
  .col-md-6 { grid-column-end: span 6; }
  .col-md-7 { grid-column-end: span 7; }
  .col-md-8 { grid-column-end: span 8; }
  .col-md-9 { grid-column-end: span 9; }
  .col-md-10 { grid-column-end: span 10; }
  .col-md-11 { grid-column-end: span 11; }
  .col-md-12 { grid-column-end: span 12; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
  .col-lg-hide { display: none; }
  .col-lg-1 { grid-column-end: span 1; }
  .col-lg-2 { grid-column-end: span 2; }
  .col-lg-3 { grid-column-end: span 3; }
  .col-lg-4 { grid-column-end: span 4; }
  .col-lg-5 { grid-column-end: span 5; }
  .col-lg-6 { grid-column-end: span 6; }
  .col-lg-7 { grid-column-end: span 7; }
  .col-lg-8 { grid-column-end: span 8; }
  .col-lg-9 { grid-column-end: span 9; }
  .col-lg-10 { grid-column-end: span 10; }
  .col-lg-11 { grid-column-end: span 11; }
  .col-lg-12 { grid-column-end: span 12; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .col-xl-hide { display: none; }
  .col-xl-1 { grid-column-end: span 1; }
  .col-xl-2 { grid-column-end: span 2; }
  .col-xl-3 { grid-column-end: span 3; }
  .col-xl-4 { grid-column-end: span 4; }
  .col-xl-5 { grid-column-end: span 5; }
  .col-xl-6 { grid-column-end: span 6; }
  .col-xl-7 { grid-column-end: span 7; }
  .col-xl-8 { grid-column-end: span 8; }
  .col-xl-9 { grid-column-end: span 9; }
  .col-xl-10 { grid-column-end: span 10; }
  .col-xl-11 { grid-column-end: span 11; }
  .col-xl-12 { grid-column-end: span 12; }
}

/* == not in the framework == */
/* The following styles do not belong to Gridout framework */
.layout-example .header, .layout-example .footer {
  background: #7fdde9;
}
.layout-example .sidebar {
  border-right: 2px solid #7fdde9;
}
.layout-example .sidebar, .layout-example .content {
  background: #efe;
}
.layout-example .footer {
  border-radius: 0 0 .5em .5em;
}

.bg1, .bg2, .bg0 {
  font-size: 11px;
  height: 50px;
}
.bg1 {
  background: var(--primary);
}
.bg2 {
  background: #eb008b;
}
.bg1 *, .bg2 * {
  color: #fff;
}

ul li b, ul li {
  font-family: monaco, monospace!important;
}
ul li b {
  margin-right: 1em;
}
.bgcode {
  font-family: monaco, monospace!important;
  font-size: .8rem;
  color: #555;
  border: 1px solid #ccc;
  background: #ddd;
}
.browser {
  height: 250px;
}

.browser-top {
  display: grid;
  grid-template-columns: auto 15px 15px;
  background: #eee;
  border-radius: .5em .5em 0 0;
  font-family: arial;
  font-size: .7em;
  border-bottom: 2px solid #bbb;
  margin-bottom: -0.8rem;
}

.browser-top div {
    align-self: center;
}

.browser-top div:nth-child(1) {
  color: #777;
  font-size: .8em;
  padding: .6em 3em;
}

.browser-top div:nth-child(3) {
  font-size: .9em;
  color: #f74f4f;
}

.contentList {
  padding: 2em;
}

@media (max-width: 767px){
  .contentList {
    height: auto;
    position: relative;
    top: 0;
  }
}

.contentList ul {
  padding: 0;
}

.contentList li {
  list-style-type: none;
  margin: .8em 0;
  font-size: 1rem;
  padding: 0;
}

.inProgress {
  padding: .3em 5em;
  position: fixed;
  background: rgba(255, 220, 70, .8);
  top: 25px;
  right: -5em;
  transform: rotate(30deg);
}

.custom-background {
  background-color: var(--primary);
}

.custom-background * {
  color: #fff;
}

.custom-border {
  border-color: var(--primary);
}