diff --git a/contents/_includes/patterns/holy-grail.njk b/contents/_includes/patterns/holy-grail.njk new file mode 100644 index 0000000..688e63d --- /dev/null +++ b/contents/_includes/patterns/holy-grail.njk @@ -0,0 +1,9 @@ +
+
{% rectangle %}
+
+
{% lines "hor", 4 %}
+
{% lines "hor", 10 %}
+
{% lines "hor", 8 %}
+
+
{% rectangle %}
+
\ No newline at end of file diff --git a/contents/holy-grail.md b/contents/holy-grail.md new file mode 100644 index 0000000..1353f11 --- /dev/null +++ b/contents/holy-grail.md @@ -0,0 +1,62 @@ +--- +layout: layouts/post.njk +title: Holy grail +description: Create a holy grail layout with CSS flexbox +keywords: css flexbox, css holy grail layout, css layout +--- + +## HTML + +```html +
+
+ ... +
+
+ + + + +
...
+ + + +
+ +
+``` + +## CSS + +```css +.holy-grail { + display: flex; + flex-direction: column; +} + +.holy-grail__main { + /* Take the remaining height */ + flex-grow: 1; + + /* Layout the left sidebar, main content and right sidebar */ + display: flex; + flex-direction: row; +} + +.holy-grail__left { + width: 25%; +} + +.holy-grail__middle { + /* Take the remaining width */ + flex-grow: 1; +} + +.holy-grail__right { + width: 20%; +} +``` + +{% demo %}{% include "patterns/holy-grail.njk" %}{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 6bd8312..216e559 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -110,6 +110,7 @@ eleventyExcludeFromCollections: true

Layout

{% pattern "Card layout" %}{% include "patterns/card-layout.njk" %}{% endpattern %} + {% pattern "Holy grail" %}{% include "patterns/holy-grail.njk" %}{% endpattern %}
diff --git a/pages/holy-grail/index.tsx b/pages/holy-grail/index.tsx deleted file mode 100644 index ae7216d..0000000 --- a/pages/holy-grail/index.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; - -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import Block from '../../placeholders/Block'; -import BrowserFrame from '../../placeholders/BrowserFrame'; -import Rectangle from '../../placeholders/Rectangle'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - -
- ... -
-
- - - - -
...
- - - -
-
- ... -
- -`} - css={` - .container { - display: flex; - flex-direction: column; - } - - .container__main { - /* Take the remaining height */ - flex-grow: 1; - - /* Layout the left sidebar, main content and right sidebar */ - display: flex; - flex-direction: row; - } - - .container__left { - width: 25%; - } - - .container__middle { - /* Take the remaining width */ - flex-grow: 1; - } - - .container__right { - width: 20%; - } - `} - > -
-
-
- -
-
-
-
- -
-
- -
-
- -
-
-
-
- -
-
-
- - - ); -}; - -export default Details; diff --git a/patterns/holy-grail/Cover.tsx b/patterns/holy-grail/Cover.tsx deleted file mode 100644 index 6d1d456..0000000 --- a/patterns/holy-grail/Cover.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import * as React from 'react'; - -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 99c4548..0875572 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -42,6 +42,7 @@ @import './patterns/floating-label'; @import './patterns/folder-structure'; @import './patterns/full-background'; +@import './patterns/holy-grail'; @import './patterns/initial-avatar'; @import './patterns/input-addon'; @import './patterns/inverted-corners'; diff --git a/styles/patterns/_holy-grail.scss b/styles/patterns/_holy-grail.scss new file mode 100644 index 0000000..9a44f47 --- /dev/null +++ b/styles/patterns/_holy-grail.scss @@ -0,0 +1,43 @@ +.holy-grail { + display: flex; + flex-direction: column; + + /* Demo */ + border: 1px solid #d1d5db; + border-radius: 0.25rem; + height: 100%; + width: 100%; +} + +.holy-grail__header, +.holy-grail__footer { + padding: 0.25rem; +} + +.holy-grail__main { + border-top: 1px solid #d1d5db; + border-bottom: 1px solid #d1d5db; + + /* Take the remaining height */ + flex-grow: 1; + + /* Layout the left sidebar, main content and right sidebar */ + display: flex; + flex-direction: row; +} + +.holy-grail__left { + width: 25%; +} + +.holy-grail__middle { + border-left: 1px solid #d1d5db; + border-right: 1px solid #d1d5db; + + /* Take the remaining width */ + flex-grow: 1; +} + +.holy-grail__right { + width: 20%; +} \ No newline at end of file