Skip to content

Home

Jump to bottom
Kristi Walker edited this page Jan 11, 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 download the zip.
  3. Unzip the Honeycomb folder and place it in your local project folder.
  4. Open a new terminal window and change directories to your project folder that contains Honeycomb.
  5. 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): Change directories 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 well --> 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