Skip to content

Commit b1be33b

Browse files
radiogronradiogron
authored
Merge pull request #13 from devamstudio/revert-9-feature/typography
Revert "Feature/typography"
2 parents 80a5467 + 9f2810b commit b1be33b

25 files changed

+2254
-2622
lines changed

‎dist/fa-kit.css‎

Lines changed: 1379 additions & 1628 deletions
Large diffs are not rendered by default.

‎sass/base/article.sass‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
article, .#{$class-article}
22
// Create headings
33
@each $heading, $size in $font_heading_sizes
4-
$i_rev: length($font_heading_sizes) - index(($font_heading_sizes), ($heading $size)) + 1
5-
$line-height: map-get($font-heading-lineheight, $i_rev )
6-
$font-weight: map-get($font-heading-weight, $i_rev )
4+
$i_rev: length($font_heading_sizes) - index(($font_heading_sizes), ($heading $size))
5+
$offset_top: map-get($font_heading_sizes, h+$i_rev )
76
#{$heading}
8-
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)
117
display: block
12-
font:
13-
family: $font_heading
8+
font :
9+
size : $size
10+
family : $font_heading
11+
margin: 0
12+
top: $font_heading_margin_top
13+
bottom: .2em
14+
font-weight : 400
15+
line-height: $font_heading_line_height
1416
hyphens: auto
15-
font:
16-
size: $size
17-
weight: $font-weight
18-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * #{$line-height} * 1rem)
17+
img, picture
18+
& + p, & + blockquote
19+
margin-top: 1em
1920

2021
ol, ul
22+
padding:
23+
left: 2em
2124
margin:
22-
top: 0
23-
bottom: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
24-
li
25-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
26-
25+
bottom: 1em
26+
line-height: $text-line-height
2727
span,strong,i,b
2828
font :
2929
size : inherit

‎sass/base/coloring.sass‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎sass/base/reset.sass‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,10 @@
33
*::after
44
box-sizing : border-box
55

6-
html
7-
font:
8-
family: $font-main
9-
size: calc(var(--font-size) * 1px)
10-
color: $body-text-color
11-
126
body
137
margin: 0
8+
line-height: 1
9+
color: $body-text-color
1410
background: $body-background-color
1511

1612
// Media

‎sass/base/root.sass‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎sass/base/typography.sass‎

Lines changed: 50 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -2,103 +2,85 @@
22
// Global //
33
////////////
44
5+
body,html
6+
font :
7+
family : $font-main
8+
size : $font_base_size
9+
510
// Create main text
6-
.paragraph
11+
p
712
hyphens: auto
8-
font:
9-
size: $font-base-size
10-
family: $font_main
11-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
12-
margin:
13-
top: 0
14-
bottom: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
15-
16-
*
17-
vertical-align: baseline
18-
19-
// Lead
20-
&.paragraph__lead
21-
font-size: $font-base-size * 1.2
22-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
13+
font :
14+
size : $font_main_size
15+
family : $font_main
16+
line-height : $text_line_height
17+
margin : 0 0 1em 0
2318

2419
// Text format
25-
.kbd
20+
kbd
2621
display: inline-block
27-
padding: .3em .4em
28-
font-size: .9em
29-
line-height: 1
22+
padding: .1em .4em
23+
font-size: .8em
24+
line-height: inherit
25+
vertical-align: middle
3026
background-color: $color-black
3127
color: $color-white
32-
border-radius: .2rem
28+
border-radius: .2em
3329

3430
// Create headings class
35-
.heading
36-
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)
39-
display: block
40-
font:
41-
family: $font_heading
42-
font-weight: 400
43-
hyphens: auto
44-
45-
@each $heading, $size in $font_heading_sizes
46-
$i_rev: length($font_heading_sizes) - index(($font_heading_sizes), ($heading $size)) + 1
47-
$line-height: map-get($font-heading-lineheight, $i_rev )
48-
$font-weight: map-get($font-heading-weight, $i_rev )
49-
&.heading__#{$heading}
50-
font:
51-
size: $size
52-
weight: $font-weight
53-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * #{$line-height} * 1rem)
31+
@each $heading, $size in $font_heading_sizes
32+
$i_rev: length($font_heading_sizes) - index(($font_heading_sizes), ($heading $size))
33+
$offset_top: map-get($font_heading_sizes, h+$i_rev )
34+
.#{$heading}
35+
display: block
36+
font :
37+
size : $size
38+
family : $font_heading
39+
margin: 0
40+
top: $font_heading_margin_top
41+
bottom: .2em
42+
font-weight : 400
43+
line-height: $font_heading_line_height
44+
hyphens: auto
5445

5546
.#{$class-text}
5647
// Color text
5748
@each $state, $color in $colors
5849
&__#{$state}
59-
color: $color
50+
color : $color
6051
// Align text
6152
@each $align in $text_align_list
6253
&__#{$align}
63-
text-align: $align
54+
text-align : $align
6455
@each $size, $tmp in $media_quaries_up
6556
@include media_query_up($size)
6657
@each $align in $text_align_list
6758
&__#{$size}-#{$align}
68-
text-align: $align
59+
text-align : $align
60+
// Lead
61+
&__lead
62+
font-size: 1.1em
6963

7064
// Global lists
7165
.#{$class-list}
72-
margin:
73-
top: 0
74-
bottom: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
75-
&_item
76-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
7766
&__unstyled
78-
list-style-type: none
67+
list-style-type : none
7968
padding: 0
8069
margin: 0
8170

8271
// Text decoration
83-
.#{$class-blockquote}
84-
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)
87-
left: 0
88-
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)
92-
border:
93-
top: .1em solid $color-gray
94-
bottom: .1em solid $color-gray
72+
.g-blockquote
73+
margin:
74+
left: 1.5em
75+
padding: 1em
76+
border-left: .1em solid $color-gray
9577
font-style: italic
96-
line-height: calc(var(--grid-square) * 4 / var(--font-size) * 1rem)
78+
line-height: $text-line-height
9779

98-
.link
99-
@extend %link
80+
////////////
81+
// MAIN //
82+
////////////
10083
101-
.hr
102-
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)
84+
main
85+
a:not(.g-button), a[role='link']
86+
@extend %link

‎sass/base/utilites.sass‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,39 +3,39 @@
33
//* 3. Flex aligning
44
55
//* 1. Margins and paddings
6-
$offset_side: margin, padding
6+
$offset_side : margin, padding
77
@each $item in $offset_side
88
.#{$item}
99
@each $direction in $directions
1010
@each $offset, $offset_value in $direction_offset
1111
@if $item == padding and $offset == auto
1212
@else
1313
&__#{$direction}-#{$offset}
14-
#{$item}:
14+
#{$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 : $offset_value
17+
bottom : $offset_value
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 : $offset_value
20+
left : $offset_value
2121
@else
22-
#{$direction}: calc(var(--grid-square) * 4 / var(--font-size) * #{$offset_value} * 1rem) !important
22+
#{$direction} : $offset_value
2323
@each $size, $tmp in $media_quaries_up
2424
@include media_query_up($size)
2525
@each $direction in $directions
2626
@each $offset, $offset_value in $direction_offset
2727
@if $item == padding and $offset == auto
2828
@else
2929
&__#{$size}-#{$direction}-#{$offset}
30-
#{$item}:
30+
#{$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 : $offset_value
33+
bottom : $offset_value
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 : $offset_value
36+
left : $offset_value
3737
@else
38-
#{$direction}: calc(var(--grid-square) * 4 / var(--font-size) * #{$offset_value} * 1rem) !important
38+
#{$direction} : $offset_value
3939

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

‎sass/class.sass‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
$prefix__global : '' // Возможное значение: 'g-'
2-
$prefix__block : '' // Возможное значение: 'b-'
3-
$prefix__design : '' // Возможное значение: 'd-'
1+
$prefix__global : 'g-'
2+
$prefix__block : 'b-'
3+
$prefix__design : 'd-'
44

55
// Globals //
66
$class-container : $prefix__global + 'container'
@@ -37,6 +37,4 @@ $class-notification : $prefix__block + 'notification'
3737

3838
$class-pagination : $prefix__block + 'pagination'
3939

40-
// Design //
41-
42-
$class-blockquote : $prefix__design + 'blockquote'
40+
// Design //

‎sass/config.sass‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,7 @@ $body-background-color : $color-white
3131

3232

3333
//* 2. Grid */
34-
$grid-square : 8 // Module system value
35-
$grid-cols : 12
34+
$grid-cols : 12
3635
$containers : ( xs : 100%, sm : 100%, md : 1000px, lg : 1200px )
3736
$media-quaries : ( xs, sm, md, lg, xl)
3837
$media-quaries_up : ( xs : 0, sm : 500px, md : 900px, lg : 1024px, xl : 1220px )
@@ -44,24 +43,22 @@ $media-quaries_down : ( xs : 500px, sm : 900px, md : 1024px, lg : 1220px, xl : 1
4443
$font-heading : Arial, -apple-system, system-ui
4544
$font-main : Arial, -apple-system, system-ui
4645
// Size
47-
$font-base-ratio : ( xs: 16, lg: 18 )
48-
$font-base-size : 1rem
49-
50-
$font-heading-sizes : ( h1 : 2.5rem, h2 : 2.1rem, h3 : 1.8rem, h4 : 1.5rem, h5 : 1.2rem, h6 : 1rem )
51-
$font-heading-weight : ( 6 : normal, 5 : normal, 4 : bold, 3 : bold, 2 : bold, 1 : bold ) // May have reversed mode 1 eq h6 heading, h1 = 6
52-
$font-heading-lineheight : ( 6 : 2, 5 : 2, 4 : 2, 3 : 1, 2 : 1, 1 : 1 ) // May have reversed mode 1 eq h6 heading, h1 = 6
53-
$font_heading_margin_top : 2
54-
$font_heading_margin_bottom : 1
46+
$font-base-size : 16px
47+
$font-heading-sizes : ( h1 : 2.5rem, h2 : 2.1rem, h3 : 1.8rem, h4 : 1.5rem, h5 : 1.2rem, h6 : 1rem )
48+
$font_heading_margin_top: .5em
49+
$font_heading_line_height: 1.61
50+
$font-main-size : 1rem
5551

5652
// Align
5753
$text-align-list : left, right, center, justify
5854
$flex-align_items-list : ( start : flex-start , end : flex-end , center : center , baseline : baseline , stretch : stretch )
5955
// Other
56+
$text-line-height : 1.61
6057

6158

6259
//* 4. Margin and paddings */
6360
$directions : left, right, top, bottom, yy, xx
64-
$direction-offset : ( 0: 0 , half: .5 , 1: 1 , 2: 2 , 3: 3 , 4: 4 , 5: 5 )
61+
$direction-offset : ( 0 : 0 , 1 : 1rem , 2 : 1.5rem , 3 : 2rem , 4 : 3rem , 5 : 5rem )
6562

6663

6764
//* 5. Design */

‎sass/fa-kit.sass‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@
33
@import mixins
44

55
// Base //
6-
@import base/root
76
@import base/reset
87
@import base/grid
98
@import base/typography
109
@import base/article
1110
@import base/media_objects
12-
@import base/coloring
1311

1412
// UI/Design //
1513
@import ui/blocks

0 commit comments

Comments
 (0)