Skip to content

Home

Jump to bottom
Kristi Walker edited this page Mar 6, 2017 · 9 revisions

Honeycomb

What is it?

This is a base design for McClatchy's Special Projects Template (sometimes referred to as the Escenic Sinclair template). Honeycomb is for local development that can easily be moved over to Content Studio for testing and publishing.

Why use it?

Honeycomb standardizes and streamlines the process of creating special project designs within Content Studio 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

  1. Go to the [Honeycomb repo] (https://github.com/mcclatchy/honeycomb) and download the zip.
  2. Unzip honeycomb-master and place its contents in your local project folder, deleting honeycomb-master once it's empty.
  3. Open a new terminal window and change directories to your project folder with the Honeycomb files.
  4. Enter php -S localhost:8000.
  5. Go to the localhost:8000 web address in your browser to see your new project and begin customizing project files.
  6. 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.

Changelog

No changes... yet.

Clone this wiki locally