@travlrcom/uikit

<!DOCTYPE html> <html lang="en"> <head> <base href="/"> <meta charset="utf-8"/> <meta name="theme-color" content="#006272"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="robots" content="index, follow"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <link rel="canonical" href="/"> <link rel="manifest" href="manifest.json"> <title>Grid - TRAVLR UI Kit</title> <meta name="description" content="TRAVLR UI Kit A simple and clean framework making front-end web development fast & easy. Fully responsive and filled with cool stuff.">  <meta property="og:title" content="TRAVLR UI Kit"> <meta property="og:description" content="TRAVLR UI Kit A simple and clean framework making front-end web development fast & easy. Fully responsive and filled with cool stuff."> <meta property="og:type" content="website" /> <meta property="og:url" content="Travlr Facebook Url"> <meta property="og:image" content="Travlr Facebook Image"> <meta property="fb:app_id" content="FACEBOOK_APP_ID" /> <meta property="og:site_name" content="TRAVLR UI Kit=">  <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="Travlr Twitter Account" /> <meta name="twitter:title" content="TRAVLR UI Kit"> <meta name="twitter:description" content="TRAVLR UI Kit A simple and clean framework making front-end web development fast & easy. Fully responsive and filled with cool stuff."> <meta property="twitter:image" content="Travlr Twitter Image">  <link rel="shortcut icon" href="">  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700">  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/color-brewer.min.css" rel="stylesheet"/>  </head> <body class="travlr-ui"> <div id="app">  <%= require('html-loader!./../components/header.html') %>   <main class="t-main-content">  <section class=" t-section-small"> <div class="t-container"> <div class="t-columns t-columns-with-gap"> <div class="t-col-12"> <ul class="t-breadcrumb"> <li class="t-breadcrumb-item active"> <a href="/">Home</a> </li> <li class="t-breadcrumb-item active"> <a href="/documentations.html">Documentations</a> </li> <li class="t-breadcrumb-item disabled"> <a href="#">Grid</a> </li> </ul> </div> </div> </div> </section>   <section class="t-p-b-32"> <div class="t-container"> <div class="t-columns t-columns-with-gap">  <%= require('html-loader!./../components/sidebar-documentation.html') %>   <div class="t-col-8 t-col-mobile-12"> <div class="t-box t-box-with-shadow"> <h2 class="t-heading-4 t-color-grey-darkest">Grid</h2> <p class="t-body-text t-m-t-32 t-m-b-32"> A 12 column responsive grid for easy layout creation </p> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Example </div> </div> <div class="t-panel-body"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="brandIcons-1"> <div class="t-columns">   <div class="t-col-3">...</div>   <div class="t-col-9">...</div> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#brandIcons-1" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-32 t-color-grey-darkest"> <div class="t-columns"> <div class="t-col-1 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">1</div> </div> <div class="t-col-11 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">11</div> </div> </div> <div class="t-columns"> <div class="t-col-2 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">2</div> </div> <div class="t-col-10 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">10</div> </div> </div> <div class="t-columns"> <div class="t-col-3 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">3</div> </div> <div class="t-col-9 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">9</div> </div> </div> <div class="t-columns"> <div class="t-col-4 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">4</div> </div> <div class="t-col-8 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">8</div> </div> </div> <div class="t-columns"> <div class="t-col-5 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">5</div> </div> <div class="t-col-7 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">7</div> </div> </div> <div class="t-columns"> <div class="t-col-6 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">6</div> </div> <div class="t-col-6 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">6</div> </div> </div> <div class="t-columns"> <div class="t-col-7 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">7</div> </div> <div class="t-col-5 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">5</div> </div> </div> <div class="t-columns"> <div class="t-col-8 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">8</div> </div> <div class="t-col-4 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">4</div> </div> </div> <div class="t-columns"> <div class="t-col-9 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">9</div> </div> <div class="t-col-3 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">3</div> </div> </div> <div class="t-columns"> <div class="t-col-10 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">10</div> </div> <div class="t-col-2 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">2</div> </div> </div> <div class="t-columns"> <div class="t-col-11 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">11</div> </div> <div class="t-col-1 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">1</div> </div> </div> </div> <div class="t-separator t-m-t-32 t-m-b-32"></div> <h2 class="t-heading-4 t-color-grey-darkest">Gutters</h2> <p class="t-body-text t-m-t-32 t-m-b-32"> Apply padding and a negative margin to the outside of the container </p> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Example </div> </div> <div class="t-panel-body"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="brandIcons-1"> <div class="t-columns t-columns-with-gap">   <div class="t-col-4">...</div>   <div class="t-col-4">...</div>   <div class="t-col-4">...</div> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#brandIcons-1" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-32 t-color-grey-darkest"> <div class="t-columns t-columns-with-gap"> <div class="t-col-4"> <div class="t-background-grey-lightest t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">4</div> </div> <div class="t-col-4"> <div class="t-background-grey-lighter t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">4</div> </div> <div class="t-col-4"> <div class="t-background-grey-lightest t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">4</div> </div> </div> </div> <div class="t-separator t-m-t-32 t-m-b-32"></div> <h2 class="t-heading-4 t-color-grey-darkest">Nested</h2> <p class="t-body-text t-m-t-32 t-m-b-32"> You can easily nest columns to create complex layouts. </p> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Example </div> </div> <div class="t-panel-body"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="brandIcons-1"> <div class="t-columns">   <div class="t-col-4">...</div>   <div class="t-col-4">...</div>   <div class="t-col-4">     <div class="t-columns">       <div class="t-col-6">...</div>       <div class="t-col-6">...</div>     </div>   </div> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#brandIcons-1" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-32 t-color-grey-darkest"> <div class="t-columns"> <div class="t-col-4 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">4</div> </div> <div class="t-col-4 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">4</div> </div> <div class="t-col-4 t-background-grey-lighter"> <div class="t-columns"> <div class="t-col-6 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">6</div> </div> <div class="t-col-6 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">6</div> </div> </div> </div> </div> </div> <div class="t-separator t-m-t-32 t-m-b-32"></div> <h2 class="t-heading-4 t-color-grey-darkest">Offset</h2> <p class="t-body-text t-m-t-32 t-m-b-32"> Easily move sections up to eleven columns by using the offset class. </p> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Example </div> </div> <div class="t-panel-body"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="brandIcons-1"> <div class="t-columns">   <div class="t-col-4">...</div>   <div class="t-col-4 t-offset-4">...</div>   <div class="t-col-4 t-offset-8">...</div> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#brandIcons-1" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-32 t-color-grey-darkest"> <div class="t-columns"> <div class="t-col-4 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">4</div> </div> </div> <div class="t-columns"> <div class="t-col-4 t-offset-4 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">4</div> </div> </div> <div class="t-columns"> <div class="t-col-4 t-offset-8 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">4</div> </div> </div> </div> <div class="t-separator t-m-t-32 t-m-b-32"></div> <h2 class="t-heading-4 t-color-grey-darkest">Responsive</h2> <p class="t-body-text t-m-t-32 t-m-b-32"> Easily move sections up to eleven columns by using the offset class. </p> <div class="t-panel t-primary-box-shadow t-no-margin"> <div class="t-panel-header t-p-t-0 t-background-grey-lightest"> <div class="t-panel-header-title"> Example </div> </div> <div class="t-panel-body"> <div class="t-columns t-columns-with-gap"> <div class="t-col-10"> <pre> <code class="xml hljs" id="brandIcons-1"> <div class="t-columns">   <div class="t-col-4 t-col-mobile-12 t-col-tab-6">...</div>   <div class="t-col-4 t-col-mobile-12 t-col-tab-6">...</div>   <div class="t-col-4 t-col-mobile-12 t-col-tab-6">...</div> </div> </code> </pre> </div> <div class="t-col-2 t-text-align-right"> <button data-clipboard-action="copy" data-clipboard-target="#brandIcons-1" class="copyText t-btn t-btn-tertiary t-btn-small t-hidden-mobile">Copy</button> </div> </div> </div> </div> <div class="t-m-t-32 t-color-grey-darkest"> <div class="t-columns"> <div class="t-col-4 t-col-mobile-12 t-col-tab-6 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">4</div> </div> <div class="t-col-4 t-col-mobile-12 t-col-tab-6 t-background-grey-lighter"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">4</div> </div> <div class="t-col-4 t-col-mobile-12 t-col-tab-6 t-background-grey-lightest"> <div class="t-p-t-8 t-p-r-8 t-p-b-8 t-p-l-8">4</div> </div> </div> </div> <%= require('html-loader!./../components/footer-documentation.html') %> </div> </div>  </div> </div> </section>  </main>   <%= require('html-loader!./../components/footer.html') %>  </div>  <%= require('html-loader!./../components/footer-script.html') %>  </body> </html>