longbeach.bizport.gov/styleguide

City of Long Beach

Accessibility Style Guide

Boilerplate

Use this template to get up and running fast! It includes:

  • Absolute paths to Phila.gov Pattern CSS and Javascript files
  • Absolute path to the phila.gov logo
  • CDN links to:
  • Standard header & footer markup
  • Empty div for your main content

Full-width Applications

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

    <title>Boilerplate | phila.gov</title>
    <link rel='icon' type='image/x-icon' href="//cityofphiladelphia.github.io/patterns/images/favicon.ico">
    <meta name="description" content="">

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <!--pattern stylesheet includes foundation css -->
    <link rel="stylesheet" href="//cityofphiladelphia.github.io/patterns/dist/1.0.0/css/patterns.css">

    <link rel="canonical" href="">

  </head>

  <body>
  <div class="full" id="application">
    <!-- Begin header -->
<header data-swiftype-index='false' class="site-header app">
  <div class="row">
    <div class="small-24 columns">
      <a href="http://longbeach.gov/" class="logo">
        <img data-interchange="[//codeforamerica.github.io/long-beach-styleguide/images/city-of-philadelphia-mobile.png, small], [//codeforamerica.github.io/long-beach-styleguide/images/city-of-philadelphia-white.png, medium]" src="//codeforamerica.github.io/long-beach-styleguide/images/city-of-philadelphia-white.png" alt="City of Philadelphia">
      </a>
      <div class="page-title-container">
        <a href="#/">
          <h1 class="page-title">Application Name With a Long Title</h1>
          <h2 class="page-subtitle">An optional subtitle</h2>
        </a>
      </div>
    </div>
  </div>
  <div class="row expanded">
    <div class="small-24 small-centered columns">
      
    </div>
  </div>
</header>

      <article data-swiftype-name="body" data-swiftype-type="text">
        <div class="row">
          <div class="large-24 columns">
            <!-- main content here-->
          </div>
        </div>
      </article>
    </div><!-- End #page -->
    <!-- Begin Footer -->
<footer data-swiftype-index='false' class="site-footer">
  <section class="fat">
    <div class="row">
      <div class="large-8 columns">
        <h1>Government</h1>
        <nav>
          <ul>
            <li><a href="http://longbeach.gov">longbeach.gov</a></li>
            <li><a href="http://bizport.longbeach.gov">bizport.longbeach.gov</a></li>
          </ul>
        </nav>
      </div>
      <div class="large-16 columns">
        <h1>Browse longbeach.gov</h1>
      </div>
    </div>
  </section>
</footer>

<!-- End Footer -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script>

    <script src="//cityofphiladelphia.github.io/patterns/dist/1.0.0/js/patterns.min.js"></script>
  </body>
</html>

Standard Markup

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

    <title>Boilerplate | phila.gov</title>
    <link rel='icon' type='image/x-icon' href="//cityofphiladelphia.github.io/patterns/images/favicon.ico">
    <meta name="description" content="">

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

    <!--Ionicons are optional-->
    <link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

    <!--pattern stylesheet includes foundation css -->
    <link rel="stylesheet" href="//cityofphiladelphia.github.io/patterns/dist/1.0.0/css/patterns.css">

    <link rel="canonical" href="">

  </head>

  <body>
    <div class="site" id="page">
      <!-- Begin .header -->
<header data-swiftype-index='false' class="site-header">
  <div class="row site-branding">
    <div class="small-24 medium-12 columns">
      <a href="http://longbeach.gov" class="logo pam">
        <img src="//codeforamerica.github.io/long-beach-styleguide/images/city-of-philadelphia-white.png" alt="City of Philadelphia">
      </a>
      <h1 class="site-title">longbeach.gov</h1>
      <h2 class="site-description">City of Long Beach</h2>
    </div>
    <div class="small-24 medium-12 columns">
      
    </div>
  </div>
  
</header>

      <article data-swiftype-name="body" data-swiftype-type="text">
        <div class="row">
          <div class="large-24 columns">
            <!-- main content here-->
          </div>
        </div>
      </article>
    </div><!-- End #page -->
    <!-- Begin Footer -->
<footer data-swiftype-index='false' class="site-footer">
  <section class="fat">
    <div class="row">
      <div class="large-8 columns">
        <h1>Government</h1>
        <nav>
          <ul>
            <li><a href="http://longbeach.gov">longbeach.gov</a></li>
            <li><a href="http://bizport.longbeach.gov">bizport.longbeach.gov</a></li>
          </ul>
        </nav>
      </div>
      <div class="large-16 columns">
        <h1>Browse longbeach.gov</h1>
      </div>
    </div>
  </section>
</footer>

<!-- End Footer -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script>

    <script src="//cityofphiladelphia.github.io/patterns/dist/1.0.0/js/patterns.min.js"></script>
  </body>
</html>
Copied!
Not copied.