Skip to content

Commit

Permalink
feat: new gird
Browse files Browse the repository at this point in the history
  • Loading branch information
@kitian616
kitian616 committed Sep 8, 2018
1 parent dbc7d5b commit f6cee5e
Show file tree
Hide file tree
Showing 5 changed files with 252 additions and 164 deletions.
115 changes: 58 additions & 57 deletions _layouts/landing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,66 +48,67 @@ <h3>{{ _section.title }}</h3>

{%- if _section.children -%}
{%- assign _size = _section.children | size -%}
<div class="grid">
<div class="row">


{%- for child in _section.children -%}
<div class="col col-{{ 12 | divided_by: _size }} col-sm-12 px-1">

<div class="mb-5">
<h4>{{ child.title }}</h4>

{%- if child.excerpt-%}
<p>{{ child.excerpt }}</p>
<div class="grid--container">
<div class="grid grid--p-3">

{%- for child in _section.children -%}
<div class="cell cell--{{ 12 | divided_by: _size }} cell--sm-12">

<div class="mb-5">
<h4>{{ child.title }}</h4>

{%- if child.excerpt-%}
<p>{{ child.excerpt }}</p>
{%- endif -%}

{%- if child.actions -%}
<ul class="menu">
{%- for _action in child.actions -%}
{%- include snippets/get-nav-url.html path=_action.url -%}
{%- assign _url = __return -%}
{%- assign _type = _action.type | default: 'outline-info' -%}
<li><a class="button button--{{ _type }} button--pill button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>

{%- if child.image -%}

{%- if child.image.url -%}
{%- include snippets/get-nav-url.html path=child.image.url -%}
{%- assign _item_image_url = __return -%}
{%- else -%}
{%- assign _item_image_url = nil -%}
{%- endif -%}

{%- if child.image.src -%}
{%- include snippets/get-nav-url.html path=child.image.src -%}
{%- assign _item_image_src = __return -%}
{%- else -%}
{%- assign _item_image_src = nil -%}
{%- endif -%}
{%- if child.image.is_row -%}
<div class="mb-5">
{%- endif -%}
<div class="mx-auto" style="{{ child.image.style }}">
{%- if _item_image_url -%}
<a href="{{ _item_image_url }}">
{%- endif -%}
{%- if _item_image_src -%}
<img src="{{ _item_image_src }}"/>
{%- endif -%}
{%- if _item_image_url -%}
</a>
{%- endif -%}
</div>
{%- if child.image.is_row -%}
</div>
{%- endif -%}
{%- endif -%}

{%- if child.actions -%}
<ul class="menu">
{%- for _action in child.actions -%}
{%- include snippets/get-nav-url.html path=_action.url -%}
{%- assign _url = __return -%}
{%- assign _type = _action.type | default: 'outline-info' -%}
<li><a class="button button--{{ _type }} button--pill button--lg" href="{{ _url }}">{{ _action.text }}</a></li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>

{%- if child.image -%}

{%- if child.image.url -%}
{%- include snippets/get-nav-url.html path=child.image.url -%}
{%- assign _item_image_url = __return -%}
{%- else -%}
{%- assign _item_image_url = nil -%}
{%- endif -%}

{%- if child.image.src -%}
{%- include snippets/get-nav-url.html path=child.image.src -%}
{%- assign _item_image_src = __return -%}
{%- else -%}
{%- assign _item_image_src = nil -%}
{%- endif -%}
{%- if child.image.is_row -%}
<div class="mb-5">
{%- endif -%}
{%- if _item_image_url -%}
<a href="{{ _item_image_url }}">
{%- endif -%}
{%- if _item_image_src -%}
<img src="{{ _item_image_src }}" style="{{ child.image.style }}" />
{%- endif -%}
{%- if _item_image_url -%}
</a>
{%- endif -%}
{%- if child.image.is_row -%}
</div>
{%- endif -%}
{%- endif -%}

</div>
{%- endfor-%}
{%- endfor-%}

</div>
</div>
Expand Down
71 changes: 37 additions & 34 deletions _layouts/page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,17 +26,18 @@
{%- if page.sidebar -%}
<div class="layout--page layout--page--sidebar clearfix js-page-root">
<div class="page__actions">
<div class="button button--circle button--lg box-shadow-2 sidebar-button js-sidebar-show">
<div class="button button--circle button--lg box-shadow-2 sidebar-button js-sidebar-show">
<i class="fas fa-bars icon--show"></i>
</div>
</div>
<div class="page__mask js-sidebar-hide"></div>

<div class="page__sidebar">
{%- include sidebar/toc.html -%}
</div>
<div class="page__mask js-sidebar-hide"></div>

{%- else -%}
<div class="layout--page clearfix js-page-root">
<div class="layout--page js-page-root">
{%- endif -%}

{%- assign _page_main_class = 'page__main js-page-main' -%}
Expand Down Expand Up @@ -159,37 +160,39 @@
{%- if _full_width == false -%}
<div class ="main">
{%- endif -%}

<div class="col-aside js-col-aside">
{%- if page.aside -%}
<aside class="page__aside js-page-aside">
{%- include aside/toc.html -%}
</aside>
{%- endif -%}
</div>

<div class="col-main">
{%- if _page_type == 'article' -%}
<article itemscope itemtype="http://schema.org/Article">
{%- elsif _page_type == 'webpage' -%}
<article itemscope itemtype="http://schema.org/WebPage">
{%- else -%}
<article>
{%- endif -%}

{%- if _article_header_type == 'overlay' or page.article_header == false -%}
{%- include article-header.html article=page html=false -%}
{%- include article-info.html article=page html=false -%}
{%- else -%}
{%- include article-header.html article=page -%}
{%- include article-info.html article=page -%}
{%- endif -%}

<div class="js-article-content">{{ content }}</div>
{%- if jekyll.environment != "development" and _comment != false -%}
<section class="page__comments">{%- include comments.html -%}</section>
{%- endif -%}
</article>
<div class="grid grid--reverse">

<div class="col-aside js-col-aside">
{%- if page.aside -%}
<aside class="page__aside js-page-aside">
{%- include aside/toc.html -%}
</aside>
{%- endif -%}
</div>

<div class="col-main cell--auto">
{%- if _page_type == 'article' -%}
<article itemscope itemtype="http://schema.org/Article">
{%- elsif _page_type == 'webpage' -%}
<article itemscope itemtype="http://schema.org/WebPage">
{%- else -%}
<article>
{%- endif -%}

{%- if _article_header_type == 'overlay' or page.article_header == false -%}
{%- include article-header.html article=page html=false -%}
{%- include article-info.html article=page html=false -%}
{%- else -%}
{%- include article-header.html article=page -%}
{%- include article-info.html article=page -%}
{%- endif -%}

<div class="js-article-content">{{ content }}</div>
{%- if jekyll.environment != "development" and _comment != false -%}
<section class="page__comments">{%- include comments.html -%}</section>
{%- endif -%}
</article>
</div>
</div>

{%- if _full_width == false -%}
Expand Down
141 changes: 112 additions & 29 deletions _sass/common/classes/_grid.scss
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,131 @@
$grid-columns: 12;

@mixin make-col($columns) {
.col-#{$columns} {
display: inline-block;
width: percentage($columns / $grid-columns);
letter-spacing: normal;
.grid-container {
@include overflow(hidden);
}

@mixin make-cell($columns) {
.cell--#{$columns} {
@if $columns == "auto" {
@include flex(1 1 0);
width: auto;
min-width: 0;
} @else if $columns == "shrink" {
@include flex(0 0 auto);
width: auto;
min-width: 0;
} @else if $columns == "stretch" {
@include flex(1);
} @else {
@include flex(none);
width: percentage($columns / $grid-columns);
min-width: 0;
}
}
}

@mixin make-md-col($columns) {
@mixin make-md-cell($columns) {
@include media-breakpoint-down(lg) {
.col-md-#{$columns} {
display: inline-block;
width: percentage($columns / $grid-columns);
letter-spacing: normal;
.cell--md-#{$columns} {
@if $columns == "auto" {
@include flex(1 1 0);
width: auto;
min-width: 0;
} @else if $columns == "shrink" {
@include flex(0 0 auto);
width: auto;
min-width: 0;
} @else if $columns == "stretch" {
@include flex(1);
} @else {
@include flex(none);
width: percentage($columns / $grid-columns);
min-width: 0;
}
}
}
}

@mixin make-sm-col($columns) {
@mixin make-sm-cell($columns) {
@include media-breakpoint-down(md) {
.col-sm-#{$columns} {
display: inline-block;
width: percentage($columns / $grid-columns);
letter-spacing: normal;
.cell--sm-#{$columns} {
@if $columns == "auto" {
@include flex(1 1 0);
width: auto;
min-width: 0;
} @else if $columns == "shrink" {
@include flex(0 0 auto);
width: auto;
min-width: 0;
} @else if $columns == "stretch" {
@include flex(1);
} @else {
@include flex(none);
width: percentage($columns / $grid-columns);
min-width: 0;
}
}
}
}

.grid {
& > .row {
@include flexbox();
@include flex-wrap(wrap);
letter-spacing: -.31em;
& > {
@for $i from 1 through $grid-columns {
@include make-col($i);
}
@for $i from 1 through $grid-columns {
@include make-md-col($i);
}
@for $i from 1 through $grid-columns {
@include make-sm-col($i);
@include flexbox();
@include flex-wrap(wrap);
& > {
@for $i from 1 through $grid-columns {
@include make-cell($i);
}
@include make-cell("auto");
@include make-cell("shrink");
@include make-cell("stretch");

@for $i from 1 through $grid-columns {
@include make-md-cell($i);
}
@include make-md-cell("auto");
@include make-md-cell("shrink");
@include make-md-cell("stretch");

@for $i from 1 through $grid-columns {
@include make-sm-cell($i);
}

@include make-sm-cell("auto");
@include make-sm-cell("shrink");
@include make-sm-cell("stretch");
}
}

.grid--reverse {
flex-direction: row-reverse;
}

@mixin make-grid() {
$types: ("p");
$directions: ("x", "y", "");
$spacers: (0, 1, 2, 3, 4, 5);

@each $type in $types {
@each $direction in $directions {
@each $spacer in $spacers {
@if $direction == "" {
.grid--#{$type}-#{$spacer} {
@include make-spacing("m", "", $spacer, true);
.cell {
@include make-spacing($type, "", $spacer);
}
}
} @else {
.grid--#{$type}#{$direction}-#{$spacer} {
@include make-spacing("m", $direction, $spacer, true);
.cell {
@include make-spacing($type, $direction, $spacer);
}
}
}
}
}
}
}
}

@include make-grid();
Loading

0 comments on commit f6cee5e

Please sign in to comment.