Skip to content

Commit 4020f85

Browse files
author
mrmrs
committed
Update css
1 parent 158f2d5 commit 4020f85

32 files changed

+308
-63
lines changed

‎src/css/_border-colors.css

+9
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@
22
33
BORDER COLORS
44
5+
Border colors can be used to extend the base
6+
border classes ba,bt,bb,br,bl found in the _borders.css file.
7+
8+
The base border class by default will set the color of the border
9+
to that of the current text color. These classes are for the cases
10+
where you desire for the text and border colors to be different.
11+
12+
b = border
13+
514
*/
615

716
.b--black { border-color: var(--black); }

‎src/css/_border-radius.css

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@
1111
2 = 2nd step in scale
1212
3 = 3rd step in scale
1313
4 = 4th step in scale
14-
-100 = 100%
1514
15+
Literal values:
16+
-100 = 100%
17+
-pill = 9999px
1618
1719
Media Query Extensions:
1820
-ns = not-small

‎src/css/_border-style.css

+7-5
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@
22
33
BORDER STYLES
44
5+
Depends on base border module in _borders.css
6+
57
Base:
6-
bs = border-style
8+
b = border-style
79
810
Modifiers:
9-
none = none
10-
dotted = dotted
11-
dashed = dashed
12-
solid = solid
11+
--none = none
12+
--dotted = dotted
13+
--dashed = dashed
14+
--solid = solid
1315
1416
Media Query Extensions:
1517
-ns = not-small

‎src/css/_border-widths.css

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
.bw4 { border-width: 1rem; }
2828
.bw5 { border-width: 2rem; }
2929

30+
/* Resets */
3031
.bt-0 { border-top-width: 0; }
3132
.br-0 { border-right-width: 0; }
3233
.bb-0 { border-bottom-width: 0; }

‎src/css/_borders.css

+17-9
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
/*
22
3-
BORDER BASE
4-
5-
Legend
6-
7-
a = all
8-
t = top
9-
r = right
10-
b = bottom
11-
l = left
3+
BORDERS
4+
5+
Base:
6+
b = border
7+
8+
Modifiers:
9+
a = all
10+
t = top
11+
r = right
12+
b = bottom
13+
l = left
14+
n = none
15+
16+
Media Query Extensions:
17+
-ns = not-small
18+
-m = medium
19+
-l = large
1220
1321
*/
1422

‎src/css/_colors.css

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
Grayscale
77
- Solids
88
- Transparencies
9+
Colors
10+
911
*/
1012

1113
:root {

‎src/css/_coordinates.css

+18
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,24 @@
44
55
Use in combination with the position module.
66
7+
Base:
8+
top
9+
bottom
10+
right
11+
left
12+
13+
Modifiers:
14+
-0 = literal value 0
15+
-1 = literal value 1
16+
-2 = literal value 2
17+
--1 = literal value -1
18+
--2 = literal value -2
19+
20+
Media Query Extensions:
21+
-ns = not-small
22+
-m = medium
23+
-l = large
24+
725
*/
826

927
.top-0 { top: 0; }

‎src/css/_font-style.css

+5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
33
FONT STYLE
44
5+
Media Query Extensions:
6+
-ns = not-small
7+
-m = medium
8+
-l = large
9+
510
*/
611

712
.i { font-style: italic; }

‎src/css/_font-weight.css

+19
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,25 @@
22
33
FONT WEIGHT
44
5+
Base
6+
fw = font-weight
7+
8+
Modifiers:
9+
1 = literal value 100
10+
2 = literal value 200
11+
3 = literal value 300
12+
4 = literal value 400
13+
5 = literal value 500
14+
6 = literal value 600
15+
7 = literal value 700
16+
8 = literal value 800
17+
9 = literal value 900
18+
19+
Media Query Extensions:
20+
-ns = not-small
21+
-m = medium
22+
-l = large
23+
524
*/
625

726
.normal { font-weight: normal; }

‎src/css/_heights.css

+24
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,30 @@
22
33
HEIGHTS
44
5+
Base:
6+
h = height
7+
vh = vertical screen height
8+
9+
Modifiers
10+
1 = 1st step in height scale
11+
2 = 2nd step in height scale
12+
3 = 3rd step in height scale
13+
4 = 4th step in height scale
14+
5 = 5th step in height scale
15+
16+
-25 = literal value 25%
17+
-50 = literal value 50%
18+
-75 = literal value 75%
19+
-100 = literal value 100%
20+
21+
-auto = string value of auto
22+
-inherit = string value of inherit
23+
24+
Media Query Extensions:
25+
-ns = not-small
26+
-m = medium
27+
-l = large
28+
529
*/
630

731
/* Height Scale */

‎src/css/_hovers.css

+6
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22
33
HOVER EFFECTS
44
5+
- Dim
6+
- Hide Child
7+
- Underline text
8+
- Grow
9+
- Pointer
10+
- Shadow
511
612
*/
713

‎src/css/_letter-spacing.css

+5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
33
LETTER SPACING
44
5+
Media Query Extensions:
6+
-ns = not-small
7+
-m = medium
8+
-l = large
9+
510
*/
611

712
.tracked { letter-spacing: .1em; }

‎src/css/_line-height.css

+5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
33
LINE HEIGHT / LEADING
44
5+
Media Query Extensions:
6+
-ns = not-small
7+
-m = medium
8+
-l = large
9+
510
*/
611

712
.lh-solid { line-height: 1; }

‎src/css/_max-widths.css

+24
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,30 @@
22
33
MAX WIDTHS
44
5+
Base:
6+
mw = max-width
7+
8+
Modifiers
9+
1 = 1st step in width scale
10+
2 = 2nd step in width scale
11+
3 = 3rd step in width scale
12+
4 = 4th step in width scale
13+
5 = 5th step in width scale
14+
6 = 6st step in width scale
15+
7 = 7nd step in width scale
16+
8 = 8rd step in width scale
17+
9 = 9th step in width scale
18+
19+
-100 = literal value 100%
20+
21+
-none = string value none
22+
23+
24+
Media Query Extensions:
25+
-ns = not-small
26+
-m = medium
27+
-l = large
28+
529
*/
630

731
/* Max Width Percentages */

‎src/css/_opacity.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
3-
Opacity
3+
OPACITY
44
55
*/
66

‎src/css/_outlines.css

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
/*
22
3-
OUTLINES
3+
OUTLINES
4+
5+
Media Query Extensions:
6+
-ns = not-small
7+
-m = medium
8+
-l = large
49
510
*/
611

‎src/css/_overflow.css

+5
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
33
OVERFLOW
44
5+
Media Query Extensions:
6+
-ns = not-small
7+
-m = medium
8+
-l = large
9+
510
*/
611

712
.overflow-visible { overflow: visible; }

‎src/css/_position.css

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
/*
22
3-
POSITIONING
3+
POSITIONING
44
5-
*/
5+
Media Query Extensions:
6+
-ns = not-small
7+
-m = medium
8+
-l = large
9+
10+
*/
611

712
.static { position: static; }
813
.relative { position: relative; }

‎src/css/_skins.css

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
33
SKINS
44
5+
Classes for setting foreground and background colors on elements.
6+
57
*/
68

79

‎src/css/_spacing.css

+28-31
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
/* Variables */
2-
3-
/* Spacing Scale - based on a ratio of 1:2 */
42
:root {
53
--spacing-none: 0;
64
--spacing-extra-small: .25rem;
@@ -12,39 +10,38 @@
1210
--spacing-extra-extra-extra-large: 16rem;
1311
}
1412

15-
/* Media Queries */
16-
17-
@custom-media --breakpoint-not-small screen and (min-width: 48em);
18-
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
19-
@custom-media --breakpoint-large screen and (min-width: 64em);
20-
2113
/*
2214
SPACING
2315
2416
An eight step powers of two scale ranging from 0 to 16rem.
25-
Namespaces are composable and thus highly grockable - check the legend below
26-
27-
Legend:
28-
29-
p = padding
30-
m = margin
31-
32-
a = all
33-
h = horizontal
34-
v = vertical
35-
t = top
36-
r = right
37-
b = bottom
38-
l = left
39-
40-
0 = none
41-
1 = 1st step in spacing scale
42-
2 = 2nd step in spacing scale
43-
3 = 3rd step in spacing scale
44-
4 = 4th step in spacing scale
45-
5 = 5th step in spacing scale
46-
6 = 6th step in spacing scale
47-
7 = 7th step in spacing scale
17+
18+
Base:
19+
20+
p = padding
21+
m = margin
22+
23+
Modifiers:
24+
a = all
25+
h = horizontal
26+
v = vertical
27+
t = top
28+
r = right
29+
b = bottom
30+
l = left
31+
32+
0 = none
33+
1 = 1st step in spacing scale
34+
2 = 2nd step in spacing scale
35+
3 = 3rd step in spacing scale
36+
4 = 4th step in spacing scale
37+
5 = 5th step in spacing scale
38+
6 = 6th step in spacing scale
39+
7 = 7th step in spacing scale
40+
41+
Media Query Extensions:
42+
-ns = not-small
43+
-m = medium
44+
-l = large
4845
4946
*/
5047

0 commit comments

Comments
 (0)