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 logo + +
+ 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 @@