From b92b9b231d7e8dfc9611dfca262df7fa6fbe387d Mon Sep 17 00:00:00 2001 From: Chris Manson Date: Wed, 21 Aug 2019 21:46:15 +0100 Subject: [PATCH] implementing basic background shapes --- addon/styles/addon.css | 1 + addon/styles/background-shapes.css | 32 +++++++ addon/styles/components/es-page-header.css | 3 - addon/templates/components/es-page-header.hbs | 2 +- docs/concepts/background-shapes.md | 90 +++++++++++++++++++ public/images/boxes-bottom-continued.svg | 1 + public/images/boxes-bottom-light.svg | 1 + public/images/boxes-bottom.svg | 1 + public/images/boxes-top.svg | 1 + public/images/pattern-1.svg | 20 ----- public/images/swipe-bottom.svg | 1 + public/images/swipe-top.svg | 1 + 12 files changed, 130 insertions(+), 24 deletions(-) create mode 100644 addon/styles/background-shapes.css create mode 100644 docs/concepts/background-shapes.md create mode 100644 public/images/boxes-bottom-continued.svg create mode 100644 public/images/boxes-bottom-light.svg create mode 100644 public/images/boxes-bottom.svg create mode 100644 public/images/boxes-top.svg delete mode 100644 public/images/pattern-1.svg create mode 100644 public/images/swipe-bottom.svg create mode 100644 public/images/swipe-top.svg diff --git a/addon/styles/addon.css b/addon/styles/addon.css index c27e5d9f..2ceeb430 100644 --- a/addon/styles/addon.css +++ b/addon/styles/addon.css @@ -6,6 +6,7 @@ @import "helpers.css"; @import "layout.css"; @import "icon.css"; +@import "background-shapes.css"; @import "components/es-navbar.css"; @import "components/es-header.css"; diff --git a/addon/styles/background-shapes.css b/addon/styles/background-shapes.css new file mode 100644 index 00000000..9a888b87 --- /dev/null +++ b/addon/styles/background-shapes.css @@ -0,0 +1,32 @@ +.bg-shape-boxes { + background-image: url('/images/boxes-top.svg'); + background-repeat: no-repeat; + background-position: top right; +} + +.bg-shape-boxes-bottom { + background-image: url('/images/boxes-bottom-light.svg'); + background-repeat: no-repeat; + background-position: bottom right; +} + +.dark .bg-shape-boxes-bottom { + background-image: url('/images/boxes-bottom.svg'); +} + +.bg-shape-boxes-bottom + * { + background-image: url('/images/boxes-bottom-continued.svg'); + background-repeat: no-repeat; + background-position: top right; +} + +.bg-shape-swipe-top { + background: url(/images/swipe-top.svg) no-repeat top center; + background-size: contain; +} + +.bg-shape-swipe-bottom { + background-image: url('/images/swipe-bottom.svg'); + background-repeat: no-repeat; + background-position: bottom left; +} diff --git a/addon/styles/components/es-page-header.css b/addon/styles/components/es-page-header.css index 894272b8..2ad25ad4 100644 --- a/addon/styles/components/es-page-header.css +++ b/addon/styles/components/es-page-header.css @@ -1,9 +1,6 @@ .es-page-header { padding-top: 4.5rem; padding-bottom: 4.5rem; - background-image: url('/images/pattern-1.svg'); - background-repeat: no-repeat; - background-position: bottom right; } .es-page-header__title { diff --git a/addon/templates/components/es-page-header.hbs b/addon/templates/components/es-page-header.hbs index c2acaab1..eecb6a13 100644 --- a/addon/templates/components/es-page-header.hbs +++ b/addon/templates/components/es-page-header.hbs @@ -1,4 +1,4 @@ -
+

{{@headline}}

diff --git a/docs/concepts/background-shapes.md b/docs/concepts/background-shapes.md new file mode 100644 index 00000000..77dbff3b --- /dev/null +++ b/docs/concepts/background-shapes.md @@ -0,0 +1,90 @@ +# Background Shapes + +In the new design we have a number of background shapes that can be used to spruce up the design of sections of the website if necessary. + +## Background boxes + +To use the "background boxes" shape then you need to use the `bg-shape-boxes` css helper as follows + +```html +
+
+

Build with the teams that never stop shipping.

+

Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.

+
+
+

More stuff to show location of boxes

+
+
+``` + +There is an alternative "background boxes" shape that you can use with `bg-shape-boxes-bottom` that will automatically continue into the following dom node (e.g. the next div) + +```html +
+
+

Build with the teams that never stop shipping.

+

Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.

+
+
+
+
+

More content to show off the shapes

+

Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.

+
+
+``` + +If you are using the [PageHeader component](/components/page-header/) then you will automatically have `bg-shape-boxes-bottom` set and it will automatically continue into the next dom node: + +```html + + Go + +
+
+

Build with the teams that never stop shipping.

+

Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.

+
+
+``` + +## Swipes + +The other type of background shape is a "swipe" that can either be a swipe across the top of the section using `bg-shape-swipe-top` or a rectangle from the bottom of the section using `bg-shape-swipe-bottom`. + +```html +
+
+

Build with the teams that never stop shipping.

+

Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.

+
+
+

More stuff to show location of swipe

+
+
+

yes this needs quite a large section

+
+
+``` + +and then using the `bg-shape-swipe-bottom` we can get a shape for the bottom of a section: + +```html +
+
+

Build with the teams that never stop shipping.

+

Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you’ll be working with the same patterns these organizations use every step of the way.

+
+
+

More stuff to show location of swipe

+
+
+

yes this needs quite a large section

+
+
+``` diff --git a/public/images/boxes-bottom-continued.svg b/public/images/boxes-bottom-continued.svg new file mode 100644 index 00000000..e4492a07 --- /dev/null +++ b/public/images/boxes-bottom-continued.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/boxes-bottom-light.svg b/public/images/boxes-bottom-light.svg new file mode 100644 index 00000000..0ab645ea --- /dev/null +++ b/public/images/boxes-bottom-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/boxes-bottom.svg b/public/images/boxes-bottom.svg new file mode 100644 index 00000000..20dba6f6 --- /dev/null +++ b/public/images/boxes-bottom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/boxes-top.svg b/public/images/boxes-top.svg new file mode 100644 index 00000000..ff9eabdb --- /dev/null +++ b/public/images/boxes-top.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/pattern-1.svg b/public/images/pattern-1.svg deleted file mode 100644 index 451f0565..00000000 --- a/public/images/pattern-1.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - PAtttern - Created with Sketch. - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/public/images/swipe-bottom.svg b/public/images/swipe-bottom.svg new file mode 100644 index 00000000..6b37c9fc --- /dev/null +++ b/public/images/swipe-bottom.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/images/swipe-top.svg b/public/images/swipe-top.svg new file mode 100644 index 00000000..0d8d7e24 --- /dev/null +++ b/public/images/swipe-top.svg @@ -0,0 +1 @@ + \ No newline at end of file