From: RafiBomb Date: Wed, 10 May 2017 21:03:07 +0000 (-0700) Subject: adds codepen image logo and adds flexbox codepen links X-Git-Tag: v6.4.0-rc1~46^2~53 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=91ffde65bb0adbe40d7cc76c404778de8aee6c6c;p=thirdparty%2Ffoundation%2Ffoundation-sites.git adds codepen image logo and adds flexbox codepen links --- diff --git a/docs/assets/img/logos/cp1.svg b/docs/assets/img/logos/cp1.svg new file mode 100644 index 000000000..5805bca12 --- /dev/null +++ b/docs/assets/img/logos/cp1.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/img/logos/cp2.svg b/docs/assets/img/logos/cp2.svg new file mode 100644 index 000000000..a8f1f5531 --- /dev/null +++ b/docs/assets/img/logos/cp2.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + diff --git a/docs/assets/img/logos/cp3.svg b/docs/assets/img/logos/cp3.svg new file mode 100644 index 000000000..7daaa0f20 --- /dev/null +++ b/docs/assets/img/logos/cp3.svg @@ -0,0 +1,18 @@ + + + + + + + diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss index 0e9ae8f25..04db42096 100644 --- a/docs/assets/scss/docs.scss +++ b/docs/assets/scss/docs.scss @@ -157,3 +157,19 @@ a#notice { } } +.codepen-logo-link { + position: relative; + bottom: -1rem; + display: flex; + justify-content: flex-end; + + &.left { + justify-content: flex-start; + bottom: 0; + } + + img { + max-width: 200px; + height: 32px; + } +} diff --git a/docs/pages/flexbox.md b/docs/pages/flexbox.md index 63dfaa46c..ad7ab7eb2 100644 --- a/docs/pages/flexbox.md +++ b/docs/pages/flexbox.md @@ -66,6 +66,8 @@ To understand how these classes work, you need to understand the parent-child re Here's a basic example: when using the grid, a row is a flex parent, and a column is a flex child. +edit on codepen button + ```html
@@ -110,6 +112,8 @@ Horizontal alignment classes are applied to flex parents. Left alignment is the
+edit on codepen button + You might be wondering what the difference between `.align-justify` and `.align-spaced` is. A justified grid (`justify-content: space-between`) evenly distributes the space *between* each column. The first and last columns pin to the edge of the grid. A spaced grid (`justify-content: space-around`) evenly distributes the space *around* each column. This means there will always be space to the left of the first column, and to the right of the last column. @@ -133,6 +137,8 @@ Stretch alignment is the default. To set parent alignment, use these classes:

Note that with vertical alignment, we use the term "middle" for the midpoint, while with horizontal alignment, we use the term "center". As we can't have two CSS classes with the same name, thus we are using different terms.

+edit on codepen button + ```html_example
I'm in the middle!
@@ -156,6 +162,8 @@ To align an individual child, use the below classes. They use the same alignment - `.align-self-bottom` - `.align-self-stretch` +edit on codepen button + ```html_example
Align bottom
@@ -168,14 +176,16 @@ To align an individual child, use the below classes. They use the same alignment ### Central Alignment -Central alignment can be applied to a flex parent, which will centrally align all children's automatically. To set this to your layout, simply use the class: `.align-center-middle`. +Central alignment can be applied to a flex parent, which will centrally align all children horizontally and vertically automatically. To set this to your layout, simply use the class: `.align-center-middle`.

We are using `.text-center` class just for demo purposes here.

+edit on codepen button + ```html_example -
+
I am in the center-middle
I am also centrally located
@@ -198,12 +208,14 @@ And to change its flex direction from row to column you can use the helper class - `.flex-dir-column` - `.flex-dir-column-reverse` -For children, there are 3 quick helper classes +For children, there are 3 quick helper classes to apply the flex property. These control how the containers take up space relative to their siblings: - `.flex-child-auto` (auto size flex child) - `.flex-child-grow` (flex child that will grow to take up all possible space) - `.flex-child-shrink` (flex child that will shrink to minimum possible space) +edit on codepen button + ```html_example
@@ -217,19 +229,25 @@ For children, there are 3 quick helper classes
``` -All of these helper classes come in responsive varieties, prefixed with all of your named breakpoints. So you can do things like +All of these helper classes come in responsive varieties, prefixed with all of your named breakpoints. So you can do things like: + +edit on codepen button ```html_example -
-
-
Auto
-
Auto
-
Auto on Large
-
-
Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?
+
+
+
Auto
+
Auto
+
Auto on Large
+
Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?
+
``` +
+

Foundation's CSS is mobile first, so setting a class will apply to the small breakpoint and large unless overridden by a class for a larger breakpoint. Example: `class="flex-child-shrink large-flex-child-auto"` will be shrink on the small and medium breakpoints and then auto on large.

+
+ --- ## Helper Mixins