Skip to content

Home

Jump to bottom Edit New page
Matej Latin edited this page May 31, 2016 · 11 revisions

##Getting started ###Installation Gutenberg is built with Sass and Grunt. Fork or download the repository to get started.

npm install gutenberg-web-type

The most important files in the repository are:

Sass files in src/style

gutenberg.scss
_gutenberg-config.scss
helpers
  _alignment.scss
  _grid.scss
layout
  _aside.scss
  _base.scss
  _footer.scss
  _header.scss
  _main.scss
  _section.scss
mixins
  _font-size.scss
  _line-height.scss
  _margin.scss
  _padding.scss
 modules
  _anchor.scss
  _article.scss
  _audio.scss
  _canvas.scss
  _code.scss
  _details.scss
  _figure.scss
  _form.scss
  _headline.scss
  _horizontal-rule.scss
  _image.scss
  _list.scss
  _navigation.scss
  _progress.scss
  _quote.scss
  _table.scss
  _template.scss
  _text.scss
  _video.scss

JavaScript files in src/js

  • main.js includes the 'fix image height' script that resizes images so they fit into grid

Note: resizing the images with this JavaScript is optional. Images that aren't resized break the grid but the vertical rhythm isn't affected.

##Setting up a typographic style File: _gutenberg-config.scss

###Edit mode Disables or enables the toggle baseline grid button.

$edit-mode: true; // [ true / false ] - Enables/disables the grid toggle button.

###Themes Choose from 2 default themes or go for the custom option.

$theme: Merriweather; // [ Merriweather / OpenSans / custom ]
$custom-font-body: null !default; // [ "Libre Baskerville", Georgia, serif ]
$custom-font-headings: null !default;

You need to provide a custom font stack if you go for the custom option: "Libre Baskerville", Georgia, serif

###Paragraph indenting New since 1.1 update. Paragraphs have no breaks between them but the first line of a paragraph following another paragraph is indented.

Indented paragraphs

An example of indented paragraphs.

$paragraph-indent: false; // [ true / false ]

###Base sizes Base sizes that are the basis of Gutenberg. All calculations are based on these sizes.

$base-font-size: 100 !default;
$base-font-size-desktop: 112.5 !default;
$line-height: 1.625;
$line-height-desktop: 1.7;
$max-width: 35;

$base-font-size and $base-font-size-desktop must be set in percentages. They will be converted to pixels and REMs in later calculations.

$line-height and $line-height-desktop must be set in decimal numbers.

$max-width must be set in a full number that will be converted to pixels and REMs.

Calculation example for mobile sizes:

$base: 16 * ($base-font-size / 100);
$leading: round($base * $line-height);
$leading-rem: $leading / $base;

Note: $leading number gets rounded because different browsers treat decimal pixels differently. You should configure Sass to round numbers to 15 decimals to get the best results with Gutenberg. If not, some sizes might seem to break the baseline grid.

###Modular scale A collection of sizes based on Modular Scale by Tim Brown. Only used as a guide for now. A possibility to change modular sizes is planned for future releases.

###Colors All color variables.

$color-font-body: #222222;
$color-font-headings: $color-font-body;
$color-font-light: #888;
$color-font-figcaption: $color-font-light;

$color-link-normal: $color-font-body;
$color-link-hover: $color-font-body;
$color-link-active: red;
$color-link-visited: $color-font-light;

###Headings options File: /src/style/_heading.scss

All heading sizes, line-heights and margins are all stored in this Sass map.

$headings: (
  h1: (2.5, 2, 4, 1),
  h2: (1.6875, 1.5, 2.5, 0.5),
  h3: (1.375, 1, 2, 0.5),
  h4: (1.2, 1, 1.5, 0.5),
  h5: (1, 1, 2.5, 0.5),
  h6: (1, 1, 2.5, 0.5)
) !default;

Numbers from left to right are: font-size, line-height, margin-top, margin-bottom.

###Horizontal rule File: /src/style/_horizontal-rule.scss

Horizontal rule comes in two styles: line and type. General settings for horizontal rule are $hr-margin (for mobile), $hr-mobile-desktop (can match $hr-margin if no difference for desktop screens required) and $hr-color.

$hr-style: type; // [ line / type ]
$hr-type-content: '***'; // [ '***' ]
$hr-type-char-spacing: 0.2em; // [ 0.2em ]
$hr-margin: 2;
$hr-margin-desktop: $hr-margin;
$hr-color: $color-font-body;
$hr-width: 100; // [ 100 ] — In pixels, only for line style
$hr-height: 4; // [ 2 ] — In pixels, only for line style

The line style can be configured by width and height, both set in pixels. The type style variables include $hr-type-content (characters) and $hr-type-char-spacing (spacing between the characters).

An example of 'line' horizontal rule.

Type horizontal rule

An example of 'type' horizontal rule.

##Special elements and classes

###Float and align classes Gutenberg has some classes that work very well with elements like figures, quotes and headings.

.floatLeft // Floats the element to the left
.floatCenter // Centers the element by setting the left and right margins to auto
.floatRight // Floats the element to the right

.alignLeft // Aligns text to the left
.alignCenter // Centers the text
.alignRight // Aligns text to the right

###Attention grabber New since 1.1 update. Usually used as an intro of the text. Makes the text slightly bigger than body text which results in a nice contrast.

Attention grabber

An example of an attention grabber at the beginning of the article.

<p class="attention-grabber">
	An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term.
</p>

###Figures Figures can be floated with the .floatLeft or .floatRight classes. Floated figures are pushed outside of text content on desktop screens but not on mobile.

<figure class="floatLeft">
	<img src="image.jpg" alt="image">
	<figcaption>Image description</figcaption>
</figure>
Floated figure

An example of a figure with .floatLeft class applied.

###Blockquote Blockquotes are indented, font-size is slightly smaller than body text and in italics.

Correct semantic HTML code for blockquotes:

<blockquote>
	<p>It is a press, certainly, but a press from which shall flow in inexhaustible streams… Through it, god will spread his word.</p>
	<footer>
		<cite>—Johannes Gutenberg</cite>
	</footer>
</blockquote>
Blockquote

An example of a blockquote.

###Quote New since 1.1 update. Quotes that are also figures are bigger and can be floated with .floatLeft or floatRight classes.

HTML code for quotes:

<figure>
	<blockquote>
		<p>It is a press, certainly, but a press from which shall flow in inexhaustible streams… Through it, god will spread his word.</p>
		<footer>
			<cite>—Johannes Gutenberg</cite>
		</footer>
	</blockquote>
</figure>
Figure quote

An example of a quote wrapped in <figure> tags.

Floated figure

An example of a quote wrapped in <figure> tags and with .floatLeft class applied.

Footer

Clone this wiki locally