Install henris SCSS file

app.scss

// Basics
@import 'tools/pre';
@import 'typography/embed';

// Define output settings for project
$output: set-output(css, true);
$output: set-output(reset-extra, false);
$output: set-output(color-background-colors, true);
$output: set-output(color-text-colors, true);
$output: set-output(blockquote, false);
$output: set-output(form-fieldset, false);

// Output the whole framework
@import '~henris';
@import 'tools/post';
// Theme
@import 'typography/index';
@import 'components/index';

components-_example.scss

.example {
  // Example
}

components-_index.scss

@import 'example';

install.sh

URL="https://gist.githubusercontent.com/silvandiepen/f103e4c729d04300d67eba1cf431d67d/raw"

curl -o app.scss -l ${URL}/app.scss 
printf 'App.scss created' 

# tools
mkdir tools 

curl -o tools/_index.scss -l ${URL}/tools-_index.scss 
curl -o tools/_pre.scss -l ${URL}/tools-_pre.scss 
curl -o tools/_post.scss -l ${URL}/tools-_post.scss 

printf 'Tools created!' 

# typography
mkdir typography 

curl -o typography/_index.scss -l ${URL}/typography-_index.scss 
curl -o typography/_embed.scss -l ${URL}/typography-_embed.scss 
curl -o typography/_spacing.scss -l ${URL}/typography-_spacing.scss 
curl -o typography/_usage.scss -l ${URL}/typography-_usage.scss 

printf 'Typography created!' 

#components
mkdir components 

curl -o components/_index.scss -l ${URL}/components-_index.scss 
curl -o components/_example.scss -l ${URL}/components-_example.scss 

printf 'Components created!' 

tools-_index.scss

@import 'pre';
@import '~henris';
@import 'post';

tools-_post.scss

$color-primary: color(Blue);
$color-warning: color(Orange);
$color-border: color(Green);

tools-_pre.scss

// Load custom-output & setting tools
@import '~henris/custom-output';

// Add custom project colors
@import '../color/index';

// Add extra media queries
$xxlarge-down: 'screen and (max-width: 1920px)';
$xxlarge-up: 'screen and (min-width: 1920px)';
$xxxlarge-down: 'screen and (max-width: 2560px)';
$xxxlarge-up: 'screen and (min-width: 2560px)';

// Define font variables
$primary-font-family: 'Helvetica', serif;
$secondary-font-family: 'Times New Roman', sans-serif;

typography-_embed.scss

// $font-primary: (
// 	font-family: (
// 		Graphik,
// 		sans-serif
// 	),
// 	load: true,
// 	weights: (
// 		"Light": 100,
// 		"Regular": 400,
// 		"Medium": 500,
// 		"Bold": 600,
// 		"Black": 800
// 	),
// 	weight-classes: false,
// 	path: "/fonts",
// 	files: (
// 		"woff2",
// 		"woff",
// 		"ttf",
// 		"eot"
// 	),
// 	use: (
// 		"h1",
// 		"h3",
// 		"h4",
// 		"span.text",
// 		"#section"
// 	),
// 	types: (
// 		"normal",
// 		"italic"
// 	)
// );

typography-_index.scss

@import "embed";
@import "spacing";
@import "usage";
@import "spacing";

typography-_spacing.scss

h1 + p{
	margin-top: grid(1); 
}

h2{
	& + p{
		margin-top: 2rem; 
	}
}

p{
	& + blockquote{
		margin-top: 1.5rem; 
	}
}

typography-_usage.scss

h1,
h2,
h3,
h4,
h5 {
  font-family: $font-written;
  color: inherit;
}

h1 {
  font-weight: normal;
  font-size: calc(#{grid(1.5)} + 2rem);
}
h2 {
  font-weight: normal;
  font-size: calc(#{grid(1.25)} + 1rem);
  line-height: 0.75;
}
h3,
h4 {
  width: 100%;
  display: block;
}
p,
blockquote {
  font-size: 1.2rem;
  font-family: sans-serif;
  & + p {
    font-size: 1rem;
  }
}

blockquote {
  font-size: 1rem;
  padding: 1rem;
  background-color: color(White, 0.5);
  width: auto;
  margin: auto;
  display: block;
	border-radius: 2rem;
	border: 2px solid color(Dark);
  a {
    text-decoration: none;
    font-weight: bold;
  }
}