From ae74d5d33ac0e97590676499c6f83459eed30bed Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Feb 2014 17:24:07 -0800 Subject: [PATCH] boom --- .ruby-version | 1 + _config.yml | 12 +- _includes/css/class-names.css | 9 + _includes/css/comments.css | 11 + _includes/css/declaration-order.css | 29 ++ _includes/css/media-queries.css | 10 + _includes/css/nesting.scss | 9 + _includes/css/prefixed-properties.css | 5 + _includes/css/selectors.css | 9 + _includes/css/single-declarations.css | 14 + _includes/css/syntax.css | 17 + _includes/font.css | 27 ++ _includes/footer.html | 8 +- _includes/header.html | 18 +- _includes/html/attribute-order.html | 7 + _includes/html/boolean-attributes.html | 7 + _includes/html/doctype.html | 1 + _includes/html/naming.html | 9 + _includes/html/reducing-markup.html | 7 + _includes/html/syntax.html | 10 + _includes/syntax.css | 66 +++ _layouts/default.html | 24 +- _site/code-guide.css | 296 ++++++++++++ _site/font/fontello.eot | Bin 0 -> 4876 bytes _site/font/fontello.svg | 13 + _site/font/fontello.ttf | Bin 0 -> 4708 bytes _site/font/fontello.woff | Bin 0 -> 2892 bytes _site/index.html | 600 +++++++++++++------------ _site/public/css/code-guide.css | 127 ------ _site/public/css/pygments-monokai.css | 60 --- code-guide.css | 207 +++++++++ font/fontello.eot | Bin 0 -> 4876 bytes font/fontello.svg | 13 + font/fontello.ttf | Bin 0 -> 4708 bytes font/fontello.woff | Bin 0 -> 2892 bytes index.html | 277 ++++++++++++ index.md | 349 -------------- public/css/code-guide.css | 127 ------ public/css/pygments-monokai.css | 60 --- 39 files changed, 1409 insertions(+), 1030 deletions(-) create mode 100644 .ruby-version create mode 100644 _includes/css/class-names.css create mode 100644 _includes/css/comments.css create mode 100644 _includes/css/declaration-order.css create mode 100644 _includes/css/media-queries.css create mode 100644 _includes/css/nesting.scss create mode 100644 _includes/css/prefixed-properties.css create mode 100644 _includes/css/selectors.css create mode 100644 _includes/css/single-declarations.css create mode 100644 _includes/css/syntax.css create mode 100644 _includes/font.css create mode 100644 _includes/html/attribute-order.html create mode 100644 _includes/html/boolean-attributes.html create mode 100644 _includes/html/doctype.html create mode 100644 _includes/html/naming.html create mode 100644 _includes/html/reducing-markup.html create mode 100644 _includes/html/syntax.html create mode 100644 _includes/syntax.css create mode 100644 _site/code-guide.css create mode 100644 _site/font/fontello.eot create mode 100644 _site/font/fontello.svg create mode 100644 _site/font/fontello.ttf create mode 100644 _site/font/fontello.woff delete mode 100644 _site/public/css/code-guide.css delete mode 100644 _site/public/css/pygments-monokai.css create mode 100644 code-guide.css create mode 100644 font/fontello.eot create mode 100644 font/fontello.svg create mode 100644 font/fontello.ttf create mode 100644 font/fontello.woff create mode 100644 index.html delete mode 100644 index.md delete mode 100644 public/css/code-guide.css delete mode 100644 public/css/pygments-monokai.css diff --git a/.ruby-version b/.ruby-version new file mode 100644 index 00000000..c82eec79 --- /dev/null +++ b/.ruby-version @@ -0,0 +1 @@ +1.9.3-p448 diff --git a/_config.yml b/_config.yml index a517e82d..f0dd4450 100644 --- a/_config.yml +++ b/_config.yml @@ -1,7 +1,7 @@ -name: "Code Guide" -description: "Standards for developing flexible, durable, and sustainable HTML and CSS." -url: http://mdo.github.com/code-guide +name: Code Guide by @mdo +description: Standards for developing flexible, durable, and sustainable HTML and CSS. +url: http://mdo.github.com/code-guide -markdown: rdiscount -permalink: pretty -pygments: true +markdown: rdiscount +permalink: pretty +pygments: true diff --git a/_includes/css/class-names.css b/_includes/css/class-names.css new file mode 100644 index 00000000..fdca375a --- /dev/null +++ b/_includes/css/class-names.css @@ -0,0 +1,9 @@ +/* Bad example */ +.t { ... } +.red { ... } +.header { ... } + +/* Good example */ +.tweet { ... } +.important { ... } +.tweet-header { ... } diff --git a/_includes/css/comments.css b/_includes/css/comments.css new file mode 100644 index 00000000..2080b063 --- /dev/null +++ b/_includes/css/comments.css @@ -0,0 +1,11 @@ +/* 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 new file mode 100644 index 00000000..01801d66 --- /dev/null +++ b/_includes/css/declaration-order.css @@ -0,0 +1,29 @@ +.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/media-queries.css b/_includes/css/media-queries.css new file mode 100644 index 00000000..bf1dcc43 --- /dev/null +++ b/_includes/css/media-queries.css @@ -0,0 +1,10 @@ +.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 new file mode 100644 index 00000000..bc863dba --- /dev/null +++ b/_includes/css/nesting.scss @@ -0,0 +1,9 @@ +// Without nesting +.table > thead > tr > th { … } +.table > thead > tr > td { … } + +// With nesting +.table > thead > tr { + > th { … } + > td { … } +} diff --git a/_includes/css/prefixed-properties.css b/_includes/css/prefixed-properties.css new file mode 100644 index 00000000..fc61fa28 --- /dev/null +++ b/_includes/css/prefixed-properties.css @@ -0,0 +1,5 @@ +/* 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 new file mode 100644 index 00000000..a3656731 --- /dev/null +++ b/_includes/css/selectors.css @@ -0,0 +1,9 @@ +/* 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/single-declarations.css b/_includes/css/single-declarations.css new file mode 100644 index 00000000..479f6368 --- /dev/null +++ b/_includes/css/single-declarations.css @@ -0,0 +1,14 @@ +/* Single declarations */ +.span1 { width: 60px; } +.span2 { width: 140px; } +.span3 { width: 220px; } + +.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 new file mode 100644 index 00000000..5126746d --- /dev/null +++ b/_includes/css/syntax.css @@ -0,0 +1,17 @@ +/* Bad CSS */ +.selector, .selector-secondary, .selector[type=text] { + padding:15px; + margin:0px 0px 15px; + background-color:rgba(0, 0, 0, 0.5); + box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF +} + +/* Good CSS */ +.selector, +.selector-secondary, +.selector[type="text"] { + padding: 15px; + margin: 0 0 15px; + background-color: rgba(0,0,0,.5); + box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; +} diff --git a/_includes/font.css b/_includes/font.css new file mode 100644 index 00000000..4ace020e --- /dev/null +++ b/_includes/font.css @@ -0,0 +1,27 @@ +@font-face { + font-family: 'fontello'; + src: url('../font/fontello.eot?74318141'); + src: url('../font/fontello.eot?74318141#iefix') format('embedded-opentype'), + url('../font/fontello.woff?74318141') format('woff'), + url('../font/fontello.ttf?74318141') format('truetype'), + url('../font/fontello.svg?74318141#fontello') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "fontello"; + font-style: normal; + font-weight: normal; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + font-variant: normal; + text-transform: none; +} + +.icon-github-circled:before { content: '\e800'; } /* '' */ +.icon-twitter:before { content: '\e801'; } /* '' */ diff --git a/_includes/footer.html b/_includes/footer.html index 922b8c72..2815a6b2 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,6 +1,8 @@ -
- diff --git a/_includes/header.html b/_includes/header.html index d364e91c..699d5397 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,6 +1,16 @@
-

{{ site.name }}

-

{{ site.description }}

-
+
+ ✍ +

{{ site.name }}

+

{{ site.description }}

-
\ No newline at end of file +

+ + + + + + +

+
+ diff --git a/_includes/html/attribute-order.html b/_includes/html/attribute-order.html new file mode 100644 index 00000000..a2edd1b1 --- /dev/null +++ b/_includes/html/attribute-order.html @@ -0,0 +1,7 @@ + + Example link + + + + +... diff --git a/_includes/html/boolean-attributes.html b/_includes/html/boolean-attributes.html new file mode 100644 index 00000000..e13076ae --- /dev/null +++ b/_includes/html/boolean-attributes.html @@ -0,0 +1,7 @@ + + + + + diff --git a/_includes/html/doctype.html b/_includes/html/doctype.html new file mode 100644 index 00000000..0e76edd6 --- /dev/null +++ b/_includes/html/doctype.html @@ -0,0 +1 @@ + diff --git a/_includes/html/naming.html b/_includes/html/naming.html new file mode 100644 index 00000000..da0e68f9 --- /dev/null +++ b/_includes/html/naming.html @@ -0,0 +1,9 @@ +.element { + ... +} +.element-title { + ... +} +.element-button { + ... +} diff --git a/_includes/html/reducing-markup.html b/_includes/html/reducing-markup.html new file mode 100644 index 00000000..75c904f7 --- /dev/null +++ b/_includes/html/reducing-markup.html @@ -0,0 +1,7 @@ + + + + + + + diff --git a/_includes/html/syntax.html b/_includes/html/syntax.html new file mode 100644 index 00000000..a307ffc6 --- /dev/null +++ b/_includes/html/syntax.html @@ -0,0 +1,10 @@ + + + + Page title + + + Company +

Hello, world!

+ + diff --git a/_includes/syntax.css b/_includes/syntax.css new file mode 100644 index 00000000..1b3c92cb --- /dev/null +++ b/_includes/syntax.css @@ -0,0 +1,66 @@ +.hll { background-color: #ffffcc } + /*{ background: #f0f3f3; }*/ +.c { color: #999; } /* Comment */ +.err { color: #AA0000; background-color: #FFAAAA } /* Error */ +.k { color: #006699; } /* Keyword */ +.o { color: #555555 } /* Operator */ +.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */ +.cp { color: #009999 } /* Comment.Preproc */ +.c1 { color: #999; } /* Comment.Single */ +.cs { color: #999; } /* Comment.Special */ +.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ +.ge { font-style: italic } /* Generic.Emph */ +.gr { color: #FF0000 } /* Generic.Error */ +.gh { color: #003300; } /* Generic.Heading */ +.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ +.go { color: #AAAAAA } /* Generic.Output */ +.gp { color: #000099; } /* Generic.Prompt */ +.gs { } /* Generic.Strong */ +.gu { color: #003300; } /* Generic.Subheading */ +.gt { color: #99CC66 } /* Generic.Traceback */ +.kc { color: #006699; } /* Keyword.Constant */ +.kd { color: #006699; } /* Keyword.Declaration */ +.kn { color: #006699; } /* Keyword.Namespace */ +.kp { color: #006699 } /* Keyword.Pseudo */ +.kr { color: #006699; } /* Keyword.Reserved */ +.kt { color: #007788; } /* Keyword.Type */ +.m { color: #FF6600 } /* Literal.Number */ +.s { color: #d44950 } /* Literal.String */ +.na { color: #4f9fcf } /* Name.Attribute */ +.nb { color: #336666 } /* Name.Builtin */ +.nc { color: #00AA88; } /* Name.Class */ +.no { color: #336600 } /* Name.Constant */ +.nd { color: #9999FF } /* Name.Decorator */ +.ni { color: #999999; } /* Name.Entity */ +.ne { color: #CC0000; } /* Name.Exception */ +.nf { color: #CC00FF } /* Name.Function */ +.nl { color: #9999FF } /* Name.Label */ +.nn { color: #00CCFF; } /* Name.Namespace */ +.nt { color: #2f6f9f; } /* Name.Tag */ +.nv { color: #003333 } /* Name.Variable */ +.ow { color: #000000; } /* Operator.Word */ +.w { color: #bbbbbb } /* Text.Whitespace */ +.mf { color: #FF6600 } /* Literal.Number.Float */ +.mh { color: #FF6600 } /* Literal.Number.Hex */ +.mi { color: #FF6600 } /* Literal.Number.Integer */ +.mo { color: #FF6600 } /* Literal.Number.Oct */ +.sb { color: #CC3300 } /* Literal.String.Backtick */ +.sc { color: #CC3300 } /* Literal.String.Char */ +.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ +.s2 { color: #CC3300 } /* Literal.String.Double */ +.se { color: #CC3300; } /* Literal.String.Escape */ +.sh { color: #CC3300 } /* Literal.String.Heredoc */ +.si { color: #AA0000 } /* Literal.String.Interpol */ +.sx { color: #CC3300 } /* Literal.String.Other */ +.sr { color: #33AAAA } /* Literal.String.Regex */ +.s1 { color: #CC3300 } /* Literal.String.Single */ +.ss { color: #FFCC33 } /* Literal.String.Symbol */ +.bp { color: #336666 } /* Name.Builtin.Pseudo */ +.vc { color: #003333 } /* Name.Variable.Class */ +.vg { color: #003333 } /* Name.Variable.Global */ +.vi { color: #003333 } /* Name.Variable.Instance */ +.il { color: #FF6600 } /* Literal.Number.Integer.Long */ + +.css .o, +.css .o + .nt, +.css .nt + .nt { color: #999; } diff --git a/_layouts/default.html b/_layouts/default.html index d05a2578..2cb62af0 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,34 +1,24 @@ - + - + - - {% if page.title %} - {{ page.title }} · - {% endif %} {{ site.name }} - - - - + + -
+ {% include header.html %} - {% include header.html %} + {{ content }} - {{ content }} - - {% include footer.html %} - -
+ {% include footer.html %} {% include js.html %} diff --git a/_site/code-guide.css b/_site/code-guide.css new file mode 100644 index 00000000..50f39c2b --- /dev/null +++ b/_site/code-guide.css @@ -0,0 +1,296 @@ +@font-face { + font-family: 'fontello'; + src: url('../font/fontello.eot?74318141'); + src: url('../font/fontello.eot?74318141#iefix') format('embedded-opentype'), + url('../font/fontello.woff?74318141') format('woff'), + url('../font/fontello.ttf?74318141') format('truetype'), + url('../font/fontello.svg?74318141#fontello') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "fontello"; + font-style: normal; + font-weight: normal; + speak: none; + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + font-variant: normal; + text-transform: none; +} + +.icon-github-circled:before { content: '\e800'; } /* '' */ +.icon-twitter:before { content: '\e801'; } /* '' */ + + +html { + font-size: 16px; +} +@media (min-width: 48rem) { + html { + font-size: 20px; + } +} + +body { + margin: 0; + font: 1rem/1.5 "PT Sans", sans-serif; + color: #5a5a5a; +} + +a { + color: #08c; + text-decoration: none; +} +a:hover { + text-decoration: underline; +} + +h1, h2, h3, h4 { + margin: 0 0 .5rem; + font-weight: normal; + line-height: 1; + color: #2a2a2a; + letter-spacing: -.05em; +} +h1 { font-size: 3rem; } +h2 { font-size: 2.5rem; } +h3 { font-size: 1.75rem; } +h4 { font-size: 1.25rem } + +p { + margin: 0 0 1rem; +} +p:last-child { + margin-bottom: 0; +} +.lead { + font-size: 1.3rem; +} + +blockquote { + font-style: italic; +} +blockquote p { + margin-bottom: 0; +} + + +/* + * Code + */ + +code, +pre { + font-family: "PT Mono", Menlo, "Courier New", monospace; + font-size: 95%; +} +code { + padding: 2px 4px; + font-size: 85%; + color: #d44950; + background-color: #f7f7f9; + border-radius: .2rem; +} + +pre { + display: block; + margin: 0 0 1rem; + line-height: 1.5; + white-space: pre; + white-space: pre-wrap; + word-break: break-all; + word-wrap: break-word; +} +pre code { + padding: 0; + color: inherit; + background-color: transparent; + border: 0; +} +.highlight { + margin: 0; +} +.highlight pre { + margin-bottom: 0; +} +.highlight + .highlight { + margin-top: 1rem; +} + + +/* + * The Grid + */ + +.col { + padding: 1rem; +} +.col p { + max-width: 40rem; +} +.col + .col { + background-color: #f7f7f9; +} +@media (min-width: 48rem) { + .section { + display: table; + width: 100%; + table-layout: fixed; + } + .col { + display: table-cell; + padding: 3rem; + vertical-align: top; + } +} + + +/* + * Masthead + */ + +.masthead { + padding: 3rem 1rem; + color: rgba(255,255,255,.5); + text-align: center; + background-color: #2a3440; +} +.masthead h1 { + color: #fff; + margin-bottom: .25rem; +} +.masthead .icon { + display: inline-block; + font-size: 3rem; + margin: 0 .5rem; +} +.masthead-links { + font-size: 2rem; +} +.masthead-links a { + color: rgba(255,255,255,.5); + text-decoration: none; + transition: all .15s linear; +} +.masthead-links a:hover { + color: #fff; +} + + +/* + * Sections + */ + +.heading { + padding: 2rem 1rem 1.5rem; + background-color: #dfe1e8; +} +@media (min-width: 38rem) { + .heading { + padding: 3rem 3rem 2.5rem; + } +} + +.section { + border-bottom: 1px solid #dfe1e8; +} + + +/* + * Footer + */ + +.footer { + padding: 2rem 1rem; + font-size: 90%; + text-align: center; +} +.footer p { + margin-bottom: .5rem; +} + +.quick-links { + list-style: none; + margin-left: 0; +} +.quick-links li { + display: inline; +} + + +/* + * Syntax highlighting + */ + +.hll { background-color: #ffffcc } + /*{ background: #f0f3f3; }*/ +.c { color: #999; } /* Comment */ +.err { color: #AA0000; background-color: #FFAAAA } /* Error */ +.k { color: #006699; } /* Keyword */ +.o { color: #555555 } /* Operator */ +.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */ +.cp { color: #009999 } /* Comment.Preproc */ +.c1 { color: #999; } /* Comment.Single */ +.cs { color: #999; } /* Comment.Special */ +.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ +.ge { font-style: italic } /* Generic.Emph */ +.gr { color: #FF0000 } /* Generic.Error */ +.gh { color: #003300; } /* Generic.Heading */ +.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ +.go { color: #AAAAAA } /* Generic.Output */ +.gp { color: #000099; } /* Generic.Prompt */ +.gs { } /* Generic.Strong */ +.gu { color: #003300; } /* Generic.Subheading */ +.gt { color: #99CC66 } /* Generic.Traceback */ +.kc { color: #006699; } /* Keyword.Constant */ +.kd { color: #006699; } /* Keyword.Declaration */ +.kn { color: #006699; } /* Keyword.Namespace */ +.kp { color: #006699 } /* Keyword.Pseudo */ +.kr { color: #006699; } /* Keyword.Reserved */ +.kt { color: #007788; } /* Keyword.Type */ +.m { color: #FF6600 } /* Literal.Number */ +.s { color: #d44950 } /* Literal.String */ +.na { color: #4f9fcf } /* Name.Attribute */ +.nb { color: #336666 } /* Name.Builtin */ +.nc { color: #00AA88; } /* Name.Class */ +.no { color: #336600 } /* Name.Constant */ +.nd { color: #9999FF } /* Name.Decorator */ +.ni { color: #999999; } /* Name.Entity */ +.ne { color: #CC0000; } /* Name.Exception */ +.nf { color: #CC00FF } /* Name.Function */ +.nl { color: #9999FF } /* Name.Label */ +.nn { color: #00CCFF; } /* Name.Namespace */ +.nt { color: #2f6f9f; } /* Name.Tag */ +.nv { color: #003333 } /* Name.Variable */ +.ow { color: #000000; } /* Operator.Word */ +.w { color: #bbbbbb } /* Text.Whitespace */ +.mf { color: #FF6600 } /* Literal.Number.Float */ +.mh { color: #FF6600 } /* Literal.Number.Hex */ +.mi { color: #FF6600 } /* Literal.Number.Integer */ +.mo { color: #FF6600 } /* Literal.Number.Oct */ +.sb { color: #CC3300 } /* Literal.String.Backtick */ +.sc { color: #CC3300 } /* Literal.String.Char */ +.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ +.s2 { color: #CC3300 } /* Literal.String.Double */ +.se { color: #CC3300; } /* Literal.String.Escape */ +.sh { color: #CC3300 } /* Literal.String.Heredoc */ +.si { color: #AA0000 } /* Literal.String.Interpol */ +.sx { color: #CC3300 } /* Literal.String.Other */ +.sr { color: #33AAAA } /* Literal.String.Regex */ +.s1 { color: #CC3300 } /* Literal.String.Single */ +.ss { color: #FFCC33 } /* Literal.String.Symbol */ +.bp { color: #336666 } /* Name.Builtin.Pseudo */ +.vc { color: #003333 } /* Name.Variable.Class */ +.vg { color: #003333 } /* Name.Variable.Global */ +.vi { color: #003333 } /* Name.Variable.Instance */ +.il { color: #FF6600 } /* Literal.Number.Integer.Long */ + +.css .o, +.css .o + .nt, +.css .nt + .nt { color: #999; } + diff --git a/_site/font/fontello.eot b/_site/font/fontello.eot new file mode 100644 index 0000000000000000000000000000000000000000..ef777f62b90c2645efd15efd608eb74bffe6df44 GIT binary patch literal 4876 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 + + +Copyright (C) 2014 by original authors @ fontello.com + + + + + + + + + \ No newline at end of file diff --git a/_site/font/fontello.ttf b/_site/font/fontello.ttf new file mode 100644 index 0000000000000000000000000000000000000000..31ca6a924dbae45d69c514d463eecc1f1c0338d2 GIT binary patch literal 4708 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 - + - - - + + - - Code Guide + Code Guide by @mdo - - - - + + -
- -
-

Code Guide

-

Standards for developing flexible, durable, and sustainable HTML and CSS.

+
+
+ ✍ +

Code Guide by @mdo

+

Standards for developing flexible, durable, and sustainable HTML and CSS.

+ +

+ + + + + + +

+
-
- -

Table of contents

- - - - -
- -

Golden rule

- -

All code in any code base should look like a single person typed it, no matter how many people contributed.

-

This means strictly enforcing these agreed upon guidelines at all times. For additions or contributions, please file an issue on GitHub.

- -
- -

HTML

- -

HTML syntax

- -
    -
  • Use soft-tabs with two spaces
    • -
  • Nested elements should be indented once (2 spaces)
    • -
  • Always use double quotes, never single quotes
    • -
  • Don't include a trailing slash in self-closing elements
    • -
+
+
+

Golden rule

+

Enforce these, or your own, agreed upon guidelines at all times. Small or large, call out what's incorrect. For additions or contributions to this Code Guide, please open an issue on GitHub.

+
+
+
+

Every line of code should appear to be written by a single person, no matter the number of contributors.

+
+
+
-

Incorrect example

-
<!DOCTYPE html>
-<html>
-<head>
-<title>Page title</title>
-</head>
-<body>
-<img src='images/company-logo.png' alt='Company' />
-<h1 class='hello-world'>Hello, world!</h1>
-</body>
-</html>
-
+
+

HTML

- -

Correct example

- -
<!DOCTYPE html>
+

+  

+    
Syntax

+    
    
+      
  • Use soft-tabs with two spaces
    • 
+      
  • Nested elements should be indented once (2 spaces)
    • 
+      
  • Always use double quotes, never single quotes
    • 
+      
  • Don't include a trailing slash in self-closing elements
    • 
+    

+  

+  

+    
<!DOCTYPE html>
 <html>
   <head>
     <title>Page title</title>
@@ -123,84 +71,139 @@ 
Correct example

     <h1 class="hello-world">Hello, world!</h1>
   </body>
 </html>
-

+
+
- -

HTML5 doctype

- -

Enforce standards mode in every browser possible with this simple doctype at the beginning of every HTML page.

- -
<!DOCTYPE html>
-
+
+
+

HTML5 doctype

+

Enforce standards mode in every browser possible with this simple doctype at the beginning of every HTML page.

+
+
+ 
<!DOCTYPE html>
+
+
- -

Pragmatism over semantics

- -

Strive to maintain HTML standards and semantics, but don't sacrifice pragmatism. Use the least amount of markup with the fewest intricies whenever possible.

- -

Attribute order

- -

HTML attributes should come in this particular order for easier reading of code.

- -
    -
  • class
    • -
  • id
    • -
  • data-*
    • -
  • for|type|href
    • -
- - -

Such that your markup looks like:

- -
<a class="" id="" data-modal="" href="">Example link</a>
-
+
+
+

Practicality over purity

+

Strive to maintain HTML standards and semantics, but not at the expense of practicality. Use the least amount of markup with the fewest intricacies whenever possible.

+
+
+
+

Attribute order

+

HTML attributes should come in this particular order for easier reading of code.

+
    +
  • class
    • +
  • id
    • +
  • data-*
    • +
  • src, for, type, href
    • +
+
+
+ 
<a class="..." id="..." data-modal="toggle" href="#">
+  Example link
+</a>
+
+<input class="form-control" type="text">
+
+<img src="..." alt="...">
+
+
+
-

JavaScript generated markup

- -

Writing markup in a javascript file makes the content harder to find, harder to edit, and less performant. Don't do it.

+
+
+

Boolean attributes

+

A boolean attribute is one that needs no declared value. XHTML required you to declare a value, but HTML5 has no such requirement.

+

For further reading, consult the WhatWG section on boolean attributes:

+
+

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

+
+

If you must include the attribute's value, and you don't need to, follow this WhatWG guideline:

+
+

If the attribute is present, its value must either be the empty string or [...] the attribute's canonical name, with no leading or trailing whitespace.

+
+

In short, don't add a value.

+
+
+ 
<input type="text" disabled>
+
+<input type="checkbox" value="1" checked>
+
+<select>
+  <option value="1" selected></option>
+</select>
+
+
+
-
+
+
+

Reducing markup

+

Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. Take the following example:

+
+
+ 
<!-- Not so great -->
+<span class="avatar">
+  <img src="...">
+</span>
+
+<!-- Better -->
+<img class="avatar" src="...">
+
+
+
-

CSS

+
+
+

JavaScript generated markup

+

Writing markup in a JavaScript file makes the content harder to find, harder to edit, and less performant. Avoid it whenever possible.

+
+
-

CSS syntax

-
    -
  • Use soft-tabs with two spaces
    • -
  • When grouping selectors, keep individual selectors to a single line
    • -
  • Include one space before the opening brace of declaration blocks
    • -
  • Place closing braces of declaration blocks on a new line
    • -
  • Include one space after : in each property
    • -
  • Each declaration should appear on its own line
    • -
  • End all declarations with a semi-colon
    • -
  • Comma-separated values should include a space after each comma
    • -
  • Don't include spaces after commas in RGB or RGBa colors, and don't preface values with a leading zero
    • -
  • Lowercase all hex values, e.g., #fff instead of #FFF
    • -
  • Use shorthand hex values where available, e.g., #fff instead of #ffffff
    • -
  • Quote attribute values in selectors, e.g., input[type="text"]
    • -
  • Avoid specifying units for zero values, e.g., margin: 0; instead of margin: 0px;
    • -
-

Incorrect example

+
+

CSS

+
-
.selector, .selector-secondary, .selector[type=text] {
+

+  

+    
Syntax

+    
    
+      
  • Use soft-tabs with two spaces.
    • 
+      
  • When grouping selectors, keep individual selectors to a single line.
    • 
+      
  • Include one space before the opening brace of declaration blocks.
    • 
+      
  • Place closing braces of declaration blocks on a new line.
    • 
+      
  • Include one space after : for each declaration.
    • 
+      
  • Each declaration should appear on its own line for more accurate error reporting.
    • 
+      
  • End all declarations with a semi-colon.
    • 
+      
  • Comma-separated values should include a space after each comma.
    • 
+      
  • Don't include spaces after commas within rgb() or rgba() colors, and don't preface values with a leading zero.
    • 
+      
  • Lowercase all hex values, e.g., #fff.
    • 
+      
  • Use shorthand hex values where available, e.g., #fff instead of #ffffff.
    • 
+      
  • Quote attribute values in selectors, e.g., input[type="text"].
    • 
+      
  • Avoid specifying units for zero values, e.g., margin: 0; instead of margin: 0px;.
    • 
+    

+    
Questions on the terms used here? See the syntax section of the Cascading Style Sheets article on Wikipedia.

+  

+  

+    
/* Bad CSS */
+.selector, .selector-secondary, .selector[type=text] {
   padding:15px;
   margin:0px 0px 15px;
   background-color:rgba(0, 0, 0, 0.5);
   box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF
 }
-

-

 
-
-
Correct example

-
-
.selector,
+/* Good CSS */
+.selector,
 .selector-secondary,
 .selector[type="text"] {
   padding: 15px;
@@ -208,17 +211,18 @@ 
Correct example

   background-color: rgba(0,0,0,.5);
   box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
 }
-

+
+
- -

Questions on the terms used here? See the syntax section of the Cascading Style Sheets article on Wikipedia.

- -

Declaration order

- -

Related declarations should be grouped together, placing positioning and box-model properties closest to the top, followed by typographic and visual properties.

- -
.declaration-order {
+

+  

+    
Declaration order

+    
Related declarations should be grouped together, placing positioning and box-model properties closest to the top, followed by typographic and visual properties.

+    
For a complete list of properties and their order, please see Recess.

+  

+  

+    
.declaration-order {
   /* Positioning */
   position: absolute;
   top: 0;
@@ -235,7 +239,7 @@ 
Declaration order

 
   /* Typography */
   font: normal 13px "Helvetica Neue", sans-serif;
-  line-height: 1.5
+  line-height: 1.5;
   color: #333;
   text-align: center;
 
@@ -247,36 +251,54 @@ 
Declaration order

   /* Misc */
   opacity: 1;
 }
-

+
+ +
+
+

Media query placement

+

Place media queries as close to their relevant rule sets whenever possible. Don't bundle them all in a separate stylesheet or at the end of the document. Doing so only makes it easier for folks to miss them in the future. Here's a typical setup.

+
+
+ 
.element { ... }
+.element-avatar { ... }
+.element-selected { ... }
+
+@media (min-width: 480px) {
+  element { ... }
+	  .element-avatar { ... }
+	  .element-selected { ... }
+	}
+}
+
+
+
-

For a complete list of properties and their order, please see Recess.

- -

Formatting exceptions

- -

In some cases, it makes sense to deviate slightly from the default syntax.

- -

Prefixed properties

- -

When using vendor prefixed properties, indent each property such that the value lines up vertically for easy multi-line editing.

- -
.selector {
-  -webkit-border-radius: 3px;
-     -moz-border-radius: 3px;
-          border-radius: 3px;
+

+  

+    
Prefixed properties

+    
When using vendor prefixed properties, indent each property such that the declaration's value lines up vertically for easy multi-line editing.

+    
In Textmate, use Text → Edit Each Line in Selection (⌃⌘A). In Sublime Text 2, use Selection → Add Previous Line (⌃⇧↑) and Selection →  Add Next Line (⌃⇧↓).

+  

+  

+    
/* Prefixed properties */
+.selector {
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
+          box-shadow: 0 1px 2px rgba(0,0,0,.15);
 }
-

+
+ - -

In Textmate, use Text → Edit Each Line in Selection (⌃⌘A). In Sublime Text 2, use Selection → Add Previous Line (⌃⇧↑) and Selection → Add Next Line (⌃⇧↓).

- -

Rules with single declarations

- -

In instances where several rules are present with only one declaration each, consider removing new line breaks for readability and faster editing.

- -
.span1 { width: 60px; }
+

+  

+    
Single declarations

+    
In instances where a rule set includes only one declaration, consider removing line breaks for readability and faster editing. Consider this mixed example:

+  

+  

+    
/* Single declarations */
+.span1 { width: 60px; }
 .span2 { width: 140px; }
 .span3 { width: 220px; }
 
@@ -289,121 +311,151 @@ 
Rules with single declarations

 .icon           { background-position: 0 0; }
 .icon-home      { background-position: 0 -20px; }
 .icon-account   { background-position: 0 -40px; }
-

+
+ +
+
+

Nesting in LESS and SASS

+

Avoid unnecessary nesting. Just because you can nest, doesn't mean you always should. Consider nesting if you must scope styles to a parent and if there are multiple elements to be nested.

+
+
+ 
// Without nesting
+.table > thead > tr > th { … }
+.table > thead > tr > td { … }
+
+// With nesting
+.table > thead > tr {
+  > th { … }
+  > td { … }
+}
+
+
+
-

Human readable

- -

Code is written and maintained by people. Ensure your code is descriptive, well commented, and approachable by others.

- -

Comments

- -

Great code comments convey context or purpose and should not just reiterate a component or class name.

- -

Bad example

+
+

Human readable

+
-
/* Modal header */
+

+  

+    
Comments

+    
Code is written and maintained by people. Ensure your code is descriptive, well commented, and approachable by others.

+    
Great code comments convey context or purpose and should not just reiterate a component or class name.

+  

+  

+    
/* Bad example */
+/* Modal header */
 .modal-header {
   ...
 }
-

-

-
-
-
Good example

 
-
/* Wrapping element for .modal-title and .modal-close */
+/* Good example */
+/* Wrapping element for .modal-title and .modal-close */
 .modal-header {
   ...
 }
-

+
+ - -

Class names

- -
    -
  • Keep classes lowercase and use dashes (not underscores or camelCase)
    • -
  • Avoid arbitrary shorthand notation
    • -
  • Keep classes as short and succinct as possible
    • -
  • Use meaningful names; use structural or purposeful names over presentational
    • -
  • Prefix classes based on the closest parent component's base class
    • -
- - -

Bad example

- -
.t { ... }
+

+  

+    
Class names

+    
    
+      
  • Keep classes lowercase and use dashes (not underscores or camelCase).
    • 
+      
  • Avoid arbitrary shorthand notation.
    • 
+      
  • Keep classes as short and succinct as possible.
    • 
+      
  • Use meaningful names; use structural or purposeful names over presentational.
    • 
+      
  • Prefix classes based on the closest parent component's base class.
    • 
+    

+  

+  

+    
/* Bad example */
+.t { ... }
 .red { ... }
 .header { ... }
-

-

 
-
-
Good example

-
-
.tweet { ... }
+/* Good example */
+.tweet { ... }
 .important { ... }
 .tweet-header { ... }
-

+
+ - -

Selectors

- -
    -
  • Use classes over generic element tags
    • -
  • Keep them short and limit the number of elements in each selector to three
    • -
  • Scope classes to the closest parent when necessary (e.g., when not using prefixed classes)
    • -
- - -

Bad example

- -
span { ... }
+

+  

+    
Selectors

+    
    
+      
  • Use classes over generic element tags.
    • 
+      
  • Keep them short and limit the number of elements in each selector to three.
    • 
+      
  • Scope classes to the closest only parent when necessary (e.g., when not using prefixed classes).
    • 
+    

+    
Additional reading:

+    
+  

+  

+    
/* Bad example */
+span { ... }
 .page-container #stream .stream-item .tweet .tweet-header .username { ... }
 .avatar { ... }
-

-

-
 
-
Good example

-
-
.avatar { ... }
+/* Good example */
+.avatar { ... }
 .tweet-header .username { ... }
 .tweet .avatar { ... }
-

+
+ +
+
+

Organization

+
    +
  • Organize sections of code by component.
    • +
  • Develop a consistent commenting hierarchy.
    • +
  • If using multiple CSS files, break them down by component.
    • +
+
+
-

Organization

- -
    -
  • Organize sections of code by component
    • -
  • Develop a consistent commenting hierarchy
    • -
  • If using multiple CSS files, break them down by component
    • -
- - -
- -

Copy

- -

Sentence case

- -

Always write copy, including headings and code comments, in sentence case. In other words, aside from titles and proper nouns, only the first word should be capitalized.

+
+
+

Editor preferences

+

Set your editor to the following settings to avoid common code inconsistencies and dirty diffs:

+
    +
  • Use soft-tabs set to 2 spaces
    • +
  • Trim trailing white space on save
    • +
  • Set encoding to UTF-8
    • +
  • Add new line at end of files
    • +
+

Consider applying these preferences to your project's .editorconfig file, a la Bootstrap's own.

+
+
-
-

Thanks

+
+

Copy

+
-

Inspired by Idiomatic CSS and the GitHub Styleguide. Made with all the love in the world by @mdo.

+
+
+

Sentence case

+

Always write copy, including headings and code comments, in sentence case. In other words, aside from titles and proper nouns, only the first word should be capitalized.

+
+
-
+