How to use Foundation 6
frameworks stop lame works
To be honest, Foundation is not for the weak of heart. It is much easier to use other frameworks and you might even have fun using them, but Foundation is not like those other girls. It will try your patience and cause frustration, but the end result is something that can only be described as love.
Here I will teach you how to install Foundation and also spotlight some parts of Foundation that makes it very powerful.
INSTALLATION
There is one thing to keep in mind before you install Foundation.
- Foundation needs nodejs in order to be installed
- nodejs version must be v10.x or lower.
My installation for the current Foundation does not work without bugs on a higher nodejs version, for mac at least. You can use
nvm use your-node-versionwith “nvm use” you can switch to other nodejs versions that you have installed on your computer.
STEP 1
Got to Foundation and read all the instructions. After you do that say to yourself “I am an adult so I will use the command line”
STEP 2
npm install foundation-sitesType this in your command line. If you get saying npm is not a command please go install nodejs and stop skipping steps :)
npm install --global foundation-cli or
sudo npm install --global foundation-cliAny errors about permissions just mean you have to type sudo then the command.
Yay! if you didnt skip steps and the computer overlords were kind, you should have Foundation installed on your computer, and can be initialized in any directory.
To initialize foundation all you have to do is go to the directory and type
foundation new When you type that some wizardry should happen and you should be prompted to choose which foundation you need.
unless you know you need the email, always pick the first option (site), and you should be prompted to enter your project name.
Foundation Tips
The biggest tip I can give someone using Foundation is to be careful of examples online. If you see any examples that use HTML class names like
- row
- column
Stay away! That is the old foundation 5.x and below. We are in the big leagues with foundation 6. Your HTML class list should have classes like
- grid-x
- grid-y
- grid-frame
- orbit
As you use Foundation, you will start to be able to tell what code is old and what is new, and what will be carried over.
Carousels are a website's best friend. They are a fantastic way to show data without crowding the site. Foundation 6 does this wonderfully.
Let's start with the components of a carousel from Foundation.
The frame is first.
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit></div>
This is the basic wrapper (but I'm not a rapper) div that holds the carousel
The tags “role” and “aria-label” are used for site readers and are not part of the carousel construction but should be included.
<div class="orbit-controls"> <button class="orbit-previous">◀︎</button>
<button class="orbit-next">▶︎</button>
</div>
The first element inside the container should be the buttons to move the carousel back and forth. The elements inside the button are Unicode for the buttons.
After the orbit-controls but inside the orbit container all you need for slides is a <ul> tag and each slide is an <li> tag. its that simple. you have to add some classes but that is it ! Here is the final code
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit></div>
<div class="orbit-controls"> <button class="orbit-previous">◀︎</button>
<button class="orbit-next">▶︎</button>
<ul class="orbit-container">
<li class="is-active orbit-slide">
<img class="orbit-image"src="https://placehold.it/1200x600/999?text=Slide-1" alt="Space"> </li> </ul> </div></div>
To add an extra slide you just add another “li” and anything in the “li” will be shown in the slide.
This concludes my Foundation foundations. Hopefully I have gotten your feet wet and you will want to give foundation a try.
