jekyll-theme-primer 0.5.2 → 0.5.3
Sign up to get free protection for your applications and to get access to all the features.
- 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.
|