jekyll-theme-primer 0.5.2 → 0.5.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +5 -5
- data/LICENSE.md +1 -1
- data/README.md +3 -4
- data/_layouts/default.html +15 -4
- data/_sass/primer-base/LICENSE +1 -1
- data/_sass/primer-base/README.md +6 -6
- data/_sass/primer-base/build/build.css +1 -1
- data/_sass/primer-base/build/index.js +1 -1
- data/_sass/primer-base/lib/base.scss +11 -0
- data/_sass/primer-base/lib/normalize.scss +1 -3
- data/_sass/primer-base/package.json +25 -20
- data/_sass/primer-layout/LICENSE +1 -1
- data/_sass/primer-layout/README.md +12 -12
- data/_sass/primer-layout/docs/grid.md +392 -0
- data/_sass/primer-layout/package.json +27 -21
- data/_sass/primer-markdown/LICENSE +1 -1
- data/_sass/primer-markdown/README.md +6 -6
- data/_sass/primer-markdown/build/build.css +1 -1
- data/_sass/primer-markdown/build/index.js +1 -1
- data/_sass/primer-markdown/lib/code.scss +3 -16
- data/_sass/primer-markdown/lib/lists.scss +5 -1
- data/_sass/primer-markdown/lib/markdown-body.scss +1 -1
- data/_sass/primer-markdown/package.json +23 -18
- data/_sass/primer-support/LICENSE +1 -1
- data/_sass/primer-support/README.md +20 -6
- data/_sass/primer-support/docs/breakpoints.md +60 -0
- data/_sass/primer-support/docs/color-system.md +392 -0
- data/_sass/primer-support/docs/spacing.md +40 -0
- data/_sass/primer-support/docs/typography.md +90 -0
- data/_sass/primer-support/lib/mixins/buttons.scss +13 -9
- data/_sass/primer-support/lib/variables/layout.scss +8 -0
- data/_sass/primer-support/lib/variables/misc.scss +1 -1
- data/_sass/primer-support/package.json +25 -18
- data/_sass/primer-utilities/LICENSE +1 -1
- data/_sass/primer-utilities/README.md +6 -6
- data/_sass/primer-utilities/build/build.css +1 -1
- data/_sass/primer-utilities/build/index.js +1 -1
- data/_sass/primer-utilities/docs/animations.md +75 -0
- data/_sass/primer-utilities/docs/borders.md +127 -0
- data/_sass/primer-utilities/docs/box-shadow.md +107 -0
- data/_sass/primer-utilities/docs/colors.md +232 -0
- data/_sass/primer-utilities/docs/flexbox.md +665 -0
- data/_sass/primer-utilities/docs/layout.md +300 -0
- data/_sass/primer-utilities/docs/margin.md +126 -0
- data/_sass/primer-utilities/docs/padding.md +110 -0
- data/_sass/primer-utilities/docs/typography.md +138 -0
- data/_sass/primer-utilities/lib/animations.scss +32 -2
- data/_sass/primer-utilities/lib/borders.scss +2 -0
- data/_sass/primer-utilities/lib/layout.scss +7 -3
- data/_sass/primer-utilities/package.json +27 -21
- metadata +54 -42
- data/assets/javascript/anchor-js/.eslintrc +0 -77
- data/assets/javascript/anchor-js/.gitattributes +0 -2
- data/assets/javascript/anchor-js/.npmignore +0 -4
- data/assets/javascript/anchor-js/.travis.yml +0 -6
- data/assets/javascript/anchor-js/anchor.js +0 -334
- data/assets/javascript/anchor-js/anchor.min.js +0 -6
- data/assets/javascript/anchor-js/banner.js +0 -17
- data/assets/javascript/anchor-js/docs/anchor.js +0 -334
- data/assets/javascript/anchor-js/docs/favicon.ico +0 -0
- data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.eot +0 -0
- data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.svg +0 -11
- data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.ttf +0 -0
- data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.woff +0 -0
- data/assets/javascript/anchor-js/docs/fonts/fonts.css +0 -24
- data/assets/javascript/anchor-js/docs/grunticon/grunticon.loader.js +0 -3
- data/assets/javascript/anchor-js/docs/grunticon/icons.data.png.css +0 -5
- data/assets/javascript/anchor-js/docs/grunticon/icons.data.svg.css +0 -5
- data/assets/javascript/anchor-js/docs/grunticon/icons.fallback.css +0 -5
- data/assets/javascript/anchor-js/docs/grunticon/png/grunticon-link.png +0 -0
- data/assets/javascript/anchor-js/docs/img/anchoring-links.png +0 -0
- data/assets/javascript/anchor-js/docs/img/anchorjs_logo.png +0 -0
- data/assets/javascript/anchor-js/docs/img/anchorlinks2.png +0 -0
- data/assets/javascript/anchor-js/docs/img/gh-link.svg +0 -9
- data/assets/javascript/anchor-js/docs/img/gh_link.svg +0 -9
- data/assets/javascript/anchor-js/docs/img/hyperlink.svg +0 -9
- data/assets/javascript/anchor-js/docs/img/link.svg +0 -6
- data/assets/javascript/anchor-js/docs/img/mini-logo.png +0 -0
- data/assets/javascript/anchor-js/docs/img/primer-md.png +0 -0
- data/assets/javascript/anchor-js/docs/scripts.js +0 -12
- data/assets/javascript/anchor-js/docs/styles.css +0 -493
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
2
|
+
SHA256:
|
|
3
|
+
metadata.gz: ec5a67e45b9e2b321b41ef5dd227b9c377a0146810029fabd0a3e484d1071a30
|
|
4
|
+
data.tar.gz: 289173407e1deedb5a1fdfe42cad3699f988d110a26d0e12fcbcd3c4bb34f741
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 077e5dd00dec2db8a39ae2e905ecc7bf02a9d24bcff13756870be85ea46b63fc4e991359c2ade2323fb2de96cd04e75d532cc1fa2de0556d08fbaee93332e331
|
|
7
|
+
data.tar.gz: 5034d1ede97ed04a2b39ffeb2adbefafe5fe1fd948c47255e71b08f75d405b532f9da9904f8c8d90d8571c0ee964ae0e29e1743eaad427846d9ec62283baf67e
|
data/LICENSE.md
CHANGED
data/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# The Primer theme
|
|
2
2
|
|
|
3
|
-
[](https://travis-ci.org/pages-themes/primer) [](https://badge.fury.io/rb/jekyll-theme-primer)
|
|
4
4
|
|
|
5
5
|
*Primer is a Jekyll theme for GitHub Pages. You can [preview the theme to see what it looks like](http://pages-themes.github.io/primer), or even [use it today](#usage).*
|
|
6
6
|
|
|
@@ -36,7 +36,6 @@ description: [A short description of your site's purpose]
|
|
|
36
36
|
Additionally, you may choose to set the following optional variables:
|
|
37
37
|
|
|
38
38
|
```yml
|
|
39
|
-
show_downloads: ["true" or "false" to indicate whether to provide a download URL]
|
|
40
39
|
google_analytics: [Your Google Analytics tracking ID]
|
|
41
40
|
```
|
|
42
41
|
|
|
@@ -44,7 +43,7 @@ google_analytics: [Your Google Analytics tracking ID]
|
|
|
44
43
|
|
|
45
44
|
If you'd like to add your own custom styles:
|
|
46
45
|
|
|
47
|
-
1. Create a file called `/assets/css/style.
|
|
46
|
+
1. Create a file called `/assets/css/style.scss` in your site
|
|
48
47
|
2. Add the following content to the top of the file, exactly as shown:
|
|
49
48
|
```scss
|
|
50
49
|
---
|
|
@@ -65,7 +64,7 @@ If you'd like to change the theme's HTML layout:
|
|
|
65
64
|
|
|
66
65
|
## Roadmap
|
|
67
66
|
|
|
68
|
-
See the [open issues](https://github.com/
|
|
67
|
+
See the [open issues](https://github.com/pages-themes/primer/issues) for a list of proposed features (and known issues).
|
|
69
68
|
|
|
70
69
|
## Project philosophy
|
|
71
70
|
|
data/_layouts/default.html
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
2
|
+
<html lang="{{ site.lang | default: "en-US" }}">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
5
6
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
7
|
|
|
7
8
|
{% seo %}
|
|
8
|
-
<link href="{{
|
|
9
|
+
<link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
|
|
9
10
|
</head>
|
|
10
11
|
<body>
|
|
11
12
|
<div class="container-lg px-3 my-5 markdown-body">
|
|
12
13
|
{% if site.title and site.title != page.title %}
|
|
13
|
-
|
|
14
|
+
<h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
|
|
14
15
|
{% endif %}
|
|
15
16
|
|
|
16
17
|
{{ content }}
|
|
@@ -21,7 +22,17 @@
|
|
|
21
22
|
</div>
|
|
22
23
|
{% endif %}
|
|
23
24
|
</div>
|
|
24
|
-
<script src="
|
|
25
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
|
|
25
26
|
<script>anchors.add();</script>
|
|
27
|
+
{% if site.google_analytics %}
|
|
28
|
+
<script>
|
|
29
|
+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
30
|
+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
31
|
+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
32
|
+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
|
33
|
+
ga('create', '{{ site.google_analytics }}', 'auto');
|
|
34
|
+
ga('send', 'pageview');
|
|
35
|
+
</script>
|
|
36
|
+
{% endif %}
|
|
26
37
|
</body>
|
|
27
38
|
</html>
|
data/_sass/primer-base/LICENSE
CHANGED
data/_sass/primer-base/README.md
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
# Primer
|
|
1
|
+
# Primer Base
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.org/package/primer-base)
|
|
4
|
+
[](https://travis-ci.org/primer/primer)
|
|
5
5
|
|
|
6
6
|
> GitHub's CSS to reset the browsers default styles. Built on top of normalize.css
|
|
7
7
|
|
|
8
|
-
This repository is a module of the full [primer
|
|
8
|
+
This repository is a module of the full [primer][primer] repository. And is built off of [normalize.css](https://github.com/necolas/normalize.css/)
|
|
9
9
|
|
|
10
10
|
## Install
|
|
11
11
|
|
|
@@ -41,8 +41,8 @@ You can read more about base in the [docs][docs].
|
|
|
41
41
|
|
|
42
42
|
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
|
43
43
|
|
|
44
|
-
[primer
|
|
45
|
-
[docs]: http://
|
|
44
|
+
[primer]: https://github.com/primer/primer
|
|
45
|
+
[docs]: http://primer.github.io/
|
|
46
46
|
[npm]: https://www.npmjs.com/
|
|
47
47
|
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
|
48
48
|
[sass]: http://sass-lang.com/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent
|
|
1
|
+
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:0.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}*{box-sizing:border-box}input,select,textarea,button{font-family:inherit;font-size:inherit;line-height:inherit}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:14px;line-height:1.5;color:#24292e;background-color:#fff}a{color:#0366d6;text-decoration:none}a:hover{text-decoration:underline}b,strong{font-weight:600}hr,.rule{height:0;margin:15px 0;overflow:hidden;background:transparent;border:0;border-bottom:1px solid #dfe2e5}hr::before,.rule::before{display:table;content:""}hr::after,.rule::after{display:table;clear:both;content:""}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}button{cursor:pointer;border-radius:0}details summary{cursor:pointer}details:not([open])>*:not(summary){display:none !important}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0}h1{font-size:32px;font-weight:600}h2{font-size:24px;font-weight:600}h3{font-size:20px;font-weight:600}h4{font-size:16px;font-weight:600}h5{font-size:14px;font-weight:600}h6{font-size:12px;font-weight:600}p{margin-top:0;margin-bottom:10px}small{font-size:90%}blockquote{margin:0}ul,ol{padding-left:0;margin-top:0;margin-bottom:0}ol ol,ul ol{list-style-type:lower-roman}ul ul ol,ul ol ol,ol ul ol,ol ol ol{list-style-type:lower-alpha}dd{margin-left:0}tt,code{font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px}pre{margin-top:0;margin-bottom:0;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:12px}.octicon{vertical-align:text-bottom}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports = {"cssstats":{"size":
|
|
1
|
+
module.exports = {"cssstats":{"size":3859,"gzipSize":1510,"humanizedSize":"4kB","humanizedGzipSize":"1kB","rules":{"total":72,"size":{"graph":[3,1,1,1,1,2,1,1,1,1,3,1,1,1,2,2,1,4,1,1,1,1,2,1,3,2,1,1,1,1,2,1,3,6,1,2,1,2,1,2,2,1,3,5,2,1,1,6,2,3,2,1,2,1,1,2,2,2,2,2,2,2,2,1,1,3,1,1,1,2,4,1],"max":6,"average":1.7916666666666667},"selectorByRuleSizes":[{"selector":"hr,.rule","declarations":6},{"selector":"legend","declarations":6},{"selector":"body","declarations":5},{"selector":"pre","declarations":4},{"selector":"sub,sup","declarations":4},{"selector":"ul,ol","declarations":3},{"selector":"hr::after,.rule::after","declarations":3},{"selector":"input,select,textarea,button","declarations":3},{"selector":"fieldset","declarations":3},{"selector":"hr","declarations":3},{"selector":"abbr[title]","declarations":3},{"selector":"html","declarations":3},{"selector":"tt,code","declarations":2},{"selector":"p","declarations":2},{"selector":"h6","declarations":2},{"selector":"h5","declarations":2},{"selector":"h4","declarations":2},{"selector":"h3","declarations":2},{"selector":"h2","declarations":2},{"selector":"h1","declarations":2},{"selector":"h1,h2,h3,h4,h5,h6","declarations":2},{"selector":"button","declarations":2},{"selector":"table","declarations":2},{"selector":"hr::before,.rule::before","declarations":2},{"selector":"a","declarations":2},{"selector":"::-webkit-file-upload-button","declarations":2},{"selector":"::-webkit-input-placeholder","declarations":2},{"selector":"[type=\"search\"]","declarations":2},{"selector":"[type=\"checkbox\"],[type=\"radio\"]","declarations":2},{"selector":"button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner","declarations":2},{"selector":"button,input,select,textarea","declarations":2},{"selector":"code,kbd,pre,samp","declarations":2},{"selector":"mark","declarations":2},{"selector":"h1","declarations":2},{"selector":"audio:not([controls])","declarations":2},{"selector":".octicon","declarations":1},{"selector":"dd","declarations":1},{"selector":"ul ul ol,ul ol ol,ol ul ol,ol ol ol","declarations":1},{"selector":"ol ol,ul ol","declarations":1},{"selector":"blockquote","declarations":1},{"selector":"small","declarations":1},{"selector":"details:not([open])>*:not(summary)","declarations":1},{"selector":"details summary","declarations":1},{"selector":"td,th","declarations":1},{"selector":"b,strong","declarations":1},{"selector":"a:hover","declarations":1},{"selector":"*","declarations":1},{"selector":"[type=\"search\"]::-webkit-search-cancel-button,[type=\"search\"]::-webkit-search-decoration","declarations":1},{"selector":"[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button","declarations":1},{"selector":"textarea","declarations":1},{"selector":"button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring","declarations":1},{"selector":"button,html [type=\"button\"],[type=\"reset\"],[type=\"submit\"]","declarations":1},{"selector":"button,select","declarations":1},{"selector":"button,input","declarations":1},{"selector":"optgroup","declarations":1},{"selector":"figure","declarations":1},{"selector":"svg:not(:root)","declarations":1},{"selector":"img","declarations":1},{"selector":"sup","declarations":1},{"selector":"sub","declarations":1},{"selector":"small","declarations":1},{"selector":"dfn","declarations":1},{"selector":"b,strong","declarations":1},{"selector":"b,strong","declarations":1},{"selector":"a:active,a:hover","declarations":1},{"selector":"a","declarations":1},{"selector":"template,[hidden]","declarations":1},{"selector":"progress","declarations":1},{"selector":"audio,canvas,progress,video","declarations":1},{"selector":"summary","declarations":1},{"selector":"article,aside,details,figcaption,figure,footer,header,main,menu,nav,section","declarations":1},{"selector":"body","declarations":1}]},"selectors":{"total":129,"type":106,"class":4,"id":0,"pseudoClass":6,"pseudoElement":4,"values":["html","body","article","aside","details","figcaption","figure","footer","header","main","menu","nav","section","summary","audio","canvas","progress","video","audio:not([controls])","progress","template","[hidden]","a","a:active","a:hover","abbr[title]","b","strong","b","strong","dfn","h1","mark","small","sub","sup","sub","sup","img","svg:not(:root)","code","kbd","pre","samp","figure","hr","button","input","select","textarea","optgroup","button","input","button","select","button","html [type=\"button\"]","[type=\"reset\"]","[type=\"submit\"]","button::-moz-focus-inner","[type=\"button\"]::-moz-focus-inner","[type=\"reset\"]::-moz-focus-inner","[type=\"submit\"]::-moz-focus-inner","button:-moz-focusring","[type=\"button\"]:-moz-focusring","[type=\"reset\"]:-moz-focusring","[type=\"submit\"]:-moz-focusring","fieldset","legend","textarea","[type=\"checkbox\"]","[type=\"radio\"]","[type=\"number\"]::-webkit-inner-spin-button","[type=\"number\"]::-webkit-outer-spin-button","[type=\"search\"]","[type=\"search\"]::-webkit-search-cancel-button","[type=\"search\"]::-webkit-search-decoration","::-webkit-input-placeholder","::-webkit-file-upload-button","*","input","select","textarea","button","body","a","a:hover","b","strong","hr",".rule","hr::before",".rule::before","hr::after",".rule::after","table","td","th","button","details summary","details:not([open])>*:not(summary)","h1","h2","h3","h4","h5","h6","h1","h2","h3","h4","h5","h6","p","small","blockquote","ul","ol","ol ol","ul ol","ul ul ol","ul ol ol","ol ul ol","ol ol ol","dd","tt","code","pre",".octicon"],"specificity":{"max":20,"average":3.503875968992248}},"declarations":{"total":129,"unique":91,"properties":{"font-family":["sans-serif","monospace, monospace","inherit","-apple-system,BlinkMacSystemFont,\"Segoe UI\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\"","\"SFMono-Regular\",Consolas,\"Liberation Mono\",Menlo,Courier,monospace","\"SFMono-Regular\",Consolas,\"Liberation Mono\",Menlo,Courier,monospace"],"-ms-text-size-adjust":["100%"],"-webkit-text-size-adjust":["100%"],"margin":["0","0.67em 0","1em 40px","0","0 2px","15px 0","0"],"display":["block","list-item","inline-block","none","none","table","table","table","none"],"height":["0","0","auto","0"],"vertical-align":["baseline","baseline","text-bottom"],"background-color":["transparent","#ff0","#fff"],"outline-width":["0"],"border-bottom":["none","1px solid #dfe2e5"],"text-decoration":["underline","underline dotted","none","underline"],"font-weight":["inherit","bolder","bold","600","600","600","600","600","600","600"],"font-style":["italic"],"font-size":["2em","80%","75%","1em","inherit","14px","32px","24px","20px","16px","14px","12px","90%","12px","12px"],"color":["#000","inherit","inherit","#24292e","#0366d6"],"line-height":["0","inherit","1.5"],"position":["relative"],"bottom":["-0.25em"],"top":["-0.5em"],"border-style":["none","none"],"overflow":["hidden","visible","visible","auto","hidden"],"box-sizing":["content-box","border-box","border-box","border-box"],"font":["inherit","inherit"],"text-transform":["none"],"-webkit-appearance":["button","textfield","none","button"],"padding":["0","0.35em 0.625em 0.75em","0","0","0"],"outline":["1px dotted ButtonText"],"border":["1px solid #c0c0c0","0"],"max-width":["100%"],"white-space":["normal"],"outline-offset":["-2px"],"opacity":["0.54"],"background":["transparent"],"content":["\"\"","\"\""],"clear":["both"],"border-spacing":["0"],"border-collapse":["collapse"],"cursor":["pointer","pointer"],"border-radius":["0"],"margin-top":["0","0","0","0"],"margin-bottom":["0","10px","0","0"],"padding-left":["0"],"list-style-type":["lower-roman","lower-alpha"],"margin-left":["0"]}},"mediaQueries":{"total":0,"unique":0,"values":[],"contents":[]}}}
|
|
@@ -64,4 +64,15 @@ th {
|
|
|
64
64
|
|
|
65
65
|
button {
|
|
66
66
|
cursor: pointer;
|
|
67
|
+
// Remove border radius added by Chroma macOS
|
|
68
|
+
border-radius: 0;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
details {
|
|
72
|
+
summary { cursor: pointer; }
|
|
73
|
+
|
|
74
|
+
&:not([open]) {
|
|
75
|
+
// Set details content hidden by default for browsers that don't do this
|
|
76
|
+
> *:not(summary) { display: none !important; }
|
|
77
|
+
}
|
|
67
78
|
}
|
|
@@ -89,13 +89,11 @@ template, /* 1 */
|
|
|
89
89
|
========================================================================== */
|
|
90
90
|
|
|
91
91
|
/**
|
|
92
|
-
*
|
|
93
|
-
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
|
92
|
+
* Remove the gray background on active links in IE 10.
|
|
94
93
|
*/
|
|
95
94
|
|
|
96
95
|
a {
|
|
97
96
|
background-color: transparent; /* 1 */
|
|
98
|
-
-webkit-text-decoration-skip: objects; /* 2 */
|
|
99
97
|
}
|
|
100
98
|
|
|
101
99
|
/**
|
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
{
|
|
2
|
-
"_from": "primer-base@1.
|
|
3
|
-
"_id": "primer-base@1.
|
|
2
|
+
"_from": "primer-base@1.7.0",
|
|
3
|
+
"_id": "primer-base@1.7.0",
|
|
4
4
|
"_inBundle": false,
|
|
5
|
-
"_integrity": "sha1-
|
|
5
|
+
"_integrity": "sha1-38I7P0hUN+NvjbyPAqZNz4Kt7W0=",
|
|
6
6
|
"_location": "/primer-base",
|
|
7
7
|
"_phantomChildren": {},
|
|
8
8
|
"_requested": {
|
|
9
9
|
"type": "version",
|
|
10
10
|
"registry": true,
|
|
11
|
-
"raw": "primer-base@1.
|
|
11
|
+
"raw": "primer-base@1.7.0",
|
|
12
12
|
"name": "primer-base",
|
|
13
13
|
"escapedName": "primer-base",
|
|
14
|
-
"rawSpec": "1.
|
|
14
|
+
"rawSpec": "1.7.0",
|
|
15
15
|
"saveSpec": null,
|
|
16
|
-
"fetchSpec": "1.
|
|
16
|
+
"fetchSpec": "1.7.0"
|
|
17
17
|
},
|
|
18
18
|
"_requiredBy": [
|
|
19
19
|
"#USER",
|
|
20
20
|
"/"
|
|
21
21
|
],
|
|
22
|
-
"_resolved": "https://registry.npmjs.org/primer-base/-/primer-base-1.
|
|
23
|
-
"_shasum": "
|
|
24
|
-
"_spec": "primer-base@1.
|
|
25
|
-
"_where": "/Users/benbalter/projects/primer",
|
|
22
|
+
"_resolved": "https://registry.npmjs.org/primer-base/-/primer-base-1.7.0.tgz",
|
|
23
|
+
"_shasum": "dfc23b3f485437e36f8dbc8f02a64dcf82aded6d",
|
|
24
|
+
"_spec": "primer-base@1.7.0",
|
|
25
|
+
"_where": "/Users/benbalter/projects/pages-themes/primer",
|
|
26
26
|
"author": {
|
|
27
27
|
"name": "GitHub, Inc."
|
|
28
28
|
},
|
|
29
29
|
"bugs": {
|
|
30
|
-
"url": "https://github.com/primer/primer
|
|
30
|
+
"url": "https://github.com/primer/primer/issues"
|
|
31
31
|
},
|
|
32
32
|
"bundleDependencies": false,
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"primer-support": "
|
|
34
|
+
"primer-support": "4.5.2"
|
|
35
35
|
},
|
|
36
36
|
"deprecated": false,
|
|
37
37
|
"description": "CSS to reset the browsers default styles",
|
|
@@ -40,12 +40,12 @@
|
|
|
40
40
|
"lib",
|
|
41
41
|
"build"
|
|
42
42
|
],
|
|
43
|
-
"homepage": "http://
|
|
43
|
+
"homepage": "http://primer.github.io/",
|
|
44
44
|
"keywords": [
|
|
45
45
|
"primer",
|
|
46
46
|
"css",
|
|
47
47
|
"github",
|
|
48
|
-
"
|
|
48
|
+
"design-system",
|
|
49
49
|
"base",
|
|
50
50
|
"reset",
|
|
51
51
|
"normalize"
|
|
@@ -53,16 +53,21 @@
|
|
|
53
53
|
"license": "MIT",
|
|
54
54
|
"main": "build/index.js",
|
|
55
55
|
"name": "primer-base",
|
|
56
|
+
"primer": {
|
|
57
|
+
"category": "core",
|
|
58
|
+
"module_type": "support"
|
|
59
|
+
},
|
|
56
60
|
"repository": {
|
|
57
61
|
"type": "git",
|
|
58
|
-
"url": "https://github.com/primer/primer
|
|
62
|
+
"url": "https://github.com/primer/primer/tree/master/modules/primer-base"
|
|
59
63
|
},
|
|
64
|
+
"sass": "index.scss",
|
|
60
65
|
"scripts": {
|
|
61
|
-
"build": "primer-module-build index.scss",
|
|
62
|
-
"lint": "
|
|
66
|
+
"build": "../../script/npm-run primer-module-build index.scss",
|
|
67
|
+
"lint": "../../script/lint-scss",
|
|
63
68
|
"prepare": "npm run build",
|
|
64
|
-
"test": "npm-run-all
|
|
69
|
+
"test": "../../script/npm-run-all build lint"
|
|
65
70
|
},
|
|
66
|
-
"style": "
|
|
67
|
-
"version": "1.
|
|
71
|
+
"style": "build/build.css",
|
|
72
|
+
"version": "1.7.0"
|
|
68
73
|
}
|
data/_sass/primer-layout/LICENSE
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
# Primer
|
|
1
|
+
# Primer Layout
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.org/package/primer-layout)
|
|
4
|
+
[](https://travis-ci.org/primer/primer)
|
|
5
5
|
|
|
6
6
|
> Primer’s layout includes basic page containers and a single-tiered, fraction-based grid system. That sounds more complicated than it really is though—it’s just containers, rows, and columns.
|
|
7
7
|
|
|
8
|
-
This repository is a module of the full [primer
|
|
8
|
+
This repository is a module of the full [primer][primer] repository.
|
|
9
9
|
|
|
10
10
|
## Install
|
|
11
11
|
|
|
@@ -50,9 +50,9 @@ You can find all the below styles in `_layout.scss`.
|
|
|
50
50
|
|
|
51
51
|
Center your page's contents with a `.container`.
|
|
52
52
|
|
|
53
|
-
```html
|
|
54
|
-
<div class="container">
|
|
55
|
-
|
|
53
|
+
```html title="Container"
|
|
54
|
+
<div class="container border">
|
|
55
|
+
Container
|
|
56
56
|
</div>
|
|
57
57
|
```
|
|
58
58
|
|
|
@@ -73,7 +73,7 @@ The grid is pretty standard—you create rows with `.columns` and individual col
|
|
|
73
73
|
|
|
74
74
|
In practice, your columns will look like the example below.
|
|
75
75
|
|
|
76
|
-
```html
|
|
76
|
+
```html title="Grid columns"
|
|
77
77
|
<div class="container">
|
|
78
78
|
<div class="columns mb-1">
|
|
79
79
|
<div class="one-fifth column block-blue p-3 border">
|
|
@@ -117,9 +117,9 @@ In practice, your columns will look like the example below.
|
|
|
117
117
|
|
|
118
118
|
Columns can be [centered](/utilities/#centering-content) by adding `.centered` to the `.column` class.
|
|
119
119
|
|
|
120
|
-
```html
|
|
120
|
+
```html title="Grid centered"
|
|
121
121
|
<div class="columns">
|
|
122
|
-
<div class="one-half column centered block-blue p-3">
|
|
122
|
+
<div class="one-half column centered block-blue border p-3">
|
|
123
123
|
.one-half
|
|
124
124
|
</div>
|
|
125
125
|
</div>
|
|
@@ -130,8 +130,8 @@ Columns can be [centered](/utilities/#centering-content) by adding `.centered` t
|
|
|
130
130
|
|
|
131
131
|
[MIT](./LICENSE) © [GitHub](https://github.com/)
|
|
132
132
|
|
|
133
|
-
[primer
|
|
134
|
-
[docs]: http://
|
|
133
|
+
[primer]: https://github.com/primer/primer
|
|
134
|
+
[docs]: http://primer.github.io/
|
|
135
135
|
[npm]: https://www.npmjs.com/
|
|
136
136
|
[install-npm]: https://docs.npmjs.com/getting-started/installing-node
|
|
137
137
|
[sass]: http://sass-lang.com/
|
|
@@ -0,0 +1,392 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Grid
|
|
3
|
+
status: New release
|
|
4
|
+
status_issue: https://github.com/github/design-systems/issues/88
|
|
5
|
+
source: https://github.com/primer/primer/blob/master/modules/primer-layout/lib/grid.scss
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
The grid is 12 columns and percentage-based. The number of columns a container spans can be adjusted across breakpoints for responsive layouts. The grid system works with a variety of layout utilities to achieve different results.
|
|
9
|
+
|
|
10
|
+
{:toc}
|
|
11
|
+
|
|
12
|
+
## Float based grid
|
|
13
|
+
|
|
14
|
+
Use `.clearfix` on the container and float utilities with columns for a floated grid layout.
|
|
15
|
+
|
|
16
|
+
```html title="Float based grid"
|
|
17
|
+
<div class="container-lg clearfix">
|
|
18
|
+
<div class="col-4 float-left border p-4">
|
|
19
|
+
My column
|
|
20
|
+
</div>
|
|
21
|
+
<div class="col-4 float-left border p-4">
|
|
22
|
+
Looks better
|
|
23
|
+
</div>
|
|
24
|
+
<div class="col-4 float-left border p-4">
|
|
25
|
+
Than your column
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Reversed grid
|
|
31
|
+
|
|
32
|
+
To reverse the order of columns, use `float-right` to float columns to the right.
|
|
33
|
+
|
|
34
|
+
```html title="Float grid reversed"
|
|
35
|
+
<div class="container-lg clearfix">
|
|
36
|
+
<div class="col-4 float-right border p-4">
|
|
37
|
+
One
|
|
38
|
+
</div>
|
|
39
|
+
<div class="col-4 float-right border p-4">
|
|
40
|
+
Two
|
|
41
|
+
</div>
|
|
42
|
+
<div class="col-4 float-right border p-4">
|
|
43
|
+
Three
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Nesting
|
|
49
|
+
You can infinitely nest grid layouts within other columns since the column widths are percentage based. With great flexibility comes great responsibility - be sensible with how far you nest!
|
|
50
|
+
|
|
51
|
+
```html title="Nesting grids"
|
|
52
|
+
<div class="clearfix">
|
|
53
|
+
<div class="col-6 float-left px-1">
|
|
54
|
+
<div class="border p-1">Unnested</div>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="col-6 float-left">
|
|
57
|
+
<div class="clearfix">
|
|
58
|
+
<div class="col-6 float-left px-1">
|
|
59
|
+
<div class="border p-1">1 x Nested</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="col-6 float-left">
|
|
62
|
+
<div class="col-6 float-left px-1">
|
|
63
|
+
<div class="border p-1">2 x Nested</div>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="col-6 float-left px-1">
|
|
66
|
+
<div class="border p-1">2 x Nested</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Centering a column
|
|
75
|
+
|
|
76
|
+
Use `.mx-auto` to center columns within a container.
|
|
77
|
+
|
|
78
|
+
```html title="Centering a column"
|
|
79
|
+
<div class="border">
|
|
80
|
+
<div class="col-6 p-2 mx-auto border">
|
|
81
|
+
This column is the center of my world.
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
## Column widths
|
|
88
|
+
Column widths can be used with any other block or inline-block elements to add percentage-based widths.
|
|
89
|
+
|
|
90
|
+
```html title="Column widths"
|
|
91
|
+
<div>
|
|
92
|
+
<div class="col-4 float-right p-2 border text-red">
|
|
93
|
+
<%= octicon "heart" %> Don't go bacon my heart.
|
|
94
|
+
</div>
|
|
95
|
+
<p>T-bone drumstick alcatra ribeye. Strip steak chuck andouille tenderloin bacon tri-tip ball tip beef capicola rump. Meatloaf bresaola drumstick ball tip salami. Drumstick ham bacon alcatra pig porchetta, spare ribs leberkas pork belly.</p>
|
|
96
|
+
</div>
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Offset columns
|
|
100
|
+
|
|
101
|
+
Using column offset classes can push a div over X number of columns. They work responsively using the [breakpoints outlined below](/styleguide/css/modules/grid#responsive-grids).
|
|
102
|
+
|
|
103
|
+
```html title="Offset columns"
|
|
104
|
+
<div class="clearfix">
|
|
105
|
+
<div class="offset-1 col-3 border p-3">.offset-1</div>
|
|
106
|
+
<div class="offset-2 col-3 border p-3">.offset-2</div>
|
|
107
|
+
</div>
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
## Gutters
|
|
111
|
+
Use gutter styles or padding utilities to create gutters. You can use the default gutter style, `gutter`, or either of its modifiers, `gutter-condensed` or `gutter-spacious`. Gutter styles also support responsive breakpoint modifiers. Gutter styles add padding to the left and right side of each column and apply a negative margin to the container to ensure content inside each column lines up with content outside of the grid.
|
|
112
|
+
|
|
113
|
+
```html title="Gutters"
|
|
114
|
+
<div class="clearfix gutter-md-spacious border">
|
|
115
|
+
<div class="col-3 float-left">
|
|
116
|
+
<div class="border p-3">.col-md-3</div>
|
|
117
|
+
</div>
|
|
118
|
+
<div class="col-3 float-left">
|
|
119
|
+
<div class="border p-3">.col-md-3</div>
|
|
120
|
+
</div>
|
|
121
|
+
<div class="col-3 float-left">
|
|
122
|
+
<div class="border p-3">.col-md-3</div>
|
|
123
|
+
</div>
|
|
124
|
+
<div class="col-3 float-left">
|
|
125
|
+
<div class="border p-3">.col-md-3</div>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
Use padding utilities to create gutters for more customized layouts.
|
|
131
|
+
|
|
132
|
+
```html title="Gutters with padding"
|
|
133
|
+
<div class="container-lg clearfix">
|
|
134
|
+
<div class="col-3 float-left pr-2 mb-3">
|
|
135
|
+
<div class="border bg-gray-light">.pr-2</div>
|
|
136
|
+
</div>
|
|
137
|
+
<div class="col-3 float-left px-2 mb-3">
|
|
138
|
+
<div class="border bg-gray-light">.px-2</div>
|
|
139
|
+
</div>
|
|
140
|
+
<div class="col-3 float-left px-2 mb-3">
|
|
141
|
+
<div class="border bg-gray-light">.px-2</div>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="col-3 float-left pl-2 mb-3">
|
|
144
|
+
<div class="border bg-gray-light">.pl-2</div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
<div class="container-lg clearfix">
|
|
148
|
+
<div class="col-3 float-left pr-2">
|
|
149
|
+
<div class="border bg-gray-light">.pr-2</div>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="col-9 float-left pl-2">
|
|
152
|
+
<div class="border bg-gray-light">.pl-2</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
```
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
## Inline-block grids
|
|
159
|
+
Use column widths with `d-inline-block` as an alternative to floated grids.
|
|
160
|
+
|
|
161
|
+
```html title="Inline-block grid"
|
|
162
|
+
<div>
|
|
163
|
+
<div class="col-4 d-inline-block border">
|
|
164
|
+
.col-4 .d-inline-block
|
|
165
|
+
</div><!--
|
|
166
|
+
--><div class="col-4 d-inline-block border">
|
|
167
|
+
.col-4 .d-inline-block
|
|
168
|
+
</div><!--
|
|
169
|
+
--><div class="col-4 d-inline-block border">
|
|
170
|
+
.col-4 .d-inline-block
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
```
|
|
174
|
+
|
|
175
|
+
You can use column widths and other utilities on elements such as lists to create the layout you need while keeping the markup semantically correct.
|
|
176
|
+
```html title="Inline-block grid list"
|
|
177
|
+
<ul class="list-style-none">
|
|
178
|
+
<li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/broccolini.png" alt="broccolini" /></li><!--
|
|
179
|
+
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/jonrohan.png" alt="jonrohan" /></li><!--
|
|
180
|
+
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/muan.png" alt="muan" /></li><!--
|
|
181
|
+
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/pmarsceill.png" alt="pmarsceill" /></li><!--
|
|
182
|
+
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/sophshep.png" alt="sophshep" /></li><!--
|
|
183
|
+
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/cmwinters.png" alt="cmwinters" /></li><!--
|
|
184
|
+
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/jeejkang.png" alt="jeejkang" /></li><!--
|
|
185
|
+
--><li class="d-inline-block col-2 p-2"><img class="width-full avatar" src="/mdo.png" alt="mdo" /></li>
|
|
186
|
+
</ul>
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
## Display table grids
|
|
191
|
+
Using [display table utilities](/styleguide/css/utilities/layout#display) with columns gives you some alternative layout options.
|
|
192
|
+
|
|
193
|
+
A useful example is being able to keep the height of the container equal across a row when the length of content may differ.
|
|
194
|
+
|
|
195
|
+
```html title="Table grid"
|
|
196
|
+
<div class="d-table col-12">
|
|
197
|
+
<div class="col-4 d-table-cell border p-2">
|
|
198
|
+
Bacon ipsum dolor amet leberkas pork pig kielbasa shankle ribeye meatball, salami alcatra venison.
|
|
199
|
+
</div><!--
|
|
200
|
+
--><div class="col-4 d-table-cell border p-2">
|
|
201
|
+
Pork chop cupim cow turkey frankfurter, landjaeger fatback hamburger meatball salami spare ribs. Rump tenderloin salami, hamburger frankfurter landjaeger andouille.
|
|
202
|
+
</div><!--
|
|
203
|
+
--><div class="col-4 d-table-cell border p-2">
|
|
204
|
+
Brisket tongue frankfurter cupim strip steak rump picanha pancetta pork pig kevin pastrami biltong. Shankle venison meatball swine sausage ground round. Tail pork loin ribeye kielbasa short ribs pork chop.
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
```
|
|
208
|
+
You can also create an alternative [media object](/styleguide/css/utilities/layout#the-media-object) layout with `.display-table` and column widths.
|
|
209
|
+
|
|
210
|
+
```html title="Table grid alternative"
|
|
211
|
+
<div class="d-table col-12">
|
|
212
|
+
<div class="col-2 d-table-cell v-align-middle">
|
|
213
|
+
<img class="width-full avatar" src="/github.png" alt="github" />
|
|
214
|
+
</div>
|
|
215
|
+
<div class="col-10 d-table-cell v-align-middle pl-4">
|
|
216
|
+
<h1 class="text-normal lh-condensed">GitHub</h1>
|
|
217
|
+
<p class="h4 text-gray text-normal mb-2">How people build software.</p>
|
|
218
|
+
<a class="text-gray text-small" href="#url">https://github.com/about</a>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
Note that table cells will fill the width of their container even when the total columns doesn't add up to 12.
|
|
224
|
+
|
|
225
|
+
```html title="Table grid cells"
|
|
226
|
+
<div class="d-table col-12">
|
|
227
|
+
<div class="col-4 d-table-cell border">
|
|
228
|
+
.col-4 .d-table-cell
|
|
229
|
+
</div><!--
|
|
230
|
+
--><div class="col-4 d-table-cell border">
|
|
231
|
+
.col-4 .d-table-cell
|
|
232
|
+
</div><!--
|
|
233
|
+
--><div class="col-2 d-table-cell border">
|
|
234
|
+
.col-2 .d-table-cell
|
|
235
|
+
</div>
|
|
236
|
+
</div>
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
## Flexbox grids
|
|
240
|
+
|
|
241
|
+
You can use [flex utilities](/styleguide/css/utilities/flexbox) on the container and columns to create a flexbox grid.
|
|
242
|
+
|
|
243
|
+
This can be useful for keeping columns the same height, justifying content and vertically aligning items. The flexbox grid is also great for working with responsive layouts.
|
|
244
|
+
|
|
245
|
+
```html title="Flexbox grid"
|
|
246
|
+
<div class="d-flex flex-column flex-md-row flex-items-center flex-md-items-center">
|
|
247
|
+
<div class="col-2 d-flex flex-items-center flex-items-center flex-md-items-start">
|
|
248
|
+
<img class="width-full avatar mb-2 mb-md-0" src="/github.png" alt="github" />
|
|
249
|
+
</div>
|
|
250
|
+
<div class="col-12 col-md-10 d-flex flex-column flex-justify-center flex-items-center flex-md-items-start pl-md-4">
|
|
251
|
+
<h1 class="text-normal lh-condensed">GitHub</h1>
|
|
252
|
+
<p class="h4 text-gray text-normal mb-2">How people build software.</p>
|
|
253
|
+
<a class="text-gray text-small" href="#url">https://github.com/about</a>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
|
|
259
|
+
## Responsive grids
|
|
260
|
+
All the column width classes can be set per breakpoint to create responsive grid layouts. Each responsive style is applied to the specified breakpoint and up.
|
|
261
|
+
|
|
262
|
+
### Breakpoints
|
|
263
|
+
We use abbreviations for each breakpoint to keep the class names concise.
|
|
264
|
+
|
|
265
|
+
| Shorthand | Description |
|
|
266
|
+
| --- | --- |
|
|
267
|
+
| sm | min-width: 544px |
|
|
268
|
+
| md | min-width: 768px |
|
|
269
|
+
| lg | min-width: 1004px |
|
|
270
|
+
| xl | min-width: 1280px |
|
|
271
|
+
|
|
272
|
+
**Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `12px`. This is so that content doesn't touch the edges of the window when resized.
|
|
273
|
+
|
|
274
|
+
<hr />
|
|
275
|
+
|
|
276
|
+
In this example at the `sm` breakpoint 2 columns will show, at the `md` breakpoint 4 columns will show, and at the `lg` breakpoint 6 columns will show.
|
|
277
|
+
|
|
278
|
+
```html title="Responsive grid"
|
|
279
|
+
<div class="container-lg clearfix">
|
|
280
|
+
<div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
|
|
281
|
+
.col-sm-6 .col-md-3 .col-lg-2
|
|
282
|
+
</div>
|
|
283
|
+
<div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
|
|
284
|
+
.col-sm-6 .col-md-3 .col-lg-2
|
|
285
|
+
</div>
|
|
286
|
+
<div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
|
|
287
|
+
.col-sm-6 .col-md-3 .col-lg-2
|
|
288
|
+
</div>
|
|
289
|
+
<div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
|
|
290
|
+
.col-sm-6 .col-md-3 .col-lg-2
|
|
291
|
+
</div>
|
|
292
|
+
<div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
|
|
293
|
+
.col-sm-6 .col-md-3 .col-lg-2
|
|
294
|
+
</div>
|
|
295
|
+
<div class="col-sm-6 col-md-3 col-lg-2 float-left p-2 border">
|
|
296
|
+
.col-sm-6 .col-md-3 .col-lg-2
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
For demonstration, this is how the above example would look at the `sm` breakpoint.
|
|
302
|
+
|
|
303
|
+
```html title="Responsive grid small"
|
|
304
|
+
<div class="container-lg clearfix">
|
|
305
|
+
<div class="col-sm-6 float-left p-2 border">
|
|
306
|
+
.col-sm-6
|
|
307
|
+
</div>
|
|
308
|
+
<div class="col-sm-6 float-left p-2 border">
|
|
309
|
+
.col-sm-6
|
|
310
|
+
</div>
|
|
311
|
+
<div class="col-sm-6 float-left p-2 border">
|
|
312
|
+
.col-sm-6
|
|
313
|
+
</div>
|
|
314
|
+
<div class="col-sm-6 float-left p-2 border">
|
|
315
|
+
.col-sm-6
|
|
316
|
+
</div>
|
|
317
|
+
<div class="col-sm-6 float-left p-2 border">
|
|
318
|
+
.col-sm-6
|
|
319
|
+
</div>
|
|
320
|
+
<div class="col-sm-6 float-left p-2 border">
|
|
321
|
+
.col-sm-6
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
```
|
|
325
|
+
This is how that same example would look at the `md` breakpoint.
|
|
326
|
+
|
|
327
|
+
```html title="Responsive grid medium"
|
|
328
|
+
<div class="container-lg clearfix">
|
|
329
|
+
<div class="col-md-3 float-left p-2 border">
|
|
330
|
+
.col-md-3
|
|
331
|
+
</div>
|
|
332
|
+
<div class="col-md-3 float-left p-2 border">
|
|
333
|
+
.col-md-3
|
|
334
|
+
</div>
|
|
335
|
+
<div class="col-md-3 float-left p-2 border">
|
|
336
|
+
.col-md-3
|
|
337
|
+
</div>
|
|
338
|
+
<div class="col-md-3 float-left p-2 border">
|
|
339
|
+
.col-md-3
|
|
340
|
+
</div>
|
|
341
|
+
<div class="col-md-3 float-left p-2 border">
|
|
342
|
+
.col-md-3
|
|
343
|
+
</div>
|
|
344
|
+
<div class="col-md-3 float-left p-2 border">
|
|
345
|
+
.col-md-3
|
|
346
|
+
</div>
|
|
347
|
+
</div>
|
|
348
|
+
```
|
|
349
|
+
|
|
350
|
+
This is how that example would look at the `lg` breakpoint.
|
|
351
|
+
|
|
352
|
+
```html title="Responsive grid large"
|
|
353
|
+
<div class="container-lg clearfix">
|
|
354
|
+
<div class="col-lg-2 float-left p-2 border">
|
|
355
|
+
.col-lg-2
|
|
356
|
+
</div>
|
|
357
|
+
<div class="col-lg-2 float-left p-2 border">
|
|
358
|
+
.col-lg-2
|
|
359
|
+
</div>
|
|
360
|
+
<div class="col-lg-2 float-left p-2 border">
|
|
361
|
+
.col-lg-2
|
|
362
|
+
</div>
|
|
363
|
+
<div class="col-lg-2 float-left p-2 border">
|
|
364
|
+
.col-lg-2
|
|
365
|
+
</div>
|
|
366
|
+
<div class="col-lg-2 float-left p-2 border">
|
|
367
|
+
.col-lg-2
|
|
368
|
+
</div>
|
|
369
|
+
<div class="col-lg-2 float-left p-2 border">
|
|
370
|
+
.col-lg-2
|
|
371
|
+
</div>
|
|
372
|
+
</div>
|
|
373
|
+
```
|
|
374
|
+
|
|
375
|
+
## Containers
|
|
376
|
+
Container widths match our breakpoints and are available at a `md`, `lg`, and `xl` size. Containers apply a max-width rather than a fixed width for responsive layouts, and they center the container.
|
|
377
|
+
|
|
378
|
+
```html title="Containers sized"
|
|
379
|
+
<div class="container-md border">
|
|
380
|
+
.container-md, max-width 768px
|
|
381
|
+
</div>
|
|
382
|
+
|
|
383
|
+
<div class="container-lg border">
|
|
384
|
+
.container-lg, max-width 1012px
|
|
385
|
+
</div>
|
|
386
|
+
|
|
387
|
+
<div class="container-xl border">
|
|
388
|
+
.container-xl, max-width 1280px
|
|
389
|
+
</div>
|
|
390
|
+
```
|
|
391
|
+
|
|
392
|
+
**Note:** `.container` is being replaced with `.container-lg`. To match the current fixed page width use `.container-lg` with `px-3`. This gives the container padding on smaller screens which works better for responsive layouts.
|