From ff96c7c8561eece93f7278ea5eb33a28828df606 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 19 Sep 2022 12:11:42 +0700 Subject: [PATCH] feat: Add centering pattern --- contents/_includes/patterns/centering.njk | 4 ++ contents/centering.md | 28 +++++++++++ contents/index.njk | 6 +++ pages/centering/index.tsx | 59 ----------------------- patterns/centering/Cover.tsx | 37 -------------- styles/index.scss | 1 + styles/patterns/_centering.scss | 9 ++++ styles/placeholders/_line.scss | 5 ++ 8 files changed, 53 insertions(+), 96 deletions(-) create mode 100644 contents/_includes/patterns/centering.njk create mode 100644 contents/centering.md delete mode 100644 pages/centering/index.tsx delete mode 100644 patterns/centering/Cover.tsx create mode 100644 styles/patterns/_centering.scss diff --git a/contents/_includes/patterns/centering.njk b/contents/_includes/patterns/centering.njk new file mode 100644 index 0000000..487e394 --- /dev/null +++ b/contents/_includes/patterns/centering.njk @@ -0,0 +1,4 @@ +
+ {% circle %} + {% lines "hor", 5 %} +
\ No newline at end of file diff --git a/contents/centering.md b/contents/centering.md new file mode 100644 index 0000000..edd37a1 --- /dev/null +++ b/contents/centering.md @@ -0,0 +1,28 @@ +--- +layout: layouts/post.njk +title: Centering +description: Center an element with CSS flexbox +keywords: css centering, css flexbox +--- + +## HTML + +```html +
+ ... +
+``` + +## CSS + +```css +.centering { + align-items: center; + display: flex; + justify-content: center; +} +``` + +{% demo %} +{% include "patterns/centering.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index e981888..353cee5 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -43,6 +43,12 @@ eleventyExcludeFromCollections: true
Badge
+
+ +
{% include "patterns/centering.njk" %}
+
Centering
+ +
diff --git a/pages/centering/index.tsx b/pages/centering/index.tsx deleted file mode 100644 index 9f98624..0000000 --- a/pages/centering/index.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Circle from '../../placeholders/Circle'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - - ... - -`} - css={` - .container { - align-items: center; - display: flex; - justify-content: center; - } - `} - > -
- -
- -
-
- -
-
- -
-
- - - ); -}; - -export default Details; diff --git a/patterns/centering/Cover.tsx b/patterns/centering/Cover.tsx deleted file mode 100644 index 220f727..0000000 --- a/patterns/centering/Cover.tsx +++ /dev/null @@ -1,37 +0,0 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - -import * as React from 'react'; - -import Circle from '../../placeholders/Circle'; -import Frame from '../../placeholders/Frame'; -import Line from '../../placeholders/Line'; - -const Cover: React.FC<{}> = () => { - return ( - -
- -
- -
-
- -
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 14df02b..b5274e9 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -16,6 +16,7 @@ @import './patterns/avatar'; @import './patterns/avatar-list'; @import './patterns/badge'; +@import './patterns/centering'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_centering.scss b/styles/patterns/_centering.scss new file mode 100644 index 0000000..e7cb5b3 --- /dev/null +++ b/styles/patterns/_centering.scss @@ -0,0 +1,9 @@ +.centering { + align-items: center; + display: flex; + justify-content: center; + + /* Demo */ + flex-direction: column; + width: 6rem; +} \ No newline at end of file diff --git a/styles/placeholders/_line.scss b/styles/placeholders/_line.scss index d5430bc..916dc46 100644 --- a/styles/placeholders/_line.scss +++ b/styles/placeholders/_line.scss @@ -9,6 +9,11 @@ height: 100%; width: 1px; } + +.lines { + margin: 0.5rem 0; + width: 100%; +} .lines .line { margin-bottom: 0.25rem; } \ No newline at end of file