APC Responsive

Our AllPosters sites aren't responsive. This code will make them responsive. 🎉

Setup

1. Fork the repo onto your local machine
2. Run npm install to download the necessary packages
3. Code all the things!
4. Once you've coded all the things, or a new feature or whatever, you can use Gulp to build it out to a gitignored /dest directory.
5. Here's some options:

• gulp scripts to compile all your JS under /source/scripts
• gulp styles to compile all your stylus files under /source/stylus
• gulp nunjucks to piece together all the templates under /source/pages and /source/templates
• gulp default task will run all of the above
• gulp serve will run all of the above and launch a live-reloading browser-sync window. The task will watch for any changes to .js, .styl, or Nunjucks template files, and will reload the browser page after each change.

Main packages

• Stylus - CSS preprocessor
• Nunjucks by Mozilla - HTML emplating

Useful

Syntax highlighters are available on the Atom text-editor for Stylus and Nunjucks.

Folder structure

📁 /mockups/

• Contains .jpg design mockups for reference

📁 /source/

• Contains all the source code you'll be working on

📁 /source/pages/

• Contains Nunjucks pages. For example, index.njk file represents the homepage for APC, and contains header, body, and footer code. This file uses the layout.njk template to handle all the page metadata and HTML markup generated by Hippo CMS.

📁 /source/scripts/

• Contains javascript for the site. Each .js file under /scripts/ gets concatenated into one main.js file in alphabetical order.

📁 /source/stylus/

• Contains all the Stylus partials. Partials are then organized into footer, header, and home subdirectories. The .styl files in the /stylus root have global scope, except for index.styl, which is used as the main compilation file, gathering style declarations from all other partials.

📁 /source/templates/

• Contains Nunjucks partials, macros, and layouts in both .njk and .html filetypes.