From 775fb6a5845fd5aa5a55ceb174125139c98fac6d Mon Sep 17 00:00:00 2001 From: Thomas Tuts Date: Thu, 26 Mar 2015 07:34:51 +0100 Subject: [PATCH 1/5] Add helper layout class to center content This adds the `.centered` class which can be used either on a column, or outside of the grid. This also allows us to center content that is not placed in a grid row (for example, a fixed-width navigation, ...). --- scss/_layout.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/scss/_layout.scss b/scss/_layout.scss index a871ef36..d7023a1c 100644 --- a/scss/_layout.scss +++ b/scss/_layout.scss @@ -59,6 +59,14 @@ padding-left: $grid-gutter; } +// Centers content horizontally. Can be used inside or outside the grid. +.centered { + display: block; + float: none; + margin-left: auto; + margin-right: auto; +} + // Equal width columns via table sorcery. .table-column { display: table-cell; From 45c25a7be9963065232744017d8bf40ae9f3e33e Mon Sep 17 00:00:00 2001 From: Thomas Tuts Date: Tue, 31 Mar 2015 12:57:14 +0200 Subject: [PATCH 2/5] Move .centered class from layout to utility --- scss/_layout.scss | 8 -------- scss/_utility.scss | 11 +++++++++++ 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/scss/_layout.scss b/scss/_layout.scss index 92427a73..3a58c6f0 100644 --- a/scss/_layout.scss +++ b/scss/_layout.scss @@ -59,14 +59,6 @@ padding-left: $grid-gutter; } -// Centers content horizontally. Can be used inside or outside the grid. -.centered { - display: block; - float: none; - margin-left: auto; - margin-right: auto; -} - // Equal width columns via table sorcery. .table-column { display: table-cell; diff --git a/scss/_utility.scss b/scss/_utility.scss index eee3df58..5d799691 100644 --- a/scss/_utility.scss +++ b/scss/_utility.scss @@ -9,6 +9,17 @@ .left { float: left; } +// Layout + +// Centers content horizontally. Can be used inside or outside the grid. +.centered { + display: block; + float: none; + margin-left: auto; + margin-right: auto; +} + + // Text alignment .text-right { text-align: right; } From 347f70e47a968f7852e58d3f88bd065b61d46c7e Mon Sep 17 00:00:00 2001 From: Thomas Tuts Date: Thu, 2 Apr 2015 08:27:12 +0200 Subject: [PATCH 3/5] Add docs for .centered class to Layout & Utilities doc sections --- docs/layout.md | 1 + docs/utilities.md | 23 +++++++++++++++++++++++ 2 files changed, 24 insertions(+) diff --git a/docs/layout.md b/docs/layout.md index d16a66fc..a8e848b7 100644 --- a/docs/layout.md +++ b/docs/layout.md @@ -32,6 +32,7 @@ The grid is pretty standard—you create rows with `.columns` and individual col - Create your outer row to clear the floated columns with `
`. - Add your columns with individual `
`s. - Add your fractional width classes to set the width of the columns (e.g., `.one-fourth`). +- Columns can be [centered](/utilities/#centering-content) by adding `.centered` to the `.column` class. In practice, your columns will look like the example below. diff --git a/docs/utilities.md b/docs/utilities.md index 75812b2f..13c3744c 100644 --- a/docs/utilities.md +++ b/docs/utilities.md @@ -47,6 +47,29 @@ Quickly float something to the left or right, and clear them later.
{% endexample %} +## Centering content + +Center content if it's not taking up the full width of the container. Can be used on grid columns or any other elements. + + +{% example html %} +
+
+ .one-half +
+
+ +
+ + +{% endexample %} + + ## Text alignment Change the `text-align` on elements with a class. From fb24bf6b9bb854d7596d32876d1e5c9729d4ef0a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 15 Apr 2015 15:06:16 -0700 Subject: [PATCH 4/5] document version in footer --- _config.yml | 3 ++- docs/_layouts/default.html | 2 +- docs/docs.scss | 4 ++++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/_config.yml b/_config.yml index 3bddd5ed..41c17ad1 100644 --- a/_config.yml +++ b/_config.yml @@ -1,4 +1,3 @@ -# Dependencies markdown: kramdown highlighter: rouge @@ -9,6 +8,8 @@ permalink: pretty source: docs baseurl: "" +version: 2.0.3 + sass: sass_dir: ../ style: compressed diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index c7267ed3..76be15b0 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -72,7 +72,7 @@
Copyright GitHub {{ site.time | date: '%Y' }}.
- Created and maintained by the CSS team at GitHub. + Created and maintained by the CSS team at GitHub. Currently v{{ site.version }}.
diff --git a/docs/docs.scss b/docs/docs.scss index e444d5d9..87aaa77a 100644 --- a/docs/docs.scss +++ b/docs/docs.scss @@ -217,6 +217,10 @@ body { line-height: 1.75; color: #7a7a7a; border-top: 1px solid #eee; + + strong { + color: #333; + } } From 18f565721f46cd87a158cffb20d88582d032eb98 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 15 Apr 2015 15:11:52 -0700 Subject: [PATCH 5/5] rearrange and emphasize some docs things --- docs/layout.md | 17 ++++++++++++++++- docs/utilities.md | 11 +---------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/docs/layout.md b/docs/layout.md index a8e848b7..560fbfc3 100644 --- a/docs/layout.md +++ b/docs/layout.md @@ -26,13 +26,16 @@ The container applies `width: 980px;` and uses horizontal `margin`s to center it ## Grid +### How it works + The grid is pretty standard—you create rows with `.columns` and individual columns with a column class and fraction class. Here's how it works: - Add a `.container` to encapsulate everything and provide ample horizontal gutter space. - Create your outer row to clear the floated columns with `
`. - Add your columns with individual `
`s. - Add your fractional width classes to set the width of the columns (e.g., `.one-fourth`). -- Columns can be [centered](/utilities/#centering-content) by adding `.centered` to the `.column` class. + +### Demo In practice, your columns will look like the example below. @@ -75,3 +78,15 @@ In practice, your columns will look like the example below.
{% endexample %} + +### Centered + +Columns can be [centered](/utilities/#centering-content) by adding `.centered` to the `.column` class. + +{% example html %} +
+
+ .one-half +
+
+{% endexample %} \ No newline at end of file diff --git a/docs/utilities.md b/docs/utilities.md index 13c3744c..301cc8c7 100644 --- a/docs/utilities.md +++ b/docs/utilities.md @@ -49,18 +49,9 @@ Quickly float something to the left or right, and clear them later. ## Centering content -Center content if it's not taking up the full width of the container. Can be used on grid columns or any other elements. - +Easily center **block level content** if it's not taking up the full width of the parent. Can be used [on grid columns](/layout/#centered) or any other elements. {% example html %} -
-
- .one-half -
-
- -
-