City-Jekyll

Documentation

Github Primitive UI Jekyll

This is the theme for City Evangelical Church website. It's built using Jekyll and Primitive UI. The theme is a design toolkit for developing fast sass-y, responsive websites with browser-consistent styling and post as superpowers.

GET STARTED

To begin, use the head template (_include/templates/head.html) to create a HTML5 template that does the following:

<!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">

  <title></title>

  <link rel="stylesheet" href="css/main.css">
  <link rel="icon" href="images/favicon.png">
</head>

<body></body>

</html>

View all HTML5 with Primitive CSS applied to them.

HTML5 Elements Test

GRID

Containers

There are three container sizes for content that are centered with left and right padding. Content without a container will span the width of the viewport.

<div class="small-container">Small</div>
<div class="medium-container">Medium</div>
<div class="container">Large</div>
Small Medium Large
37.5em (800px) 50em (1000px) 62.5em (1200px)

Grid

A simple flex grid with three breakpoints. .half, .one-fourth, .three-fourths, .one-third, and .two-thirds classes are available for sizes.


<div class="flex-row">
  <div class="flex-small">1/2 small</div>
  <div class="flex-small">1/2 small</div>
</div>
<div class="flex-row">
  <div class="flex-medium">1/2 medium</div>
  <div class="flex-medium">1/2 medium</div>
</div>
<div class="flex-row">
  <div class="flex-large">1/2 large</div>
  <div class="flex-large">1/2 large</div>
</div>
<div class="flex-row">
  <div class="flex-small sm-one-third">1/3 small</div>
  <div class="flex-small">2/3 small</div>
</div>
<div class="flex-row">
  <div class="flex-small sm-one-fourth">1/4 small</div>
  <div class="flex-small">3/4 small</div>
</div>
<div class="flex-row">
  <div class="flex-medium med-one-third">1/3 medium</div>
  <div class="flex-medium">2/3 medium</div>
</div>
<div class="flex-row">
  <div class="flex-large lg-one-third">1/3 large</div>
  <div class="flex-large">2/3 large</div>
</div>
1/2 small
1/2 small
1/2 medium
1/2 medium
1/2 large
1/2 large
1/3 small
2/3 small
1/4 small
3/4 small
1/3 medium
2/3 medium
1/3 large
2/3 large

TYPOGRAPHY

The font size is set to 1rem on the html element, so all font sizing will cascade from the root. Headings all have the same line-height and margins, and only the font size is individually defined.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Blockquote

Blockquote is set to have a left border, with the browser default padding removed. A cite will be right aligned and italicized.

<blockquote>
  <p>Keep it secret. Keep it safe.</p>
  <cite>Gandalf the Gray</cite>
</blockquote>

BUTTONS

Button elements, links with a button class, and input elements should all render exactly the same.

<button>Button</button>
<input type="submit" value="Submit">
<input type="button" value="Input">
<a class="button" href="#">Link</a>

Link

Accent Buttons

Adding an accent-button class will display a secondary color.

<button class="accent-button">Button</button>

Link

Muted Buttons

Adding a muted-button class will create ghost/outline buttons.

<button class="muted-button">Button</button>
Link

Round Buttons

Adding a round-button class will create rounded buttons.

<button class="round-button">Button</button>

Link

Square Buttons

Adding a square-button class will create square buttons.

<button class="square-button">Button</button></code>

Link

Full Width Buttons

Adding a full-button class will create full-width, block level buttons. Button styles can be combined.

<button class="full-button">Button</button>

Link

Disabled Buttons

Adding a is-disabled class will create an unclickable disabled button with reduced opacity.

<button class="is-disabled">Button</button>

Link

Social buttons

<ul class="social-box">
  <li><a class="social-button twitter-icon" href="#"></a></li>
  <li><a class="social-button instagram-icon" href="#"></a></li>
  <li><a class="social-button facebook-icon" href="#"></a></li>
  <li><a class="social-button youtube-icon" href="#"></a></li>
</ul>

Accordions

Options for pure CSS accordions

<ul class="accordion">
  <li><input id="accordion1" type="checkbox" />
    <label for="accordion1"><strong>this is item 1</strong></label>
    <div class="accord-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
  </li>
  <li><input id="accordion2" type="checkbox" />
    <label for="accordion2"><strong>this is item 2</strong></label>
    <div class="accord-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
  </li>
</ul>

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Accent accordion

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Square accordion

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Round accordion

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Muted accordion

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CARDS

Image cards

<div class="flex-row justify-center align-stretch">
</div>

<div class="flex-row justify-center align-stretch">
  <div class="flex-small sm-half flex-medium med-one-third">
      <a class="card-image" href="https://design.tutsplus.com/articles/international-artist-feature-malaysia--cms-26852">
        <div class="thumb" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);"></div>
        <article>
          <h2>International Artist Feature: Malaysia</h2>
          <span>Mary Winkler</span>
        </article>
      </a>
  </div>
  <div class="flex-small sm-half flex-medium med-one-third">
      <a class="card-image" href="https://webdesign.tutsplus.com/articles/how-to-conduct-remote-usability-testing--cms-27045">
        <div class="thumb" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/users-2.png);"></div>
        <article>
          <h2>How to Conduct Remote Usability Testing</h2>
          <span>Harry Brignull</span>
        </article>
      </a>
  </div>
  <div class="flex-small sm-half flex-medium med-one-third">
      <a class="card-image" href="https://design.tutsplus.com/articles/envato-tuts-community-challenge-created-by-you-july-edition--cms-26724">
        <div class="thumb" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-5.jpg);"></div>
        <article>
          <h2>Created by You, July Edition</h2>
          <p>Welcome to our monthly feature of fantastic tutorial results created by you, the Envato Tuts+ community! </p>
          <span>Melody Nieves</span>
        </article>
      </a>
  </div>
  <div class="flex-small sm-half flex-medium med-one-third">
      <a class="card-image" href="https://webdesign.tutsplus.com/tutorials/how-to-code-a-scrolling-alien-lander-website--cms-26826">
        <div class="thumb" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/landing.png);"></div>
        <article>
          <h2>How to Code a Scrolling “Alien Lander” Website</h2>
          <p>We’ll be putting things together so that as you scroll down from the top of the page you’ll see an “Alien Lander” making its way to touch down.</p>
          <span>Kezz Bracey</span>
        </article>
      </a>
  </div>
  <div class="flex-small sm-half flex-medium med-one-third">
      <a class="card-image" href="https://design.tutsplus.com/tutorials/stranger-things-inspired-text-effect--cms-27139">
        <div class="thumb" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/strange.jpg);"></div>
        <article>
          <h2>How to Create a “Stranger Things” Text Effect in Adobe Photoshop</h2>
          <span>Rose</span>
        </article>
      </a>
  </div>
  <div class="flex-small sm-half flex-medium med-one-third">
      <a class="card-image" href="https://photography.tutsplus.com/articles/5-inspirational-business-portraits-and-how-to-make-your-own--cms-27338">
        <div class="thumb" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flor.jpg);"></div>
        <article>
          <h2>5 Inspirational Business Portraits and How to Make Your Own</h2>
          <span>Marie Gardiner</span>
        </article>
      </a>
  </div>
  <div class="flex-small sm-half flex-medium med-one-third">
      <a class="card-image" href="https://webdesign.tutsplus.com/articles/notes-from-behind-the-firewall-the-state-of-web-design-in-china--cms-22281">
        <div class="thumb" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/china.png);"></div>
        <article>
          <h2>Notes From Behind the Firewall: The State of Web Design in China</h2>
          <span>Kendra Schaefer</span>
        </article>
      </a>
  </div>
</div>

International Artist Feature: Malaysia

Mary Winkler

How to Conduct Remote Usability Testing

Harry Brignull

Created by You, July Edition

Welcome to our monthly feature of fantastic tutorial results created by you, the Envato Tuts+ community!

Melody Nieves

How to Code a Scrolling “Alien Lander” Website

We’ll be putting things together so that as you scroll down from the top of the page you’ll see an “Alien Lander” making its way to touch down.

Kezz Bracey

How to Create a “Stranger Things” Text Effect in Adobe Photoshop

Rose

5 Inspirational Business Portraits and How to Make Your Own

Marie Gardiner

Notes From Behind the Firewall: The State of Web Design in China

Kendra Schaefer

Profile cards

<div class="flex-row justify-center align-stretch">
  <div class="flex-small sm-half flex-medium med-one-third">
    <div class="card-image">
      <div class="thumb" style="background-image: url(../assets/img/master/elder-ml.jpeg);"></div>
      <article>
        <h2>Michael Luehrmann</h2>
        <p>Michael has been the senior pastor since 2010. He is originally from Texus, USA. He is married to Emily and they have 7 children.</p>
        <span>Senior Pastor and Elder</span>
      </article>
    </div>
  </div>
  <div class="flex-small sm-half flex-medium med-one-third">
    <div class="card-image">
      <div class="thumb" style="background-image: url(../assets/img/master/elder-dl.jpeg);"></div>
      <article>
        <h2>David Lovell</h2>
        <p>ahahah anahaha</p>
        <span>Associate Pastor and Elder</span>
      </article>
    </div>
  </div>
  <div class="flex-small sm-half flex-medium med-one-third">
    <div class="card-image">
      <div class="thumb" style="background-image: url(../assets/img/master/elder-jk.jpeg);"></div>
      <article>
        <h2>John Keane</h2>
        <p>John works as a Doctor and has served the church for 15 years as an elder. He is married to Emily and has 3 children.</p>
        <span>Elder</span>
      </article>
    </div>
  </div>
  <div class="flex-small sm-half flex-medium med-one-third">
    <div class="card-image">
      <div class="thumb" style="background-image: url(../assets/img/master/elder-as.jpeg);"></div>
      <article>
        <h2>Andrew Smith</h2>
        <p>Andrew became an elder in June 2020. He is married to Lianna and they have two daughters.</p>
        <span>Elder</span>
      </article>
    </div>
  </div>
  <div class="flex-small sm-half flex-medium med-one-third">
    <div class="card-image">
      <div class="thumb" style="background-image: url(../assets/img/master/elder-pw.jpeg);"></div>
      <article>
        <h2>Paul Woodcock</h2>
        <p>Paul became an elder in June 2020. He is married to Lensa and they have four daughters.</p>
        <span>Elder</span>
      </article>
    </div>
  </div>
</div>

Michael Luehrmann

Michael has been the senior pastor since 2010. He is originally from Texus, USA. He is married to Emily and they have 7 children.

Senior Pastor and Elder

David Lovell

ahahah anahaha

Associate Pastor and Elder

John Keane

John works as a Doctor and has served the church for 15 years as an elder. He is married to Emily and has 3 children.

Elder

Andrew Smith

Andrew became an elder in June 2020. He is married to Lianna and they have two daughters.

Elder

Paul Woodcock

Paul became an elder in June 2020. He is married to Lensa and they have four daughters.

Elder

FORMS

Default forms will have full-width, block level labels, inputs, selects, and textareas.

<form>
  <label for="name">Name</label>
  <input type="text" id="name" placeholder="First Name">
  <label for="choose">Select</label>
  <select id="choose">
    <option disabled selected>Please select</option>
    <option value="option-1">Option 1</option>
    <option value="option-2">Option 2</option>
  </select>
  <label for="comments">Additional Comments</label>
  <textarea id="comments"></textarea>
  <label>
    <input type="checkbox">
    Remember me
  </label>
  <input type="submit" value="Submit">
</form>

Form Validation

To express that action was successful, you can use is-success class. If user’s input has some errors, has-error class may be good for you.

<input type="text" id="name" placeholder="Name" class="has-error">
<input type="email" id="email" placeholder="Email" class="is-success">

TABLES

Tables are set to a width of 100%, with a bottom border and bold headings.

<table>
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Footer 1</th>
      <th>Footer 2</th>
      <th>Footer 3</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Description 1</td>
      <td>Description 2</td>
      <td>Description 3</td>
    </tr>
    <tr>
      <td>Description 1</td>
      <td>Description 2</td>
      <td>Description 3</td>
    </tr>
    <tr>
      <td>Description 1</td>
      <td>Description 2</td>
      <td>Description 3</td>
    </tr>
  </tbody>
</table>
Head 1 Head 2 Head 3
Footer 1 Footer 2 Footer 3
Description 1 Description 2 Description 3
Description 1 Description 2 Description 3
Description 1 Description 2 Description 3

Striped Tables

Add a striped class for alternating row background colors.

<table class="striped-table">
  <!-- etc -->
</table>
Head 1 Head 2 Head 3
Footer 1 Footer 2 Footer 3
Description 1 Description 2 Description 3
Description 1 Description 2 Description 3
Description 1 Description 2 Description 3

Contained Tables

Wrap the table in a contain-table class to prevent tables with a lot of content from stretching on small screens.

<div class="contain-table">
  <table>
  <!-- etc -->
  </table>
</div>
Head 1 Head 2 Head 3
Footer 1 Footer 2 Footer 3
https://woodcox.github.io/city-jekyll Description 2 Description 3
Description 1 Description 2 Description 3
Description 1 Description 2 Description 3

Lists

Regular ordered and unordered lists have no special styling applied to them.

<ul>
  <li>List item one
    <ul>
      <li>Nested list item</li>
    </ul>
  </li>
  <li>List item two</li>
  <li>List item three</li>
</ul>
  • List item one
    • Nested list item
  • List item two
  • List item three
  1. List item one
    1. Nested list item
  2. List item two
  3. List item three

Definition Lists

Definition titles are bold, and margins have been placed after each description.

<dl>
  <dt>Definition Title One</dt>
  <dd>First definition description</dd>
  <dt>Definition Title Two</dt>
  <dd>First definition description</dd>
</dl>
Definition Title One
First definition description
Definition Title Two
First definition description

Code

Style has been added for inline <code> code tags, and <kbd> is a keyboard input.

Place blocks of preformatted code in a <pre><code> or in markdown, e.g. ~~~ html.

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
}

HELPERS

Helper classes are helpful for templating.

Vertical Center

Vertically center an element with the vertical-center class. (Uses Flexbox.)

<div class="vertical-center">
  <div>Vertically centered</div>
</div>
Vertically centered

Text Alignment

Use text-left, text-right, and text-center to align content.

<p class="text-left">Left</p>
<p class="text-center">Center</p>
<p class="text-right">Right</p>

Left

Center

Right

Screen Reader Text

Accessibility is important - if you have a label that should be hidden but accessible, or use an icon as a link, or want to skip navigation, use the screen-reader-text class to hide content visually.

<a class="screen-reader-text" href="#content">Skip Navigation</a>

Responsive Images

Add a responsive-image class for responsive images.

<img src="#" class="responsive-image" alt="Responsive Image">

Example of responsive-image CSS class

Responsive videos

<div class="icontain"><iframe title="citykids online episode 4" src="//www.youtube-nocookie.com/embed/cNP2-165_BE" allowfullscreen></iframe></div>

More Helper Classes

Class What it does
.space-between justify-content: space-between
.justify-center justify-content: center
.space-evenly justify-content: space-evenly
.align-center align-items: center
.align-stretch align-items: stretch
.block display: block
.inline-block display: inline-block
.inline display: inline
.show display: block !important
.hide display: none !important
.padding-top padding-top: 2rem
.no-padding-top padding-top: 0
.padding-bottom padding-bottom: 2rem
.no-padding-bottom padding-bottom: 0
.margin-top margin-top: 2rem
.no-margin-top margin-top: 0
.margin-bottom margin-bottom: 2rem
.no-margin-bottom margin-bottom: 0
.content-section padding: 60px 0 (30px on mobile)