HFC Relay - Readme

In progress.

Features:

• No Plugins
• CSS: Fraction-based Grid
• CSS: Responsive Snippets
• CSS: Snippets & Helpers
• Automatic Breadcrumb
• Generated Navigation
• Slider
• Buttons & Button Groups (need work)
• Sublime Snippets
• Gulp: automatic optimizations (html, js, css)
• Gulp: component creation
• Gulp: browser-sync & live refresh

---

# The Grid The Grid is a **fraction-based** grid system and uses flexible sass-mixins instead of fixed classes.

This approach has the following advantages over conventional grids:

• Flexibility - just pass any $fraction and $gutter you like
• Cleanliness - keep your Markup clean and readable
• Simplicity - keep all styles & behavior in one place (separation of concerns)

###Requirements

• Global Border Box (recommended usage)
• Flexbox (use @include flexbox(); on containing element)
• Row containers (working to get rid of those)

###Usage

@include column(1/4);
@include column(2/9);
@include column(14/23);

###Adding Gutters

By default a column has no gutters. You can add gutters like so:

@include column(1/6, $gutter: true); 		// adds global gutters (use: 'true' or 'false')
@include column(1/6, true); 				// shorthand 

Note: This uses the global $whitespace variable for gutters.

You can also specify your own gutters like so:

@include column(1/6, $gutter: 10px); 		// adds px gutters
@include column(1/6, $gutter: 2em); 		// adds em gutters
@include column(1/6, $gutter: 3%); 			// adds % gutters
@include column(1/6, $gutter: $var); 		// you can also use sass-variables
@include column(1/6, $gutter: $var/2); 		// you can even do math with them

###Beta: Adding Behavior

By default a column has no special behavior. You can add two different behaviors like so:

@include column(1/6, $gutter: true, $behavior: stacking);
@include column(1/6, $gutter: true, $behavior: doubling);

Stacking: Columns use the full width on smallest breakpoint (common pattern)
Doubling: Columns automatically respond to certain breakpoints (try it out to better understand)

###Beta: Fixed & Auto Columns

Fixed Width-Columns can be used like so:

@include column(250px);

Auto Width-Columns can be used like so:

@include column();

Warning: Neither of those have access to gutters or behaviors!

###Snippets The Snippets for Sublime Text are optional but make the workflow much faster.
Install: Download the Snippets and place them in your (path_to_sublime)/Packages/User folder.
Usage: Just type column and hit TAB to place your include.

###Playground You can test the mixin over here:
Open Grid-Playground

#Responsive Mixins Four sets of sass-mixins let you control the responsive flow of your document:

• Above a certain breakpoint (@include respond-above(breakpoint-name) { ... })
• Below a certain breakpoint (@include respond-below(breakpoint-name) { ... })
• At a certain breakpoint (@include respond-at(breakpoint-name) { ... })
• From a certain breakpoint (@include respond-from(breakpoint-name, breakpoint-name) { ... })

You can also pass a px value instead of a breakpoint-name.

###Usage

Above a certain breakpoint (mobile-first)

.foo {
	//styles
	@include respond-above(xs) { ... }				// accpets breakpoint-names: xs, s, m, l, xl, xxl
	@include respond-above(500px) { ... }			// or specific px value
}

Below a certain breakpoint (desktop-first)

.foo {
	//styles
	@include respond-below(xs) { ... }				// accpets breakpoint-names: xs, s, m, l, xl, xxl
	@include respond-below(500px) { ... }			// or specific px value
}

At a certain breakpoint

.foo {
	//styles
	@include respond-at(xs) { ... }					// accepts breakpoint-names: xs, s, m, l, xl, xxl
	@include respond-at(500px) { ... }				// or specific px value
}

Between two breakpoints

.foo {
	//styles
	@include respond-between(xs, m) { ... }			// accepts breakpoint-names: xs, s, m, l, xl, xxl
	@include respond-between(500px, 900px) { ... }	// or two specific px values
}

###Placement You can use the breakpoint-mixins in two ways:

Either inside your class-declarations...

.foo {
	color: red
	@include respond-above(l) { color: blue }
}

... or on their own.

.foo {color: red}
@include respond-above(l) { 
	.foo { color: red }
}

Both is fine.

###Snippets The Snippets for Sublime Text are optional but make the workflow much faster.
Install: Download the Snippets and place them in your (path_to_sublime)/Packages/User folder.
Usage: Just type respond, choose your type (above, below, at or between) and hit TAB to place your include.

###Playground You can test the mixin over here:
Open Breakpoint-Playground

The Navigation

The Navigation is responsive out of the box.

###Adding a Page

• Create your page.md in the _pages folder

• Add Front Matter

---
title: "page"
permalink: "/page/"
layout: sidebar_double
position: 2
children: false
---

Done!

###Adding a Sub-Page

• Create your my_subpage.md in the _pages folder
  Note: you can also place it in a sub-folder for better organisation.

• Add Front Matter
  Note: The permalink controls the sub-nav

---
title: "my_subpage"
permalink: "/page/my_subpage"
layout: sidebar_double
position: 2
children: false
---

• Finally go back to the parent page (here: page.md) and set children: true

The Slider

Based on the Swiper Slider. Full API here, Demos here

###Usage

• Place the include in one of your pages or layouts:

{% include components_base/slider/slider.html arrows="light" pagination="light" %}
// arrows & pagination can be set to "light", "dark" or "none".

• To add/remove images just place them in this folder:

assets/images/slider

• Change Slider-Settings here:

/_includes/components_base/slider/slider.js

Done!

Position Shorthand

Use position relative, absolute or fixed in shorthand.

###Usage

// shorthand
@include position(relative, 10px, 0, 0, 0);

// returns
position: relative;
top: 10px;
right: 0;
bottom: 0;
left: 0;

###Playground You can test the mixin over here:
Open Grid-Playground

Arrows

Use css-arrows via sass-mixins.

###Usage

// centered up-arrow
@include arrow(); 
// right-aligned down-arrow
@include arrow($direction: down, $align: right);
// top-aligned left-arrow with specific color & size
@include arrow($direction: left, $align: top, $color: #eee, $size: 10px);

###Snippets The Snippets for Sublime Text are optional but make the workflow much faster.
Install: Download the Snippets and place them in your (path_to_sublime)/Packages/User folder.
Usage: Just type arrow and hit TAB to place your include.

###Playground You can test the mixin over here:
Open Grid-Playground

Quantity Queries

Change styles based on the quantity of Elements.
Example Usecase: Too many Elements in a horizontal Navigation

###Usage

@include quantity-at(4) {...} 			// styles when exactly 4 elements
@include quantity-above(4) {...} 		// styles when more than 4 elements
@include quantity-below(4) {...} 		// styles when less than 4 elements
@include quantity-between(2,4) {...} 	// styles between 2 and 4 elements

###Snippets The Snippets for Sublime Text are optional but make the workflow much faster.
Install: Download the Snippets and place them in your (path_to_sublime)/Packages/User folder.
Usage: Just type quantity, choose your type (above, below, at or between) and hit TAB to place your include.

###Playground You can test the mixin over here:
Open Breakpoint-Playground

#Components & Parts

Base Components

HFC Components

Parts

Parts can be used for building your own components.

Button

Optional: Define a title, a link, a style and/or a color.

• Style: can be "filled", "outlined" or "none". Default: "filled".
• Color: can be "brand" or any of the color variables. Default: "grey".

//without variables
{% include components/button/button.html %}
//width variables
{% include components/button/button.html title="MyTitle" link="link" style="filled" color="brand" %}

Buttongroup

Optional: Define a style and/or a color.

• Style: can be "filled", "outlined" or "none". Default: "filled".
• Color: can be "brand" or any of the color variables. Default: "grey".

//without variables
{% include components/button/buttongroup.html %}
//width variables
{% include components/button/buttongroup.html style="filled" color="brand" %}

#Other (in progress)

###Container Basic Container

@include container();

###Flexbox Use Flexbox

@include flexbox();