diff --git a/11. Foundation/README.md b/11. Foundation/README.md index a1e8b02..5960c71 100644 --- a/11. Foundation/README.md +++ b/11. Foundation/README.md @@ -8,6 +8,155 @@ 1. Build Foundation using the CLI ## Describe what Foundation is + +Foundation is a front-end framework, much like Bootstrap, that aims to give you some bass styling and functionality for common elements you'll use + ## Download Foundation + +To download it: + +1. Go to https://foundation.zurb.com/ and click the "Download Foundation" button +1. You'll be taken to another page where you can select different versions of the framework +1. Choose "Download Everything" +1. Unzip the file downloaded +1. Open the `foundation-X.X.X-complete` dir in your code editor + ## Use some common Foundation elements + +Inside your downloaded directory, you'll see an index.html file which provides you lots of good examples for components you might want to use. Most notably: + +### Buttons + +```html +Simple Button +Success Btn +Alert Btn +Secondary Btn +``` + +### A Grid System + +Grid systems are great for laying out a site. Most sites adhere to a 12 vertical grid system, where the page is visually divided into 12 vertical columns (each with a gutter, or margin, between them): + +![](https://monikagarciaprado.files.wordpress.com/2015/01/columns-grid-web-design.png) + +Each visual element can take up somewhere between 1 and 12 of these columns. This make spacing uniform across the page, and brings a sense of cohesion to the visual design. + +```html +
+
+
+

This is a twelve cell section in a grid-x. Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.

+
+
+
+
+
+
+

Six cell

+
+
+
+
+

Six cell

+
+
+
+
+
+
+

Four cell

+
+
+
+
+

Four cell

+
+
+
+
+

Four cell

+
+
+
+``` + +**Note** that when declaring a cell, you can specify how many columns an element will take up at smaller sized screens: + +```html +
+
+

Four cell

+
+
+``` + +The above example takes up 4 columns in large screens, 4 columns in medium screens, and 4 columns in small screens. + +If you omit these classes, on the screen sizes, omitted, the cell will default to 12 columns. + +### Callouts + +Box off a section: + +```html +
+
So many components, girl!
+

A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.

+ Go to Foundation Docs +
+``` + +### Form elements: + +Most inputs don't need classes + +```html + + + + + +``` + +You can put inputs together with other elements: + +```html +
+ + .com +
+``` + +### BUT WAIT THERE'S MORE!! + +Visit [the docs](https://foundation.zurb.com/sites/docs/) for more information. Zurb has put a lot of effort into making the documentation easy to use, including videos! Just copy, paste, and modify all you want! + ## Build Foundation using the CLI + +You also have the option to create a foundation site using source code. To do this, we'll use an npm packaged called `foundation-sites` + +``` +sudo npm install --global foundation-cli +``` + +Now that you have that, you can do to following to create a new site: + +``` +foundation new +``` + +After following the prompts, you have a new site generate + +1. Open up the directory in your IDE. +1. Open the index.html in your browser +1. In your terminal, run: `npm run start` + +This will recompile your css files whenever you make a change. + +You can make edits in `scss/_settings.scss`. diff --git a/11. Foundation/student_labs/README.md b/11. Foundation/student_labs/README.md new file mode 100644 index 0000000..3db2829 --- /dev/null +++ b/11. Foundation/student_labs/README.md @@ -0,0 +1,4 @@ +# Lab + +1. Pick one of the templates on https://foundation.zurb.com/templates.html and see if you can replicate it +1. If you get stuck, download the code and see what they did!