jekyll-theme-primer 0.5.3 → 0.5.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (58) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +3 -1
  3. data/_layouts/home.html +4 -0
  4. data/_layouts/page.html +4 -0
  5. data/_layouts/post.html +4 -0
  6. data/_sass/primer-base/lib/base.scss +6 -0
  7. data/_sass/primer-base/lib/normalize.scss +1 -1
  8. data/_sass/primer-layout/lib/grid-offset.scss +12 -23
  9. data/_sass/primer-support/lib/mixins/layout.scss +18 -12
  10. data/_sass/primer-support/lib/variables/layout.scss +7 -1
  11. data/_sass/primer-utilities/index.scss +1 -0
  12. data/_sass/primer-utilities/lib/animations.scss +1 -0
  13. data/_sass/primer-utilities/lib/borders.scss +71 -36
  14. data/_sass/primer-utilities/lib/details.scss +18 -0
  15. data/_sass/primer-utilities/lib/flexbox.scss +45 -73
  16. data/_sass/primer-utilities/lib/layout.scss +12 -27
  17. data/_sass/primer-utilities/lib/margin.scss +42 -75
  18. data/_sass/primer-utilities/lib/padding.scss +26 -56
  19. data/_sass/primer-utilities/lib/typography.scss +22 -23
  20. data/_sass/primer-utilities/lib/visibility-display.scss +21 -45
  21. metadata +15 -43
  22. data/_sass/primer-base/LICENSE +0 -21
  23. data/_sass/primer-base/README.md +0 -48
  24. data/_sass/primer-base/build/build.css +0 -1
  25. data/_sass/primer-base/build/index.js +0 -1
  26. data/_sass/primer-base/package.json +0 -73
  27. data/_sass/primer-layout/LICENSE +0 -21
  28. data/_sass/primer-layout/README.md +0 -137
  29. data/_sass/primer-layout/build/build.css +0 -1
  30. data/_sass/primer-layout/build/index.js +0 -1
  31. data/_sass/primer-layout/docs/grid.md +0 -392
  32. data/_sass/primer-layout/package.json +0 -71
  33. data/_sass/primer-markdown/LICENSE +0 -21
  34. data/_sass/primer-markdown/README.md +0 -218
  35. data/_sass/primer-markdown/build/build.css +0 -1
  36. data/_sass/primer-markdown/build/index.js +0 -1
  37. data/_sass/primer-markdown/package.json +0 -74
  38. data/_sass/primer-support/LICENSE +0 -21
  39. data/_sass/primer-support/README.md +0 -56
  40. data/_sass/primer-support/docs/breakpoints.md +0 -60
  41. data/_sass/primer-support/docs/color-system.md +0 -392
  42. data/_sass/primer-support/docs/spacing.md +0 -40
  43. data/_sass/primer-support/docs/typography.md +0 -90
  44. data/_sass/primer-support/package.json +0 -73
  45. data/_sass/primer-utilities/LICENSE +0 -21
  46. data/_sass/primer-utilities/README.md +0 -48
  47. data/_sass/primer-utilities/build/build.css +0 -1
  48. data/_sass/primer-utilities/build/index.js +0 -1
  49. data/_sass/primer-utilities/docs/animations.md +0 -75
  50. data/_sass/primer-utilities/docs/borders.md +0 -127
  51. data/_sass/primer-utilities/docs/box-shadow.md +0 -107
  52. data/_sass/primer-utilities/docs/colors.md +0 -232
  53. data/_sass/primer-utilities/docs/flexbox.md +0 -665
  54. data/_sass/primer-utilities/docs/layout.md +0 -300
  55. data/_sass/primer-utilities/docs/margin.md +0 -126
  56. data/_sass/primer-utilities/docs/padding.md +0 -110
  57. data/_sass/primer-utilities/docs/typography.md +0 -138
  58. data/_sass/primer-utilities/package.json +0 -71
@@ -1,138 +0,0 @@
1
- ---
2
- title: Typography
3
- status: Stable
4
- ---
5
-
6
- Type utilities are designed to work in combination with line-height utilities so as to result in more sensible numbers wherever possible. These also exist as [variables](/styleguide/css/styles/core/support/typography#typography-variables) that you can use in components or custom CSS.
7
-
8
- {:toc}
9
-
10
- Font sizes are smaller on mobile and scale up at the `md` [breakpoint](/styleguide/css/styles/core/support/breakpoints) to be larger on desktop.
11
-
12
- | Scale | Font size: mobile | Font size: desktop | 1.25 line height | 1.5 line height |
13
- | --- | --- | --- | --- | --- |
14
- | 00 | 40px | 48px | 60 | 72 |
15
- | 0 | 32px | 40px | 50 | 60 |
16
- | 1 | 26px | 32px | 40 | 48 |
17
- | 2 | 22px | 24px | 30 | 36 |
18
- | 3 | 18px | 20px | 25 | 30 |
19
- | 4 | 16px | 16px | 20 | 24 |
20
- | 5 | 14px | 14px | 17.5 | 21 |
21
- | 6 | 12px | 12px | 15 | 18 |
22
-
23
-
24
- ## Heading utilities
25
-
26
- Use `.h1` – `.h6` to change an elements font size and weight to match our heading styles.
27
-
28
- ```html
29
- <p class="h1">Pizza 1</p>
30
- <p class="h2">Pizza 2</p>
31
- <p class="h3">Pizza 3</p>
32
- <p class="h4">Pizza 4</p>
33
- <p class="h5">Pizza 5</p>
34
- <p class="h6">Pizza 6</p>
35
- ```
36
-
37
- These are particularly useful for changing the visual appearance while keeping the markup semantically correct. Be sure you keep the hierarchy appropriate for the page.
38
-
39
- ```html
40
- <h2 class="h1">Looks like a heading 1, semantically a heading 2</h2>
41
- ```
42
-
43
- ## Type scale utilities
44
-
45
- Use `.f1` – `.f6` to change an elements font size while keeping inline with our type scale.
46
-
47
- ```html
48
- <p class="f1">Focaccia</p>
49
- <p class="f2">Focaccia</p>
50
- <p class="f3">Focaccia</p>
51
- <p class="f4">Focaccia</p>
52
- <p class="f5">Focaccia</p>
53
- <p class="f6">Focaccia</p>
54
- ```
55
-
56
- Lighter font-weight utilities are available in a limited range. Lighter font-weights reduce the legibility of text, particularly at small font sizes, so the scale only goes down to `f3` at 20px. The larger sizes`f0` and `f00` allow for lighter and larger type that is in keeping with our marketing styles.
57
-
58
- ```html
59
- <h1 class="f00-light">Potato chips</h1>
60
- <h1 class="f0-light">Potato chips</h1>
61
- <h1 class="f1-light">Potato chips</h1>
62
- <h1 class="f2-light">Potato chips</h1>
63
- <h1 class="f3-light">Potato chips</h1>
64
- ```
65
-
66
- ## Line height styles
67
- Change the line height density with these utilities.
68
-
69
- ```html
70
- <p class="lh-default">
71
- Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
72
- </p>
73
- <p class="lh-condensed">
74
- Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
75
- </p>
76
- <p class="lh-condensed-ultra">
77
- Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail. Jowl chuck biltong flank meatball, beef short ribs. Jowl tenderloin ground round, short loin tri-tip ribeye picanha filet mignon pig chicken kielbasa t-bone fatback. Beef ribs meatball chicken corned beef salami.
78
- </p>
79
- ```
80
-
81
- ## Typographic styles
82
- Change the font weight, styles, and alignment with these utilities.
83
-
84
- ```html
85
- <p class="text-normal">Normal</p>
86
- <p class="text-italic">Italic</p>
87
- <p class="text-bold">Bold</p>
88
- <p class="text-uppercase">Uppercase</p>
89
- <p class="no-wrap">No wrap</p>
90
- <p class="ws-normal">Normal whitespace</p>
91
- <p class="wb-break-all">Line break long lines</p>
92
- <p class="no-underline">No underline</p>
93
- <p class="text-emphasized">Emphasized</p>
94
- <p class="text-small">Small</p>
95
- <p class="lead">Bacon ipsum dolor amet tri-tip chicken kielbasa, cow swine beef corned beef ground round prosciutto hamburger porchetta sausage alcatra tail.</p>
96
- ```
97
-
98
- ## Text alignment
99
-
100
- Use text alignment utilities to left align, center, or right align text.
101
-
102
- ```html
103
- <p class="text-left">Left align</p>
104
- <p class="text-center">Center</p>
105
- <p class="text-right">Right align</p>
106
- ```
107
- ## Responsive text alignment
108
-
109
- Use the following formula to make a text alignment utility responsive: `.text-[breakpoint]-[alignment]`
110
-
111
- ```html
112
- <p class="text-left text-sm-center text-lg-right">Left in a small viewport, centered in mid-sized viewports, and right aligned in larger viewports</p>
113
- ```
114
-
115
- ## List styles
116
-
117
- Remove bullets from an unordered list or numbers from an ordered list by applying `.list-style-none` to the `<ul>`.
118
-
119
- ```html
120
- <ul class="list-style-none">
121
- <li>First list item</li>
122
- <li>Second list item</li>
123
- <li>Third list item</li>
124
- </ul>
125
- ```
126
-
127
- ## Text Shadows
128
-
129
- Text shadows can be used to help readability and to add some depth on colored backgrounds.
130
-
131
- ```html
132
- <div class="bg-gray-dark p-5">
133
- <h3 class="text-white text-shadow-dark">.text-shadow-dark helps white text stand out on dark or photographic backgrounds</h3>
134
- </div>
135
- <div class="bg-gray p-5">
136
- <h3 class="text-shadow-light">.text-shadow-light creates an embossed effect for dark text</h3>
137
- </div>
138
- ```
@@ -1,71 +0,0 @@
1
- {
2
- "_from": "primer-utilities@4.9.0",
3
- "_id": "primer-utilities@4.9.0",
4
- "_inBundle": false,
5
- "_integrity": "sha1-KI9tuY7vsC/pFHEejs4dk6y07yk=",
6
- "_location": "/primer-utilities",
7
- "_phantomChildren": {},
8
- "_requested": {
9
- "type": "version",
10
- "registry": true,
11
- "raw": "primer-utilities@4.9.0",
12
- "name": "primer-utilities",
13
- "escapedName": "primer-utilities",
14
- "rawSpec": "4.9.0",
15
- "saveSpec": null,
16
- "fetchSpec": "4.9.0"
17
- },
18
- "_requiredBy": [
19
- "#USER",
20
- "/"
21
- ],
22
- "_resolved": "https://registry.npmjs.org/primer-utilities/-/primer-utilities-4.9.0.tgz",
23
- "_shasum": "288f6db98eefb02fe914711e8ece1d93acb4ef29",
24
- "_spec": "primer-utilities@4.9.0",
25
- "_where": "/Users/benbalter/projects/pages-themes/primer",
26
- "author": {
27
- "name": "GitHub, Inc."
28
- },
29
- "bugs": {
30
- "url": "https://github.com/primer/primer/issues"
31
- },
32
- "bundleDependencies": false,
33
- "dependencies": {
34
- "primer-support": "4.5.2"
35
- },
36
- "deprecated": false,
37
- "description": "Immutable, atomic CSS classes to rapidly build product",
38
- "files": [
39
- "index.scss",
40
- "lib",
41
- "build",
42
- "docs"
43
- ],
44
- "homepage": "http://primer.github.io/",
45
- "keywords": [
46
- "primer",
47
- "css",
48
- "github",
49
- "design-system"
50
- ],
51
- "license": "MIT",
52
- "main": "build/index.js",
53
- "name": "primer-utilities",
54
- "primer": {
55
- "category": "core",
56
- "module_type": "utilities"
57
- },
58
- "repository": {
59
- "type": "git",
60
- "url": "https://github.com/primer/primer/tree/master/modules/primer-utilities"
61
- },
62
- "sass": "index.scss",
63
- "scripts": {
64
- "build": "../../script/npm-run primer-module-build index.scss",
65
- "lint": "../../script/lint-scss",
66
- "prepare": "npm run build",
67
- "test": "../../script/npm-run-all build lint"
68
- },
69
- "style": "build/build.css",
70
- "version": "4.9.0"
71
- }