From b6fa7747475c46fdd896be43a39656cf1530e8a7 Mon Sep 17 00:00:00 2001 From: RafiBomb Date: Tue, 30 May 2017 13:09:51 -0700 Subject: [PATCH] renames prototype page and updates intro copy --- .../{prototyping.md => prototyping-utils.md} | 127 ++++++++++-------- docs/partials/component-list.html | 1 + 2 files changed, 69 insertions(+), 59 deletions(-) rename docs/pages/{prototyping.md => prototyping-utils.md} (88%) diff --git a/docs/pages/prototyping.md b/docs/pages/prototyping-utils.md similarity index 88% rename from docs/pages/prototyping.md rename to docs/pages/prototyping-utils.md index a09bf25ed..e57a8824d 100644 --- a/docs/pages/prototyping.md +++ b/docs/pages/prototyping-utils.md @@ -1,19 +1,27 @@ --- title: Prototyping Utilities -description: Utility Toolkit for quickly fleshing out the skeletal sketches and mockups into hi-fi prototype's +description: Quickly prototype layouts and UI with Foundation's Prototyping Utilities. These optional classes and mixins are great realizing your sketches and mockups into hi-fi coded prototype's ultra fast. sass: - scss/prototype/*.scss --- -Prototyping utilities helps you to make prototypes from simple sketches and mockups quickly. Foundation provides you with a utility toolkit that you can use for your prototyping project and quickly create a fully-functional and responsive prototypes. Just fire in these simple and reusable classes and you are done. +

Prototype to Production

-At the same time, we also understand that prototypes are not always required for every single projects and there are many cases specially in bigger projects where you have the time to show up your skill with both design & code and so, prototype mode is **disabled by default!** +Prototyping allows us to see problems more clearly—and often earlier—in the development process. Designs in sketches or wireframes only get us so far in understanding the behavior, feasibility, and cost (time or resources) of implimentation. Prototyping processes foster collaboration where designers and developers work closely together find better solutions. + +Sometimes prototype code is meant the be thrown away, and that's ok. While in early stage development it's extremely valuable to get ideas and interactions up and shared with stakeholders for scruitiny. This is how ideas get fleshed out and improved. It's not code we're delivering, it's a solution to a problem. Get the idea out, get feedback, iterate, repeat. Then when all parties are satisfied the right approach is being taken, go back to clean it up and refactor. + +Foundation's Prototyping Utilities help you build coded prototypes from scratch ultra-fast. This allows you to get to right answer faster through feedback and experimentation. From positioning to visual styles, there are a range of utilities to choose from. Every Utility has a mixin, so you can use your own custom classes or swap classes for mixins in production for cleaner markup. + +#### Prototype mode is **disabled by default!** + +Not all projects require Prototyping Utilities and adding utility classes like these increase your CSS file size especially if you're not using all of them. For these reasons Prototype mode is *disabled by default*.

- Many Prototype classes use `!important` to ensure that these they aren't overriden by more specific selectors. This framework conscientiously avoids using `!important` declarations. Please note that we have only inserted `!important` on those specific **CSS** properties which we are fully sure that values of those properties shouldn't be overridden. + Many Prototype classes use `!important` to ensure that these they aren't overriden by more specific selectors. This framework conscientiously avoids using `!important` declarations. Please note that we have only inserted `!important` on those specific **CSS** properties which in no case should be overridden.

-
+ --- @@ -33,12 +41,13 @@ If you use the `foundation-everything()` mixin in your main Sass file, just pass @include foundation-everything($prototype: true); ``` -If you included each component manually (like our starter projects do), open up your main **scss** file and simply add +If you included each component manually (like our starter projects do), open up your `app.scss` file and simply add: ```scss @include foundation-prototype-classes; ``` -or, if you looking for specific utility instead of all, these helper classes can be included individually like. Also, for your ease full list is also included below. + +You can instead import only the specific utility classes that you need. To make it easy, the full list is included below: ```scss @include foundation-prototype-typescale; @@ -190,7 +199,7 @@ These `.rounded`, `.bordered` & `.shadow` classes can be used independently or t ```html -``` +```
@@ -211,7 +220,7 @@ This creates a tiny separator below the heading of an element and is usually use

Lorem

Ipsum Dolor

Tempor

-``` +```
@@ -238,7 +247,7 @@ You can use font styling to style your text. You can change the font styling by

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Perspiciatis tempore cumque, magni aspernatur, quidem. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

Lorem minus, placeat, cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.iure voluptas aliquam tempora neque?

-``` +``` --- @@ -270,7 +279,7 @@ Adjust font-size by overriding an element’s default size.
        -``` +``` #### Ordered Lists @@ -283,7 +292,7 @@ Adjust font-size by overriding an element’s default size.
              -``` +``` --- @@ -304,13 +313,13 @@ You might want to include a logo on the page but you also would like to use a te ### Text Transformation -Text transformation lets you control the capitalization of text. You can change the text transformation by adding `.text-uppercase`, `text-lowercase`, `text-capitalize` to an element. +Text transformation lets you control the capitalization of text. You can change the text transformation by adding `.text-uppercase`, `text-lowercase`, `text-capitalize` to an element. ```html

              -``` +```

              This is a upper-cased text. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

              @@ -330,7 +339,7 @@ Text Decoration can be used to underline, overline, or line-through a text. You

              Lorem ipsum dolor sit amet, consectetur adipisicing elit.

              Perspiciatis tempore cumque, magni aspernatur, quidem

              Lorem minus, placeat, iure voluptas aliquam tempora neque?

              -``` +``` --- @@ -340,7 +349,7 @@ The `text-truncate` displays an elipsis when the text must be in a single straig ```html_example

              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!

              -``` +``` --- @@ -350,7 +359,7 @@ If you would like to prevent the text wrapping into the next line you can utiliz ```html

              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!

              -``` +``` ### Text Wrap @@ -358,13 +367,13 @@ Oppositely, if you are looking for text wrapping into the next line, you can use ```html

              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam voluptatem similique officiis recusandae esse cum in totam quisquam perspiciatis quod! Magnam culpa vitae, tempore eos explicabo cupiditate. Deserunt, quisquam, quos!

              -``` +``` --- ## Margin Helpers -Generate spaces around the element with these easy to use margin classes. +Generate spaces around the element with these easy to use margin classes.
              Please note that here below, `1 = 1 * $global-margin` and so on. By default `$global-margin` is equal to `1rem` which you can easily customize through [Sass Variables](#sass-variables). @@ -377,7 +386,7 @@ Generate spaces around the element with these easy to use margin classes.
              -``` +``` #### Margin Top @@ -386,7 +395,7 @@ Generate spaces around the element with these easy to use margin classes.
              -``` +``` #### Margin Bottom @@ -395,7 +404,7 @@ Generate spaces around the element with these easy to use margin classes.
              -``` +``` #### Margin Left @@ -404,7 +413,7 @@ Generate spaces around the element with these easy to use margin classes.
              -``` +``` #### Margin Right @@ -413,7 +422,7 @@ Generate spaces around the element with these easy to use margin classes.
              -``` +``` #### Margin Left Right (Horizontal Axis) @@ -422,7 +431,7 @@ Generate spaces around the element with these easy to use margin classes.
              -``` +``` #### Margin Top Bottom (Vertical Axis) @@ -431,7 +440,7 @@ Generate spaces around the element with these easy to use margin classes.
              -``` +``` #### Margin: Usage as a Mixin @@ -441,7 +450,7 @@ Generate spaces around the element with these easy to use margin classes. } ``` -This above code will generate the below output +This above code will generate the below output ```scss .foo { @@ -470,7 +479,7 @@ Generate spaces around the content with these easy to use padding classes.
              -``` +``` #### Padding Top @@ -479,7 +488,7 @@ Generate spaces around the content with these easy to use padding classes.
              -``` +``` #### Padding Bottom @@ -488,7 +497,7 @@ Generate spaces around the content with these easy to use padding classes.
              -``` +``` #### Padding Left @@ -497,7 +506,7 @@ Generate spaces around the content with these easy to use padding classes.
              -``` +``` #### Padding Right @@ -506,7 +515,7 @@ Generate spaces around the content with these easy to use padding classes.
              -``` +``` #### Padding Left Right (Horizontal Axis) @@ -515,7 +524,7 @@ Generate spaces around the content with these easy to use padding classes.
              -``` +``` #### Padding Top Bottom (Vertical Axis) @@ -524,7 +533,7 @@ Generate spaces around the content with these easy to use padding classes.
              -``` +``` #### Padding: Usage as a Mixin @@ -534,7 +543,7 @@ Generate spaces around the content with these easy to use padding classes. } ``` -This above code will generate the below output +This above code will generate the below output ```scss .bar { @@ -561,7 +570,7 @@ These width and height classes helps you to easily make an element as wide or as
              -``` +``` #### Height @@ -572,21 +581,21 @@ These width and height classes helps you to easily make an element as wide or as
              -``` +``` --- -## Border box +## Border box Border box lets you only add the content, padding and border, but not the margin within the width and height css properties. ```html
              -``` +``` --- -## Border none +## Border none Border none lets you quickly resets border to `none` into any component. @@ -594,7 +603,7 @@ Border none lets you quickly resets border to `none` into any component.
              Hi! I am a callout with no Borders
              -``` +``` --- @@ -607,7 +616,7 @@ Display classes helps to display the elements in specific positions inside any o
              -``` +``` By default, we have just added the most used display classes. but as you would know, there are many other display classes as specified by MDN [here](https://developer.mozilla.org/en-US/docs/Web/CSS/display). If you need some of those classes, then you can add them easily through Sass variables with `$prototype-display`. Sass Reference [here](#sass-reference) @@ -619,7 +628,7 @@ By default, we have just added the most used display classes. but as you would k ## Positioning -Positioning is very helpful and basic need for complex layouts. +Positioning is very helpful and basic need for complex layouts. ```html
              @@ -628,7 +637,7 @@ Positioning is very helpful and basic need for complex layouts.
              -``` +``` #### Positioning: Usage as a Mixin @@ -638,14 +647,14 @@ Positioning is very helpful and basic need for complex layouts. } ``` -This above code will generate the below output +This above code will generate the below output ```scss .foo { position: fixed !important; top: 1rem !important; right: 2rem !important; - bottom: 0rem !important; + bottom: 0rem !important; } ``` @@ -655,15 +664,15 @@ See how `left` offset wasn't printed as this mixin also accept `null` as a value ## Overflow -These overflow classes helps you to clip content, render scrollbars or simply just display the content when it overflows its block level container. +These overflow classes helps you to clip content, render scrollbars or simply just display the content when it overflows its block level container. -#### All sides +#### All sides ```html
              -``` +``` #### Horizontal Axis @@ -671,7 +680,7 @@ These overflow classes helps you to clip content, render scrollbars or simply ju
              -``` +``` #### Vertical Axis @@ -679,11 +688,11 @@ These overflow classes helps you to clip content, render scrollbars or simply ju
              -``` +``` --- -## Sass Mixin Helpers +## Sass Mixin Helpers We also provides some extra utility mixins that you can use for your next prototype project. @@ -691,7 +700,7 @@ We also provides some extra utility mixins that you can use for your next protot This mixin helps you to easily create a square, rectangle or a circle. Sass Reference [here](#box) -```scss +```scss .foo { @include box(1rem, 2rem); // Rectangle } @@ -701,12 +710,12 @@ This mixin helps you to easily create a square, rectangle or a circle. Sass Refe .baz { @include box(1rem, $circle: true); // Circle } -``` +``` -### Rotate Mixin +### Rotate Mixin These Rotate mixins lets you rotate an element to a certain degree. -```scss +```scss .foo { @include rotate(30); // 30 Degree } @@ -719,14 +728,14 @@ These Rotate mixins lets you rotate an element to a certain degree. .shaz { @include rotateZ(120); // 120 Degree } -``` +``` ### Relational Mixins These relational mixins helps you to manage styling of :nth-child’ified elements through easy Sass mixins. ```scss -@include first($num) {} +@include first($num) {} @include first-child {} @include last($num) {} @include last-child {} @@ -746,4 +755,4 @@ These relational mixins helps you to manage styling of :nth-child’ified elemen @include odd-between($first, $last) {} @include number-between($num, $first, $last) {} ``` - \ No newline at end of file + diff --git a/docs/partials/component-list.html b/docs/partials/component-list.html index 3047a06f7..b9a7cbfff 100644 --- a/docs/partials/component-list.html +++ b/docs/partials/component-list.html @@ -46,6 +46,7 @@ Grid Flex Grid Forms + Prototyping Utilities Visibility Classes Float Classes -- 2.47.2