diff --git a/README.md b/README.md index 933a3be7..6b7e63ea 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,40 @@ -# Code Guide +

+ + Code Guide logo + +
+ Code Guide +

+ +

+ Standards for developing consistent, flexible, and sustainable HTML and CSS. +
+ Start reading ☞ +

-Code Guide is a set of standards for developing consistent, flexible, 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 ☞](https://codeguide.co)** +## Setup ---- +Code Guide is built on Jekyll and hosted on GitHub Pages. To install Jekyll: + +```sh +gem install jekyll +``` + +To start the local server: + +```sh +jekyll serve +``` + +Open `localhost:4000` in your browser. -### License +## License 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. diff --git a/_config.yml b/_config.yml index dc0db742..09321fe9 100644 --- a/_config.yml +++ b/_config.yml @@ -4,3 +4,5 @@ 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/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("image.jpg"); - border-radius: 3px 3px 0 0; -} - -/* Good example */ -.element { - margin-bottom: 10px; - background-color: red; - background-image: url("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 818c0785..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("../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 f9330073..5aa0d068 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,16 +1,17 @@