You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+27-10Lines changed: 27 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,15 +25,13 @@ However, there still are a few issues. Unlike javascript, CSS still cannot be us
25
25
26
26
4. Font-family CSS variable for easy changing of default body font. Change `--font-primary` to your chosen font.
27
27
28
-
5. Sticky Footer. We use this [elegant solution](https://css-tricks.com/a-clever-sticky-footer-technique/) to make sure your footer is always at the bottom of the site, even when you have very little content on the page. This expects your footer to be directly in the body. If you need your footer inside a div and not directly in the body, you can view and implement these [other solutions](https://css-tricks.com/couple-takes-sticky-footer/).
28
+
5. Sticky Footer. We use this [elegant solution](https://css-tricks.com/a-clever-sticky-footer-technique/) to make sure your footer is always at the bottom of the site, even when you have very little content on the page. This expects your footer to be directly in the body, or directly inside a `.page-wrap` element. If you need a different setup with sticky footer, you can view and implement these [other solutions](https://css-tricks.com/couple-takes-sticky-footer/).
29
29
30
-
6. Setting overflow-x so there is no horizontal scrolling. We've all been there... This can happen if an item is absolute and off to the side, even if its hidden. We fix it so that it works nicely even on iOS, where the page sometimes can lose its "springiness".
31
-
32
-
7. Images are responsive. All images will shrink to fit in their containers by default.
30
+
6. Images are responsive. All images will shrink to fit in their containers by default.
33
31
34
32
## Utilities
35
33
36
-
Ok, so maybe a few utilities could be helpful. Only a few! Based on most websites out there, we created 8 utility classes that can be added in optionally by including the utilities file. These provide some basic and nifty layout classes to get you started, and to get any complexity out of the way. Sizing can be changed through the variables listed down below.
34
+
Ok, so maybe a few utilities could be helpful. Only a few! Based on most websites out there, we created **9** utility classes that can be added in optionally by including the utilities file. These provide some basic and nifty layout classes to get you started, and to get any complexity out of the way. Sizing can be changed through the variables listed down below.
37
35
38
36
#### `.container-fluid`
39
37
@@ -59,23 +57,41 @@ Important! For elements that will be read out loud on a screen reader device, bu
59
57
60
58
Very helpful for articles. Makes all items inside magically have good vertical rhythm. For some items, like headings, you may want to add styles to get those having more spacing with margins. Pairs well with container-content.
61
59
60
+
#### `.page-wrap`
61
+
62
+
The page wrap is a special element when dealing with overflow-x. It's useful when you have absolute items positioned off the screen, but don't want horizontal scrolling, like a hidden mobile menu. This class fixes it, so that it works nicely even on iOS, where things can get wonky. You can implement it directly on the body element, or on a div that is a direct child of body.
63
+
64
+
```HTML
65
+
<bodyclass="page-wrap">
66
+
Everything....
67
+
</body>
68
+
69
+
OR
70
+
71
+
<body>
72
+
<divclass="page-wrap">
73
+
Everything....
74
+
</div>
75
+
</body>
76
+
```
77
+
62
78
#### `.card-grid`
63
79
64
80
The perfect grid of cards! Using CSS Grid can be a bit scary, so we created a grid of cards that reflow nicely and can have a min and max size, changeable through CSS variables. It's cleaner than using flexbox for grids.
65
81
66
82
How to use:
67
83
68
84
```HTML
69
-
<divclass="card-grid my-elements">...</div>
85
+
<divclass="card-grid custom-class">...</div>
70
86
```
71
87
72
-
Then in your CSS, you can override the card-grids sizing. The defaults are:
88
+
Then in your CSS, you can override the card-grids sizing, using a custom class. The defaults are:
73
89
74
90
```CSS
75
-
.my-elements{
91
+
.custom-class{
76
92
--card-min: 250px;
77
93
--card-max: 1fr;
78
-
--card-stretch: auto-fill; /* can be auto-fit too*/
94
+
--card-stretch: auto-fill; /* can also be auto-fit */
79
95
}
80
96
```
81
97
@@ -95,7 +111,7 @@ Thats where `.container-content` makes this easy. You surround the article with
95
111
96
112
## CSS Variables
97
113
98
-
There are variables found at the bottom of Crucial.CSS and utilities. You can override them in your project, or change them directly. Remember, you can also override variables inside classes and media queries. Here are all the variables:
114
+
There are variables found at the bottom of Crucial.CSS and utilities. You can override them in your project, or change them directly. Remember, you can also override variables inside classes and media queries, which is super helpful. Here are all the variables:
99
115
100
116
```CSS
101
117
:root {
@@ -130,6 +146,7 @@ There are variables found at the bottom of Crucial.CSS and utilities. You can ov
0 commit comments