Skip to content

Commit db64cab

Browse files
radiogronradiogron
committed
Finished improving grid square system based on typography
1 parent 67bf22e commit db64cab

File tree

16 files changed

+1523
-1052
lines changed

16 files changed

+1523
-1052
lines changed

‎dist/fa-kit.css‎

Lines changed: 1298 additions & 880 deletions
Large diffs are not rendered by default.

‎sass/base/article.sass‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,23 +6,23 @@ article, .#{$class-article}
66
$font-weight: map-get($font-heading-weight, $i_rev )
77
#{$heading}
88
margin:
9-
top: calc(var(--grid-square) * 4 / var(--font-size) * #{$font_heading_margin_top} * 1rem)
10-
bottom: calc(var(--grid-square) * 4 / var(--font-size) * #{$font_heading_margin_bottom} * 1rem)
9+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$font_heading_margin_top} * 1rem)
10+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$font_heading_margin_bottom} * 1rem)
1111
display: block
1212
font:
1313
family: $font_heading
1414
hyphens: auto
1515
font:
1616
size: $size
1717
weight: $font-weight
18-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * #{$line-height} * 1rem)
18+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$line-height} * 1rem)
1919

2020
ol, ul
2121
margin:
2222
top: 0
23-
bottom: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
23+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
2424
li
25-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
25+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
2626

2727
span,strong,i,b
2828
font :

‎sass/base/root.sass‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
html:root
22
--grid-square: #{$grid-square}
3+
--grid-squares-per-line: #{$grid-squares-per-line}
34
@each $query, $size in $font-base-ratio
45
@include media_query_up($query)
56
--font-size: #{$size}

‎sass/base/typography.sass‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,18 @@
88
font:
99
size: $font-base-size
1010
family: $font_main
11-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
11+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
1212
margin:
1313
top: 0
14-
bottom: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
14+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
1515

1616
*
1717
vertical-align: baseline
1818

1919
// Lead
2020
&.paragraph__lead
2121
font-size: $font-base-size * 1.2
22-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
22+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
2323

2424
// Text format
2525
.kbd
@@ -34,8 +34,8 @@
3434
// Create headings class
3535
.heading
3636
margin:
37-
top: calc(var(--grid-square) * 4 / var(--font-size) * #{$font_heading_margin_top} * 1rem)
38-
bottom: calc(var(--grid-square) * 4 / var(--font-size) * #{$font_heading_margin_bottom} * 1rem)
37+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$font_heading_margin_top} * 1rem)
38+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$font_heading_margin_bottom} * 1rem)
3939
display: block
4040
font:
4141
family: $font_heading
@@ -50,7 +50,7 @@
5050
font:
5151
size: $size
5252
weight: $font-weight
53-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * #{$line-height} * 1rem)
53+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$line-height} * 1rem)
5454

5555
.#{$class-text}
5656
// Color text
@@ -71,9 +71,9 @@
7171
.#{$class-list}
7272
margin:
7373
top: 0
74-
bottom: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
74+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
7575
&_item
76-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
76+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
7777
&__unstyled
7878
list-style-type: none
7979
padding: 0
@@ -82,23 +82,23 @@
8282
// Text decoration
8383
.#{$class-blockquote}
8484
margin:
85-
top: calc(var(--grid-square) * 4 / var(--font-size) * 1.5rem)
86-
bottom: calc(var(--grid-square) * 4 / var(--font-size) * 1.5rem)
85+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1.5rem)
86+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1.5rem)
8787
left: 0
8888
padding:
89-
left: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
90-
top: calc(var(--grid-square) * 4 / var(--font-size) * 1rem - 1em)
91-
bottom: calc(var(--grid-square) * 4 / var(--font-size) * 1rem - 1em)
89+
left: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
90+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem - 1em)
91+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem - 1em)
9292
border:
9393
top: .1em solid $color-gray
9494
bottom: .1em solid $color-gray
9595
font-style: italic
96-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
96+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
9797

9898
.link
9999
@extend %link
100100

101101
.hr
102102
margin:
103-
top: calc(var(--grid-square) * 4 / var(--font-size) * 1.5rem)
104-
bottom: calc(var(--grid-square) * 4 / var(--font-size) * 1.5rem)
103+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1.5rem)
104+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1.5rem)

‎sass/base/utilites.sass‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ $offset_side: margin, padding
1313
&__#{$direction}-#{$offset}
1414
#{$item}:
1515
@if $direction == yy
16-
top: calc(var(--grid-square) * 4 / var(--font-size) * #{$offset_value} * 1rem) !important
17-
bottom: calc(var(--grid-square) * 4 / var(--font-size) * #{$offset_value} * 1rem) !important
16+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
17+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
1818
@else if $direction == xx
19-
right: calc(var(--grid-square) * 4 / var(--font-size) * #{$offset_value} * 1rem) !important
20-
left: calc(var(--grid-square) * 4 / var(--font-size) * #{$offset_value} * 1rem) !important
19+
right: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
20+
left: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
2121
@else
22-
#{$direction}: calc(var(--grid-square) * 4 / var(--font-size) * #{$offset_value} * 1rem) !important
22+
#{$direction}: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
2323
@each $size, $tmp in $media_quaries_up
2424
@include media_query_up($size)
2525
@each $direction in $directions
@@ -29,13 +29,13 @@ $offset_side: margin, padding
2929
&__#{$size}-#{$direction}-#{$offset}
3030
#{$item}:
3131
@if $direction == yy
32-
top: calc(var(--grid-square) * 4 / var(--font-size) * #{$offset_value} * 1rem) !important
33-
bottom: calc(var(--grid-square) * 4 / var(--font-size) * #{$offset_value} * 1rem) !important
32+
top: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
33+
bottom: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
3434
@else if $direction == xx
35-
right: calc(var(--grid-square) * 4 / var(--font-size) * #{$offset_value} * 1rem) !important
36-
left: calc(var(--grid-square) * 4 / var(--font-size) * #{$offset_value} * 1rem) !important
35+
right: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
36+
left: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
3737
@else
38-
#{$direction}: calc(var(--grid-square) * 4 / var(--font-size) * #{$offset_value} * 1rem) !important
38+
#{$direction}: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$offset_value} * 1rem) !important
3939

4040
//* 2. Flex ordering
4141
.#{$class-order}

‎sass/config.sass‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,13 @@ $body-background-color : $color-white!default
3131

3232

3333
//* 2. Grid */
34-
$grid-square : 8 !default // Module system value
35-
$grid-cols : 12 !default
36-
$containers : ( xs : 100%, sm : 100%, md : 1000px, lg : 1200px ) !default
37-
$media-quaries : ( xs, sm, md, lg, xl)!default
38-
$media-quaries_up : ( xs : 0, sm : 500px, md : 900px, lg : 1024px, xl : 1220px ) !default
39-
$media-quaries_down : ( xs : 500px, sm : 900px, md : 1024px, lg : 1220px, xl : 1220px ) !default
34+
$grid-square : 8 !default // Module system value
35+
$grid-squares-per-line : 4 !default
36+
$grid-cols : 12 !default
37+
$containers : ( xs : 100%, sm : 100%, md : 1000px, lg : 1200px ) !default
38+
$media-quaries : ( xs, sm, md, lg, xl)!default
39+
$media-quaries_up : ( xs : 0, sm : 500px, md : 900px, lg : 1024px, xl : 1220px ) !default
40+
$media-quaries_down : ( xs : 500px, sm : 900px, md : 1024px, lg : 1220px, xl : 1220px ) !default
4041

4142

4243
//* 3. Text */
@@ -61,7 +62,7 @@ $flex-align_items-list : ( start : flex-start , end : flex-end , center : center
6162
6263
//* 4. Margin and paddings */
6364
$directions : left, right, top, bottom, yy, xx !default
64-
$direction-offset : ( 0: 0 , half: .5 , 1: 1 , 2: 2 , 3: 3 , 4: 4 , 5: 5 ) !default
65+
$direction-offset : ( 0: 0 , 1_2: .5, 1_4: .25, 3_4: .75 , 1: 1 , 2: 2 , 3: 3 , 4: 4 , 5: 5 ) !default
6566

6667

6768
//* 5. Design */
@@ -72,15 +73,15 @@ $global-rounded-radius : 0.2rem !default
7273
$global-animation : true !default
7374
$global-animation-delay : 0.2s !default
7475
//Inputs
75-
$global-input-inset-y: .5rem !default
76-
$global-input-inset-x: 1rem !default
76+
$global-input-inset-y: 0 !default
77+
$global-input-inset-x: .25 !default
7778
// Coloring
7879
$border-width: .1rem !default
7980

8081

8182
//* 6. Buttons */
82-
$colors : ( primary : $color-primary, secondary : $color-secondary, alert : $color-alert, warning : $color-warning, ok : $color-ok, black : $color-black, white : $color-white , light : $color-gray__light , dark : $color-gray__dark ) !default
83-
$buttons-inset-x : $global-input-inset-x !default
83+
$colors : ( primary : $color-primary, secondary : $color-secondary, alert : $color-alert, warning : $color-warning, ok : $color-ok, black : $color-black, white : $color-white , light : $color-gray__light , dark : $color-gray__dark, red: $color-red ) !default
84+
$buttons-inset-x : $global-input-inset-x * 3 !default
8485
$buttons-inset-y : $global-input-inset-y !default
8586
$buttons-radius : '' !default
8687
@if $global-rounded

‎sass/config_custom_template.sass‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,13 @@ $body-background-color : null
3434

3535

3636
//* 2. Grid */
37-
$grid-square : null // Module system value
38-
$grid-cols : null
39-
$containers : null // Map
40-
$media-quaries : null // Map
41-
$media-quaries_up : null // Map
42-
$media-quaries_down : null // Map
37+
$grid-square : null // Module system value
38+
$grid-squares-per-line : null
39+
$grid-cols : null
40+
$containers : null // Map
41+
$media-quaries : null // Map
42+
$media-quaries_up : null // Map
43+
$media-quaries_down : null // Map
4344

4445

4546
//* 3. Text */

‎sass/ui/breadcrumbs.sass‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
.#{$class-breadcrumbs}
2-
list-style-type : none
2+
list-style-type: none
33
padding-left: 0
4+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
45
&_item
5-
display : inline-block
6+
display: inline-block
67
&__link
78
a
89
@extend %link
910
&:after
10-
content : '→'
11-
display : inline-block
12-
margin :
13-
left : .5rem
14-
right : .5rem
11+
content: '→'
12+
display: inline-block
13+
margin:
14+
left: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * .25rem)
15+
right: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * .25rem)

‎sass/ui/buttons.sass‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
@extend %none-select
33
display: inline-flex
44
//align-items: center
5-
padding: 0 $buttons-inset-x
5+
padding: 0 calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * #{$buttons-inset-x} * 1rem)
66
@if $global-rounded
77
border-radius: $buttons-radius
88
outline: none
99
border: none
10-
height: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
11-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
10+
height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
11+
line-height: calc(var(--grid-square) * var(--grid-squares-per-line) / var(--font-size) * 1rem)
1212

1313
color: $color-white
1414
text:

0 commit comments

Comments
 (0)