Skip to content

Home

Jump to bottom
Kristi Walker edited this page Jan 4, 2017 · 9 revisions

Honeycomb

What is it?

This is a base design for McClatchy's Special Projects Template. It has been created for local development that can easily be moved over to Newsgate for testing and publishing.

Why use it?

Honeycomb standardizes and streamlines the process of creating special project designs within Newsgate/Escenic by providing HTML, styles and scripts to give news developers a running start at customization.

Who is it for?

Honeycomb is for McClatchy front-end developers who want to give projects a special treatment beyond the standard article page.

Setup

Make sure you have a GitHub account and Git installed on your computer.

  1. Fork the Honeycomb repository to your GitHub account.
  2. Click clone or download and copy the URL from your forked repository.
  3. Open your terminal and navigate to the directory that your project will live in.
  4. Clone the forked repository by pasting git clone YOUR REPO URL into your terminal.
  5. Navigate into your local Honeycomb directory and enter php -S localhost:8000.
  6. Go to the localhost:8000 web address in your browser to see your new project and begin customizing project files.
  7. For Sass (optional): Go to /honeycomb/static in a new terminal window, enter sass --watch sass:css to begin watching your files.

Navigating Honeycomb files

index.php is a local version of a basic McClatchy page framework (i.e. the market's header/footer, styles, etc.). The contents of this file create a local developing environment for you but shouldn't be edited or included in Newsgate.

custom.php starts with a sample story and generic elements that is your canvass to customize.

  • <!-- custom head --> is where you may add style and miscellaneous dependencies.
  • <!-- custom body --> is where you may add HTML and usually includes:
    1. <!-- content header --> for hero images/videos, title text and other top hierarchy elements.
    2. <!-- content body --> for story text, art and other elements weaved throughout the story.
    3. <!-- content footer --> for breakout sections, suggested stories, comments and other bottom hierarchy elements.
  • <!-- custom scripts --> is where you may add JS or other script dependencies.

####Existing dependencies

  • css/base.css and scripts/base.js contain all of the base styles and scripts. Changes to these files are not recommended.
  • css/custom.css is where new styles should be added to build upon or override those established in css/base.css.
  • scripts/custom.js is where new scripts should be added.

####Sass -sass/custom.scss is available and ready to compile into its .css counterpart if you prefer writing with Sass.

Transferring to Newsgate

  1. Upload your img, css and scripts directories to your server.
  2. Update your dependencies and image links in custom.php with their new URLs.
  3. Paste your custom body code (excluding body copy) from custom.php into Newsgate's mm_link sections. Include their mm_embed counterparts within the story copy.

Changelog

No changes... yet.

Clone this wiki locally