Applications

Applications

The application template was built to provide a less intrusive set of options for application developers.

View the application template (opens in new tab)

The only requirement for this template is the Standards Application CSS. You will not need to include the Standards Javascript. The application template is meant to give developers a trimmed-down version of the Standards template. As such, not all of the Foundation CSS is included in this template. For a list of the included Foundation sass, view the app scss file on GitHub.

Most importantly, Foundation grid classes are available, including the new XY Grid.

Note: FontAwesome is not included in the app standards. you will need to include in your project yourself.

Including the CSS in your project

There are a number of ways to include the app css in your project.

For example: https://unpkg.com/phila-standards@0.11.2/dist/css/phila-app.min.css

Replace the version number with the version of the application standards you want to use. The application standards start at version 0.9.0.

Install with a build tool

Use yarn or npm to install the phila-standards package. Then, use a build tool to include the application css.

You could link directly to the version of the standards on this site, however, this is not recommend for production sites as the code will be updated without warning anytime a new version of the standards is released. https://standards.phila.gov/css/phila-app.css


Application boilerplate code
Copy code
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Site title | City of Philadelphia</title>
  <link rel="stylesheet" type="text/css" href="/phila-app.css">
  <link rel="shortcut icon" type="image/x-icon" href="https://standards.phila.gov/img/favicon.png"> <meta name="twitter:card" content="summary">
<meta property="og:title" content=""> 
<meta property="og:description" content=""> 
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:site_name" content="Digital Standards | City of Philadelphia">
<meta property="og:image" content="https://beta.phila.gov/media/20160715133810/phila-gov.jpg">

</head>

<body lang="en">
  <div id="application">
  <!-- Begin header -->
  <header class="site-header app group">
    <div class="row expanded">
      <!-- if you don't want a full-width header, remove the expanded class -->
      <div class="columns">
        <a href="http://beta.phila.gov/" class="logo">
          <img src="https://standards.phila.gov/img/logo/city-of-philadelphia-yellow-white.png" alt="City of Philadelphia">
        </a>
        <div class="app-divide"></div>
        <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 class="app-buttons">
          <a href="#" class="button">Button</a>
          <a href="#" class="button">Button</a>
        </div>
      </div>
    </div>
  </header>
  <div class="app-nav">
    <div class="row expanded">
      <div class="columns">
        <nav>
          <ul>
            <li>
              <a href="#">Link 1</a>
            </li>
            <li>
              <a href="#">Link 2</a>
            </li>
            <li>
              <a href="#">Link 3</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>

  <main>
    
  </main>
    <div class="app-footer anchor">
    <!-- remove the anchor class if you want to handle footer placement yourself, otherwise it will be postion: fixed -->
    <footer>
      <div class="row expanded">
        <div class="columns">
          <nav>
            <ul class="inline-list">
              <li>
                <a href="https://beta.phila.gov/feedback/">Feedback</a>
              </li>
              <li>
                <a href="#">More links</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </footer>
  </div>
</div>
<!-- #application -->

</body>

</html>

Top