From cd700fb7378cae4903e69f352cb4c3f16de55a2a Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 19 Sep 2022 18:34:42 +0700 Subject: [PATCH] feat: Feature list --- .eleventy.js | 6 +- contents/_includes/patterns/feature-list.njk | 16 +++ contents/feature-list.md | 55 ++++++++++ contents/index.njk | 6 ++ pages/feature-list/index.tsx | 101 ------------------- patterns/feature-list/Cover.tsx | 64 ------------ styles/index.scss | 1 + styles/patterns/_feature-list.scss | 20 ++++ styles/placeholders/_circle.scss | 13 ++- 9 files changed, 113 insertions(+), 169 deletions(-) create mode 100644 contents/_includes/patterns/feature-list.njk create mode 100644 contents/feature-list.md delete mode 100644 pages/feature-list/index.tsx delete mode 100644 patterns/feature-list/Cover.tsx create mode 100644 styles/patterns/_feature-list.scss diff --git a/.eleventy.js b/.eleventy.js index fe26e80..47d4bfc 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -28,8 +28,10 @@ module.exports = function(eleventyConfig) { `; }); - eleventyConfig.addShortcode('circle', function() { - return `
`; + // `size` can be `sm`, `md`, `lg` + eleventyConfig.addShortcode('circle', function(size) { + const s = size || 'sm'; + return `
`; }); // `direction` can be `hor` or `ver` eleventyConfig.addShortcode('line', function(dir) { diff --git a/contents/_includes/patterns/feature-list.njk b/contents/_includes/patterns/feature-list.njk new file mode 100644 index 0000000..c146596 --- /dev/null +++ b/contents/_includes/patterns/feature-list.njk @@ -0,0 +1,16 @@ +
+
+ {% circle "md" %} +
+
+ {% lines "hor", 5 %} +
+
+
+
+ {% circle "md" %} +
+
+ {% lines "hor", 5 %} +
+
\ No newline at end of file diff --git a/contents/feature-list.md b/contents/feature-list.md new file mode 100644 index 0000000..8b6dde7 --- /dev/null +++ b/contents/feature-list.md @@ -0,0 +1,55 @@ +--- +layout: layouts/post.njk +title: Feature list +description: Create a feature list with CSS flexbox +keywords: css feature list, css flexbox +--- + +## HTML + +```html + +
+ +
+ ... +
+ + +
+ ... +
+
+ + +... +``` + +## CSS + +```css +.feature-list { + display: flex; + + /* OPTIONAL: Spacing between items */ + margin: 0.5rem 0; +} + +/* Reverse the order of image and content */ +.feature-list--reverse { + flex-direction: row-reverse; +} + +.feature-list__image { + width: 2rem; +} + +.feature-list__desc { + /* Take the remaining width */ + flex: 1; +} +``` + +{% demo %} +{% include "patterns/feature-list.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 6bc64df..ce91a8a 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -133,6 +133,12 @@ eleventyExcludeFromCollections: true
Feature comparison
+
+ +
{% include "patterns/feature-list.njk" %}
+
Feature list
+ +
diff --git a/pages/feature-list/index.tsx b/pages/feature-list/index.tsx deleted file mode 100644 index 84da562..0000000 --- a/pages/feature-list/index.tsx +++ /dev/null @@ -1,101 +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 Block from '../../placeholders/Block'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Circle from '../../placeholders/Circle'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - -
- -
- ... -
- - -
- ... -
-
- - -... -`} - css={` - .container { - display: flex; - - /* OPTIONAL: Reverse the order of image and content */ - flex-direction: row-reverse; - - /* OPTIONAL: Spacing between items */ - margin: 16px 0; - } - - .container__image { - width: 128px; - } - - .container__feature { - /* Take the remaining width */ - flex: 1; - } - `} - > -
-
-
-
- -
-
-
- -
- -
-
-
-
- -
-
-
- -
- -
-
-
-
- - - - - ); -}; - -export default Details; diff --git a/patterns/feature-list/Cover.tsx b/patterns/feature-list/Cover.tsx deleted file mode 100644 index b53918c..0000000 --- a/patterns/feature-list/Cover.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import * as React from 'react'; - -import Circle from '../../placeholders/Circle'; -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; -import Rectangle from '../../placeholders/Rectangle'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
- -
-
-
- -
-
- -
-
- -
-
- -
-
-
-
-
- -
-
-
- -
-
- -
-
- -
-
- -
-
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index e1136a5..cf368bf 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -31,6 +31,7 @@ @import './patterns/drop-cap'; @import './patterns/fading-long-section'; @import './patterns/feature-comparison'; +@import './patterns/feature-list'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_feature-list.scss b/styles/patterns/_feature-list.scss new file mode 100644 index 0000000..a4d16d5 --- /dev/null +++ b/styles/patterns/_feature-list.scss @@ -0,0 +1,20 @@ +.feature-list { + display: flex; + + /* OPTIONAL: Spacing between items */ + margin: 0.5rem 0; + width: 100%; +} + +.feature-list--reverse { + flex-direction: row-reverse; +} + +.feature-list__image { + width: 2rem; +} + +.feature-list__desc { + /* Take the remaining width */ + flex: 1; +} \ No newline at end of file diff --git a/styles/placeholders/_circle.scss b/styles/placeholders/_circle.scss index 8757981..68392dc 100644 --- a/styles/placeholders/_circle.scss +++ b/styles/placeholders/_circle.scss @@ -1,6 +1,15 @@ .circle { background: rgba(0, 0, 0, .3); border-radius: 9999px; - height: 0.5rem; - width: 0.5rem; + height: var(--var-circle-size); + width: var(--var-circle-size); +} +.circle--sm { + --var-circle-size: 0.5rem; +} +.circle--md { + --var-circle-size: 2rem; +} +.circle--lg { + --var-circle-size: 4rem; } \ No newline at end of file