diff --git a/contents/_includes/patterns/simple-grid.njk b/contents/_includes/patterns/simple-grid.njk new file mode 100644 index 0000000..b363702 --- /dev/null +++ b/contents/_includes/patterns/simple-grid.njk @@ -0,0 +1,15 @@ +
+
{% rectangle "hor", "md", 100 %}
+
{% rectangle "hor", "md", 100 %}
+
+
+
{% rectangle "hor", "md", 100 %}
+
{% rectangle "hor", "md", 100 %}
+
{% rectangle "hor", "md", 100 %}
+
+
+
{% rectangle "hor", "md", 100 %}
+
{% rectangle "hor", "md", 100 %}
+
{% rectangle "hor", "md", 100 %}
+
{% rectangle "hor", "md", 100 %}
+
\ No newline at end of file diff --git a/contents/index.njk b/contents/index.njk index 4de1006..525b040 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -114,6 +114,7 @@ eleventyExcludeFromCollections: true {% pattern "Masonry grid" %}{% include "patterns/masonry-grid.njk" %}{% endpattern %} {% pattern "Same height columns" %}{% include "patterns/same-height-columns.njk" %}{% endpattern %} {% pattern "Sidebar" %}{% include "patterns/sidebar.njk" %}{% endpattern %} + {% pattern "Simple grid" %}{% include "patterns/simple-grid.njk" %}{% endpattern %} diff --git a/contents/simple-grid.md b/contents/simple-grid.md new file mode 100644 index 0000000..8ae9235 --- /dev/null +++ b/contents/simple-grid.md @@ -0,0 +1,54 @@ +--- +layout: layouts/post.njk +title: Simple grid +description: Create a simple grid with CSS flexbox +keywords: css flexbox, css flexbox grid, css grid, css layout +--- + +## HTML + +```html + +
+ +
25%
+ + +
+ ... +
+
+``` + +## CSS + +```css +.simple-grid { + display: flex; + + margin-left: -0.25rem; + margin-right: -0.25rem; +} + +.simple-grid__cell { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + +.simple-grid__cell--fill { + flex: 1; +} + +/* Cell with given width */ +.simple-grid__cell--1\/2 { + flex: 0 0 50%; +} +.simple-grid__cell--1\/3 { + flex: 0 0 33.3333333%; +} +.simple-grid__cell--1\/4 { + flex: 0 0 25%; +} +``` + +{% demo %}{% include "patterns/simple-grid.njk" %}{% enddemo %} diff --git a/pages/simple-grid/index.tsx b/pages/simple-grid/index.tsx deleted file mode 100644 index 61d0d9e..0000000 --- a/pages/simple-grid/index.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - -
- -
25%
- - -
- ... -
-
-`} - css={` - .row { - display: flex; - - margin-left: -8px; - margin-right: -8px; - } - - .row__cell { - padding-left: 8px; - padding-right: 8px; - } - - /* Cell with given width. Replace 25% with whatever you want */ - .row__cell--1/4 { - flex: 0 0 25%; - } - - .row__cell--fill { - flex: 1; - } - `} - > -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
- - - - - - ); -}; - -export default Details; diff --git a/patterns/simple-grid/Cover.tsx b/patterns/simple-grid/Cover.tsx deleted file mode 100644 index 45e055f..0000000 --- a/patterns/simple-grid/Cover.tsx +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index f8dea95..bb8d185 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -71,6 +71,7 @@ @import './patterns/search-box'; @import './patterns/separator'; @import './patterns/sidebar'; +@import './patterns/simple-grid'; @import './patterns/slider'; @import './patterns/spin-button'; @import './patterns/stacked-cards'; diff --git a/styles/patterns/_simple-grid.scss b/styles/patterns/_simple-grid.scss new file mode 100644 index 0000000..fc55790 --- /dev/null +++ b/styles/patterns/_simple-grid.scss @@ -0,0 +1,32 @@ +.simple-grid { + display: flex; + + margin-left: -0.25rem; + margin-right: -0.25rem; + + /* Demo */ + margin-bottom: 0.25em; + margin-top: 0.25em; + height: 100%; + width: 100%; +} + +.simple-grid__cell { + padding-left: 0.25rem; + padding-right: 0.25rem; +} + +/* Cell with given width */ +.simple-grid__cell--1\/2 { + flex: 0 0 50%; +} +.simple-grid__cell--1\/3 { + flex: 0 0 33.3333333%; +} +.simple-grid__cell--1\/4 { + flex: 0 0 25%; +} + +.simple-grid__cell--fill { + flex: 1; +} \ No newline at end of file