menu

1 Base

Colors, layout, (assets?) etc

1.1 Boilerplate link

Basic boilerplate to get started quickly.

Usage

The Govlab
menu

Top Section

Subtitle

Sections

Lead Supporters

Based at

Creative Commons License This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License
Copyright Infringement Information. 
<!-- #fullwidth -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The Govlab</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="//use.typekit.net/zez3buj.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="vendor/normalize.css">
    <link rel="stylesheet" href="vendor/slick.css">
    <link rel="stylesheet" href="vendor/prism.css" />
    <link rel="stylesheet" href="styles/styles.css">
</head>
<body id="">
    <header class="b-top-nav">
        <div class="e-nav-group m-left">
            <span class="e-nav-item js-nav-trigger e-nav-trigger">
                <i class="material-icons">menu</i>
            </span>
        </div>
        <div class="e-nav-group m-right e-social-media">
            <a href="https://twitter.com/TheGovLab" class="e-nav-item" target="_blank"><i class="e-social-media-item fa fa-twitter"></i></a>
            <a href="https://www.youtube.com/user/TheGovLab" class="e-nav-item" target="_blank"><i class="e-social-media-item fa fa-youtube-play"></i></a>
        </div>
        <a class="e-logo" href="./">
            <img src="img/govlab-logo-white.png" alt="">
        </a>
    </header>
    <!-- Main Menu (Off Canvas) -->
    <nav class="b-main-menu">
        <!-- generated content here for side menu -->
    </nav>
    <main role="main">
        <!-- main content starts here -->
        <div class="b-top-section m-purple">
            <h1>Top Section</h1>
            <h3>Subtitle</h3>
        </div>
        <div class="b-page-section">
            <div class="row">
                <div class="large-10 large-centered columns">
                    <div class="row">
                        <!-- 1st section content -->
                    </div>
                </div>
            </div>
        </div>
    </main><!--@main-->
    <footer class='b-footer'>
        <div class="row">
            <div class="large-10 large-centered columns">
                <div class="row">
                    <div class="e-content m-sections medium-4 column">
                        <h4>Sections</h4>
                        <!-- Add generated sections here -->
                    </div>
                    <div class="e-content medium-4 column">
                        <h4>Lead Supporters</h4>
                        <a class="e-partner-logo" href="https://www.macfound.org/" tagret="_blank"><img src="img/partners/macarthur-logo-white.png" alt="MacArthur Foundation"></a>
                        <a class="e-partner-logo" href="http://knightfoundation.org/" tagret="_blank"><img src="img/partners/knight-logo-white.png" alt="Knight Foundation"></a>
                        <a class="e-partner-logo m-google" href="http://google.org/" tagret="_blank"><img src="img/partners/google-org.png" alt="Google.org"></a>
                    </div>
                    <div class="e-content medium-4 column">
                        <h4>Based at</h4>
                        <a class="e-partner-logo" href="http://engineering.nyu.edu/tandon" tagret="_blank"><img src="img/partners/nyu.png" alt="NYU Tandon School of Engineering - New York University"></a>
                        <a class="e-partner-logo m-mit" href="https://www.media.mit.edu/" tagret="_blank"><img src="img/partners/mit-logo-white.png" alt="MIT Media Lab"></a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <div class="b-copyright">
        <div class="row">
            <div class="large-10 large-centered columns">
                <a class="e-cc-badge" rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png" /></a>
                This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">Creative Commons Attribution-ShareAlike 4.0 International License</a> <br> <a href="#">Copyright Infringement Information</a>.
            </div>
        </div>
    </div>
    <div id="overlay"></div>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="vendor/slick.min.js"></script>
    <script src="vendor/prism.js"></script>
    <script src="js/scripts.js"></script>
    <script src="https://cdn.firebase.com/js/client/2.4.0/firebase.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>

1.2 Colors link

The following colors are supported in sass out of the box:

Usage

$gray-025
$gray-025
$gray-10
$gray-15
$gray-20
$gray-30
$gray-40
$gray-50
$gray-60
$gray-70
$gray-80
$gray-90
$black
$white
$white-10
$white-20
$white-30
$white-40
$white-50
$white-60
$white-70
$white-80
$white-90
$purple
$purple-20k
$purple-40k
$orange
$orange-20k
$teal
$teal-20k
$blue
$blue-20k
$red
$green
<div class="b-palette">
  <div class="gray-025">$gray-025</div>
  <div class="gray-05">$gray-025</div>
  <div class="gray-10">$gray-10</div>
  <div class="gray-15">$gray-15</div>
  <div class="gray-20">$gray-20</div>
  <div class="gray-30">$gray-30</div>
  <div class="gray-40">$gray-40</div>
  <div class="gray-50">$gray-50</div>
  <div class="gray-60">$gray-60</div>
  <div class="gray-70">$gray-70</div>
  <div class="gray-80">$gray-80</div>
  <div class="gray-90">$gray-90</div>
  <div class="black">$black</div>
</div>
<div class="b-palette m-black">
  <div class="white">$white</div>
  <div class="white-10">$white-10</div>
  <div class="white-20">$white-20</div>
  <div class="white-30">$white-30</div>
  <div class="white-40">$white-40</div>
  <div class="white-50">$white-50</div>
  <div class="white-60">$white-60</div>
  <div class="white-70">$white-70</div>
  <div class="white-80">$white-80</div>
  <div class="white-90">$white-90</div>
</div>
<div class="b-palette">
  <div class="purple">$purple</div>
  <div class="purple-20k">$purple-20k</div>
  <div class="purple-40k">$purple-40k</div>
  <div class="orange">$orange</div>
  <div class="orange-20k">$orange-20k</div>
  <div class="teal">$teal</div>
  <div class="teal-20k">$teal-20k</div>
  <div class="blue">$blue</div>
  <div class="blue-20k">$blue-20k</div>
  <div class="red">$red</div>
  <div class="green">$green</div>
</div>

1.3 Layout link

We use foundation grid for responsive layout. Usually this should be wrapped in a b-page-section or other page module from the styleguide.

Usage

.large-12
.large-6
.large-6
.large-4
.large-4
.large-4
.large-3
.large-3
.large-3
.large-3
.large-2
.large-2
.large-2
.large-2
.large-2
.large-2
.large-1
.large-1
.large-1
.large-1
.large-1
.large-1
.large-1
.large-1
.large-1
.large-1
.large-1
.large-1
<!-- #fullwidth -->
<div class="b-page-section b-grid-example">
    <div class="row">
        <div class="large-12 columns gray-30">.large-12</div>
    </div>
    <div class="row">
        <div class="large-6 columns gray-30">.large-6</div>
        <div class="large-6 columns gray-30">.large-6</div>
    </div>
    <div class="row">
        <div class="large-4 columns">.large-4</div>
        <div class="large-4 columns">.large-4</div>
        <div class="large-4 columns">.large-4</div>
    </div>
    <div class="row">
        <div class="large-3 columns">.large-3</div>
        <div class="large-3 columns">.large-3</div>
        <div class="large-3 columns">.large-3</div>
        <div class="large-3 columns">.large-3</div>
    </div>
    <div class="row">
        <div class="large-2 columns">.large-2</div>
        <div class="large-2 columns">.large-2</div>
        <div class="large-2 columns">.large-2</div>
        <div class="large-2 columns">.large-2</div>
        <div class="large-2 columns">.large-2</div>
        <div class="large-2 columns">.large-2</div>
    </div>
    <div class="row">
        <div class="large-1 columns">.large-1</div>
        <div class="large-1 columns">.large-1</div>
        <div class="large-1 columns">.large-1</div>
        <div class="large-1 columns">.large-1</div>
        <div class="large-1 columns">.large-1</div>
        <div class="large-1 columns">.large-1</div>
        <div class="large-1 columns">.large-1</div>
        <div class="large-1 columns">.large-1</div>
        <div class="large-1 columns">.large-1</div>
        <div class="large-1 columns">.large-1</div>
        <div class="large-1 columns">.large-1</div>
        <div class="large-1 columns">.large-1</div>
    </div>
</div>
Creative Commons License This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License
Copyright Infringement Information.