Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f6cee5e

Browse files
kitian616kitian616
committed
feat: new gird
1 parent dbc7d5b commit f6cee5e

File tree

5 files changed

+252
-164
lines changed

5 files changed

+252
-164
lines changed

‎_layouts/landing.html‎

Lines changed: 58 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -48,66 +48,67 @@ <h3>{{ _section.title }}</h3>
4848

4949
{%- if _section.children -%}
5050
{%- assign _size = _section.children | size -%}
51-
<div class="grid">
52-
<div class="row">
53-
54-
55-
{%- for child in _section.children -%}
56-
<div class="col col-{{ 12 | divided_by: _size }} col-sm-12 px-1">
57-
58-
<div class="mb-5">
59-
<h4>{{ child.title }}</h4>
60-
61-
{%- if child.excerpt-%}
62-
<p>{{ child.excerpt }}</p>
51+
<div class="grid--container">
52+
<div class="grid grid--p-3">
53+
54+
{%- for child in _section.children -%}
55+
<div class="cell cell--{{ 12 | divided_by: _size }} cell--sm-12">
56+
57+
<div class="mb-5">
58+
<h4>{{ child.title }}</h4>
59+
60+
{%- if child.excerpt-%}
61+
<p>{{ child.excerpt }}</p>
62+
{%- endif -%}
63+
64+
{%- if child.actions -%}
65+
<ul class="menu">
66+
{%- for _action in child.actions -%}
67+
{%- include snippets/get-nav-url.html path=_action.url -%}
68+
{%- assign _url = __return -%}
69+
{%- assign _type = _action.type | default: 'outline-info' -%}
70+
<li><a class="button button--{{ _type }} button--pill button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
71+
{%- endfor -%}
72+
</ul>
73+
{%- endif -%}
74+
</div>
75+
76+
{%- if child.image -%}
77+
78+
{%- if child.image.url -%}
79+
{%- include snippets/get-nav-url.html path=child.image.url -%}
80+
{%- assign _item_image_url = __return -%}
81+
{%- else -%}
82+
{%- assign _item_image_url = nil -%}
83+
{%- endif -%}
84+
85+
{%- if child.image.src -%}
86+
{%- include snippets/get-nav-url.html path=child.image.src -%}
87+
{%- assign _item_image_src = __return -%}
88+
{%- else -%}
89+
{%- assign _item_image_src = nil -%}
90+
{%- endif -%}
91+
{%- if child.image.is_row -%}
92+
<div class="mb-5">
93+
{%- endif -%}
94+
<div class="mx-auto" style="{{ child.image.style }}">
95+
{%- if _item_image_url -%}
96+
<a href="{{ _item_image_url }}">
97+
{%- endif -%}
98+
{%- if _item_image_src -%}
99+
<img src="{{ _item_image_src }}"/>
100+
{%- endif -%}
101+
{%- if _item_image_url -%}
102+
</a>
103+
{%- endif -%}
104+
</div>
105+
{%- if child.image.is_row -%}
106+
</div>
107+
{%- endif -%}
63108
{%- endif -%}
64109

65-
{%- if child.actions -%}
66-
<ul class="menu">
67-
{%- for _action in child.actions -%}
68-
{%- include snippets/get-nav-url.html path=_action.url -%}
69-
{%- assign _url = __return -%}
70-
{%- assign _type = _action.type | default: 'outline-info' -%}
71-
<li><a class="button button--{{ _type }} button--pill button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
72-
{%- endfor -%}
73-
</ul>
74-
{%- endif -%}
75110
</div>
76-
77-
{%- if child.image -%}
78-
79-
{%- if child.image.url -%}
80-
{%- include snippets/get-nav-url.html path=child.image.url -%}
81-
{%- assign _item_image_url = __return -%}
82-
{%- else -%}
83-
{%- assign _item_image_url = nil -%}
84-
{%- endif -%}
85-
86-
{%- if child.image.src -%}
87-
{%- include snippets/get-nav-url.html path=child.image.src -%}
88-
{%- assign _item_image_src = __return -%}
89-
{%- else -%}
90-
{%- assign _item_image_src = nil -%}
91-
{%- endif -%}
92-
{%- if child.image.is_row -%}
93-
<div class="mb-5">
94-
{%- endif -%}
95-
{%- if _item_image_url -%}
96-
<a href="{{ _item_image_url }}">
97-
{%- endif -%}
98-
{%- if _item_image_src -%}
99-
<img src="{{ _item_image_src }}" style="{{ child.image.style }}" />
100-
{%- endif -%}
101-
{%- if _item_image_url -%}
102-
</a>
103-
{%- endif -%}
104-
{%- if child.image.is_row -%}
105-
</div>
106-
{%- endif -%}
107-
{%- endif -%}
108-
109-
</div>
110-
{%- endfor-%}
111+
{%- endfor-%}
111112

112113
</div>
113114
</div>

‎_layouts/page.html‎

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,18 @@
2626
{%- if page.sidebar -%}
2727
<div class="layout--page layout--page--sidebar clearfix js-page-root">
2828
<div class="page__actions">
29-
<div class="button button--circle button--lg box-shadow-2 sidebar-button js-sidebar-show">
29+
<div class="button button--circle button--lg box-shadow-2 sidebar-button js-sidebar-show">
3030
<i class="fas fa-bars icon--show"></i>
3131
</div>
3232
</div>
33+
<div class="page__mask js-sidebar-hide"></div>
34+
3335
<div class="page__sidebar">
3436
{%- include sidebar/toc.html -%}
3537
</div>
36-
<div class="page__mask js-sidebar-hide"></div>
3738

3839
{%- else -%}
39-
<div class="layout--page clearfix js-page-root">
40+
<div class="layout--page js-page-root">
4041
{%- endif -%}
4142

4243
{%- assign _page_main_class = 'page__main js-page-main' -%}
@@ -159,37 +160,39 @@
159160
{%- if _full_width == false -%}
160161
<div class ="main">
161162
{%- endif -%}
162-
163-
<div class="col-aside js-col-aside">
164-
{%- if page.aside -%}
165-
<aside class="page__aside js-page-aside">
166-
{%- include aside/toc.html -%}
167-
</aside>
168-
{%- endif -%}
169-
</div>
170-
171-
<div class="col-main">
172-
{%- if _page_type == 'article' -%}
173-
<article itemscope itemtype="http://schema.org/Article">
174-
{%- elsif _page_type == 'webpage' -%}
175-
<article itemscope itemtype="http://schema.org/WebPage">
176-
{%- else -%}
177-
<article>
178-
{%- endif -%}
179-
180-
{%- if _article_header_type == 'overlay' or page.article_header == false -%}
181-
{%- include article-header.html article=page html=false -%}
182-
{%- include article-info.html article=page html=false -%}
183-
{%- else -%}
184-
{%- include article-header.html article=page -%}
185-
{%- include article-info.html article=page -%}
186-
{%- endif -%}
187-
188-
<div class="js-article-content">{{ content }}</div>
189-
{%- if jekyll.environment != "development" and _comment != false -%}
190-
<section class="page__comments">{%- include comments.html -%}</section>
191-
{%- endif -%}
192-
</article>
163+
<div class="grid grid--reverse">
164+
165+
<div class="col-aside js-col-aside">
166+
{%- if page.aside -%}
167+
<aside class="page__aside js-page-aside">
168+
{%- include aside/toc.html -%}
169+
</aside>
170+
{%- endif -%}
171+
</div>
172+
173+
<div class="col-main cell--auto">
174+
{%- if _page_type == 'article' -%}
175+
<article itemscope itemtype="http://schema.org/Article">
176+
{%- elsif _page_type == 'webpage' -%}
177+
<article itemscope itemtype="http://schema.org/WebPage">
178+
{%- else -%}
179+
<article>
180+
{%- endif -%}
181+
182+
{%- if _article_header_type == 'overlay' or page.article_header == false -%}
183+
{%- include article-header.html article=page html=false -%}
184+
{%- include article-info.html article=page html=false -%}
185+
{%- else -%}
186+
{%- include article-header.html article=page -%}
187+
{%- include article-info.html article=page -%}
188+
{%- endif -%}
189+
190+
<div class="js-article-content">{{ content }}</div>
191+
{%- if jekyll.environment != "development" and _comment != false -%}
192+
<section class="page__comments">{%- include comments.html -%}</section>
193+
{%- endif -%}
194+
</article>
195+
</div>
193196
</div>
194197

195198
{%- if _full_width == false -%}

‎_sass/common/classes/_grid.scss‎

Lines changed: 112 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,131 @@
11
$grid-columns: 12;
22

3-
@mixin make-col($columns) {
4-
.col-#{$columns} {
5-
display: inline-block;
6-
width: percentage($columns / $grid-columns);
7-
letter-spacing: normal;
3+
.grid-container {
4+
@include overflow(hidden);
5+
}
6+
7+
@mixin make-cell($columns) {
8+
.cell--#{$columns} {
9+
@if $columns == "auto" {
10+
@include flex(1 1 0);
11+
width: auto;
12+
min-width: 0;
13+
} @else if $columns == "shrink" {
14+
@include flex(0 0 auto);
15+
width: auto;
16+
min-width: 0;
17+
} @else if $columns == "stretch" {
18+
@include flex(1);
19+
} @else {
20+
@include flex(none);
21+
width: percentage($columns / $grid-columns);
22+
min-width: 0;
23+
}
824
}
925
}
1026

11-
@mixin make-md-col($columns) {
27+
@mixin make-md-cell($columns) {
1228
@include media-breakpoint-down(lg) {
13-
.col-md-#{$columns} {
14-
display: inline-block;
15-
width: percentage($columns / $grid-columns);
16-
letter-spacing: normal;
29+
.cell--md-#{$columns} {
30+
@if $columns == "auto" {
31+
@include flex(1 1 0);
32+
width: auto;
33+
min-width: 0;
34+
} @else if $columns == "shrink" {
35+
@include flex(0 0 auto);
36+
width: auto;
37+
min-width: 0;
38+
} @else if $columns == "stretch" {
39+
@include flex(1);
40+
} @else {
41+
@include flex(none);
42+
width: percentage($columns / $grid-columns);
43+
min-width: 0;
44+
}
1745
}
1846
}
1947
}
2048

21-
@mixin make-sm-col($columns) {
49+
@mixin make-sm-cell($columns) {
2250
@include media-breakpoint-down(md) {
23-
.col-sm-#{$columns} {
24-
display: inline-block;
25-
width: percentage($columns / $grid-columns);
26-
letter-spacing: normal;
51+
.cell--sm-#{$columns} {
52+
@if $columns == "auto" {
53+
@include flex(1 1 0);
54+
width: auto;
55+
min-width: 0;
56+
} @else if $columns == "shrink" {
57+
@include flex(0 0 auto);
58+
width: auto;
59+
min-width: 0;
60+
} @else if $columns == "stretch" {
61+
@include flex(1);
62+
} @else {
63+
@include flex(none);
64+
width: percentage($columns / $grid-columns);
65+
min-width: 0;
66+
}
2767
}
2868
}
2969
}
3070

3171
.grid {
32-
& > .row {
33-
@include flexbox();
34-
@include flex-wrap(wrap);
35-
letter-spacing: -.31em;
36-
& > {
37-
@for $i from 1 through $grid-columns {
38-
@include make-col($i);
39-
}
40-
@for $i from 1 through $grid-columns {
41-
@include make-md-col($i);
42-
}
43-
@for $i from 1 through $grid-columns {
44-
@include make-sm-col($i);
72+
@include flexbox();
73+
@include flex-wrap(wrap);
74+
& > {
75+
@for $i from 1 through $grid-columns {
76+
@include make-cell($i);
77+
}
78+
@include make-cell("auto");
79+
@include make-cell("shrink");
80+
@include make-cell("stretch");
81+
82+
@for $i from 1 through $grid-columns {
83+
@include make-md-cell($i);
84+
}
85+
@include make-md-cell("auto");
86+
@include make-md-cell("shrink");
87+
@include make-md-cell("stretch");
88+
89+
@for $i from 1 through $grid-columns {
90+
@include make-sm-cell($i);
91+
}
92+
93+
@include make-sm-cell("auto");
94+
@include make-sm-cell("shrink");
95+
@include make-sm-cell("stretch");
96+
}
97+
}
98+
99+
.grid--reverse {
100+
flex-direction: row-reverse;
101+
}
102+
103+
@mixin make-grid() {
104+
$types: ("p");
105+
$directions: ("x", "y", "");
106+
$spacers: (0, 1, 2, 3, 4, 5);
107+
108+
@each $type in $types {
109+
@each $direction in $directions {
110+
@each $spacer in $spacers {
111+
@if $direction == "" {
112+
.grid--#{$type}-#{$spacer} {
113+
@include make-spacing("m", "", $spacer, true);
114+
.cell {
115+
@include make-spacing($type, "", $spacer);
116+
}
117+
}
118+
} @else {
119+
.grid--#{$type}#{$direction}-#{$spacer} {
120+
@include make-spacing("m", $direction, $spacer, true);
121+
.cell {
122+
@include make-spacing($type, $direction, $spacer);
123+
}
124+
}
125+
}
45126
}
46127
}
47128
}
48-
}
129+
}
130+
131+
@include make-grid();

0 commit comments

Comments
 (0)