-
-
-
diff --git a/content/articles/designing-preons.md b/content/articles/designing-preons.md
deleted file mode 100644
index 676420c..0000000
--- a/content/articles/designing-preons.md
+++ /dev/null
@@ -1,340 +0,0 @@
----
-title: Recreating The Preons Theme
-date: 2020-06-05
-blurb: I'm not a designer. But I wanted to redesign the Preons' website. A process. From colors to website.
-image: https://d2l08bdqaswlm0.cloudfront.net/B76cJ57zw/2020/06/homepage-redesign.png
-author: Gemma Black
----
-
-## The problem
-
-I'm not a designer. But I wanted to redesign the Preons' website.
-
-To me, the original didn't look terrible, but it didn't look consistent.
-
-
-
-## The requirements
-
-- Represent a space theme. The mascot is a satellite.
-- Have both dark and light mode. Space is by nature, dark. So it makes sense to carry this motif in Preons. Light mode is essential because it's easier to read on lighter backgrounds.
-- Have consistency throughout the website
-
-## Color comes first
-
-My process was to start with color. And so I followed the principles in this video.
-
-
-
-
-
-## What colors
-
-The great thing about working in the browser, is you can find the colors of things with the color-picker tool. Using Chrome, I create a basic grid and pick out the main colors that I see in the logo.
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-Notice:
-
-- The yellow
-- Blues
-- Greys
-- Purple
-
-If you didn't see the mustard color, don't worry. Neither did I. But looking at it closely, it's hard to miss.
-
-## Dark vs lightmode
-
-So apps usually come in two modes. And we want to be able to cater to both.
-
-I picked a dark color first. I played around with hues from the blue in the logo and achieved a dark blue-towards-black color.
-
-
-
-## Not happy is okay
-
-I didn't like the blue. It looked green. Green to me represents our beautiful earth and plant life. It doesn't remind me of the expanses of space.
-
-So I changed the dark color.
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## The layout color
-
-So while the blue is fine, I think having the layout be a more blue/purple is better. Again, there's no exact science to this and I could always tweak it later if I really didn't like it.
-
-
-
-Happy with that, I found, I was still not a fan of the light blue. But, I was pleased the brand purple stood out against both modes.
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## Low contrast neutral colors
-
-
-
-You've probably noticed I followed the video, literally. I took the dark and light modes and toned them down a little.
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## High contrast colors
-
-I used the dark and light backgrounds from the opposite sides. So I'm not adding more colors to the palette here.
-
-
-
-## Reduced high contrast colors
-
-I reused colors again. I used the low contrast neutral colors but in reverse.
-
-It then turned out my neutrals were too subtle, so I changed them a little to get more contrast.
-
-> Don't be afraid to tweak things as you go along.
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## Error and success states
-
-Error is universally red. All I did was play around with a red that looked comfortable in both dark and light mode. You can create a red for each mode if you prefer, but then it means more colors in the palette.
-
-Success states are usually green or blue. Again, I used the same green for both dark and light mode.
-
-
-
-## Disabled state
-
-It's something I would forget about but the video brings it up. Your buttons sometimes need to be in a disabled state. So design for that.
-
-
-
-I now had 8 different colors but I was not done yet.
-
-## Active states
-
-These to me are things that tell people to click. It's a color of activity, so it's something you have to be careful not to use in your layout. Otherwise, you risk confusing your users.
-
-I decided to go with yellow. Plus on a Mac, the satellite emoji natively has a yellow body.
-
-
-
-> After the fact, I decided to have two active colors. Hotpink and yellow because the original Preons design had hotpink in it. Plus, I discovered yellow is too low-contrast for text which could present an accessibility issue.
-
-## Typography
-
-I was already satisfied with the typographic scale in Preons. It uses a [perfect-fourth](https://type-scale.com/) scale.
-
-However, the original Raleway font wasn't consistent with the new theme. Of course, I didn't want to be cliche, but it's a chance to add a bit more character to the website.
-
-
-
-I fell for Josefin Sans after 15 minutes of browsing through Google Fonts. And it seems I'm not the only one who can spend ages looking at fonts.
-
-
Building a website is
10% deciding what tech stack to use 5% coding 85% choosing what fonts to use
-```
-
-### Lesson 1 - Framework or library
-
-> **Library**
->
-> When you use a library, you are in charge of the flow of the application. You are choosing when and where to call the library.
->
-> **Framework**
->
-> When you use a framework, the framework is in charge of the flow. It provides some places for you to plug in your code, but it calls the code you plugged in as needed.
->
-> \- [The Difference Between a Framework and a Library](https://www.freecodecamp.org/news/the-difference-between-a-framework-and-a-library-bd133054023f/)
-
-Updating Tachyons felt like I was using it as a framework rather than as a dependency. To prevent priority issues, you need to insert your new css classes at particular places inside the stylesheet. But then the line is blurred between what is mine and added, and what is Tachyons'.
-
-Then I thought, maybe it's better instead, not to extend Tachyons, but generate it instead.
-
-### Lesson 2 - Use what exists
-
-As a developer, I must admit, there's always the temptation to write functionality from [scratch](https://qr.ae/pNycBu) instead of tweaking something that does a good job already. So I found a [tachyons-scss](https://github.com/tachyons-css/tachyons-sass) library. It was perfect! Except, I still felt like I was hard-coding styles.
-
-
-```scss
-.b--dotted { border-style: dotted; }
-.b--dashed { border-style: dashed; }
-.b--solid { border-style: solid; }
-.b--none { border-style: none; }
-
-@media #{$breakpoint-not-small} {
- .b--dotted-ns { border-style: dotted; }
- .b--dashed-ns { border-style: dashed; }
- .b--solid-ns { border-style: solid; }
- .b--none-ns { border-style: none; }
-}
-```
-
-## Iteration 1 - Preonize
-
-### Generate a library
-
-What if I defined all my rules using sass maps like that:
-
-```scss
-$colors: (
- 'blue': #365e86,
- 'white': #ffffff,
- 'grey': #eef0ee,
- 'grey-dark': #89969d
-);
-```
-
-Then applied them to a css property like `background-color` to get this:
-
-
-```css
-.bg-blue { background-color: #365e86; }
-.bg-white { background-color: #ffffff; }
-.bg-grey { background-color: #eef0ee; }
-.bg-grey-dark { background-color: #89969d; }
-```
-
-The icing on the cake is having each rules at different breakpoints in the right order. Priority problem solved.
-
-
-```css
-.bg-blue { background-color: #365e86; }
-
-@media screen and (min-width: 40em) {
- .bg-blue-m { background-color: #365e86; }
-}
-
-@media screen and (min-width: 60em) {
- .bg-blue-l { background-color: #365e86; }
-}
-```
-
-And so I wrote the preonize function. And that was it. Almost.
-
-```scss
-@mixin preonize($name, $prop, $map, $breakpoints) {
- @each $label, $value in $map {
- .#{$name}#{$label} {
- #{$prop}: $value;
- }
- }
-
- @each $breakpoint, $breakpoint-value in $breakpoints {
- @media #{$breakpoint-value} {
- @each $label, $value in $map {
- .#{$name}#{$label}-#{$breakpoint} {
- #{$prop}: $value;
- }
- }
- }
- }
-}
-```
-
-All I had to do was define all my reusable rules, and apply them using `preonize`.
-
-```scss
-@include preonize('bg-', background-color, $colors, $breakpoints);
-@include preonize('fill-', fill, $colors, $breakpoints);
-@include preonize('', color, $colors, $breakpoints);
-
-// etc
-```
-
-Preonize took 4 things:
-
-- a class prefix like `bg-`
-- a css property like `background-color`
-- a sass map of rules like `$colors: (white: #ffffff, black: #000000)`
-- and an array of breakpoints to apply those rules
-
-I could generate an entire functional CSS library from a [base sass file](https://github.com/gemmadlou/Preon/blob/master/assets/scss/preon.scss). Minor changes were now trivial. Update the sass maps; compile to css.
-
-If I left it at this, I'd be happy. I already built [carolblackmusic.co.uk](https://carolblackmusic.co.uk), [pixelexaspect.com](https://pixelexaspect.com) and [kammadata.com](https://kammadata.com) this way. But I had come across some issues.
-
-### Lesson 3: Opinions and conventions
-
-There are definitely wrong ways to do things, but usually there are no single right ways. But it's also true, that not having an opinion for a project will cause confusion eventually, even with one maintainer.
-
-So some of the classes I didn't like were the ones that redeclared rules for the same css property, like `padding-bottom`. For example, padding-bottom could override a completely different class prefix `aspect-ratio`.
-
-This causes the priority issue again.
-
-I felt that there should be one class prefix for one css property.
-
-The other thing I didn't want was for a class to represent two CSS properties. One example is margins. So instead of one class representing `margin-left` and `margin-right` at the same time, it's more explicit to just use two.
-
-```html
-
-
-
-
-
-```
-
-This decision would eventually help me to write simpler code generators for Preons, though at the time, I didn't know it.
-
-### Lesson 4 - Eat your own dog food
-
-I have [Gary Gale](https://twitter.com/vicchi) to thank for the phrase. All it means is, what you're giving others to use, are you using it yourself?
-
-So it's all good building a CSS library but could _I_ use it? In fact, using it highlighted limitations of functional css in general very quickly.
-
-1. Displaying user-generated articles
-2. Hovers and animations
-
-### Limitation 1 - Displaying user-generated articles
-
-How could I expect a user to write an article and add margins to every paragraph?
-
-```html
-
My wonderful article paragraph.
-
Next headline
-```
-
-Doing so:
-
-- would actually cause inconsistencies in the design
-- make writing in WYSIWYGs difficult
-- writing markdown would be no different from writing html
-- just in general, the writing experience would be awful and take longer
-
-So the solution to this is to create scoped article classes such as `s-article`, something I learned from working with [Milad Alizadeh](https://github.com/milad-alizadeh) and [Chris Boakes](https://github.com/chrisboakes).
-
-Here's a snippet I use for this Preons' documentations website:
-
-```scss
-.s-article {
- @extend .lh0;
- @extend .fs0;
- @extend .lh1-m;
-
- li,
- p {
- @extend .mb1;
- }
-
- h1 {
- @extend .fs2;
- @extend .lh2;
- @extend .mb2;
- @extend .fwb;
- }
-
- h2 {
- @extend .fs1;
- @extend .lh2;
- @extend .pt2;
- @extend .mb1;
- @extend .fwb;
- @extend .bwb1;
- @extend .bsb-solid;
- @extend .bca-greyxl;
- @extend .lh4-m;
- }
-}
-```
-
-Then I apply it where it is needed so it doesn't affect the entire site:
-
-```html
-
-
-
-```
-
-### Limitation 2 - Hovering and animations
-
-Animations are the life-blood of interactive websites. At a minimum, we need to hover and change things like colours of text and backgrounds on buttons. Okay, it's not essential, but great for user experience. So a new preonize function would be needed.
-
-```scss
-@mixin preonize-hover($name, $prop, $map, $breakpoints) {
- @each $label, $value in $map {
- .#{$name}#{$label}:hover {
- #{$prop}: $value;
- }
- }
-
- @each $breakpoint, $breakpoint-value in $breakpoints {
- @media #{$breakpoint-value} {
- @each $label, $value in $map {
- .#{$name}#{$label}-#{$breakpoint}:hover {
- #{$prop}: $value;
- }
- }
- }
- }
-}
-```
-
-## Iteration 2 - A CLI
-
-### The Story
-
-After building a few sites, I had a problem. There were differences in the class conventions I used between them. What was `max-width` again?
-
-```css
-.mw1 {
- max-width: 1rem;
-}
-
-/** or **/
-
-.maxw1 {
- max-width: 1rem;
-}
-```
-
-And what about the colours? What's the convention? The colour first, or the modifier first?
-
-```css
-.dark-grey {
- color: grey;
-}
-
-/** or **/
-
-.grey-dark {
- color: grey;
-}
-```
-
-I had very few conventions and was mainly inspired by Tachyons. But switching between projects I was forgetting what rule applied where.
-
-Looking up classes wasn't easy using my sass file. I had to find the CSS class, then look up the corresponding global style.
-
-I could look through the CSS, but then I thought, that's not great user experience. If I could config my rules in yaml or JSON, I could generate documentation.
-
-
-
-It was reading [Cyrille Martraire's](https://twitter.com/cyriux?lang=en) book on [Living Documentation](https://www.amazon.co.uk/gp/customer-reviews/R1M97XQ5OMYLU9/ref=cm_cr_dp_d_rvw_ttl?ie=UTF8&ASIN=0134689321) that cemented the idea of turning existing code into docs. And your code would always be in sync with your documentation. But it was a [Michael Bryzek video](https://youtu.be/j6ow-UemzBc?t=1190) that took the concept one step further, generating code from your config.
-
-And he had a point.
-
-With a config, I could generate styles themselves from a yaml config into any CSS style language I liked.
-
-- Sass
-- Postcss
-- Less.
-
-One single config would be the definition for both the library _and_ the documentation.
-So `preons.yaml` was born.
-
-```yaml
-preons:
- baseline: 1.2rem;
-
- gutter: 2.5rem;
-
- rules:
-
- # Preon breakpoints
- breakpoints:
-
- # Preon classes
- classes:
- - label: bg-
- css-property: background-color
- rule:
- - color
- - label: bg-
- css-property: background-color
- rule:
- - color
-```
-
-Then I stopped working on the project...
-
-For ages.
-
-### Limitation 3 - Mixing and matching rules
-
-For widths, I wanted to use gradations of both percentages and `rems`.
-
-For margins, I wanted the same, but also negative rems. So unless I repeated myself, I needed a way of mixing different global rules together.
-
-```scss
-$scaled: (
- n1: -1rem,
- n2: -2rem,
- n3: -3rem,
- n4: -4rem,
- n5: -5rem,
- n6: -6rem,
- n7: -7rem,
- n8: -8rem,
- n9: -9rem,
- n10: -10rem,
- 0: 0,
- 1: 1rem,
- 2: 2rem,
- 3: 3rem,
- 4: 4rem,
- 5: 5rem,
- 6: 6rem,
- 7: 7rem,
- 8: 8rem,
- 9: 9rem,
- 10: 10rem
-);
-```
-
-So I found `map-collect`.
-
-```scss
-@function map-collect($maps...) {
- $collection: ();
-
- @each $map in $maps {
- $collection: map-merge($collection, $map);
- }
- @return $collection;
-}
-```
-
-Then I could mix-and-match them across different css properties:
-
-
-```scss
-@include preonize(
- 'pa',
- padding,
- $scaled,
- $breakpoints
-);
-@include preonize(
- 'pl',
- padding-left,
- map-collect($scaled, $discrete),
- $breakpoints
-);
-```
-
-## Iteration 3 - Tweaking the config
-
-### Array vs object of rules
-
-It occurred to me. Why am I using an array of [properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) when it should just be an object? I can't redeclare the same property twice because of the priority problem and the convention to solve that problem of 1 css property to 1 class prefix.
-
-Yaml linters highlight when you have duplicate properties in an object. It is not allowed. So that's a win in applying the convention.
-
-### Global vs standalone rules
-
-I also didn't like having to declare global rules for each CSS property. Sometimes rules only have to be applied once, eg. for display: flex
-
-```yaml
-align-content:
- class: content-
- values:
- start: flex-start
- end: flex-end
- center: center
- between: space-between
- around: space-around
- stretch: stretch
-```
-
-vs colours:
-
-```yaml
-color:
- class:
- rule: theme-colors
-
-background-color:
- class: bg-
- rule: theme-colors
-```
-
-### Generating documentation
-
-Doing `preons config` would spit out JSON based on the preons.yaml to make creating documentation easier:
-
-```json
-{
- "border-top-color": {
- "class": "bct-",
- "rule": "theme-colors",
- "values": {
- "black": "#242027",
- "white": "#fefeff",
- "greyxl": "#f6f5f9",
- "greyl": "#beb9cc",
- "grey": "#7d778e",
- "greyd": "#47454c",
- "transparent": "transparent",
- "hotpink": "#ea2889"
- },
- "mappings": {
- "bct-black": "#242027",
- "bct-white": "#fefeff",
- "bct-greyxl": "#f6f5f9",
- "bct-greyl": "#beb9cc",
- "bct-grey": "#7d778e",
- "bct-greyd": "#47454c",
- "bct-transparent": "transparent",
- "bct-hotpink": "#ea2889"
- }
- }
-}
-```
-
-I use this json to build the reference for the [docs](/search).
-
-### Lesson 5 - Release fast and automate versions
-
-Whether you adhere to [romantic versioning](https://github.com/jashkenas/backbone/issues/2888#issuecomment-29076249), [sentimental versioning](http://sentimentalversioning.org/) or [semantic versioning](https://semver.org/), managing versions manually is a bottleneck. Furthermore, it's like doing paperwork. But if it can be automated, it saves so much time.
-
-### Why?
-
-Because moving fast allows fixes and features to be released quickly. The developer writing the code should know if their update is breaking existing functionality or not, whether they are adding a feature, a fix, or an improvement or not.
-
-So I used Intuit's Auto. Running `npm run release` along with [Angular style commits](https://gist.github.com/stephenparish/9941e89d80e2bc58a153#format-of-the-commit-message):
-
-- bumps npm
-- tags the project
-- makes a release in GitHub
-- creates the changelog
-
-Done.
-
-### Lesson 6 - Distribute files easily
-
-[Michael Jackson's](https://twitter.com/mjackson) [Unpkg](https://unpkg.com/) allows you to access any file from an npm library at any version and it's free to use π. It made creating the [example repl](https://repl.it/@gemmadlou/Cards) easy.
-
-Here's a great intro to it:
-
-> https://kentcdodds.com/blog/unpkg-an-open-source-cdn-for-npm
-
-### Lesson 7 - Keeping the cli and stylesheets core
-
-"I don't know any good reason to split my codebase between stylesheet and cli over multiple repositories". So I package them together. Maybe this is bad. But until it becomes a problem, I decided to not worry about it.
-
-It means, preons-theme 0.3.28 was released at the same time as the cli which is also 0.3.28, even if the cli didn't change.
-
-### Lesson 8 - Skip the tests
-
-Now as of May 2020, there aren't any tests. There are no linters either. Dangerous? Maybe. But normally I'd fuss over assuring my code passes all sorts of code quality bells and whistles, not just because I'm a [badge junkie](https://shields.io/). This time, I was determined that version 0.0.z would just work and be functional.
-
-I think [Eric Elliot](https://twitter.com/_ericelliott?lang=en) says [something](https://twitter.com/_ericelliott/status/1187063655533334529) like:
-
-- Make it work
-- Make it stable
-- Make it fast
-
-Even though, he starts with tests, making it work is a lot more archaic for me. Make it stable is where tests come in and solidifying them under the right design.
-
-> βCoding faster: Make it work, then make it goodβ by Michael Parker https://link.medium.com/SRPxvd76F6
-
-[](https://medium.com/@gerterasmus23/the-greatest-example-ever-of-mvp-and-iterative-incremental-development-41fd718ece0)
-
-If anything, this is the biggest shift in my thinking. Having gone through several iterations, I finally designed a version of Preons that I actually like.
-
-If I started with TDD, I think I'd feel too precious about changing anything because TDD sometimes eats into the design phase, rather than just being a development tool.
-
-I genuinely think design comes before TDD and static type analysis. That's why JavaScript is so powerful. You can iterate fast without worrying about correctness of code.
-
-
An MVP is a viable prototype, not a final product. Don't worry about perfection. The idea is to get fast feedback from users.
-
-### Lesson 9 - Design first
-
-I saw a [video](https://www.youtube.com/watch?v=mNeXuCYiE0U&t=19s) where [James Clear](https://jamesclear.com/goals-systems) talked about two sets of photography students. One group had to come up with the perfect photo, one time. Another group had to take lots of photos and present their best one. The latter scored better apparently because applying their knowledge came from trial and error, learning what worked through practice versus theorizing what worked. That _is_ pragmatism. Practice over theory.
-
-My fear is, in our desire to follow best practice, we use tools that can hinder us at the wrong time. During the design phase, the learning phase, the prototyping phase, getting something to work is most important. Proving the possibility is most important.
-
-Now I've blitzed through the most basic of features, I have a choice:
-
-- to start firming up what I have with tests
-- try a different design
-- add more features
-
-## In conclusion
-
-I hope you enjoyed the article or at least learned that your open source project doesn't have to be right the first time around. By no means am I a decent writer or even correct about everything in this article. So please share feedback.
-
-If you're on Twitter, just [@GemmaBlackUK](https://twitter.com/GemmaBlackUK) and tell me what I did wrong π .
diff --git a/content/articles/roadmap.md b/content/articles/roadmap.md
deleted file mode 100644
index 9bf38b0..0000000
--- a/content/articles/roadmap.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Roadmap
-date: 2020-05-31
-blurb: Stage one of the Preons journey
-author: Gemma Black
----
-
-Preons' mission is this:
-
-1. Make it easier to build and componentize user interfaces
-2. Allow anyone to create beautiful, custom web sites
-
-## Not really a Roadmap
-
-Whilst not entirely a fan of the todo list, it's good to share what's on the horizon for Preons.
-
-## Stage One
-
-Stage one is to get the basic elements of Preons working without worrying about integrations. Chances are, the end of Stage One won't even get Preons to v1.0.0. However, tests and static analysis checks will be added to help others contribute securely.
-
-- [ ] Preons documentation
-- [x] Cheatsheet lookup (reference)
-- [x] Configuaration syntax
-- [ ] Standardize Preons conventions
-- [ ] CLI
- - [x] Sass generator
- - [x] Css generator
- - [x] References generator
- - [x] Documentation generator
- - [ ] Components generator
- - [ ] Reverse generator. Create preons.yaml from functional css styles
-- [ ] Tests
- - [ ] CLI
- - [ ] UI
- - [ ] Static Analysis
-- [ ] Pre-commit hooks
-- [ ] Travis CI build
-
-### The components generator
-
-Storybook will be used to display components in a design system. I like their way of displaying content, and making things reusable. It will also be the tool to help aid the tutorial on getting setup quickly.
-
-### The reverse generator
-
-This is going to take an existing library, like Tachyons and convert it into the Preons.yaml.
-
-Working from the `preons.yaml` is meant to make it easier to adjust settings quickly and build SCSS or CSS on the fly.
-
-## End goal
-
-By the end of stage one, I will determine if this project was just a helpful exercise in learning how to create a larger scale open-source project and be useful to just myself or whether it will have benefits beyond.
diff --git a/content/learn/cli/generate.md b/content/learn/cli/generate.md
deleted file mode 100644
index cdb688b..0000000
--- a/content/learn/cli/generate.md
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: β‘οΈ Generate your own library
-blurb: The Preons cli along with the preons.yaml allows you to customise your own functional css library
-author: Gemma Black
----
-
-In this short tutorial, you're going to create your own functional css library, using the naming conventions you choose.
-
-## Check you're all set up
-
-```bash
-preons -V
-```
-
-## Generate a stylesheet
-
-Generating a stylesheet is a combination of two steps:
-
-1. Creating a `preons.yaml` configuration file.
-
-2. Generating css from that configuration file.
-
-Just to show both steps at once, you're just going to downlooad the file and create the library.
-
-### 1. Create a preons.yaml
-
-Download [https://unpkg.com/preons@0.3.37/config/preons.yaml](https://unpkg.com/preons@0.3.37/config/preons.yaml).
-
-### 2. Generate the css
-
-```bash
-preons stylesheet --input preons.yaml
-```
-
-Notice how it generates unminified css of every rule defined in the preons.yaml. As one of the conventions that the Preons cli employs is not to output the files, to create a file, all you have to do is redirect the output.
-
-```bash
-preons stylesheet --input preons.yaml > myfile.css
-```
-
-> You can see the other options by doing `preons stylesheet -h`
-
-## Making changes
-
-The preons.yaml is organised into the following format:
-
-```yaml
-preons:
- baseline: # Baseline rule
-
- rules:
- # Object reusable rules
-
- properties:
- # Object of Css properties
-
- breakpoints:
- # Stylesheet breakpoints
-```
-
-### Properties
-
-Properties are where you define your css properties, eg. `background-color` and `margin-left`. You can only define a css property once otherwise the preons.yaml will not convert to css.
-
-It is defined in the following manner:
-
-```yaml
-preons:
- properties:
- height:
- class: h
- values:
- 1: 1rem
- 2: 2rem
-```
-
-#### The class
-
-This is the prefix of the functional css class. The above config will create the following css rules:
-
-```css
-.h1 { 1rem; }
-.h1 { 2rem; }
-```
-
-### Rules
-
-These are reusable rules across multiple css properties.
-
-```yaml
-preons:
- theme-colors:
- 1: 1rem
- 2: 2rem
- 3: 3rem
-```
-
-Sometimes you find yourself typing the same rules over and over again. Whilst this cannot be completely avoided, you can reuse these rules across multiple properties:
-
-```yaml
-preons:
- rules:
- theme-colors:
- black: '#242027'
- white: '#fefeff'
- grey: '#7d778e'
- hotpink: '#ea2889'
-
- properties:
- background-color:
- class: bg-
- rule: theme-colors
-
- color:
- class:
- rule: theme-colors
-```
-
-### Baseline
-
-This, you can use to define the vertical rhythm of your site. You can reference the `$baseline` in either the values of reusable rules.
-
-```yaml
-preons:
- rules:
- # For font line-heights
- baselined:
- -2: $baseline * 0.5
- -1: $baseline * 1
- 0: $baseline * 1.5
- 1: $baseline * 2
- 2: $baseline * 2.5
- 3: $baseline * 3
- -large: 4rem
- 4: $baseline * 4
- 5: $baseline * 5
- 6: $baseline * 6
- 7: $baseline * 6.5
- 8: $baseline * 7.5
-```
diff --git a/content/learn/cli/installation.md b/content/learn/cli/installation.md
deleted file mode 100644
index a3fbaf8..0000000
--- a/content/learn/cli/installation.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: π Install The CLI
-blurb: Easily start generating your own docs and libraries with the Preons CLI
-author: Gemma Black
----
-
-## Pre-requisites
-
-- Node v10+
-
-> It hasn't been tested on a Windows' machine. If there are any issues, please raise them [here](https://github.com/preons/preons/issues).
-
-## Install
-
-Install the Preons CLI globally.
-
-### Npm
-
-```bash
-npm i preons -g
-```
-
-### Yarn
-
-```bash
-yarn global add preons
-```
-
-## Commands
-
-```bash
-Usage: preons [options] [command]
-
-Options:
- -V, --version output the version number
- -h, --help display help for command
-
-Commands:
- stylesheet Generates a stylesheet
- config Converts config
- docs Generate documentation
- translate [file] Translate css into preons config
- help [command] display help for command
-```
diff --git a/content/learn/cli/quickstart.md b/content/learn/cli/quickstart.md
deleted file mode 100644
index 528116c..0000000
--- a/content/learn/cli/quickstart.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Quickly start with the API
-blurb: Easily start generating your own docs and libraries with the preons cli
-author: Gemma Black
----
-
-The Preons cli along with the `preons.yaml` allows you to customise your own functional css library. Maybe you prefer a different typescale for your fonts. Your website will need different colors or even additional colours than the one in the default preons theme. Maybe there are additional css properties that your project needs like filter, transitions and css grid.
-
-## The steps
-
-Run the following command to generate the stylesheet from the default yaml file that comes with Preons.
-
-```bash
-preons stylesheet
-```
-
-You will see the entire css printed out.
-
-> You can create a scss version using the -s flag.
-
-But now you will want to customise your own file. To do that, grab a copy of the [preons.yaml](https://raw.githubusercontent.com/preons/preons/master/config/preons.yaml). It should start like this:
-
-```yaml
-preons:
- baseline: 1.6rem
-
- rules:
- theme-colors:
- black: '#242027'
- white: '#fefeff'
- greyxl: '#f6f5f9'
- ## ...
-```
-
-Point it to your stylesheet and run:
-
-```bash
-preons stylesheet -i your.yaml
-```
-
-Output the css into a file:
-
-```bash
-preons stylesheet -i your.yaml > yourfile.css
-```
diff --git a/content/learn/guides/create-components/basic-card.md b/content/learn/guides/create-components/basic-card.md
deleted file mode 100644
index e8e1aab..0000000
--- a/content/learn/guides/create-components/basic-card.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: Create a basic card component
-blurb: Cards can be found on many websites. It's a good example to use to have a deeper understanding of both Preons and functional css.
-author: Gemma Black
----
-
-Cards can be found on many websites. It's a good example to use to have a deeper understanding of both Preons and functional css.
-
-
-
-So in this how-to, we'll be creating a **simple card component**. First, create the container. Setting `.maxw-xxxbig` will limit the size of the card to `32rem`. Setting `.bg-white` will ensure the card background colour is white against of the body's grey background.
-
-The image also needs to be flushed against the edges of the container.
-
-> .w-100 means 100% width and .h-au is height: auto.
-
-```html
-
-
-
-
-
-```
-
-The paragraph shouldn't be flushed against the edges, but have padding.
-
-```html
-
- When you need a card, but that card doesn't need a
- description.
-
-```
-
-Finally, the button is also going to be flushed. Notice, that the border-width is 0. The reset css with Preons doesn't remove borders on buttons. The background is hotpink but the font color is white. The height is set to h4 which is 4rem. And the padding is added either side of the button text separately.
-
-```html
-
-```
-
-All together, the card component code should look like this:
-
-```html
-
-
-
-
-
- When you need a card, but that card doesn't need a
- description.
-
-
-
-
-
-```
-
-You can probably think of ways to tweak the card component. Maybe you'd rather have padding around the image. Maybe there should be padding around the button also. Maybe the button should have a border-radius. You can make these changes in the browser without compiling any css again.
diff --git a/content/learn/guides/typography.md b/content/learn/guides/typography.md
deleted file mode 100644
index 6330501..0000000
--- a/content/learn/guides/typography.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Typography
-blurb: Basic typography
-author: Gemma Black
----
-
-Coming soon
diff --git a/content/learn/home.md b/content/learn/home.md
deleted file mode 100644
index cf652a0..0000000
--- a/content/learn/home.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: β‘οΈ Learn
-blurb: Introduction to Preons, a functional CSS library
-author: Gemma Black
----
-
-
-
-## Get started
-
-1. [Install the Preons UI](/learn/ui/installation): Follow the guide to install the Preons UI into your project.
-1. [Build a user interface quickly](/learn/ui/build): A 15-minute guide on how to install Preons and start building a website.
-1. [Generate your own library](/learn/cli/generate): Generate your own library using the preons.yaml configuration file
-
-## What is Preons
-
-It is a functional CSS system for building user interfaces. It's designed with three things in mind:
-
-- A functional CSS library
-- A theme
-- A CLI to generate your own libraries
-
-## What does it look like
-
-Take the button below as an example:
-
-
-
-This is what Preons looks like:
-
-```html
-
-```
-
-
-
-
-
-## Start contributing
-
-This project is still undergoing lots of development to produce features. Please checkout out the roadmap to learn what features are yet to do. More so, there are lots of tests, documentations, components and examples that are needed. Any help will be appreciated.
-
-## Give feedback
-
-Any feedback that can help improve this project is welcomed. You can personally [@me](https://twitter.com/GemmaBlackUK) on Twitter.
diff --git a/content/learn/ui/build.md b/content/learn/ui/build.md
deleted file mode 100644
index 0aa89e7..0000000
--- a/content/learn/ui/build.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: π Build
-blurb: Get started quickly with building the UI
----
-
-This guide is to demonstrate how to build a website with Preons using ready-made components. We're going to build a landing page for a store.
-
-Feel free to make changes and tweaks as you design.
-
-## The Base HTML
-
-You can start in one of two ways.
-
-1. Play with the live code [repl](https://repl.it/@gemmadlou/Starter#index.html)
-
-2. Copy-paste the code below into your editor and run locally.
-
-
-```html
-
-
-
-
- Preons docs
-
-
-
-
-
-
-
-
-
-```
-
-## The Navigation
-
-
-
-π Grab the HTML from the [navigation example](https://ui.preons.co/?path=/story/navigation--responsive). It is already responsive, but you can tweak it to suit your needs.
-
-## The Hero section
-
-
-
-π Again, grab the HTML from the [hero example](https://ui.preons.co/?path=/story/hero--hero-1). Feel free to change the image and the text. But for demonstration purposes, you can leave as is.
-
-## The Portfolio
-
-
-
-π For the portfolio, you can use a [simple grid](https://ui.preons.co/?path=/story/grid--grid-of-4). The images are from [UnSplash](https://unsplash.com/) but of course, you can change them.
-
-## The Get In Touch Form
-
-
-
-π For the form, grab the [HTML](https://ui.preons.co/?path=/story/forms--full-form-light).
-
-## The Footer
-
-
-
-π There are two parts. The [footer links](https://ui.preons.co/?path=/story/footer--footer-inverted) and the [legal end](https://ui.preons.co/?path=/story/legals--legals-1). Grab both.
-
-## What does your version look like
-
-Here's mine. Ok. I didn't update the text in every case. But I hope this little exercise highlights how much faster it is to build interfaces once you have a design system of reusable components.
-
-
-
-> And here's the [code](https://repl.it/@gemmadlou/Starter#index.html).
-
-## Next steps
-
-- Functional CSS will seem cryptic, at least at first. Use the [reference](/search) to discover more colors and more classes.
-- Create your own functional CSS library by following the cli build [guide](/learn/cli/generate).
diff --git a/content/learn/ui/installation.md b/content/learn/ui/installation.md
deleted file mode 100644
index 7c8d3b5..0000000
--- a/content/learn/ui/installation.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: π Install
-blurb: Using npm, yarn or the packages CDN
----
-
-## 1. The Theme
-
-You can install Preons in one of several ways.
-
-### CDN
-
-The fastest way to get started is by using [unpkg](https://unpkg.com).
-
-```html
-
-
-
-```
-
-### Node modules
-
-#### npm
-
-```bash
-npm install preons
-```
-
-#### yarn
-
-```bash
-yarn add preons
-```
-
-## 2. Import
-
-You will need both the theme and the reset. Feel free to choose [alternative resets](https://css-tricks.com/poll-results-what-css-reset-do-you-use/) for your project.
-
-### Webpack js
-
-```js
-import '~preons/dist/reset';
-import '~preons/dist/preons';
-```
-
-> See the [Webpack guide](https://webpack.js.org/loaders/sass-loader/#resolving-import-at-rules) for more details
-
-### scss
-
-```scss
-@import '~preons/dist/preons';
-```
-
-### css
-
-```css
-@import '~preons/dist/preons.css';
-```
-
-## 3. Font
-
-Include the font system if you haven't already.
-
-```http
-https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;500;600;700&family=Martel:wght@200;300;400;600;700;800;900&family=Roboto+Mono:wght@100;300;400;500;700&display=swap
-```
-
-### Link element
-
-```html
-
-```
-
-### @import
-
-```html
-
-```
diff --git a/docs/en/0.x/guide/responsive-multi-service-admin-dashboard.md b/docs/en/0.x/guide/responsive-multi-service-admin-dashboard.md
new file mode 100644
index 0000000..0b5d84e
--- /dev/null
+++ b/docs/en/0.x/guide/responsive-multi-service-admin-dashboard.md
@@ -0,0 +1,57 @@
+# Responsive Multi-Service Admin Dashboard
+
+> In progress
+
+https://codesandbox.io/s/frosty-ride-6417i?file=/examples/admin-2/index.html
+
+
+
+```html
+
+
+
+
+ Preons Admin
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```html
+
+P
+```
diff --git a/docs/en/0.x/start/framework-nuxt.md b/docs/en/0.x/start/framework-nuxt.md
new file mode 100644
index 0000000..8351b13
--- /dev/null
+++ b/docs/en/0.x/start/framework-nuxt.md
@@ -0,0 +1,168 @@
+# Get started with Nuxt and Preons
+
+Nuxt is a Vue.js framework with SSR capabilities. This guide will show you how to add Preons to Nuxt using a fresh Nuxt app as an example.
+
+- [Using Sass](#using-sass)
+- [Using CSS](#using-css)
+
+## Using Sass
+
+> If you already have a Nuxt app, go to the [Configure Sass](#configure-sass) section.
+
+### Setup Nuxt
+
+Install Nuxt to have a project scaffold. It will take you through a few questions.
+
+```bash
+yarn create nuxt-app preons-nuxt
+```
+
+Prepare your Nuxt environment.
+
+```bash
+cd preons-nuxt
+```
+
+### Configure Sass
+
+Install preons and the sass loaders.
+
+```bash
+yarn add preons sass sass-loader fibers --dev
+```
+
+Create a new `style.scss` file in the assets folder and import Preons.
+
+```bash
+touch assets/style.scss
+```
+
+```scss
+/** assets/style.scss **/
+@import "~preons/dist/reset";
+@import "~preons/dist/preons";
+
+body {
+ @extend .ff-raleway;
+ @extend .fs3;
+ @extend .lh3;
+}
+```
+
+Add the `assets/style.scss` to the global `nuxt.config.js` to render the compiled style on the front end.
+
+```js
+// nuxt.config.js
+{
+ //....
+ css: ['~assets/style.scss'],
+}
+```
+
+Add Google Fonts.
+
+```js
+{
+ head: {
+ link: [
+ {
+ rel: "stylesheet",
+ href:
+ "https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap",
+ },
+ ];
+ }
+}
+```
+
+### Create a template
+
+Add basic styling to `pages/index.vue`.
+
+```js
+
+
+
Preons
+
+
+```
+
+### View app
+
+Start the Nuxt app to preview the update
+
+```bash
+yarn dev
+```
+
+Finally, view the app in the browser.
+
+### Next steps
+
+Continue with the Preons UI System for components and utility classes.
+
+## Using CSS
+
+> If you already have a Nuxt app, go to the [Configure Sass](#configure-sass) section.
+
+### Setup Nuxt
+
+Install Nuxt to have a project scaffold. It will take you through a few questions.
+
+```bash
+yarn create nuxt-app preons-nuxt
+```
+
+Prepare your Nuxt environment.
+
+```bash
+cd preons-nuxt
+```
+
+### Add stylesheets
+
+Add Google Fonts and the Preons theme.
+
+```js
+{
+ head: {
+ link: [
+ {
+ rel: "stylesheet",
+ href:
+ "https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap",
+ },
+ {
+ rel: "stylesheet",
+ href: "https://unpkg.com/preons/dist/preons.css",
+ },
+ ];
+ }
+}
+```
+
+### Create a template
+
+Add basic styling to `pages/index.vue`.
+
+```js
+
+
+
Preons
+
+
+```
+
+### View app
+
+Start the Nuxt app to preview the update
+
+```bash
+yarn dev
+```
+
+Finally, view the app in the browser.
+
+### Next steps
+
+Continue with the Preons UI System for components and utility classes.
diff --git a/docs/en/0.x/start/framework.md b/docs/en/0.x/start/framework.md
new file mode 100644
index 0000000..26cadbb
--- /dev/null
+++ b/docs/en/0.x/start/framework.md
@@ -0,0 +1,5 @@
+# Frameworks
+
+Here are short guides on how to get started with Preons using Frameworks.
+
+- [Nuxt](./framework-nuxt.md)
diff --git a/docs/en/0.x/start/introduction.md b/docs/en/0.x/start/introduction.md
new file mode 100644
index 0000000..905fe21
--- /dev/null
+++ b/docs/en/0.x/start/introduction.md
@@ -0,0 +1,6 @@
+# Introduction
+
+The _'Get started'_ guide is to help you install Preons quickly so you can begin building templates and UIs within minutes.
+
+- [Standalone css, html and sass](./standalone.md) - _For when you want to use minimal project scaffolding, such as with a simple single-page html etc_.
+- [Frameworks](./framework.md) - _To get started with a Framework such as Nuxt_
diff --git a/docs/en/0.x/start/standalone-css.md b/docs/en/0.x/start/standalone-css.md
new file mode 100644
index 0000000..c5b7f9e
--- /dev/null
+++ b/docs/en/0.x/start/standalone-css.md
@@ -0,0 +1,25 @@
+# CSS
+
+Add the Preons theme quickly.
+
+```bash
+touch index.html
+```
+
+
+```html
+
+
+
+
+
+ Preons starter
+
+
+
+
+
+
Woohoo π!
+
+
+```
diff --git a/docs/en/0.x/start/standalone-html.md b/docs/en/0.x/start/standalone-html.md
new file mode 100644
index 0000000..483d5ec
--- /dev/null
+++ b/docs/en/0.x/start/standalone-html.md
@@ -0,0 +1,62 @@
+# HTML
+
+To get going, installing the Preons theme is most fast with plain HTML.
+
+- [Use the HTML5 starter](#use-the-html5-starter)
+- [Add to existing HTML markup](#with-existing-html-markup)
+
+## Use the HTML5 starter
+
+Copy and paste the markup.
+
+
+```html
+
+
+
+
+ Preons starter
+
+
+
+
+
+
+
+
Begin building with Preons
+
+
+
+
+```
+
+Use the [UI System](../ui-system/introduction.md) to add UI components to your app.
+
+### Example
+
+
+
+## With existing HTML markup
+
+Add the Google Fonts link within the `` tag.
+
+```bash
+
+```
+
+Add the Preons theme below the Google Fonts link.
+
+```bash
+
+```
+
+Use the [UI System](../ui-system/introduction.md) to add UI components to your app.
diff --git a/docs/en/0.x/start/standalone-sass.md b/docs/en/0.x/start/standalone-sass.md
new file mode 100644
index 0000000..831e08e
--- /dev/null
+++ b/docs/en/0.x/start/standalone-sass.md
@@ -0,0 +1,73 @@
+# Sass
+
+Compile Preons into CSS from pure sass.
+
+## Steps
+
+Create a new project.
+
+```bash
+mkdir preons-sass && cd preons-sass
+```
+
+Install the preons library.
+
+```bash
+wget https://unpkg.com/preons/dist/preons.scss
+```
+
+Create a base scss file.
+
+```bash
+touch style.scss
+```
+
+Import the library into your sass project before any overrides.
+
+```scss
+// style.scss
+@import "./preons.scss";
+```
+
+Install sass compiler:
+
+```bash
+# MacOs
+brew install sass/sass/sass
+```
+
+> To install on **Windows** or other **Linux**, visit https://github.com/sass/dart-sass for further instructioons.
+
+Compile down css.
+
+```bash
+# Make dist folder
+mkdir -p dist
+
+# Compile to css
+sass style.scss > dist/style.css
+```
+
+Add link to HMTL.
+
+```bash
+touch index.html
+```
+
+
+```html
+
+
+
+
+
+ Preons starter
+
+
+
+
+
+
Woohoo π!
+
+
+```
diff --git a/docs/en/0.x/start/standalone.md b/docs/en/0.x/start/standalone.md
new file mode 100644
index 0000000..d247dee
--- /dev/null
+++ b/docs/en/0.x/start/standalone.md
@@ -0,0 +1,7 @@
+# Standalone
+
+When you want to get started with minimal project scaffolding, use the following guides:
+
+- [HTML](./standalone-html.md)
+- [Sass/Scss](./standalone-sass.md)
+- [CSS](./standalone-css.md)
diff --git a/docs/en/0.x/ui-system/components-grid.md b/docs/en/0.x/ui-system/components-grid.md
new file mode 100644
index 0000000..f4653a1
--- /dev/null
+++ b/docs/en/0.x/ui-system/components-grid.md
@@ -0,0 +1,227 @@
+
+
+# Grids
+
+There are multiple ways to create grids using CSS. This page focuses on Flexbox and using a consistent right-margin technique.
+
+## Flexbox
+
+Flexbox allows you to have more control over layouts. Below are examples of how to use Grids. There are several ways to create a grid using Flexbox.
+
+### 20-column grid
+
+The 20-column is represented by percentages.
+
+#### 100% width
+
+
+
+
+
+
+```html
+
+
+
+```
+
+Alternatively, no width is needed on block-elements.
+
+```html
+
+```
+
+### Flexbox and paddings The technique above uses a
+
+consistent right margin while the parent has no right margin of its own. If
+margins cannot be controlled on the parent `d-fl pa2 pr0`, you can remove the final margin on the last element within a row, either via the dom or a custom class.
+
+```html
+
+
+
+
+
+```
+
+### Multi-line grids with Flexbox
+
+There are several techniques, but one I like to use is to move the gaps between the margins into an inner-container. This technique will also work with single-row grids too.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Spacing
+
+### Move elements over
+
+When you don't need a full grid of items, or you merely want space, use the margin utility classes to create space. Note the `ml-25` moves the element over by 25%.
+
+
+
+
+
+
+
+```html
+
+
+
+
+```
+
+### Making space before next element
+
+Sometimes, you want there to be a gap after the current element also.
+
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+```
+
+#### Correct width percentages
+
+Using inner-elements will preserve percentaged widths most accurately. If you're not concerned with this, you can forgo inner-elements as with the example above. Otherwise you will have to adjust the markup eg.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```html
+
+
+
+
+
+
+
+
+
+
+
Copy-paste layouts
+
+Get started with layouts. Take a look at the examples and copy-paste code that you need.
+
+## Admin
+
+### Double side-panel
+
+Great for when you have lots of areas in your admin system and users will need to be able to go back-and-forth easily.
+
+A CSS-only admin dashboard with a double-side panel on the left, a top level sticky nav and a scrollable main-content area using only utility classes.
+
+```html
+
+
+
+
+ Preons Admin
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+#### Doubled sided-panel examples
+
+Layout areas defined by blocked colors.
+
+
+
+Layout areas defined by borders.
+
+
+
+## Suggestions
+
+Are there any layouts that you think is missing? Add an issue on GitHub or submit a PR.
diff --git a/docs/en/0.x/ui-system/components-menu.md b/docs/en/0.x/ui-system/components-menu.md
new file mode 100644
index 0000000..f0cf69e
--- /dev/null
+++ b/docs/en/0.x/ui-system/components-menu.md
@@ -0,0 +1,91 @@
+
+
+# Menus
+
+Creating menus with utility classes means you can copy-paste ones you like or reuse ones you create time-and-time-again.
+
+## Mobile menu
+
+
+
+```html
+
+
+
+
+
+```
diff --git a/docs/en/0.x/ui-system/components.md b/docs/en/0.x/ui-system/components.md
new file mode 100644
index 0000000..e6ba6a9
--- /dev/null
+++ b/docs/en/0.x/ui-system/components.md
@@ -0,0 +1,5 @@
+# Components
+
+Preons components are multi-element UIs that you can copy-paste or alter for your needs. The aim of components is to speed up development so that you won't have to write every-time from scratch.
+
+Check out [layout components](./components-layout.md) to get started.
diff --git a/docs/en/0.x/ui-system/foundations-alignment.md b/docs/en/0.x/ui-system/foundations-alignment.md
new file mode 100644
index 0000000..df7158f
--- /dev/null
+++ b/docs/en/0.x/ui-system/foundations-alignment.md
@@ -0,0 +1,188 @@
+# Alignment
+
+These CSS properties focus on alignment.
+
+- text-align
+- float
+- top
+- left
+- bottom
+- right
+- clear
+- v-align
+
+## Text Align
+
+Text alignment classes moves items when they have the `display: inline` CSS rule.
+
+### Reference
+
+| Utility class | CSS Rule |
+| ------------- | -------------------- |
+| `.center` | `text-align: center` |
+| `.right` | `text-align: right` |
+| `.left` | `text-align: left` |
+
+### Example
+
+```html
+
+ With my alignment. I've got one leg shorter than the other.
+
+ Okay, the red ones are my guests and the
+ blue ones are yours.
+
+```
+
+
+
+## Background colors
+
+Style background colors using the `.bg-` convention.
+
+> See theme defaults for list of colors and their corresponding code.
+
+```html
+
+ Okay, the red ones are my guests and the
+ blue ones are yours.
+
-
-
- 
- 
-
-
-
-
- 
-
-This is what Preons looks like:
-
-```html
-
-```
-
-
-
-
-
-## Start contributing
-
-This project is still undergoing lots of development to produce features. Please checkout out the roadmap to learn what features are yet to do. More so, there are lots of tests, documentations, components and examples that are needed. Any help will be appreciated.
-
-## Give feedback
-
-Any feedback that can help improve this project is welcomed. You can personally [@me](https://twitter.com/GemmaBlackUK) on Twitter.
diff --git a/content/learn/ui/build.md b/content/learn/ui/build.md
deleted file mode 100644
index 0aa89e7..0000000
--- a/content/learn/ui/build.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: π Build
-blurb: Get started quickly with building the UI
----
-
-This guide is to demonstrate how to build a website with Preons using ready-made components. We're going to build a landing page for a store.
-
-Feel free to make changes and tweaks as you design.
-
-## The Base HTML
-
-You can start in one of two ways.
-
-1. Play with the live code [repl](https://repl.it/@gemmadlou/Starter#index.html)
-
-2. Copy-paste the code below into your editor and run locally.
-
-
-```html
-
-
-
-
- 
+ 
- 
-