phila.gov

City of Philadelphia

Phila.gov Patterns

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.4.1/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://alpha.phila.gov/" class="logo">
        <img data-interchange="[//cityofphiladelphia.github.io/patterns/images/city-of-philadelphia-mobile.png, small], [//cityofphiladelphia.github.io/patterns/images/city-of-philadelphia-white.png, medium]" src="//cityofphiladelphia.github.io/patterns/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 class="title-bar" data-responsive-toggle="site-nav" data-hide-for="medium">
  <button class="menu-icon" type="button" data-toggle><span class="title-bar-title">Menu</span></button>
</div>
<div class="top-bar" id="site-nav">
  <nav>
    <ul class="dropdown vertical medium-horizontal menu" data-responsive-menu="drilldown medium-dropdown">
      <li>
        <a href="#">Item 1</a>
        <ul class="submenu menu vertical">
          <li><a href="#">Item 1A</a></li>
          <li><a href="#">Item 1B</a></li>
          <li><a href="#">Item 1C</a>
            <ul class="submenu menu vertical">
              <li><a href="#">Item 2C</a></li>
              <li><a href="#">Item 2C</a></li>
              <li><a href="#">Item 2C</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="current"><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
  </nav>
</div>

    </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://alpha.phila.gov">alpha.phila.gov</a></li>
            <li><a href="http://alpha.phila.gov/departments">City Government Directory</a></li>
            <li><a href="http://www.phila.gov/mayor">Mayor's Office</a></li>
            <li><a href="http://iframe.publicstuff.com/#?client_id=242">Report an Issue / 311</a></li>
            <li><a href="http://cityofphiladelphia.wordpress.com/">News</a></li>
          </ul>
        </nav>
      </div>
      <div class="large-16 columns">
        <h1>Browse alpha.phila.gov</h1>
        <nav>
          <ul class="columns-2">
            <li><a href="http://alpha.phila.gov/browse/health">Health</a></li>
            <li><a href="http://alpha.phila.gov/browse/legal">Legal</a></li>
            <li><a href="http://alpha.phila.gov/browse/payments-and-taxes">Payments and Taxes</a></li>
            <li><a href="http://alpha.phila.gov/browse/permits-licenses">Permits and Licenses</a></li>
            <li><a href="http://alpha.phila.gov/browse/property-housing">Property and Housing</a></li>
            <li><a href="http://alpha.phila.gov/browse/public-safety">Public Safety</a></li>
            <li><a href="http://alpha.phila.gov/browse/streets-and-utilities">Streets and Utilities</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </section>
  <div class="row classic center">
    <div class="columns">
      <nav>
        <ul class="inline-list">
          <li><a href="http://alpha.phila.gov/terms-of-use">Terms of use</a></li>
          <li><a href="http://www.phila.gov/privacy/pdfs/FinalCityOpenRecords.pdf">Right to know (pdf)</a></li>
          <li><a href="http://alpha.phila.gov/privacypolicy">Privacy Policy</a></li>
        </ul>
      </nav>
    </div>
  </div>
</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.4.1/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.4.1/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="https://alpha.phila.gov" class="logo pam">
        <img src="//cityofphiladelphia.github.io/patterns/images/city-of-philadelphia-white.png" alt="City of Philadelphia">
      </a>
      <h1 class="site-title">phila.gov</h1>
      <h2 class="site-description">City of Philadelphia</h2>
    </div>
    <div class="small-24 medium-12 columns">
      <form class="search" data-global-search>
  <input type="text" placeholder="Search alpha.phila.gov" class="search-field"><input type="submit">
</form>

    </div>
  </div>
  <div class="row expanded">
  <div class="columns">
    <div class="row">
      <div class="large-24 columns">
        <nav>
          <ul class="breadcrumbs">
            <li><a href="#/">Home</a></li>
            <li><a href="#/">Grandparent</a></li>
            <li><a href="#/">Parent</a></li>
            <li>Child</li>
          </ul>
        </nav>
      </div>
    </div>
  </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://alpha.phila.gov">alpha.phila.gov</a></li>
            <li><a href="http://alpha.phila.gov/departments">City Government Directory</a></li>
            <li><a href="http://www.phila.gov/mayor">Mayor's Office</a></li>
            <li><a href="http://iframe.publicstuff.com/#?client_id=242">Report an Issue / 311</a></li>
            <li><a href="http://cityofphiladelphia.wordpress.com/">News</a></li>
          </ul>
        </nav>
      </div>
      <div class="large-16 columns">
        <h1>Browse alpha.phila.gov</h1>
        <nav>
          <ul class="columns-2">
            <li><a href="http://alpha.phila.gov/browse/health">Health</a></li>
            <li><a href="http://alpha.phila.gov/browse/legal">Legal</a></li>
            <li><a href="http://alpha.phila.gov/browse/payments-and-taxes">Payments and Taxes</a></li>
            <li><a href="http://alpha.phila.gov/browse/permits-licenses">Permits and Licenses</a></li>
            <li><a href="http://alpha.phila.gov/browse/property-housing">Property and Housing</a></li>
            <li><a href="http://alpha.phila.gov/browse/public-safety">Public Safety</a></li>
            <li><a href="http://alpha.phila.gov/browse/streets-and-utilities">Streets and Utilities</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </section>
  <div class="row classic center">
    <div class="columns">
      <nav>
        <ul class="inline-list">
          <li><a href="http://alpha.phila.gov/terms-of-use">Terms of use</a></li>
          <li><a href="http://www.phila.gov/privacy/pdfs/FinalCityOpenRecords.pdf">Right to know (pdf)</a></li>
          <li><a href="http://alpha.phila.gov/privacypolicy">Privacy Policy</a></li>
        </ul>
      </nav>
    </div>
  </div>
</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.4.1/js/patterns.min.js"></script>
  </body>
</html>
Copied!
Not copied.