diff --git a/contents/_includes/patterns/card-layout.njk b/contents/_includes/patterns/card-layout.njk new file mode 100644 index 0000000..c90b449 --- /dev/null +++ b/contents/_includes/patterns/card-layout.njk @@ -0,0 +1,5 @@ +
+ {% for i in range(0, 9) -%} +
{% rectangle "hor", "md", 100 %}
+ {%- endfor %} +
\ No newline at end of file diff --git a/contents/card-layout.md b/contents/card-layout.md new file mode 100644 index 0000000..a717b17 --- /dev/null +++ b/contents/card-layout.md @@ -0,0 +1,44 @@ +--- +layout: layouts/post.njk +title: Card layout +description: Create a card layout with CSS flexbox +keywords: css card layout, css flexbox, css layout +--- + +## HTML + +```html +
+ +
+ ... +
+ + + ... +
+``` + +## CSS + +```css +.card-layout { + display: flex; + + /* Put a card in the next row when previous cards take all width */ + flex-wrap: wrap; + + margin-left: -0.25rem; + margin-right: -0.25rem; +} + +.card-layout__item { + /* There will be 3 cards per row */ + flex-basis: 33.33333%; + + padding-left: 0.25rem; + padding-right: 0.25rem; +} +``` + +{% demo %}{% include "patterns/card-layout.njk" %}{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index bf31725..6bd8312 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -106,5 +106,12 @@ eleventyExcludeFromCollections: true +
+

Layout

+
+ {% pattern "Card layout" %}{% include "patterns/card-layout.njk" %}{% endpattern %} +
+
+ {% include "follow.njk" %} \ No newline at end of file diff --git a/pages/card-layout/index.tsx b/pages/card-layout/index.tsx deleted file mode 100644 index bae1ae7..0000000 --- a/pages/card-layout/index.tsx +++ /dev/null @@ -1,92 +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 ( - - - - - - - - - -
- ... -
- - - ... - -`} - css={` - .cards { - display: flex; - - /* Put a card in the next row when previous cards take all width */ - flex-wrap: wrap; - - margin-left: -8px; - margin-right: -8px; - } - - .cards__item { - /* There will be 4 cards per row */ - flex-basis: 25%; - - padding-left: 8px; - padding-right: 8px; - } - `} - > -
-
- {Array(10) - .fill(0) - .map((_, index) => { - return ( -
- -
- ); - })} -
-
- - - - - - ); -}; - -export default Details; diff --git a/patterns/card-layout/Cover.tsx b/patterns/card-layout/Cover.tsx deleted file mode 100644 index 440d488..0000000 --- a/patterns/card-layout/Cover.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
- {Array(9) - .fill(0) - .map((_, index) => { - return ( -
- -
- ); - })} -
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 702df5c..99c4548 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -17,6 +17,7 @@ @import './patterns/avatar-list'; @import './patterns/badge'; @import './patterns/button-with-icon'; +@import './patterns/card-layout'; @import './patterns/card'; @import './patterns/centering'; @import './patterns/chip'; diff --git a/styles/patterns/_card-layout.scss b/styles/patterns/_card-layout.scss new file mode 100644 index 0000000..5bda22b --- /dev/null +++ b/styles/patterns/_card-layout.scss @@ -0,0 +1,23 @@ +.card-layout { + display: flex; + + /* Put a card in the next row when previous cards take all width */ + flex-wrap: wrap; + + margin-left: -0.25rem; + margin-right: -0.25rem; + + /* Demo */ + width: 8rem; +} + +.card-layout__item { + /* There will be 3 cards per row */ + flex-basis: 33.33333%; + + padding-left: 0.25rem; + padding-right: 0.25rem; + + /* Demo */ + margin: 0.25rem 0; +} \ No newline at end of file