Overview

The goal of this style guide is to provide a flexible framework for all Data Team graphic projects. This wiki should act as a reference. However, the style guide repo also provides a suite of style files that can be installed via NPM and utilized as a boilerplate styling framework for your projects.

This repo comes with versioning and is installable via npm.

Inspiration is pulled liberally from the SF Chronicle and Texas Tribune news app templates.

Installing the style files

npm install --save-dev express-news-styleguide

Utilizing the style files

The style files are written in SCSS — a Sass syntax that builds on the existing CSS syntax. If you're unfamiliar with Sass or SCSS, read this guide to catch up on the basics.

On its first iteration, the style files are broken into two folders – base and theme. Currently theme contains just one file, graphic.scss, which operates as a boilerplate that can be used with c3 and graphicBuilder graphics. Learn more about how base is structured here.

If installing via NPM, you can access the style files in your project's .scss files like this:

@import 'node_modules/express-news-styleguide/init-base';
@import 'node_modules/express-news-styleguide/theme/graphic';

Typography

The most important rule to remember with typography is that, in graphics, we use a sans-serif font. This includes for the header, the chatter and anywhere else in the graphic. Since our regular text is serif, this allows us to differentiate graphic blocks and copy from regular text and headers.

With this in mind, we generally utilize three fonts. These are as follows:

• Sans-serif (for use in all graphic typography):
  • "Helvetica Neue", Helvetica, Arial, sans-serif;
  • This is some text written with our main sans-serif font.
• Serif (for use in regular paragraph text outside of graphics):
  • "Sanchez", serif;
  • This is some text written with our main serif font. We use this for paragraph text in stories but not graphics.
• Serif (for use in titles outside of graphics):
  • "Suez One", serif;
  • This is some text written with our title serif font. We use this for title in stories but not graphics.

Two of those fonts will need to be imported from Google Fonts. That can be done in two ways:

• In HTML:
  • <link href="https://fonts.googleapis.com/css?family=Sanchez|Suez+One" rel="stylesheet">
• Or in CSS:
  • @import url('https://fonts.googleapis.com/css?family=Sanchez|Suez+One');

Font sizes are flexible at the moment. However, if we assume the baseline font size to be 14px, we can say that in most cases:

• Paragraph text should be 1.2em
• Title text should be 2em

Graphic color schemes

At least for the moment, we haven't set any definitive styles for graphic colors. That being said, we do have a graphic color chart that you can use to help pick logical color combinations. It looks like this:

You can download the graphic color chart (and view it in more detail with hex and RGB codes) by clicking here.

We also support the use of ColorBrewer color schemes.

Political colors

When 'tis the season, here are the colors to use:

• Democratic Blue:
  • rgb(23, 117, 174)
  • #1775AE
  • $dem-blue // sass variable
• Republican Red:
  • rgb(214, 73, 70)
  • #D64946
  • $rep-red // sass variable

Standard ExpressNews colors

Colors should match those utilized in the story template and/or those in your graphic depending on proximity. This being said, there are two colors we use frequently on E-N.com:

• ExpressNews Black:
  • rgb(20, 20, 20)
  • #141414
  • $en-black // sass variable
• ExpressNews Red (utilized for linked text):
  • rgb(186, 20, 26)
  • #BA141A
  • $en-red // sass variable

Longform Colors

The longform React template comes with its own unique color scheme. For reference, here are the colors associated with that template:

• Longform Red:
  • rgb(246, 0, 0)
  • #F60000
  • $longform-red // sass variable
• Longform Yellow:
  • rgb(248, 248, 0)
  • #F8F800
  • $longform-yellow // sass variable
• Longform Orange:
  • rgb(252, 176, 1)
  • #FCB001
  • $longform-orange // sass variable
• Longform Gray:
  • rgb(122, 122, 122)
  • #7A7A7A
  • $longform-gray // sass variable

Understand the SASS variables

Each color discussed above, including all those in the graphic color chart, is available as a SASS variables in the ExpressNews style guide. If you download this style guide via NPM, you can utilize the variables in your project and modify them as you see fit for the circumstance.

If you are new to SASS, you can learn more here.

Understand The Base .SCSS Files

Everything you need to jump start a project is contained in the base folder. Here's an explanation of each of the partials:

_base.scss

These are the only styles applied directly to HTML elements. If you really need a clean slate, don't use this partial. But it's helpful for normalizing styles and inheriting basic news apps prose styles without using additional classes.

_colors.scss:

All of our colors are assigned to $variables, most of which have a descriptive name to help you decide when to use it. For example, $rep-red and $dem-blue are used for typical political party designations.

_tables.scss:

This partial contains one mixin to rule them all — i.e. all the variations of mobile table styles. Skip to Tables to learn more.

_typography.scss:

Our style guide has a modular typography system. By changing the size $variables, you can change font-sizes across the entire project. The system also allows you to designate font-size with .classes in your HTML or @extend %font-sizes on new classes.

Tables

I will need to build out proper examples of how to use the table styling, but I think it will really help to speed up our efforts in building flexible mobile first tables. The style file is viewable here.