Dependencies of a Style Guide

Steffen Pedersen
Sep 12, 2018 · 10 min read

Dependencies

The Most Essential Dependencies

Jekyll

Webpack

Docker

TeamCity

AWS

More Dependencies/Tools

ES2015

let age = 28;
const mind = 'child';
if (age > 21) {
mind = 'adult'; // error
let death = 'Death is coming'; // unused
}
console.log(age); // 28
console.log(mind); // 'child'
console.log(death); // unresolved
button.addEventListener('click', e => {
e.preventDefault();
this.click();
});
let units = 50;
el.style.height = `${units}px`;
const name = name => {};const age = age => {};export {
name,
age
};
import * as Person from './submodules/person';Person.age(24);

SCSS

$font-size: 2em;.element {
font-size: $font-size;
}
$font-sizes: (
small: 0.5em,
large: 2em
);
.element {
font-size: map-get($font-sizes, large);
}
.parent {
display: block;
.child {
color: red;
}
.child {
color: blue;
}
}
.parent {
display: block;
}
.parent .child {
color: red;
}
.parent .child {
color: blue;
}
@mixin grid($color: #000, $width) {
color: $color;
width: $width;
}
$size: $base * 1.2;
@mixin grid($color: #000, $width) {    
color: $color;
width: $width;

@if $grid-border {
border: 1px solid;
}
}
@function z-index($key) {
@return map-get($z-index, $key);
}

SVG

Rake

task :default => ["jekyll:serve"]

Liquid

Yarn

yarn add babel

RubyGems

bundle install

Concepts

ITCSS

BEM

.c-button {
display: inline-block;
padding: 1em;
}
.c-button {
display: inline-block;
padding: 1em;

&__text {
font-size: 1em;
font-weight: 400;
}
}
.c-button {
display: inline-block;
padding: 1em;

&__text {
font-size: 1em;
font-weight: 400;

&--bold {
font-weight: 700;
}
}
}

BEMIT

Folder Structure

States for Patterns

Mobile

<meta name="viewport" content="width=device-width,initial-scale=1">
.c-class {
width: 100%;
@media screen and (min-width: 600px) {
width: 900px;
}
}

Further Development

UI

Move Assets Out of the Style Guide

Add to a Project


Steffen Pedersen

Written by

Hi, my name is Steffen, and I work with the interwebs 💻

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade