diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 00000000..9d5248e8
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,14 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
index 465cdb46..283a567e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,9 @@
# Ignore docs files
_gh_pages
_site
+.jekyll-cache
.ruby-version
+.sass-cache
# Numerous always-ignore extensions
*.diff
diff --git a/LICENSE.md b/LICENSE.md
index 9e5f4c73..112d85e9 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,6 +1,6 @@
The MIT License (MIT)
-Copyright (c) 2014 Mark Otto.
+Copyright (c) Mark Otto.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 0ed64ac8..a339a3fa 100644
--- a/README.md
+++ b/README.md
@@ -1,40 +1,60 @@
-# Code Guide
+
+
+
+
+
+ Code Guide
+
+
+
+ Standards for developing consistent, flexible, and sustainable HTML and CSS.
+
+ Start reading ☞
+
-Code Guide is a project for documenting standards for developing flexible, durable, and sustainable HTML and CSS. It comes from years of experience writing code on projects of all sizes. It's not the end-all be-all, but it's a start.
+---
-**[Start reading ☞](http://mdo.github.io/code-guide)**
+## Setup
----
+Code Guide is built on Jekyll and hosted on GitHub Pages. To install Jekyll:
+
+```sh
+gem install jekyll
+```
+
+To start the local server:
-### License
+```sh
+jekyll serve
+```
-Released under MIT by, and copyright 2014, @mdo.
+Open `localhost:4000` in your browser.
-### Thanks
+## License
-Heavily inspired by [Idiomatic CSS](https://github.com/necolas/idiomatic-css) and the [GitHub Styleguide](http://github.com/styleguide).
+Released under MIT by, and copyright, @mdo.
-### Translations
+## Translations
Translations are maintained by their creators and may not always be up to date with the original here.
- [Chinese](http://zoomzhao.github.io/code-guide/) - Translated by [Zoom Zhao](https://github.com/ZoomZhao)
- [Chinese](http://codeguide.bootcss.com/) - Translated by [Wang Sai](https://github.com/wangsai)
-- [Chinese, Traditional](http://juanitofatas.github.io/code-guide/) - Translated by [Juanito Fatas](https://github.com/JuanitoFatas)
-- [Czech](http://smedzlatko.github.io/) - Translated by [Martin Myslík](https://github.com/Smedzlatko)
- [Dutch](http://chunfeilung.github.io/code-guide/) - Translated by [Chun Fei Lung](https://github.com/chunfeilung)
-- [Danish](http://ohm.sh/code-guide/) - Translated by [Mads Ohm Larsen](https://github.com/omegahm)
- [French](http://pixelastic.github.io/code-guide/) - Translated by [Tim Carry](https://github.com/pixelastic/)
- [German](http://BackendButters.github.io/code-guide/) - Translated by [BackendButters](https://github.com/BackendButters)
+- [German](https://philipbrembeck.github.io/code-guide/) - Translated by [Philip Brembeck](https://github.com/philipbrembeck)
+- [Hindi](https://hidaytrahman.github.io/code-guide/) - Translated by [Hidaytullah Rahmani](https://github.com/hidaytrahman)
- [Indonesian](http://diagramatics.github.io/code-guide-id) - Translated by [Steven Sinatra](http://diagramatics.me)
-- [Italian](http://alessandro1997.github.io/code-guide/) - Translated by [Alessandro Desantis](https://github.com/alessandro1997)
- [Japanese](http://kia-king.com/code-guide/) - Translated by [Kia King Ishii](https://github.com/kiaking)
- [Korean](http://code-guide.aliencube.org/) - Translated by [Aliencube](https://github.com/aliencube)
+- [Persian](https://cg.arash-hatami.ir/) - Translated by [Arash Hatami](https://github.com/hatamiarash7)
- [Polish](http://bondarewicz.github.io/code-guide/) - Translated by [Łukasz Bondarewicz](https://github.com/bondarewicz)
- [Portuguese](http://diegoeis.github.io/code-guide/) - Translated by [Diego Eis](http://tableless.com.br/)
+- [Romanian](http://vmazare.github.io/code-guide-romanian/) - Translated by [Valeriu Mazare](https://github.com/vmazare)
- [Russian](http://sadcitizen.github.io/code-guide/) - Translated by [Eugene Abrosimov](https://github.com/sadcitizen)
-- [Spanish](http://adrianayala.mx/code-guide/es/) - Translated by [Adrian Ayala](http://adrianayala.mx/)
-- [Turkish](http://kod-rehberi.hayatbiralem.com/) - Translated by [Ömür Yanıkoğlu](http://hayatbiralem.com/)
+- [Spanish](https://hansfelix.github.io/code-guide) - Translated by [Hans Felix](https://github.com/hansfelix)
+- [Traditional Chinese](https://codeguide.intersection.tw) - Translated by [Yuming Cheung](https://github.com/ymcheung)
Have a translation you'd like to link to? Open a pull request to add it here. Be sure to keep it alphabetical.
diff --git a/_config.yml b/_config.yml
index f313f10e..09321fe9 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,7 +1,8 @@
-name: Code Guide by @mdo
-description: Standards for developing flexible, durable, and sustainable HTML and CSS.
-url: http://codeguide.co
-
-markdown: rdiscount
-permalink: pretty
-pygments: true
+name: Code Guide by @mdo
+description: Standards for developing consistent, flexible, and sustainable HTML and CSS.
+url: https://codeguide.co
+permalink: pretty
+sass:
+ style: compressed
+version: 4.0.0
+og_image: https://raw.githubusercontent.com/mdo/code-guide/gh-pages/code-guide-social.png
diff --git a/_includes/ads.css b/_includes/ads.css
deleted file mode 100644
index 9fc8a663..00000000
--- a/_includes/ads.css
+++ /dev/null
@@ -1,38 +0,0 @@
-/* Ads
--------------------------------------------------- */
-
-#fusionads {
- display: block;
- max-width: 18rem;
- padding: 1rem;
- margin: 0 auto;
- overflow: hidden; /* clearfix */
- font-size: .8rem;
- line-height: 1.3;
- text-align: left;
- background-color: rgba(0,0,0,.2);
-}
-.fusion-text,
-.fusion-poweredby {
- display: block;
- color: #fff;
-}
-.fusion-text:hover,
-.fusion-poweredby:hover {
- text-decoration: none;
-}
-.fusion-img {
- float: left;
- margin-right: 1rem;
-}
-.fusion-poweredby {
- display: block !important;
- margin-top: .5rem;
-}
-
-@media (min-width: 40em) {
- #fusionads {
- max-width: 16rem;
- font-size: .7rem;
- }
-}
diff --git a/_includes/css/class-names.css b/_includes/css/class-names.css
deleted file mode 100644
index fdca375a..00000000
--- a/_includes/css/class-names.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/* Bad example */
-.t { ... }
-.red { ... }
-.header { ... }
-
-/* Good example */
-.tweet { ... }
-.important { ... }
-.tweet-header { ... }
diff --git a/_includes/css/comments.css b/_includes/css/comments.css
deleted file mode 100644
index 2080b063..00000000
--- a/_includes/css/comments.css
+++ /dev/null
@@ -1,11 +0,0 @@
-/* Bad example */
-/* Modal header */
-.modal-header {
- ...
-}
-
-/* Good example */
-/* Wrapping element for .modal-title and .modal-close */
-.modal-header {
- ...
-}
diff --git a/_includes/css/declaration-order.css b/_includes/css/declaration-order.css
deleted file mode 100644
index 01801d66..00000000
--- a/_includes/css/declaration-order.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.declaration-order {
- /* Positioning */
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: 100;
-
- /* Box-model */
- display: block;
- float: right;
- width: 100px;
- height: 100px;
-
- /* Typography */
- font: normal 13px "Helvetica Neue", sans-serif;
- line-height: 1.5;
- color: #333;
- text-align: center;
-
- /* Visual */
- background-color: #f5f5f5;
- border: 1px solid #e5e5e5;
- border-radius: 3px;
-
- /* Misc */
- opacity: 1;
-}
diff --git a/_includes/css/import.html b/_includes/css/import.html
deleted file mode 100644
index aa44b5d0..00000000
--- a/_includes/css/import.html
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-
-
-
diff --git a/_includes/css/media-queries.css b/_includes/css/media-queries.css
deleted file mode 100644
index 7440c7a3..00000000
--- a/_includes/css/media-queries.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.element { ... }
-.element-avatar { ... }
-.element-selected { ... }
-
-@media (min-width: 480px) {
- .element { ...}
- .element-avatar { ... }
- .element-selected { ... }
-}
diff --git a/_includes/css/nesting.scss b/_includes/css/nesting.scss
deleted file mode 100644
index bc863dba..00000000
--- a/_includes/css/nesting.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// Without nesting
-.table > thead > tr > th { … }
-.table > thead > tr > td { … }
-
-// With nesting
-.table > thead > tr {
- > th { … }
- > td { … }
-}
diff --git a/_includes/css/operators.scss b/_includes/css/operators.scss
deleted file mode 100644
index eb272d44..00000000
--- a/_includes/css/operators.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// Bad example
-.element {
- margin: 10px 0 @variable*2 10px;
-}
-
-// Good example
-.element {
- margin: 10px 0 (@variable * 2) 10px;
-}
diff --git a/_includes/css/organization-comments.css b/_includes/css/organization-comments.css
deleted file mode 100644
index d7f29a1c..00000000
--- a/_includes/css/organization-comments.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * Component section heading
- */
-
-.element { ... }
-
-
-/*
- * Component section heading
- *
- * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
- */
-
-.element { ... }
-
-/* Contextual sub-component or modifer */
-.element-heading { ... }
diff --git a/_includes/css/organization-files.txt b/_includes/css/organization-files.txt
deleted file mode 100644
index a85329e3..00000000
--- a/_includes/css/organization-files.txt
+++ /dev/null
@@ -1,9 +0,0 @@
-stylesheets/
-├── normalize.css
-├── buttons.css
-├── forms.css
-├── grid.css
-├── header.css
-├── footer.css
-├── pagination.css
-└── input-group.css
diff --git a/_includes/css/prefixed-properties.css b/_includes/css/prefixed-properties.css
deleted file mode 100644
index fc61fa28..00000000
--- a/_includes/css/prefixed-properties.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* Prefixed properties */
-.selector {
- -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
- box-shadow: 0 1px 2px rgba(0,0,0,.15);
-}
diff --git a/_includes/css/selectors.css b/_includes/css/selectors.css
deleted file mode 100644
index a3656731..00000000
--- a/_includes/css/selectors.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/* Bad example */
-span { ... }
-.page-container #stream .stream-item .tweet .tweet-header .username { ... }
-.avatar { ... }
-
-/* Good example */
-.avatar { ... }
-.tweet-header .username { ... }
-.tweet .avatar { ... }
diff --git a/_includes/css/shorthand.css b/_includes/css/shorthand.css
deleted file mode 100644
index 19fa2057..00000000
--- a/_includes/css/shorthand.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/* Bad example */
-.element {
- margin: 0 0 10px;
- background: red;
- background: url("https://github.com/image.jpg");
- border-radius: 3px 3px 0 0;
-}
-
-/* Good example */
-.element {
- margin-bottom: 10px;
- background-color: red;
- background-image: url("https://github.com/image.jpg");
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
-}
diff --git a/_includes/css/single-declarations.css b/_includes/css/single-declarations.css
deleted file mode 100644
index 7b57a930..00000000
--- a/_includes/css/single-declarations.css
+++ /dev/null
@@ -1,15 +0,0 @@
-/* Single declarations on one line */
-.span1 { width: 60px; }
-.span2 { width: 140px; }
-.span3 { width: 220px; }
-
-/* Multiple declarations, one per line */
-.sprite {
- display: inline-block;
- width: 16px;
- height: 15px;
- background-image: url(https://github.com/img/sprite.png);
-}
-.icon { background-position: 0 0; }
-.icon-home { background-position: 0 -20px; }
-.icon-account { background-position: 0 -40px; }
diff --git a/_includes/css/syntax.css b/_includes/css/syntax.css
deleted file mode 100644
index 4735d99a..00000000
--- a/_includes/css/syntax.css
+++ /dev/null
@@ -1,17 +0,0 @@
-/* Bad CSS */
-.selector, .selector-secondary, .selector[type=text] {
- padding:15px;
- margin:0px 0px 15px;
- background-color:rgba(0, 0, 0, 0.5);
- box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
-}
-
-/* Good CSS */
-.selector,
-.selector-secondary,
-.selector[type="text"] {
- padding: 15px;
- margin-bottom: 15px;
- background-color: rgba(0,0,0,.5);
- box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
-}
diff --git a/_includes/footer.html b/_includes/footer.html
index 8f1858ca..5aa0d068 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,16 +1,17 @@