IntroductionWelcome| 00:00 |
Hi, I'm Jen Kramer.
Welcome to Up and Running with Foundation.
| | 00:09 |
In this course I'll show you how to
download the Foundation frame work and
| | 00:12 |
integrated CSS and JavaScript into your
site.
| | 00:16 |
The we'll cover Foundation's responsive
twelve column grid systems.
| | 00:20 |
The small, the large and the block grids,
which make web page layouts quick to
| | 00:24 |
assemble with lots of flexibility.
We'll also look at the CSS styling that
| | 00:29 |
comes with Foundation, including the
right way to override and tweak those
| | 00:32 |
styles for your own sites.
We'll explore navigation systems that
| | 00:38 |
come with Foundation, including top nav,
side nav, breadcrumbs and drop-downs.
| | 00:44 |
Finally, I'll go over some cool
JavaScript effects that come with
| | 00:47 |
Foundation, including Orbit, the image
carousel, and Reveal, the modal window plug-in.
| | 00:54 |
So if you're ready, let's get started
with Up and Running with Foundation.
| | 00:58 |
| | Collapse this transcript |
| Using the exercise files| 00:00 |
Exercise files for this course have been
made available to all lynda.com subscribers.
| | 00:06 |
Simply download the files to your
computer, and place them on the desktop
| | 00:10 |
for ease of use.
The exercise files are organized by
| | 00:14 |
chapter number.
Whenever an exercise file is available
| | 00:17 |
for a video, you'll see yellow overlay,
at the bottom of the screen that
| | 00:21 |
indicates the location and the name of
the exercise file.
| | 00:26 |
If you are following this video from
start to finish, which is what I'd recommend.
| | 00:31 |
For Chapters two to four, you can
download the starting state HTML file for
| | 00:34 |
the first video and use it for each of
the succeeding videos in that chapter.
| | 00:40 |
For chapter five, there'll be a unique
HTML file for each video.
| | 00:45 |
If you're skipping around between videos
or if you get lost, there's a starting
| | 00:48 |
state HTML file available in each
chapter.
| | 00:52 |
Copy these HTML files from the exercise
files folder to your working directory.
| | 00:57 |
For me, this is the foundation folder
here on my desktop.
| | 01:01 |
You'll be creating this foundation folder
in the first few videos as you download
| | 01:04 |
foundation and start working with it.
In a few videos, I've given you some
| | 01:09 |
images to use.
Drag those images to the img folder,
| | 01:13 |
inside of your Foundation folder on the
desktop.
| | 01:17 |
In a few videos, I've also given you
snippets of HTML and/or CSS to include in
| | 01:22 |
your pages.
Copy and paste these snippets according
| | 01:25 |
to the directions that I give you.
Working with exercise files can add great
| | 01:30 |
value to the training.
However, if you don't wish to use these
| | 01:33 |
exercise files, you can still follow
along with the videos, often using your
| | 01:37 |
own files and have a fulfilling learning
experience.
| | 01:41 |
| | Collapse this transcript |
|
|
1. Foundation Introduction and DownloadWhat is Foundation?| 00:00 |
Foundation is a front end frame work
created by Zurb, a web design and
| | 00:04 |
development company, to streamline
building websites.
| | 00:08 |
Front end refers to the client side of
the website.
| | 00:11 |
That's the part of the website that's
displayed in the browser window that's
| | 00:14 |
visible to the public.
A framework is a bunch of codes that's
| | 00:18 |
been written for you already, which you
can use to build your website.
| | 00:22 |
Pre-written code?
That sounds like a terrible idea, doesn't it?
| | 00:26 |
It sounds like you can't adapt that code
to do anything.
| | 00:29 |
You can't make it match your Photoshop or
your fireworks design, you'll have to
| | 00:32 |
stick with whatever you're given.
A site built with foundation must be
| | 00:36 |
immediately recognizable, like the
default WordPress Joomla or Drupal
| | 00:40 |
templates and themes that are just so
instantly recognizable.
| | 00:45 |
Fortunately, that's not true.
Think of Foundation as a productivity
| | 00:48 |
tool for building responsive websites
quickly and easily.
| | 00:52 |
If you're not a designer, you'll love how
many elements of the webpage are designed
| | 00:56 |
for you, cleanly and simply, so that you
can make a reasonable looking website
| | 01:00 |
quickly, without worrying about all of
the design details.
| | 01:05 |
Designers will love how easily they are
able to overwrite colors and styles in
| | 01:09 |
Foundation, so that you can leverage
layouts and JavaScript effects, betweak
| | 01:12 |
the CSS to make the page look exactly the
way you want.
| | 01:17 |
Foundation supports Chrome, Firefox,
Safari, and Internet Explorer 9 and 10.
| | 01:23 |
It provides partial support for Internet
Explorer 7 and 8.
| | 01:27 |
If you need better support for Internet
Explorer 7, you might want to look at a
| | 01:30 |
different response of framework.
Bootstrap version 2 does support Internet
| | 01:36 |
Explorer 7 for example.
Foundation itself comes with required CSS
| | 01:40 |
and JavaScript, but there are a few
optional HTML layout files that you can
| | 01:44 |
use on your website.
A 12 column grid system is available, as
| | 01:49 |
well as multiple navigation systems and
some very cool JavaScript effects,
| | 01:53 |
including modal windows, an image
carousel, and so much more.
| | 01:59 |
You can find examples of sites built in
Foundation right on Foundation's home page.
| | 02:05 |
If you scroll on down to the bottom of
the page, you'll see some case studies
| | 02:08 |
here which will show you examples of
sites that are built with Foundation and
| | 02:11 |
a little bit of background on them, as
well as some examples of sites using
| | 02:14 |
foundation that are listed down here.
So let's go ahead and download Foundation
| | 02:20 |
and take a look at its file structure.
| | 02:23 |
| | Collapse this transcript |
| Downloading and unzipping Foundation| 00:00 |
Now that you know what Foundation is,
let's go ahead and get started by
| | 00:03 |
downloading a copy of Foundation.
I'm at the Foundation website, which is
| | 00:08 |
at foundation.zurb.com, and right here on
the homepage, they make it really easy
| | 00:12 |
for you.
There's a big honking button right here,
| | 00:17 |
that says Download Foundation 4.
Go ahead and click that button, and
| | 00:20 |
you'll be taken to a screen where you'll
have some options as to what you want to download.
| | 00:24 |
We're just going to click on the big blue
Download Foundation CSS, right here.
| | 00:29 |
And this is Foundation basically out of
the box.
| | 00:32 |
It contains all of the style sheets and
all of the JavaScript that you're going
| | 00:35 |
to need to build your Foundation website.
I will say that there are some ways that
| | 00:40 |
you can customize Foundation right from
this particular screen.
| | 00:44 |
So you could, Customize Foundation here.
This will give you a screen where you can
| | 00:48 |
setup exactly what it is you want to
download as part of Foundation.
| | 00:52 |
For example, if you didn't want to
download Foundation's Grid System you
| | 00:55 |
could turn off the boxes here for the
Grid.
| | 00:57 |
Or if you don't want the Navigation, you
can turn off bits and pieces of that.
| | 01:01 |
Or you could change some of the colors
that are associated with this and
| | 01:04 |
basically customize you copy of
Foundation.
| | 01:07 |
The advantage to doing this is you're
downloading only the code that you
| | 01:10 |
absolutely need to build your website.
That can be helpful to people who are
| | 01:14 |
very interested in making sites that are
really efficient and speed the download.
| | 01:19 |
And contain only the bare essentials that
are needed to work on their particular website.
| | 01:23 |
You're other option is to work with Sass.
Sass is a methodology for centralizing
| | 01:30 |
CSS variuables and so forth.
And you can download that with this
| | 01:34 |
button here.
But that's goiung to be beyond the scope
| | 01:36 |
of this course, I'll talk a little bit
more about that in the next video.
| | 01:40 |
What I'd like for you to do, because this
is an introductory up and running course.
| | 01:44 |
We're going to go ahead and download
absolutely everything and work with
| | 01:47 |
foundation exactly as it is out of the
box.
| | 01:50 |
So all you need to do is hit the Download
Foundation CSS button right here.
| | 01:54 |
And as you see from my tooltip, I'm
working with Foundation 4.0.9.
| | 01:59 |
It's expected that if you are watching
this video the versions of Foundation 4
| | 02:02 |
are going to be fairly similar to each
other.
| | 02:05 |
And you should be able to follow with
later versions of Foundation.
| | 02:08 |
So I'm going to go ahead and click that
button and I'm just going to have my
| | 02:12 |
zipped file open for me right here with
Windows Explorer.
| | 02:16 |
Or if you're on a Mac It'll open with
your default configuration.
| | 02:20 |
And all I'm going to do is Copy what's
inside of this folder into a folder, I'll
| | 02:25 |
make right here on my desktop.
So, I'm going to make a folder on my desktop.
| | 02:30 |
I'm just going to call it Foundation.
(SOUND).
| | 02:33 |
Inside of this folder that I've just
made, I am going to go ahead and copy
| | 02:37 |
those compressed files right here into
that folder.
| | 02:45 |
So once you have those files and folders
copied, you're all set.
| | 02:48 |
You can Close that compressed window that
happens to be open here.
| | 02:51 |
And in the next couple of videos, I'll
talk to you about what all those files
| | 02:54 |
are that we just downloaded.
And how you can make your first HTML page
| | 02:58 |
with Foundation
| | 02:59 |
| | Collapse this transcript |
| Customizing Foundation and a word about SASS and Compass| 00:00 |
I'm here on the download page on the
Foundation website.
| | 00:04 |
There are some customization options for
Foundation here towards the bottom of the page.
| | 00:10 |
These customization options are changes
that you can make to the CSS, but
| | 00:13 |
centrally, I had you download the default
configuration of Foundation.
| | 00:18 |
Which includes absolutely everything.
This screen will allow you to make some
| | 00:22 |
modifications to absolutely everything.
For example, you can choose not to
| | 00:26 |
download parts and Foundation.
Why would you do that?
| | 00:29 |
Well, if you're not going to use some
aspects of Foundation, you don't need to
| | 00:32 |
download them.
That will lead to smaller file sizes for
| | 00:36 |
your JavaScript and your CSS, which means
faster download times and a better
| | 00:39 |
experience for mobile users in
particular.
| | 00:43 |
Since this is an exploratory course in
Foundation, I've asked you to download
| | 00:46 |
everything with all of the defaults so
that you can easily follow along with me.
| | 00:51 |
If you'd like to make your own changes
and customizations the screen that's here
| | 00:55 |
that's part of the downloads is one way
of doing this.
| | 01:00 |
While this screen is simple to use, these
aren't the only variables in Foundation's CSS.
| | 01:05 |
In fact, if you make changes here, when
you upgrade to the next version of Foundation.
| | 01:09 |
You'll need to be careful to make sure
that you enter exactly the same values
| | 01:13 |
again when you download your next copy.
And you'll have to re-enter them again in
| | 01:17 |
this screen.
That might be an argument for not using
| | 01:20 |
this customization screen.
However, Foundation does give you greater
| | 01:24 |
control over your CSS using Compass and
Sass.
| | 01:28 |
Compass and Sass are CSS enhancements,
which allow you to better organize your
| | 01:31 |
styles into reusable codes making
variables, and other enhancements.
| | 01:36 |
Compass and Sass have their own learning
curve.
| | 01:39 |
So for the purposes of getting you
quickly up and running with Foundation,
| | 01:41 |
and to give you a sense of what
Foundation can do.
| | 01:44 |
I am not going to address these
technologies within this course.
| | 01:48 |
If you are familiar with Compass and
Sass, you can read the Foundation
| | 01:51 |
documentation to find out what you need
to download and to start customizing.
| | 01:56 |
And that information is here on the
foundation website at foundation.zurb.com.
| | 02:00 |
And if you take a look at the docs, which
you can get to by clicking on the DOCS
| | 02:03 |
button up here.
And then, click on Sass over here on the
| | 02:07 |
side, you'll get the instructions on how
to use the Sass version of Foundation.
| | 02:12 |
If you're not familiar with Sass, I
recommend that you watch Joe Marini's
| | 02:16 |
excellent course, CSS with Less and Sass.
Which is available here at Lynda.com.
| | 02:22 |
The other way to handle styling, and
Foundation is through the CSS that is provided.
| | 02:26 |
Plus writing your own styles and styles
overrides using conventional CSS.
| | 02:31 |
This is the approach that I will be using
with this course.
| | 02:34 |
This is a perfectly legitimate way to
work with Foundation.
| | 02:37 |
Although, the technology is older and it
definitely has some downsides.
| | 02:40 |
For example, you can't change a given
color or width or font with a single
| | 02:44 |
centralized change the way you can if you
make use of Compass and Sass.
| | 02:50 |
Ultimately if you want to continue
working with Foundation, you should make
| | 02:53 |
use of Compass and Sass
| | 02:56 |
| | Collapse this transcript |
| Examining Foundation files| 00:00 |
I am working inside of Sublime Text 2.
This is a free download that you can get
| | 00:06 |
for either the Mac or the PC, and I'm
going to be using it to edit my HTML and
| | 00:10 |
CSS files today.
It doesn't matter what HTML or CSS editor
| | 00:16 |
you use.
If there's something else that you
| | 00:19 |
prefer, you are more than welcome to go
ahead and use it instead of Sublime Text
| | 00:22 |
2, but Sublime Text 2 is becoming pretty
popular, particularly in the open source community.
| | 00:27 |
So I thought I'd go ahead and use that
today for editing these files.
| | 00:31 |
i've just gone ahead and I've opened up
Sublime Text 2, and there's two things
| | 00:34 |
that I need to do as soon as I open this
up.
| | 00:37 |
One, I need to open up the folder
associated with my project.
| | 00:41 |
This is kind of like setting up a
Dreamweaver site, and to do that all I
| | 00:45 |
need to do is go to Project, Add Folder
to Project, and I'm going to add my
| | 00:49 |
Foundation folder from my desktop.
That'll show me all of the folders and
| | 00:55 |
files that make up this Foundation site,
that I, going to be working on in the
| | 00:58 |
course of this video.
And the other thing I'm going to change
| | 01:02 |
is the color scheme.
By default, Sublime Text 2 comes with
| | 01:05 |
this sort of darker color scheme, and if
you go to Preferences > Color Scheme,
| | 01:09 |
there are many, many choices here.
I am going to go with iPlastic.
| | 01:15 |
Now, that I've got sublime text two set
up for working on Foundation, I just
| | 01:18 |
want to to give you a quick peek at the
files and folder that make up foundation itself.
| | 01:24 |
This is the foundation after we've just
downloaded it, we unzipped it, and this
| | 01:27 |
is what comes with it.
What you'll see here is folder called
| | 01:31 |
CSS, a folder called images and a folder
called JavaScript.
| | 01:36 |
Inside of the folder called CSS, you'll
find three files here.
| | 01:39 |
One is normalize.css.
You might already be familiar with
| | 01:44 |
normalize.css, it's used in a wide
variety of projects and places.
| | 01:48 |
If you just Google for normalize css, you
will find the actual project online.
| | 01:53 |
And what this does is, it normalizes all
of the padding and margins, and spacing
| | 01:58 |
and so forth associated with browser
defaults.
| | 02:02 |
It doesn't completely eliminate all of
the padding and spacing the way some of
| | 02:06 |
the reset CSS does.
In this case, for example, in a bulleted
| | 02:10 |
list, some browsers may set that up as a
padding that pushes those list items over
| | 02:14 |
from the side.
Some may set it up with a margin, what
| | 02:18 |
normalize will do is it will set that up
so that it's just margin or it's just
| | 02:21 |
padding with the same size.
So, that's what that style sheet is for,
| | 02:25 |
we're going to make a link to that.
Then you also have, copy of
| | 02:28 |
foundation.css, and foundation.min.css.
Foundation.css is all of the CSS
| | 02:32 |
associated with foundation, in a single
file and it's human readable.
| | 02:39 |
So if you ever need to refer to the
foundation styles and what they've done,
| | 02:42 |
you can take a look at that file and
actually be able to read it.
| | 02:46 |
The .min version, min stands for
minimize, that is the version of the CSS
| | 02:50 |
where all of the spacing and all of the
returns, and so forth have been pulled out.
| | 02:56 |
And essentially there's one line of code,
it is one extremely long line of code,
| | 02:59 |
but it's just one line of code.
So, that's what we're going to start with
| | 03:04 |
there for CSS.
And we will wind up making ourselves
| | 03:06 |
another style sheet, which we can just go
ahead and do right now.
| | 03:10 |
If I just take this document that's
already open and say, File>Save As.
| | 03:16 |
I am going to save this into my desktop,
into my Foundation folder inside of my
| | 03:22 |
CSS folder and I'm going to call this
app.css.
| | 03:27 |
That will become a style sheet that we
can add any custom styles that we want to add.
| | 03:32 |
I'm calling it app.css because that's
what they've actually called it in the
| | 03:35 |
foundation documentation.
You could call this style sheet whatever
| | 03:39 |
you want.
It doesn't really matter.
| | 03:41 |
But I'm going to call mine app.
There's actually no image files that ship
| | 03:44 |
with Foundation, although there is an
Images folder, and we will make use of
| | 03:47 |
that Images folder with the course of the
next few videos.
| | 03:51 |
Then we have a folder for JavaScript, and
inside of the JavaScript folder, we have
| | 03:54 |
several kinds of JavaScript.
So first of all, there's actual
| | 03:58 |
Foundation JavaScript.
And inside of that Foundation folder,
| | 04:02 |
you'll find the individual JavaScripts
that drive the various plugins that come
| | 04:06 |
with Foundation as well as just the core
foundation JavaScript.
| | 04:11 |
It's all here.
Notice that we also have an item here
| | 04:14 |
called foundation.min.js.
That is the minimized version, once
| | 04:19 |
again, of all of these Foundation
JavaScripts.
| | 04:23 |
What we will do is we will wind up
linking to the foundation.min.javascript.
| | 04:28 |
And that will give us absolutely
everything.
| | 04:30 |
We won't have to worry about whether
we've linked to the JavaScript as we are
| | 04:33 |
working with Foundation.
Finally under vendor, you'll see that we
| | 04:37 |
have a few extra files that are here.
There is this custom.modernizer.js.
| | 04:43 |
This of course is a derivation of the
Modernizer JavaScript.
| | 04:47 |
If you go and google for Modernizer,
you'll find that.
| | 04:49 |
This is Foundation's customized version
of that, which we'll be linking to.
| | 04:54 |
And then there is jQuery and Zepto.
So jquery, you are probably already
| | 04:57 |
familiar with.
Its a JavaScript library that has a whole
| | 05:00 |
bunch of stuff built into it that really
streamlines the process of building out
| | 05:03 |
JavaScript components.
And it's used by a lot of the foundation
| | 05:07 |
of the JavaScript we are going to be
working with.
| | 05:10 |
So, we need to include it.
Zepto builds on jQuery, and depending on
| | 05:14 |
whether the browser supports Zepto or it
supports jQuery, the correct JavaScript
| | 05:19 |
is going to load for us.
And I will show you how that works in a
| | 05:23 |
minute, but that's why we've got, all
three of those files that are located
| | 05:26 |
inside of this folder.
Then, finally, we have a humans.txt file
| | 05:30 |
which contains a little bit of
information about Foundation that's
| | 05:33 |
readable for humans.
We have the robots.txt file, which is
| | 05:37 |
information for search engine spiders.
And then we have index.html, which you
| | 05:41 |
could use as a starting document for
working with Foundation.
| | 05:45 |
What we're going to go ahead and do
though, is work with a starting document
| | 05:48 |
that I've given you inside of the
exercise files.
| | 05:51 |
The first thing I'm going to do is, I'm
going to go to File>Open File, and I'm
| | 05:55 |
going to go back to my desktop.
I'm going to go to my exercise files to
| | 06:00 |
chapter one, 104.
And I'm going to open up the HTML
| | 06:03 |
document here called Start.
So this gives us a starting point for our document.
| | 06:09 |
You may also want to go ahead and open up
the HTML document codes.
| | 06:15 |
Which I can just open right here inside
of Sublime Text, and refer to them.
| | 06:19 |
You can certainly open them inside of
anything that'll open a plain text file.
| | 06:23 |
So, notepad or plain text, or any of the
other things.
| | 06:26 |
Start.html is just a basic starting HTML
file.
| | 06:31 |
Notice that it is HTML5, which you can
see here right from line one.
| | 06:35 |
The DOCTYPE declaration is for HTML5, and
HTML5 is the only thing that Foundation 4 supports.
| | 06:41 |
You will have your usual opening and
closing head tags inside of that with
| | 06:45 |
your character sets and the HTML page
title.
| | 06:49 |
Your opening and closing body tags, and
your closing HTML tag.
| | 06:53 |
This type of document is something that's
pretty basic.
| | 06:55 |
It comes with most text editors right out
of the box.
| | 06:58 |
What we now need to do is add the
specific Foundation codes to this
| | 07:01 |
particular file.
First of all, after the DOCTYPE
| | 07:05 |
declaration, go ahead and copy these two
lines of code from the htmlcodes.text file.
| | 07:11 |
So, I'm going to go to Ctrl or Cmd+C to
copy that, and just after that
| | 07:16 |
DOCTYPE.html, Ctrl or Cmd+V to paste that
in place.
| | 07:22 |
This little bit of code is a test.
As you can see here, if something is in
| | 07:26 |
Internet Explorer 8, we're going to do
something.
| | 07:29 |
If it's greater than Internet Explorer 8,
we're going to to do something else, and
| | 07:32 |
that is to help with some various browser
compatibility issues.
| | 07:37 |
Then what we're going to add is, inside
of the head tag, we're going to add this
| | 07:41 |
line here, a meta tag.
Go ahead and copy that, and I'm just
| | 07:45 |
going to put that here, just after that
meta tag.
| | 07:48 |
this particular meta tag is useful in
responsive design.
| | 07:52 |
It helps to make sure that every device
is working at the device width rather
| | 07:56 |
than something larger or smaller than the
device width.
| | 08:00 |
Then we're going to link to three style
sheets.
| | 08:03 |
And I've actually already written the
links here for you.
| | 08:06 |
Ctrl or Cmd+C to copy.
I'm going to put these after the tittle
| | 08:10 |
tag, but before the slash head tag.
These three lines of code are the three
| | 08:14 |
lines of code that are going to call the
style sheets.
| | 08:17 |
What those include are the normalized.css
file that I mentioned before.
| | 08:21 |
You want to call that one first because
it's going to normalize all of the
| | 08:24 |
browser defaults.
Following that is going to be foundation.min.css.
| | 08:29 |
So once again, the minimized version of
the Foundation CSS has all the spaces and
| | 08:33 |
line breaks removed.
You're never going to edit that file,
| | 08:37 |
it's going to remain exactly the same all
the time.
| | 08:40 |
So you're just going to link to that
next.
| | 08:42 |
And then finally, your third line of code
here is going to be a link to the custom
| | 08:46 |
style sheet that we just created, called
app.css.
| | 08:50 |
Any time you want to work with
Foundation's default CSS, you want to
| | 08:54 |
override it, you're going to write an
override style inside of app.css.
| | 08:59 |
And I'll show you how to do that in a
later video.
| | 09:01 |
Then what we're going to do is, we're
going to include a link to the Modernizr JavaScript.
| | 09:08 |
And this is going to help with browser
compatibility and some other various issues.
| | 09:12 |
After our style sheets, we'll go ahead
and put in a link to the Modernizr JavaScript.
| | 09:18 |
We don't have to leave all these spaces
in here.
| | 09:20 |
I'm going to go ahead and remove those.
That's pretty much what we're going to
| | 09:24 |
need in head of this document.
Then, just before the slash body tag, we
| | 09:27 |
have a few other things we're going to
need to add.
| | 09:30 |
In the foot of the document just before
slash body, we're going to add all of
| | 09:33 |
these items.
So if you go ahead and copy this whole
| | 09:37 |
chunk of code here, we're going to paste
that in just before the slash body tag.
| | 09:42 |
And I'll tell you what all that stuff is.
The first block of code inside of the
| | 09:45 |
script tags.
This is the chunk of code that's going to
| | 09:48 |
test to see if your browser is going to
support Zepto.
| | 09:53 |
And if Zepto is supported, then it's
going to go ahead and load that
| | 09:55 |
JavaScript library.
If you can't support Zepto, then it will
| | 10:00 |
load the jQuery library instead.
The next line down is a call to the
| | 10:04 |
JavaScript for Foundation in the
minimized format, once again.
| | 10:09 |
And then finally, at the very bottom,
once we've loaded in either Zepto or jQuery.
| | 10:14 |
And once we've loaded in our JavaScript
Foundation file, we're going to
| | 10:18 |
initialize all of those JavaScripts using
this call right down here at the bottom
| | 10:22 |
on lines 25 through 27.
So, that's a lot of stuff to go ahead and
| | 10:27 |
set up your initial Foundation document.
What I recommend that you do at this
| | 10:31 |
point, is we're going to go ahead and do
a File>Save As.
| | 10:34 |
And I'm going to save this into my
desktop.
| | 10:40 |
I'm going to go to my Foundation folder.
And right here inside of the root of my
| | 10:45 |
Foundation folder, I'm just going to save
this as start.html.
| | 10:50 |
Every time I'm going to start a new
document, I'm just going to open up this document.
| | 10:56 |
And do a File>Save As, and that will
allow me to start writing my HTML without
| | 10:59 |
having to worry about constructing
another one of these documents again.
| | 11:04 |
I recommend you go ahead and do that as
well.
| | 11:07 |
So go ahead and save that, and now that
we have this document set up and ready to
| | 11:10 |
go, we can start taking a look at the
grid system inside of Foundation.
| | 11:15 |
| | Collapse this transcript |
|
|
2. The Grid System in FoundationIntroducing the small grid| 00:00 |
So let's go ahead and get started working
with the grid system inside a Foundation
| | 00:04 |
which is quite an extensive grid that
does a ton of different things.
| | 00:09 |
I wanted point out to you that this again
is the Foundation website at
| | 00:12 |
foundation.zerb.com there's plenty of
documentation here.
| | 00:17 |
If you go up to the link at the top right
here called docs.
| | 00:20 |
You'll have all the information here
about how to get started using foundation.
| | 00:24 |
Notice also here that there is an entire
section in the documentation on the grid.
| | 00:29 |
So you're welcome to come here and read
through the documentation about the grid
| | 00:32 |
and if you like get a little bit more
background on it.
| | 00:36 |
Learn a little bit more about it.
It also will have the background
| | 00:38 |
information about working with the mix
ins and Sass and so fourth I will not be
| | 00:42 |
covering that in my videos but the
information is here if you'd like to see it.
| | 00:48 |
I will be talking about the grid and the
block grid in the course of this
| | 00:50 |
particular chapter.
Let's start by getting our files in place
| | 00:55 |
for working with this next part of the
video.
| | 00:57 |
If you take a look inside of your
exercise files folder, go to chapter two
| | 01:01 |
and we're going to go to video number one
here.
| | 01:05 |
And inside of this are two images an HTML
file, so what you're going to do is in
| | 01:09 |
your Foundation folder, you'll drag the
two images.
| | 01:16 |
And you're going to put those into the
Images folder.
| | 01:19 |
And then grid here, I'm going to drop
into the main Foundation folder.
| | 01:24 |
Going forward, we're going to be building
everything in this chapter in this
| | 01:28 |
grid.html document.
I will give you the starting state in
| | 01:32 |
your exercise files if you want to jump
in somewhere else along the way.
| | 01:36 |
And you can start from that grid
document.
| | 01:38 |
But if you're following along with me,
you shouldn't have to use the exercise
| | 01:41 |
files for that grid, that HTML file,
going forward.
| | 01:45 |
So now that we've got those files
organized, lets go back to Sublime Text
| | 01:49 |
and you'll see that we have grid.html
here in our folders.
| | 01:54 |
So I'm going to go ahead and click on
that.
| | 01:56 |
And this actually just that start
document that I mentioned to you from the
| | 01:59 |
previous video.
So this is the starting state of writing
| | 02:03 |
a foundation document where we have all
of the links to style sheets,
| | 02:06 |
Javascripts, initializations, and
everything else that we need.
| | 02:11 |
So where I'm going to be coding here is
just after the body tag.
| | 02:13 |
As I mentioned before Foundation has a
12-column grid.
| | 02:19 |
There's actually several different types
of 12-column grids that Foundation has.
| | 02:24 |
One of these is what's called the small
grid.
| | 02:27 |
And the small grid is designed to be
exactly the same, whether the screen
| | 02:30 |
resolution is large or small.
So this was sort of the default grid that
| | 02:35 |
is going to adapt to whatever screen size
you're looking at.
| | 02:39 |
And if you have two columns on your
honking big desktop monitor when you go
| | 02:43 |
down to your tiny tiny mobile phone
you're still going to have two columns.
| | 02:48 |
The actual widths are going to change but
the proportion of those widths will
| | 02:52 |
remain the same.
Let's go ahead and take a look at how
| | 02:55 |
this is done.
First of all we have to start a row.
| | 02:58 |
So with Foundation, it's going to be a
div with a class of row.
| | 03:03 |
And as always you want to be sure that
you're going to end your divs.
| | 03:07 |
I like to make sure that they line up
nicely.
| | 03:11 |
Then inside of this, you can put whatever
you'd like to do.
| | 03:15 |
So let's say that we're going to have a
left column.
| | 03:17 |
That's about a quarter of the width of
the screen and at right column it's about
| | 03:20 |
three quarters of the width of the
screen.
| | 03:22 |
We can go ahead and do that with two more
of these.
| | 03:26 |
So I can say div with a class of small-3
columns.
| | 03:35 |
This is going to span three of the twelve
columns, that's what the small 3 is, and
| | 03:39 |
we're using the small grid.
So that's, it's small and columns
| | 03:43 |
indicates, of course, that this is going
to be columns as opposed to something else.
| | 03:49 |
Inside of this we can put anything we
want.
| | 03:52 |
So let's just say that I add a paragraph
here maybe that's just a simple little
| | 03:57 |
bit of text spanning 3 small columns
slash P.
| | 04:02 |
Now I have set up this first row here
with divs, you don't have to use div's
| | 04:07 |
you can use html 5 tags.
I will show you how to do that in just a
| | 04:13 |
second but first lets go ahead and add
the other side of this there are 3
| | 04:17 |
quarter sides or in this case of course
9, so div with class of small hyphen 9.
| | 04:25 |
Columns and don't forgot your slash div
and then in between we can go ahead and
| | 04:30 |
put some text here as well.
We'll just make it another paragraph.
| | 04:35 |
Spanning a big space of 9 columns.
No matter how big or small my page gets,
| | 04:46 |
there will always be 2 columns divided up
this way.
| | 04:55 |
Make it a nice long sentence, so you can
see how that works.
| | 04:58 |
Now I have my first row of this page.
And as you see here we have a small one
| | 05:02 |
quarter of the page and we have a larger
three quarters of the page.
| | 05:06 |
So if we save this, file save.
If you right-click here inside of your
| | 05:11 |
HTML page, you'll notice a link here to
open in browser.
| | 05:17 |
This is going to open in the default
browser for your computer.
| | 05:21 |
My computer happens to be set up with
Firefox as my default browser and Firefox
| | 05:24 |
is what I'll be using throughout this
course.
| | 05:27 |
You can certainly use Chrome or any other
browser that you choose though.
| | 05:31 |
So I'm going to go ahead and say open in
browser.
| | 05:33 |
And you'll see here my screen which is
1366 pixels wide.
| | 05:39 |
That I have my expanding three small
columns over on the left and my big space
| | 05:42 |
over on the right.
You'll also notice that this looks
| | 05:46 |
actually kind of centered on the page.
Foundation is set up with a maximum width
| | 05:50 |
and as the screen gets larger this is not
going to expand beyond that maximum width.
| | 05:55 |
And that is by design and of course you
can customize that if you wish, but that
| | 05:59 |
is Foundation out of the box.
As I make my screen smaller so I'm going
| | 06:04 |
to drag my corner of my browser here to
simulate what this will look like on
| | 06:07 |
progressively smaller screens.
And you can see that this grid system is
| | 06:12 |
maintained exactly the same way as I
continue on down the page.
| | 06:16 |
So I have set this up with just div tags
for right now.
| | 06:21 |
But there's nothing that says that I have
to use div tags in association with these
| | 06:24 |
particular classes.
We are working with HTML5 and there are
| | 06:28 |
semantic tags that are associated with
HTML5.
| | 06:32 |
So this first column here since it's a
small column over on the left, that might
| | 06:35 |
actually be better tagged as an aside.
Slash aside and this over here might
| | 06:43 |
actually be better set up as section
slash section.
| | 06:51 |
So I tend to put my HTML specific tag
closer to the actual text that's affected
| | 06:55 |
by it and I tend to use div class of row
around everything because it really is
| | 06:59 |
just sort of generically grouping these
tags.
| | 07:04 |
So that's the way that I'm doing it.
But there's nothing in Foundation that
| | 07:07 |
would suggest that you couldn't put a nav
or an aside or a section tag as part of
| | 07:10 |
your row instead, if you prefer to do
that.
| | 07:15 |
I've just added another section of HTML
here that's set up exactly the same way
| | 07:19 |
as I set up the previous section of HTML.
In this case, I have my row, which starts
| | 07:25 |
here on line 24 and it ends on line 31.
Inside of that I have a div with a class
| | 07:31 |
of small eight columns.
So, in other words, it's going to go
| | 07:35 |
about two thirds across the page, on the
left side.
| | 07:37 |
And inside of that I have one of my
images that I just copied on over from my
| | 07:41 |
exercise files.
And then on the other side I have a
| | 07:45 |
column with a four.
And inside of that is another image.
| | 07:51 |
So, that's that chunk of code.
If you go ahead and save this, you can go
| | 07:56 |
ahead and type this in right here from
the screen or if you check your exercise
| | 08:00 |
files you'll fine a text file.
You're more than welcome to go ahead and
| | 08:05 |
copy from the snippets and paste them
into your HTML document.
| | 08:09 |
And just continue to follow along with me
that way in the video.
| | 08:14 |
So now if I once again go ahead and right
click here and say open in browser,
| | 08:17 |
you'll see that I have my work from
before, the three columns and the nine
| | 08:20 |
columns up here on the top.
And then underneath I have my two images.
| | 08:26 |
If I make the page smaller, you'll see
that my images are scaling differently.
| | 08:32 |
And that is because of that grid and the
way that that grid is set up.
| | 08:36 |
To make this a little bit more clear, one
of the things that we can do is add one
| | 08:40 |
of those custom styles.
So I'm going to go ahead and do that.
| | 08:45 |
As you'll see here, all of our containers
for our content have a class of columns.
| | 08:52 |
So if you open up app.css.
We can add a style for columns.
| | 08:58 |
And I'm just going to keep this really
simple.
| | 09:01 |
I'm just going to say a border of one
pixels solid green.
| | 09:06 |
And if you save that and go back to your
webpage here and either refresh or
| | 09:10 |
redisplay it in the browser.
This will make it a little more clearer
| | 09:15 |
what's going on with the grid.
As I make the page smaller, you'll see
| | 09:18 |
that the grid collapses until it can't
collapse any more around that image.
| | 09:24 |
And then it starts to reduce the size of
the image.
| | 09:30 |
So you get a sense of how this grid is
working.
| | 09:32 |
So once again, this is the small grid and
it's designed to keep these columns
| | 09:35 |
exactly the same whether you're on a big
screen or a small screen.
| | 09:39 |
And some of the other grids that do
change as you go to smaller resolutions,
| | 09:42 |
we'll see in action in the next video.
In this next chunk of code, we have added
| | 09:47 |
another row to our grid.
In this case, I've divided the row into
| | 09:50 |
two equal pieces, and I've done that by
using small 6 columns.
| | 09:55 |
So once again, if you copy that code in
from your snippet page or you go ahead
| | 09:58 |
and type it in, save it and we'll save it
and we'll go ahead and preview this in
| | 10:01 |
our browser.
You'll see now that we have this
| | 10:06 |
additional row underneath and you'll see
the behavior as the page gets smaller.
| | 10:10 |
That it does in fact stay two equal sizes
as that page gets smaller and smaller
| | 10:14 |
inside of the browser window.
Finally in this last little bit of code
| | 10:20 |
that I've added, which is on lines 42
through 46 is a single really big column.
| | 10:26 |
It's going to go all the way across the
page just to show you that you don't have
| | 10:29 |
to divide it up.
In all of my examples, I've showed you
| | 10:32 |
two columns.
You can certainly have three, four, you
| | 10:34 |
can have 12 columns if you want or you
can also just have one and this is the
| | 10:36 |
way you would do it.
It would be small -12 columns and here's
| | 10:41 |
some text.
Now, once again, if you save this page
| | 10:45 |
and you preview this inside of your
browser, here we go.
| | 10:49 |
So you'll see we've continued to add to
our grid here and as I make this page
| | 10:52 |
smaller, the big column down here on the
bottom continues to be really big.
| | 10:58 |
And goes all the way across the page, no
matter how small or how big that page
| | 11:02 |
happens to be.
We've seen the small grid in action here,
| | 11:07 |
which is the very first part of the
foundation grid system.
| | 11:10 |
The small grid is designed to look the
same, proportionally speaking at large
| | 11:15 |
resolutions as it does at small
resolutions.
| | 11:19 |
In the next video we'll take a look at
the large grid system which does adapt as
| | 11:22 |
you go to smaller resolutions.
| | 11:24 |
| | Collapse this transcript |
| Introducing the large grid| 00:00 |
So, in our previous video, we took a look
at the small grid.
| | 00:03 |
This is the grid where the cells are
going to remain proportionately the same
| | 00:08 |
size as the screen re-sizes from a large
screen down to a small screen.
| | 00:14 |
The next grid I want to show you it how
works is the large grid, and the large
| | 00:18 |
grid is going to adapt as the screen
moves from a large format to a smaller format.
| | 00:23 |
And what it will do is it will stack the
cells on top of each other.
| | 00:27 |
This is more like the behavior that you
would see inside the Bootstrap grid
| | 00:32 |
framework for example.
I am working with grid.html.
| | 00:37 |
This is available to you in your
exerciser files folder if you don't
| | 00:40 |
already have it.
If you've followed along with me with the
| | 00:44 |
last video, I'm starting from the ending
point of that video.
| | 00:47 |
And I've added one custom style so far,
which is in app.css.
| | 00:52 |
You can copy that out of the exercise
files folder if you need to.
| | 00:55 |
I'm going to keep this page exactly the
same.
| | 00:57 |
I am just going to make a couple of quick
modifications.
| | 01:01 |
Everywhere it says small, I'm going to
change it to large.
| | 01:04 |
So, instead of small three columns, it
will be large three columns.
| | 01:07 |
Instead of small nine columns it will be
large nine columns.
| | 01:12 |
Alright, so I've changed small to large
on all of those classes here, in all of
| | 01:14 |
those divs, in all of these places.
Now, I'm to going to go ahead and save
| | 01:19 |
this, and I'm going to take a look at it
in my browser.
| | 01:23 |
So, if I say open in browser.
This looks shockingly similar to what we
| | 01:28 |
saw before with the small grid system.
But of course right now my browser is
| | 01:32 |
expanded completely, so that the screen
is large.
| | 01:35 |
Now, as I start to reduce the size of my
screen, you'll see how the grid responds.
| | 01:41 |
First, it responds as we have seen
before, and then at this break point,
| | 01:44 |
which occurs somewhere around 768 pixels,
our cells are going to stack on top of
| | 01:48 |
each other.
So, you've got where we use to have three
| | 01:52 |
and nine next to each other, now three
and nine are on top of each other.
| | 01:56 |
Likewise, eight and four are on top of
each other.
| | 01:59 |
Here's those two columns that are of
equal sizes on top of each other, and the
| | 02:02 |
one big column going across the page is
unaffected by going to a smaller resolution.
| | 02:09 |
Now as I continue to reduce the size of
my screen here towards mobile dimensions,
| | 02:12 |
you can see that everything is nicely
stacked on each other.
| | 02:17 |
And as I pull this screen apart again, my
columns will come back again.
| | 02:22 |
So far, we've seen the small grid system
that retains the layout as the page gets
| | 02:25 |
smaller, and the large grid layout, which
puts everything into a single column as
| | 02:29 |
the page gets smaller.
The next thing that you might want to do
| | 02:34 |
is ask whether you can combine these in
the same page, and in fact you can.
| | 02:39 |
I will show you how to do that in the
next video.
| | 02:41 |
| | Collapse this transcript |
| Combining small and large grids in a single page| 00:00 |
So, what if you want to have a one
multi-column layout for phones, and small
| | 00:04 |
screens, but maybe some sort of
multi-column layout for larger screens.
| | 00:09 |
Is that possible in anyway with
foundation?
| | 00:13 |
Well, it sure is.
And I'm going to show you how to set that
| | 00:16 |
up here in this next video by combining
the small grid and the large grid.
| | 00:23 |
So I have open here inside of supplying
text 2, grid.html, if you continue to
| | 00:27 |
watch these videos in order.
But this is the ending point of the
| | 00:31 |
previous video, you're all set to go.
Those of you who are jumping in, there is
| | 00:35 |
a grid.html file inside of your exercise
files folder that you can pull open and
| | 00:39 |
follow along.
As the page gets smaller, the text starts
| | 00:44 |
to overlap in the three and the nine
combination up here on the top.
| | 00:50 |
So what I'd like to do is I'd like to
change this layout.
| | 00:53 |
From one quarter, three quarter sort of
layout here, to what if it goes 50 50 as
| | 00:57 |
the screen gets smaller.
So we'll still have the two columns next
| | 01:01 |
to each other.
But they'll both take up half of the page.
| | 01:05 |
I can do that simply by adding another
class here.
| | 01:09 |
In addition to large three I'm going to
add small-6.
| | 01:12 |
And likewise down here in the second item
here small-6.
| | 01:19 |
Then of course I need to change my text
so instead of three small columns we'll
| | 01:26 |
say three large columns but six small
columns.
| | 01:33 |
And then down here a big space of nine
columns but a small space of six columns.
| | 01:42 |
And no matter how big or small my page
gets, there will always be two columns.
| | 01:48 |
So let's just see the impact of those
changes on the page so far.
| | 01:52 |
If you go ahead and save that little
change, let's go ahead and take a look at
| | 01:55 |
it in the browser.
And so when the screen is large, once
| | 01:59 |
again, you'll see that we have that
one-quarter, three-quarter layout here,
| | 02:02 |
with the three and the nine.
And as I make my page smaller by
| | 02:07 |
collapsing my screen here around 768
pixels, we'll wind up with two columns
| | 02:13 |
that are of the same width.
And that is going to be maintained as the
| | 02:20 |
screen gets smaller.
You'll notice that down here underneath,
| | 02:24 |
all these other cells that I haven't
changed yet, they've all stacked on top
| | 02:26 |
of each other.
That's a feature of the large grid.
| | 02:31 |
We can continue on here to make some
other changes.
| | 02:34 |
I don't have to keep these paintings for
example.
| | 02:38 |
Right now I have the left painting, is in
a large space of eight and the right
| | 02:42 |
painting in a small space of four.
I could reverse that entirely on a mobile
| | 02:47 |
phone configuration.
So I could say for example, small-8, large-2.
| | 02:57 |
And for this one I could make it small-4
and large-10.
| | 03:06 |
Notice, of course, that the two smalls
always have to add up to 12, so 8 here
| | 03:09 |
and 4 here, and the larges always have to
add up to 12.
| | 03:13 |
So 2 here and 10 here.
It's not how they add up in each
| | 03:17 |
individual cell, so the fact that it's
small 8 and large 2 doesn't matter.
| | 03:22 |
I mean, it's only 10, down here it's 14.
That doesn't make any difference.
| | 03:26 |
It's the question of the smalls adding up
and the largest adding up and they always
| | 03:29 |
had to add up to 12.
Just add a little variety here, let's add
| | 03:33 |
another row to this particular page.
I'm just going to copy these lines here
| | 03:38 |
from lines 33 to 40.
And I'm going to drop them on in here.
| | 03:43 |
So I've got the same thing on my page
twice now.
| | 03:46 |
I've got this row with the two large
sixes and another row with two large sixes.
| | 03:51 |
And what I'm going to do just so you can
see the difference in the behavior, is
| | 03:54 |
I'm going to change two of these large
sixes to small sixes.
| | 04:02 |
And I'm going to leave these other two
down here to large sixes and that way
| | 04:05 |
you'll see the behaviors together all on
one page as the page collapses.
| | 04:10 |
Everything else I'm going to leave
essentially the same.
| | 04:12 |
So, I'm going to go ahead and save my
page again and let's take one more look
| | 04:16 |
at it in my browser.
Once again, when the page is big, it
| | 04:20 |
looks the way we expected.
Down here, underneath the photos we have,
| | 04:24 |
these two columns are divided into two
equal sizes, we have two of those,
| | 04:27 |
they're both next to each other on the
page.
| | 04:31 |
Now, as I start to collapse the page,
you'll see that the grid is resizing here
| | 04:36 |
until, once again, we hit roughly 768
pixels.
| | 04:40 |
And now, at this point, our three and
nine combination in the top row has
| | 04:45 |
changed to a six and six.
Our combination here that was two and ten
| | 04:50 |
has gone to eight and four at the smaller
size.
| | 04:54 |
And our small sixes are still next to
each other, whereas the larges are on top
| | 04:57 |
of each other.
So you can see that this grid is quite
| | 05:01 |
sophisticated as I continue to collapse
the page.
| | 05:04 |
You can keep these columns here on a very
small screen by using that small grid, or
| | 05:08 |
you can stack things on top of each other
using the large grid.
| | 05:12 |
How things change is completely up to
you, your designs, your client
| | 05:16 |
requirements, and what kinds of devices
you're going to need to serve ultimately
| | 05:20 |
with this particular webpage.
| | 05:24 |
| | Collapse this transcript |
| Offsets in the grid| 00:00 |
One of the things you might have noticed
about this particular page so far is that
| | 00:04 |
as we are working with it and making the
page smaller and so forth.
| | 00:09 |
Sometimes the text gets a little bit
close together up here on the top.
| | 00:13 |
And you might want a little bit more
space in between these columns.
| | 00:17 |
So as I make my page smaller here.
You see that sometimes we have more
| | 00:21 |
space, sometimes we have less space
depending on the exact layout of the page.
| | 00:25 |
And what we may want to do is add a
little bit more space between these
| | 00:28 |
columns more consistently so that the
text doesn't stack on top of each other.
| | 00:33 |
You could certainly do that by going into
your CSS and modifying the layout of some
| | 00:38 |
of these small or large grid items.
But really that's a huge amount of work.
| | 00:44 |
The easier way of doing this is working
with something called offsets.
| | 00:49 |
What offsets will do is it'll take some
of the space from the grid and assign it
| | 00:52 |
to the left side of each of these
particular columns.
| | 00:56 |
So if i want to get space between the two
columns here at the top of my screen, I'm
| | 01:00 |
going to need to put the offset on the
right column which will give me a little
| | 01:03 |
bit of breathing room in between.
Because if I put this space on the left
| | 01:09 |
side column, what had happened is my
column will not start until further into
| | 01:12 |
the page and things aren't going to wind
up correctly.
| | 01:17 |
So you probably going to want to add
these offsets to the second column on
| | 01:19 |
your page, not the first column.
Let's take a look at how these offsets
| | 01:23 |
work okay.
And they are available in both the small
| | 01:26 |
grid and the large grid.
Here is grid.html and this is a document
| | 01:30 |
we've been working with for the last
several videos if you've been following along.
| | 01:37 |
Just keep on working in your same
document.
| | 01:39 |
For those of you who are jumping in.
There's a copy of grid.html inside of the
| | 01:43 |
exercise files folder that you can pull
out and follow along.
| | 01:47 |
What I'm going to do down here is where
it says large nine small six columns.
| | 01:53 |
I'm going to add a little bit more space
with my large first.
| | 01:59 |
I've got three wide over on the left
side.
| | 02:03 |
And I've got nine on the right.
Nine's kind of big so I'm going to take a
| | 02:07 |
little bit of space from nine to
contribute to the offset.
| | 02:10 |
Things still have to add up to 12, so
when I add a large offset of 1, I have to
| | 02:18 |
reduce the size of my large to 8.
That way, things are still adding up to
| | 02:27 |
12 because large 3 plus large 8 plus
large offset 1 equals 12.
| | 02:32 |
Let's go ahead and give this a try and if
I save this and go ahead and view this
| | 02:37 |
inside of my browser, you'll see now that
I have this space in between my two
| | 02:42 |
columns up here on this top row.
That is that offset.
| | 02:48 |
That's what's causing that hole there.
So now you clearly have nice space in
| | 02:52 |
between those two columns.
I can make that even clearer if I take my
| | 02:56 |
app.css that we added a few videos good
and change that border to zero.
| | 03:03 |
And if I just refresh my page after I've
saved my style sheet, you'll see that we
| | 03:06 |
have that nice sort of gap there in the
middle.
| | 03:10 |
You can see that it contributes to a
nicer looking layout there.
| | 03:12 |
And as I collapse my page, provided that
we're still in the large grid here,
| | 03:16 |
you'll see that we still have a nice
space in between those two columns at the
| | 03:20 |
top of the page.
Now of course, right here we go to our
| | 03:24 |
small grid instead.
And in our small grid we haven't added
| | 03:28 |
any offset yet.
So there are some spots along the way
| | 03:31 |
here, maybe sort of right about here
where these words are getting a little
| | 03:35 |
bit close together as well.
And maybe we would want to go ahead and
| | 03:40 |
add an offset there also on the small
grid side of things.
| | 03:43 |
So let's go ahead and give that a try.
If I go back here to Sublime Text, I'm
| | 03:48 |
going to go back to my grid.html.
And I'm now going to add some offsets for
| | 03:53 |
the small side of the grid.
I have working with a 6 and a 6.
| | 03:59 |
And I'd like to keep these columns the
same size.
| | 04:02 |
So the easiest way to do this is to
reduce the size of the small sixes to
| | 04:05 |
make them small fives.
So that would be a small 5 and a small 5
| | 04:09 |
which would be 10.
So then I'll set my offset to 2.
| | 04:13 |
And that'll give me the space in between
those 2 columns.
| | 04:16 |
So I'll go ahead and change this small
six to a small five, this small six to a
| | 04:22 |
small five and then I'll add a
small-offset-2.
| | 04:28 |
And if I save that and once again preview
that in my browser, here are the large
| | 04:32 |
dimensions, we are not going to see that
gap appear.
| | 04:38 |
But as we move on down here, we get to
our small grid layout and you'll see here
| | 04:42 |
that now we have a nice space in between
on the small grid system.
| | 04:47 |
And as I make the page smaller, that
space will be maintained no matter how
| | 04:51 |
narrow my page gets.
So here it gets a little bit silly, now
| | 04:55 |
I've got sort of one word per line, this
might be a point in time where I might
| | 04:58 |
want to change my grid altogether or
maybe I want to reduce the size of the
| | 05:01 |
text or something else to make this a
little bit more mobile friendly.
| | 05:07 |
That's certainly all custom CSS stuff
that you can do.
| | 05:10 |
For the purposes of this course and out
of the box that's pretty much where I'm
| | 05:13 |
going to leave this example.
There's one other thing that we can do
| | 05:18 |
here in our grid page.
If you scroll all the way down to the
| | 05:21 |
bottom where we have this large 12
column.
| | 05:24 |
We can change this around a little bit
also.
| | 05:26 |
So what if you want one big column but
maybe you don't want it to necessarily
| | 05:31 |
take up the entire space of 12?
You can use offsets here as well.
| | 05:36 |
For example, I could say that instead of
12, maybe I really just want it 9.
| | 05:42 |
And I can offset that, so a
large-offset-3.
| | 05:47 |
So there that still adds up to 12.
And I could do this also on the small
| | 05:53 |
side of things, so maybe here I want a
small-offset of 6 along with a small-6.
| | 06:02 |
You don't have to add the smalls.
You can always just leave it set up with
| | 06:05 |
the larges.
It's not a problem.
| | 06:07 |
But remember that, as this page gets
smaller, the large grid system is always
| | 06:11 |
going to be sort of a single cell.
So if I save this and I preview this in
| | 06:17 |
my browser, here's my big column that's
going all the way across the page.
| | 06:24 |
This big gap over here is caused by that
offset of three.
| | 06:27 |
As I go ahead and make my page smaller,
here's my big column that's supposedly
| | 06:30 |
goes all the way across this page but now
with the small grid configuration, it has
| | 06:34 |
an offset of six.
So it actually looks like it's part of
| | 06:38 |
this column over here right now.
The fact that I have these two columns
| | 06:42 |
here that are of equal size, this text is
going to line up with the text in that
| | 06:45 |
particular column.
So as I make the page smaller here we go
| | 06:51 |
these two columns are continuing to be in
line.
| | 06:55 |
The two columns that are here in the
middle remember only had the large grid
| | 06:58 |
layout and these cells that are stacked
on top of each other.
| | 07:02 |
And once again with app.css we can change
that border from 0 pixels back to 1 pixel.
| | 07:08 |
This is a great debugging technique by
the way, taking your border and making it
| | 07:11 |
0 or 1 so that you can see what's going
on.
| | 07:14 |
In my webpage here if I refresh that,
that makes that story a little bit
| | 07:17 |
clearer about how things are lining up
here.
| | 07:21 |
So offsets are a wonderful way of adding
a little bit of extra space inside of
| | 07:25 |
your webpage.
They're also a great way of being able to
| | 07:29 |
line up your text inside of this page.
| | 07:32 |
| | Collapse this transcript |
| Centering columns| 00:00 |
Taking a look at those offsets from the
previous video, offsets which are used to
| | 00:04 |
separate two columns or push content over
so it lines up with another column
| | 00:07 |
somewhere else might have prompted you to
think, well, wouldn't it be nice if we
| | 00:10 |
could center something on our page?
And would Foundation support that?
| | 00:17 |
Well, yes, in fact Foundation does
support centering things on your page,
| | 00:20 |
both in the small and the large grid
system.
| | 00:24 |
So I'm going to go ahead and show you how
to do that now centring.
| | 00:28 |
What I'm going to do is I'm going to add
another row and I'm going to put that row
| | 00:32 |
here, right after the body tag, so around
line 15.
| | 00:36 |
Div class of row.
And then as always don't forget to close
| | 00:42 |
your div.
If you want to use HTML comments to help
| | 00:45 |
you keep track of where all these divs
are, that's a great way of doing it.
| | 00:49 |
Just drop in an HTML comment to let you
know what each slash div is all about.
| | 00:54 |
Sublime text does a great job of helping
you line up all of your tags as well.
| | 00:58 |
I'm going to go ahead and add a header,
something we don't have on this webpage yet.
| | 01:05 |
And a slash header.
And then inside of that header, I'm going
| | 01:08 |
to put in an hgroup.
The hgroup tag is one of those HTML 5
| | 01:13 |
tags that will group together various
heading tags because I'm going to have
| | 01:17 |
two here.
I'm going to have an h1.
| | 01:20 |
My Fine Web Page.
And I'm going to have an h2.
| | 01:25 |
And that's going to be a test of the
Foundation grid system /h2.
| | 01:36 |
Right now this isn't going to do a whole
lot for us because I haven't really
| | 01:39 |
hooked this row up the grid system other
than this div class of row.
| | 01:43 |
So here in my header tag, I'm going to
add a class large -12, columns, just for
| | 01:48 |
the moment, just so that you can see what
the page looks like so far.
| | 01:54 |
So if you go ahead and save that we can
open that on up in the browser so, there
| | 01:58 |
we go, there's our h one and h two.
You see that they're aligned to the left
| | 02:04 |
which is exactly what you would expect.
It's our regular large 12 grid system
| | 02:09 |
Everything is aligned to the left side of
the page.
| | 02:13 |
Now I'm going to change this a little bit
so that it'not a large 12 any more, I
| | 02:16 |
want it to be centered on the page.
I have to decide how I would like it
| | 02:21 |
centered and how I'd the space on either
side distributed.
| | 02:26 |
So what I can do here is, instead of
large 12, let's say I want that text to
| | 02:31 |
be roughly half of that space, so we'll
make it a large six instead and then I'm
| | 02:36 |
going to add large - centered.
If I saved this, and I take a look at
| | 02:44 |
this inside of my web browser.
Now you can see that I have that text
| | 02:51 |
centered and you can see that it's evenly
spaced on either side.
| | 02:57 |
But wait, I hear you saying, the text
inside of that box is not centered.
| | 03:02 |
Well that's absolutely true.
Remember we're working with the grid system.
| | 03:06 |
So the box is centered within the row.
But the text inside is not centered, we
| | 03:10 |
can write a style for that but the text
inside is not going to be centered.
| | 03:16 |
As I make my page smaller.
And smaller when we hit the breakpoint.
| | 03:22 |
Notice that this cell now goes all the
way across the page.
| | 03:25 |
Why is that?
Well, we used the large grid system here.
| | 03:30 |
Remember that the large grid system is
going to change when it hits that 768
| | 03:34 |
pixel breakpoint and go to a full width
column.
| | 03:39 |
So if you wanted this to be centered on
the page all the time, you need to change
| | 03:43 |
these large sixes to small sixes and
small centered.
| | 03:48 |
So if you save that and put that in your
web page, now as you make the page
| | 03:52 |
smaller you'll see that that centering is
going to be maintained as you move
| | 03:56 |
through the site at all these different
widths.
| | 04:02 |
Once again, if you wanted to center that
text on the page, you're going to need to
| | 04:06 |
open up app.css and you can add to this,
something like header, text align of center.
| | 04:11 |
And if you save that and then just
refresh your web page then your text will
| | 04:13 |
actually be aligned there in the center.
Notice that I put that, centering class
| | 04:25 |
here on the header itself and I didn't
associate it with the grid system.
| | 04:29 |
If I had associated it with the grid
system, remember every time that
| | 04:32 |
particular element of the grid system
would appear, something would be centered.
| | 04:36 |
So it's better to attach it to something
else.
| | 04:39 |
I could have attached it to another class
or in this case I've attached it to an
| | 04:42 |
HTML tag.
So that is how centering works inside a
| | 04:47 |
foundations grid system and how you can
get information centered on your webpage.
| | 04:54 |
| | Collapse this transcript |
| The nested grid| 00:00 |
I've put aside the grid.html document
we've been working on so far.
| | 00:05 |
And I've started a new document.
It's called Nested Grids-Start.html, and
| | 00:09 |
you'll find it in your Exercise Files
folder.
| | 00:12 |
You'll also find.
Six images that are associated with this document.
| | 00:17 |
You should copy those images over from
the Exercise Files folder and put them in
| | 00:21 |
the Image folder inside of your
Foundation folder on your desktop.
| | 00:26 |
Once you do that this page should work
correctly.
| | 00:28 |
So, if you take a look at the code that
is used to set up this page you'll see
| | 00:31 |
that I have a div with a class of row and
inside of that I have four columns.
| | 00:37 |
They are all of equal size, one of which
has a chunk of text and next to that are
| | 00:41 |
three pictures.
So, I'm going to go ahead and take a look
| | 00:45 |
at that real quick in the browser, by
saying open in browser and there it is.
| | 00:50 |
The chunk of text and the images that are
next to it.
| | 00:54 |
As the page is big it looks likes this,
as the page gets smaller these images are
| | 00:58 |
just going to resize.
I'm using small grid system so the layout
| | 01:02 |
of this page isn't going to change as the
browser gets smaller.
| | 01:07 |
What I'd like to do now is I'd like to go
ahead and add another row of images
| | 01:10 |
underneath the images that I have here.
And have the text continue to go down the
| | 01:15 |
page next to it.
So, to do that, I'm going to go ahead and
| | 01:19 |
start another row.
Div, with a class of row.
| | 01:27 |
And I'm going to need to make four
columns again.
| | 01:29 |
So, I'm going to go ahead and set up a
div with a class of small hyphen offset
| | 01:35 |
hyphen three, small three columns.
Inside of that, I can go ahead and put my
| | 01:42 |
images so I'm just going to go ahead and
copy what I've got up here.
| | 01:46 |
And I'm just going to paste that on, in
here.
| | 01:49 |
So, this is all pretty similar.
Instead of these images, like this one
| | 01:54 |
here by bell, I'm going to, go ahead and
use one here like gold and this by gold
| | 02:01 |
win hyphen smith.
In my second column here, I have a class
| | 02:12 |
small three columns and my image, instead
of LaRue, this will be ferr, so this is
| | 02:20 |
by Ferrar.
And then in the last cell in this
| | 02:28 |
particular row, I'm going to call this
one, harr, its the painting by Harrod.
| | 02:40 |
And then of course don't forget to close
your row, slash div.
| | 02:44 |
What should happen now is I should have
another row of pictures appear underneath
| | 02:48 |
because I've offset this row here.
Those three pictures should show up
| | 02:52 |
underneath the three pictures that we
have on top.
| | 02:55 |
So, if I go ahead and save my document
and I put it into my browser.
| | 02:59 |
What I have here is my text, I have my
three images and then underneath, oh.
| | 03:05 |
There's my other three images.
Well, I really wanted these three images
| | 03:08 |
to line up underneath these three images
so that the text is continuing on down
| | 03:12 |
the page.
I didn't really want this great big huge
| | 03:15 |
gap in the middle.
But if you think about it this totally
| | 03:18 |
makes sense.
I have two entirely separate rows, and
| | 03:21 |
the content is stacked on each other
exactly the way you would expect.
| | 03:27 |
How then could I get rid of this great
big huge gaping space in between the two
| | 03:30 |
rows so that these three images will show
up underneath the three images that I
| | 03:34 |
have above?
Well this is a great place for the use of
| | 03:39 |
what's called a nested grid.
And a nested grid, would allow you to
| | 03:43 |
make additional rows, inside of, perhaps,
what will be the main row for your entire document.
| | 03:50 |
And, I'm going to show you how those
nested grids work now, and you'll see how
| | 03:53 |
we can.
Snug all of those pictures up next to
| | 03:56 |
each other with the text going down the
page by making use of a nested grid.
| | 04:01 |
So here's how I'm going to change this.
In my document, right now I have an aside
| | 04:05 |
with a class of small-3, and then I have
these three individual divs that all have
| | 04:11 |
a class of small-3.
Instead of setting those up as small-3s.
| | 04:18 |
I'm going to put in instead a div with a
class of small hyphen nine columns.
| | 04:28 |
And this is actually going to serve as
the scaffolding to contain several rows
| | 04:32 |
that will be inside of that particular
spot.
| | 04:35 |
The small nine is going to set up a
column that goes right next to all of the text.
| | 04:41 |
Then inside of that, we're going to have
two additional rows that only live within
| | 04:46 |
that small line.
And those rows themselves have 12 columns.
| | 04:51 |
So let me show you how we're going to set
that up.
| | 04:53 |
After this small nine here, I'll set up a
div with a class of row.
| | 05:00 |
Just like I've had before.
Then, inside of that, we'll go ahead and
| | 05:04 |
include my divs here, just as we have
them, except instead of small threes,
| | 05:10 |
these are going to become small fours.
That way they'll take up the full 12th
| | 05:17 |
column width.
So, once again, small four here.
| | 05:23 |
And small four here.
And I'm working on lining up all this
| | 05:29 |
code so you can see what's going on.
Here's the row.
| | 05:34 |
It's inside of my small nine.
Then I have a series of three divs, each
| | 05:39 |
with a class of small four, and then I'm
going to end.
| | 05:47 |
That's the row, here, embedded inside of
the small nine.
| | 05:51 |
Now I'm going to have a second row, and
I'm just going to get rid of that.
| | 05:58 |
The second row, is going to line up right
underneath, and in this particular case
| | 06:04 |
this is not going to have the class of
small offset three that i have stated here.
| | 06:13 |
I'm going to change that.
And instead it's going to be just like
| | 06:17 |
the ones above.
A small hyphen four.
| | 06:20 |
Okay, so I'm just going to go ahead and
I'm going to clean up the rest of these.
| | 06:29 |
Now I've cleaned up the code a little bit
and you'll see what's going on here.
| | 06:31 |
So now, here's my div with a class of
small nine.
| | 06:35 |
And that's our main row.
That closing div is down here at the bottom.
| | 06:41 |
Tap that over a little bit to line up a
bit better.
| | 06:45 |
Then we have our div here, this ending
nested row two.
| | 06:50 |
It starts on line 39 and it goes down to
line 49.
| | 06:53 |
And inside of that are three, four column
wide instances here and they've got the
| | 06:57 |
images inside of each one of those.
So this is what's called a nested grid,
| | 07:02 |
because these are additional rows that
are living inside of an already existing
| | 07:06 |
column on the page.
Now when we save this document and we put
| | 07:12 |
this into our web browser, now our images
are all snug up right here right next to
| | 07:16 |
this text on the page, and it looks more
like we'd expect.
| | 07:22 |
The text can continue on down the page
here.
| | 07:25 |
We have room to add additional rows of
images if we wish and we don't have that
| | 07:28 |
great big huge gap in between the images
that we had before.
| | 07:33 |
As the page gets smaller, this acts
exactly the way you would expect.
| | 07:37 |
As we reduce the size of the page here,
the images are going to scale, the text
| | 07:41 |
is going to scale and so forth.
Now, I did this using the small grid.
| | 07:46 |
I certainly could have done this exact
same process using the large grid.
| | 07:50 |
This is a lot of work to try to get a
series of what really amount to
| | 07:53 |
thumbnails here right next to this text.
And there's actually better ways of
| | 07:57 |
implementing this inside of Foundation,
I'll show you that in a future video.
| | 08:02 |
| | Collapse this transcript |
| Source ordering| 00:00 |
I am continuing to work here on the
document that we started in the last
| | 00:04 |
video about nested grids.
I've renamed that document to sort ordering.
| | 00:08 |
If you're following along, you can find
that file in the exercise files folder or
| | 00:11 |
just keep on working with the document
you've already been working on.
| | 00:16 |
The next problem that I want to address
is this page looks great the way it is,
| | 00:20 |
except for this column over here on the
left.
| | 00:24 |
As we make the page smaller, that column
on the left looks really ridiculous.
| | 00:28 |
And, in fact, our images look kind of
small also.
| | 00:31 |
One possible solution to this is, instead
of using the small grid where we have
| | 00:35 |
these things next to each other.
Maybe as the page gets smaller they
| | 00:40 |
should stack.
So, that's a relatively easy change to
| | 00:43 |
make, and we've seen that before.
So here, in our row, what we want to do
| | 00:48 |
is change our small 3 to, say a large 3.
And down here, on line 27, in our small
| | 00:54 |
9, we're going to change that to a large
9.
| | 00:59 |
Now, I am going to maintain my small
fours down here underneath.
| | 01:03 |
That way, my images are going to continue
to be stacked three across, next to each other.
| | 01:07 |
Remember, that's a nested grid, so that's
going to be treated a little bit differently.
| | 01:12 |
But what should happen is, as this page
gets smaller now, the text should show up
| | 01:15 |
on the top and the grid of three images
should show up underneath.
| | 01:20 |
If we save this page and we take a look
at inside of our web browser we should
| | 01:24 |
see that behavior exactly.
So, as I make the page smaller, we hit
| | 01:29 |
that 768 break point and now we have text
on the top and we have our images underneath.
| | 01:36 |
And thats great.
What if though, I wanted to have my
| | 01:39 |
images on top and my text underneath.
But I still wanted to have my text on the
| | 01:45 |
left when the page was big.
Well, it seems easy enough, I could just
| | 01:49 |
switch the text and the images.
I could take just a side chunk of text
| | 01:55 |
here and I'm going to cut that, Ctrl or
Cmd x, and I'm going to put it after this row.
| | 02:04 |
So, if I save this and put that in my web
browser, then my images show up on top
| | 02:09 |
here in the large format the text shows
up underneath.
| | 02:14 |
But as I make the page bigger now, I have
the text on the right side of the page
| | 02:17 |
and I really want it on the left side of
the page.
| | 02:21 |
This seems like a problem that might not
have a solution.
| | 02:23 |
But fortunately, Foundation offers a way
that way you can change your source order
| | 02:27 |
depending on the size of the screen.
Foundation has some additional classes
| | 02:31 |
that are called push and pull.
Push and pull basically do exactly that
| | 02:35 |
as the screen gets smaller.
They push or pull content around on the
| | 02:39 |
page to make the source order go in the
correct order.
| | 02:43 |
If I take a look at my source code here,
again back up where it says large nine columns.
| | 02:48 |
What I really want these large nine
columns to do, when the screen is big, is
| | 02:52 |
I want them to push over to the right.
I'm going to add here a push three, push-3.
| | 03:00 |
And down here at the bottom where I have
my large three columns, what I really
| | 03:04 |
want these columns to do is pull all the
way over to the left.
| | 03:10 |
And I have to go over nine spaces to get
to that left column.
| | 03:14 |
So, I'm going to add a pull-9 here to
this part of the row.
| | 03:20 |
Now when I save this page and I put this
in my web browser at the small screen
| | 03:24 |
resolution, I still have my images on the
top like this with the text underneath.
| | 03:31 |
But the large screen resolutions my text
is indeed showing up on the left side of
| | 03:34 |
the page, with the images over here on
the right side of the page.
| | 03:39 |
This is a very powerful feature of the
Foundation grid system.
| | 03:43 |
The ability to reorder your source
depending on how big the screen is.
| | 03:47 |
So, you can control what pieces of
information will show up where in the
| | 03:51 |
grid system as your screen is changing
dimensions.
| | 03:54 |
| | Collapse this transcript |
| Block grids| 00:00 |
This is block grid.html.
This is the same document we've been
| | 00:04 |
working on for the last two videos.
If you have been following along, you can
| | 00:07 |
just can continue working on the document
you have there in front of you.
| | 00:10 |
If you are jumping in, or that document
isn't working, you can find block
| | 00:13 |
grid.html in your exercise files folder.
Back in the nested grid video, I built
| | 00:19 |
out this little grid down here, which is
now at the top of the page.
| | 00:25 |
That is the series of pictures.
It's part of Foundation's very flexible grid.
| | 00:30 |
We saw the advantages and disadvantages
of this particular approach.
| | 00:33 |
One of the things that you might here is
that there's just a ton of mark up that's
| | 00:36 |
involved with getting these images to
line up next to that chunk of text.
| | 00:41 |
And I mentioned at the time that there's
actually a better way of coding this.
| | 00:44 |
It's called the block grid.
With a block grid, what you would do is
| | 00:49 |
put these images into a list, an
unordered list.
| | 00:54 |
Then, from there, you can use a class,
one of these block grid classes to get
| | 00:58 |
your images to display in rows.
The first thing that I have to do is, I
| | 01:03 |
have to tear apart all of this code that
you see here.
| | 01:06 |
So, what I'm going to do, is go through
this code.
| | 01:09 |
I'm going to take out all of these
kagillion divs and get rid of them.
| | 01:13 |
And I'm going to mark this all up with a
standard bulleted list, with each of
| | 01:17 |
these images occurring inside of each of
the list items.
| | 01:22 |
I have cleaned out my code here, and you
can see how much that has been reduced,
| | 01:26 |
how much has been removed.
All those zillions of divs that we had
| | 01:30 |
around all of these images are now gone,
and we have just a simple bulleted list.
| | 01:35 |
I still have my div with a class of
large-nine push-three columns, which is
| | 01:39 |
what I had before around our nested grid
and I have to close that div down here.
| | 01:45 |
Then I have my bulleted list, unordered
list, as you see here.
| | 01:49 |
And inside of that are my list items.
And inside of that are each one of my images.
| | 01:53 |
So, if we just take a look at what we've
got right now.
| | 01:57 |
If you save your work and open this in
the browser, as you'd expect, you'd see
| | 02:00 |
the text on the left side and then on the
right side, you're going to see your images.
| | 02:05 |
There's a bullet right in front of them,
and they're all stacked on top of each other.
| | 02:10 |
So, now what we need is the magic code to
make this actually look like a grid, and
| | 02:14 |
that magic code is incredibly simple.
All we need to add to the UL, we're going
| | 02:20 |
to add a class of small-block-grid-three.
This is the small grid system, in other
| | 02:27 |
words, the layout is going to be
maintained as you move across mobile devices.
| | 02:36 |
And we want three images going across on
each one of the rows.
| | 02:41 |
That's all we need to save.
So if you go ahead and save this and put
| | 02:44 |
this inside of your browser.
Low and behold, you have these images all
| | 02:49 |
now lined up next to each other, three
across.
| | 02:53 |
Since we have six images, those wrap
underneath each other nicely.
| | 02:56 |
As I make the screen smaller, I am seeing
a little bit of twitching here and that's
| | 03:00 |
because my images aren't all of perfect
height.
| | 03:03 |
You see here this one is a little bit
shorter than the others, so we've got
| | 03:06 |
some funny stuff that's going on as this
goes a little bit smaller.
| | 03:09 |
But then, when it hits the break point
here, you see that this continues to keep
| | 03:13 |
its shape, and things are scaling
correctly here as we go down to the
| | 03:17 |
mobile widths.
If I'm a little bit more careful with my
| | 03:21 |
images or if I have images that are sized
a little bit more closely here, that
| | 03:25 |
little wrap problem that you see here
probably won't happen.
| | 03:30 |
This is the block grid.
A whole lot less mark up, much easier to
| | 03:33 |
work with and you're going to see this a
few more times in this course, because
| | 03:36 |
obviously this now looks like a thumbnail
grid.
| | 03:40 |
And we'd probably like it to look a
little bit more thumbnaily, and maybe
| | 03:43 |
we'd like to click on it and see a larger
version of the images.
| | 03:46 |
I'm going to cover all of that in later
videos
| | 03:48 |
| | Collapse this transcript |
| Challenge: Create a grid| 00:00 |
So I've presented now eight videos on how
Foundation's grid systems works.
| | 00:06 |
So, are you ready for a challenge?
I hope so.
| | 00:08 |
I've given you a number of documents in
your exercise files folder for this
| | 00:12 |
particular video.
You're going to find another big image
| | 00:16 |
there, that is by itself that you're
going to move to the Images folder inside
| | 00:20 |
of your Foundation folder.
You're going to find an entire folder of
| | 00:25 |
images the folder is called Thumbs.
Move that folder just as it is and drop
| | 00:29 |
it in to the images folder, inside of the
foundation folder.
| | 00:34 |
And you will also find a HTML file called
gridchallenge.html.
| | 00:40 |
And that's going to be your starting
point for this.
| | 00:42 |
I'm showing you the finished result.
This is the page at large resolutions.
| | 00:46 |
We've got something that kind of looks
like a header, you can see that it's
| | 00:49 |
centered here on the page.
We have some little text, next to this
| | 00:52 |
image here.
Then we have a column here that has some
| | 00:57 |
information about the events schedule.
The schedule Monday, the schedule Tuesday.
| | 01:02 |
And on the right, lined up more or less
even, we have our featured artist with a
| | 01:05 |
little blah, blah and a bunch of
thumbnaily looking things here underneath.
| | 01:11 |
As I make the page smaller, so I'm
going to go past that 7 68 break point.
| | 01:18 |
You can see how the page is starting to
change.
| | 01:21 |
And once we go past that 768 pixel break
point, what's going to happen is this top
| | 01:25 |
cell is going to spread all the way
across the page, with that header
| | 01:29 |
information inside of it.
We had the picture and this tiny text
| | 01:34 |
switch places.
Then underneath we have the main text for
| | 01:38 |
the event.
Blah blah blah blah blah.
| | 01:40 |
And then our featured artist, and those
little images are going to show up still
| | 01:44 |
in a grid, going three across, right
underneath of that.
| | 01:49 |
And as I continue to make the page
smaller, you'll see that the page
| | 01:52 |
continues to adapt.
And in case you're wondering what it
| | 01:55 |
looks like without the borders turned on,
I'll turn the borders off.
| | 01:59 |
If you just go to your app.css, change
that border from one pixel solid green to
| | 02:03 |
zero pixels solid green and save, then
come back to your web browser and hit Refresh.
| | 02:10 |
You'll get a sense of what this page
would look like without all those borders
| | 02:12 |
in place, for those of you who are
looking for that kind of information.
| | 02:16 |
So there's your grid, there's your text,
lots and lots and lots of text.
| | 02:20 |
And as I make the page larger again.
Then we have that header there.
| | 02:25 |
It wraps on three lines.
Little text is on the left, big pictures
| | 02:29 |
on the right.
And then, we have our featured artists in
| | 02:32 |
that grid over here on the right side of
the screen.
| | 02:36 |
And then the main text over here on the
left side of the screen.
| | 02:39 |
So what I'd like for you to do is, take
your starting HTML document, Grid
| | 02:43 |
Challenge, and you'll see that all of the
content is here.
| | 02:47 |
So there's the H1 that makes up the
header, you have paragraphs of
| | 02:50 |
information, and the H2s here and there.
Further on down the page, those
| | 02:55 |
thumbnails are all setup in a bulleted
list.
| | 02:58 |
And what I would like for you to do then
is set up the scaffolding system for
| | 03:02 |
this, the grid system, so that you are
able to make the page look like mine.
| | 03:09 |
And I'll show you my solution in the next
video.
| | 03:12 |
| | Collapse this transcript |
| Solution: Create a grid| 00:00 |
Alright everybody, how'd you do?
Hopefully you did great work.
| | 00:03 |
Now, of course, as you took a look at my
design, you didn't know exactly how wide
| | 00:07 |
things were and so forth.
But if you got the proportions more ore
| | 00:11 |
less correct, I take that as a perfectly
correct answer.
| | 00:15 |
As always, there are lots of different
ways to do the same thing in technology,
| | 00:20 |
so this is one possible solution.
If your solution looks pretty similar to
| | 00:25 |
mine, as far as I'm concerned, you got it
right.
| | 00:28 |
So, here is my solution, I'll talk you
through it.
| | 00:32 |
First of all, I took that h1 and I put it
in its own row.
| | 00:35 |
I wrapped it in a tag of header and to
that tag of header I added several classes.
| | 00:41 |
I made it 6 wide, 6 out of the 12, and
centered that, so that was row 1.
| | 00:47 |
Row 2 I have two asides, actually,
because neither of these pieces of
| | 00:50 |
information are terribly important.
And if they didn't display on the page,
| | 00:55 |
it would not be the end of the world,
thus the aside tag.
| | 01:00 |
And inside of these aside tags, one of
them, I have the image.
| | 01:05 |
And in the other I have the block of
text.
| | 01:07 |
And if you notice the source order
changed, depending on whether I was
| | 01:11 |
looking at the small resolution or the
large.
| | 01:15 |
So I've actually combined several things
here.
| | 01:17 |
The large format, the picture is smaller,
and the text is larger.
| | 01:23 |
So I have a large 4 in that particular
case and a large 8 over here on the other
| | 01:28 |
side 4 and 8 is 12.
At smaller resolutions I made those
| | 01:33 |
evenly sized so those are both small 6,
small 6 and small 6.
| | 01:38 |
Then I wanted these to switch places, so
I wanted the text to be pulled over four places.
| | 01:45 |
I wanted the picture to be pushed over 8,
so t hat's the push 8, pull 4.
| | 01:50 |
And so that's that entire row.
Pretty complicated, but that is how I put
| | 01:53 |
that row together.
Then further down on the page here, I
| | 01:57 |
have it started another row.
I put an article in place here and I gave
| | 02:00 |
that a class of large 7.,So 7 out of the
12 columns were taken up by this text here.
| | 02:06 |
About the event, the schedule, the
schedule on Monday, and the schedule on Tuesday.
| | 02:11 |
That's followed by a section, that
section has a class of large 4 and a
| | 02:15 |
large offset one that gives you the space
remember in between the large 7 and all
| | 02:20 |
of the text.
And this particular column which I've
| | 02:25 |
made 4 wide and inside of that I've got
our featured artists.
| | 02:30 |
As our title with our little block of
blah blah.
| | 02:32 |
And then underneath of that, I've got to
the bulleted list, all I added was a
| | 02:36 |
class of small block grid 3.
Which gives us our images 3 across.
| | 02:42 |
And close up all your tags, that will
give you that grid based layout there.
| | 02:47 |
That I showed you in the previous video.
So congratulations nice job on the
| | 02:51 |
challenge everybody.
And if you have minor differences here,
| | 02:55 |
instead of a large 4, you have a large 3,
instead of a section tag, you just use
| | 02:59 |
the div.
Those kinds of things are really quite
| | 03:02 |
minor and totally acceptable for an
answer.
| | 03:05 |
And maybe you found some other way of
laying this page out that will also work.
| | 03:09 |
And it may very well that that's totally
acceptable as well.
| | 03:12 |
In the end it boils down to, does it look
similar to what I showed you in the
| | 03:14 |
previous video.
| | 03:16 |
| | Collapse this transcript |
|
|
3. CSS OverviewExploring typography| 00:00 |
The next area I'd like to cover is
typography inside of Foundation.
| | 00:04 |
I'm looking at a document here called
3-typography.html.
| | 00:09 |
You can find this document inside of your
exercise files folder.
| | 00:12 |
Copy it on over to your Foundation
folder, and go ahead and open it up in
| | 00:15 |
your editor, and you'll be following
right along with me.
| | 00:19 |
In this particular page, I have a very,
very mark up present.
| | 00:24 |
It starts here.
Then on line 16 ,there's the body tag,
| | 00:27 |
followed by the dip of the classic row.
Followed by a dip with the class of large 12.
| | 00:32 |
This is going to be one fat column that
goes all the way across the page, and
| | 00:35 |
then inside of that, we have some
extremely simple mark-up.
| | 00:39 |
I have some heading tags, I have some
links, I have some strong tags.
| | 00:43 |
I've got a few links that go down to
anchors further down on the page, I have
| | 00:47 |
ems and I have strong tags.
Very, very basic stuff that you would go
| | 00:53 |
over the first day in class, as you start
to learn HTML.
| | 00:57 |
If you just take a look at this in the
web browser, real quick, this is what the
| | 01:00 |
page currently looks like.
It's nicer than just your HTML that's out
| | 01:05 |
of the box, but it's really not overly
styled at all.
| | 01:08 |
It's just some very, very simple styling
that's been applied here, and we've got
| | 01:11 |
Arial as our default font.
And you can see that we've got some work
| | 01:15 |
to do here to make this a little bit
interesting, but it's at least somewhat
| | 01:18 |
elegant out of the box.
As I make the page smaller, as I reduce
| | 01:24 |
the size of the screen, this is behaving
exactly as you'd expect a large 12 to behave.
| | 01:30 |
It's going all the way across the screen
until you hit yet 768 break point, which
| | 01:34 |
was just right about there.
We went from a very large text, down to
| | 01:39 |
something slightly smaller.
So, Foundation is re-sizing the text, at
| | 01:43 |
least for some of these HTML tags, as the
page gets smaller.
| | 01:48 |
And then after that, it pretty much stays
the same as we go to progressively
| | 01:52 |
narrower screen displays.
There are some things here, though, that
| | 01:56 |
we could do to clean up the look of this
page a little bit.
| | 01:59 |
The words CAC, which is an acronym for
Contemporary Art Conference, and the
| | 02:02 |
words Monday and Tuesday are really not
that important relative to the rest of
| | 02:06 |
the heading.
If this was block-level type of elements
| | 02:10 |
that we're talking about, we might think
of these as asides, or something like that.
| | 02:15 |
And the equivalent in, in-line elements,
because in this case, we're going to
| | 02:19 |
single out these little bits of text
within the heading elements that they're
| | 02:22 |
contained in.
That equivalent's called the small tag.
| | 02:27 |
It's for things like small print small
text that's been re-purposed for HTML 5,
| | 02:31 |
it's to refer to legal text and the small
print associated with that kind of thing.
| | 02:37 |
So, I'm going to go ahead and apply that
small tag to some of these items, right
| | 02:41 |
here inside of sublime text.
All I need to do is around the CAC here,
| | 02:46 |
simply put in a small tag.
And then, I'm going to close that small
| | 02:53 |
tag after, and I'm going to go on down
here to my schedule.
| | 03:00 |
And I'm going to wrap the small tag here
around my links, so it goes around Monday
| | 03:06 |
and around Tuesday.
So, if we go ahead and save this, and
| | 03:12 |
we'll put it in the browser again.
So, you'll see that the text looks
| | 03:19 |
slightly different now.
It's been styled, and so Monday and
| | 03:23 |
Tuesday are also slightly smaller
relative to the word schedule.
| | 03:28 |
Foundation gives us a class of subheader
which we can apply to some of these
| | 03:31 |
heading elements that will make them a
little bit smaller, a little grayer, a
| | 03:34 |
little bit easier on the eye.
I'm going to go ahead and add that as well.
| | 03:40 |
Back in sublime text, I'm going to go to
my h3 here.
| | 03:44 |
And I'm going to give this a class of
subheader.
| | 03:49 |
And I'm also going to apply this class
subheader a little bit further on down
| | 03:52 |
the page here, down under Monday.
h3 here for Monday, and the h3 here for Tuesday.
| | 04:02 |
So, I'm going to go ahead and save that
as well and take a look at that now in
| | 04:05 |
the browser.
So, you can see that this nice little
| | 04:09 |
text here that is fairly important.
It's describing what the heart of the
| | 04:14 |
conference is, looks a little bit more
attractive, now that it's at a smaller size.
| | 04:19 |
And it's also a grayed back a little bit.
And likewise, down here on the page,
| | 04:23 |
Monday and Tuesday definitely look a
little bit more subhead-ish relative to
| | 04:26 |
the big word schedule up here at the top.
As you make the page smaller, those
| | 04:31 |
styles are going to carry through to the
smaller screen dimensions.
| | 04:36 |
Really, it's the size of the text that's
changing as we go from the large type of
| | 04:39 |
design to the smaller type of design.
As I've previously mentioned, this is
| | 04:44 |
just very basic styling that's out of the
box for Foundation.
| | 04:48 |
You can override any of the styling at
any time through your own custom style
| | 04:52 |
sheet or ideally by working with Sass and
Compass to make the page look more like
| | 04:55 |
you want.
However, a Foundation's typography is
| | 05:00 |
really nicely styled right out of the
box.
| | 05:03 |
It's responsive, it changes size as the
window gets smaller.
| | 05:07 |
And of course, you can customize it
however you'd like to.
| | 05:10 |
| | Collapse this transcript |
| Including block quotes| 00:00 |
One of the things that we could do to
enhance this very simple page that we
| | 00:03 |
have so far.
Is to include some testimonials that are
| | 00:06 |
about this particular art conference.
It might be nice to put that in a
| | 00:10 |
separate column.
So I'm going to go ahead and change what
| | 00:13 |
I have here.
I'm going to change this to a large 8
| | 00:16 |
columns, then just after, all the text
and so forth of what we have so far.
| | 00:21 |
I'm going to go ahead and add some
additional mark-up here to set up a new column.
| | 00:27 |
I'm going to go ahead and add a div with
a class of large-3, large-offset-1
| | 00:36 |
columns and close that div.
Then inside of that I can Paste some text.
| | 00:47 |
If you take a look at your exercise files
on your desktop, inside of the Chapter 2
| | 00:52 |
folder you will see that I have some
quote text here.
| | 00:58 |
I'm just going to Copy that quote text
and I'm going to Paste it here inside of
| | 01:03 |
this div class of large 3 and then I'm
going to add some mark up to it.
| | 01:11 |
I'm going to go ahead and add these two
quotes here.
| | 01:14 |
They don't have to be this far apart.
And the way I'm going to mark this up is
| | 01:18 |
very simple.
I'm going to start with the block quote tag.
| | 01:24 |
And I'm going to end it just after the
person's name with a slash block quote tag.
| | 01:28 |
That's all there is to it.
(SOUND).
| | 01:32 |
Now when I save this and I put this into
my web browser, you'll see that I have
| | 01:39 |
this very nice looking quote here on the
side in the column.
| | 01:48 |
Now, of course the column is created by
the grid system which we saw in the
| | 01:51 |
previous chapter, and this nice little
line.
| | 01:54 |
The screen back text here, is caused by
the block quote tag.
| | 01:58 |
Now the people's names are blending into
that quote.
| | 02:01 |
We can add another tag, the Cite tag,
CITE, which will set the persons name off
| | 02:06 |
as the person who said that lovely quote.
So, if we go on back to, sublime text
| | 02:14 |
here, I'm going to add the cite tag, CITE
around the person's name.
| | 02:20 |
In both of these cases, and I'm going to
Save that document, and take a look at it
| | 02:27 |
one more time in the browser.
And, now, you see that the persons name
| | 02:35 |
is set on their own line.
They have a nice long em dash in front of
| | 02:41 |
this, and those are very, very
nicelooking quotes.
| | 02:45 |
Testimonials are a great way of enhancing
your website.
| | 02:48 |
Pull out information that other people
are saying about your product, your
| | 02:51 |
service, your conference, whatever it
happens to be.
| | 02:54 |
The foundation has a lovely, elegant
method of styling these, using the most
| | 02:59 |
basic HTML markup.
| | 03:01 |
| | Collapse this transcript |
| Including lists| 00:00 |
Next thing I'm going to cover are lists
inside of Foundation, and default styling
| | 00:04 |
that come with lists.
If you've been following along with me
| | 00:08 |
for the last few chapters, I'm continuing
in the same document, although I've
| | 00:12 |
renamed it to 3-lists.html.
You can find that document inside of your
| | 00:17 |
Exercise Files folder.
I'm going to continue on here with
| | 00:20 |
several kinds of lists that I'd like to
add to this particular web page.
| | 00:24 |
First of all, in the column that we just
started where we put the block quotes,
| | 00:28 |
I'm going to go ahead and add some
additional text here.
| | 00:32 |
In your exercise files folder, you'll
find a folder called code snippets.txt.
| | 00:37 |
This has got a bit of marked up text here
that you can copy.
| | 00:41 |
So where it says code to add to the
bottom of the right column, just go ahead
| | 00:44 |
and highlight that and copy.
And inside of the list html document,
| | 00:51 |
after the closing block quote here for
your last quote on the page, go on ahead
| | 00:56 |
and paste in that HTML there that goes
with that.
| | 01:04 |
So this is just some basic html.
It talks a little bit about the hotel
| | 01:08 |
options for this particular conference.
If you just go ahead and save what you've
| | 01:12 |
got so far and you can put it into a
browser and you can see how the page is
| | 01:15 |
looking so far.
So we've got our text over here on the
| | 01:19 |
side, we've got our two block quotes,
underneath of that we've got a little bit
| | 01:22 |
of text.
And underneath of that we have a list
| | 01:26 |
which includes our other hotel choices,
and then under contact our staff, we have
| | 01:29 |
our contact information in individual
bullets.
| | 01:34 |
The other thing I'm going to add to this
particular document is a footer.
| | 01:38 |
Right now we don't have a footer for this
webpage at all.
| | 01:41 |
It just sort of ends down here at the
bottom, after the row.
| | 01:44 |
That's these 2 slash divs, down here at
the bottom.
| | 01:47 |
I'm going to go ahead and add a footer,
and back in the code snippets file,
| | 01:50 |
there's a whole little marked up little
bit of code.
| | 01:54 |
You can just go ahead and copy that,
paste that on into your lists document.
| | 01:59 |
So, as you see here, this is a full row,
a div with a class of row, inside of that
| | 02:03 |
is a footer tag, with a class of large-12
columns.
| | 02:07 |
So, in other words, with a class of
large, hyphen 12 columns.
| | 02:10 |
So in other words, it's a list that
appears in one column that goes all the
| | 02:11 |
way across the bottom of the page.
So if you go ahead and save this, and put
| | 02:13 |
that into your browser and as you scroll
on down to the bottom of the page you'll
| | 02:16 |
see that we have a bulleted list down
here in the footer.
| | 02:20 |
So now what we're going to do is we're
going to style all these lists.
| | 02:23 |
Because usually your lists in the footer
don't go vertically the way this one does.
| | 02:28 |
They'll probably want to go horizontally
across the page.
| | 02:30 |
And we probably want to do something over
here with this address as well.
| | 02:34 |
Going back into subline text here, back
under hotel options, the very first list
| | 02:39 |
that we encounter is the hotel choices.
There's some options that we can include
| | 02:45 |
here for the UL.
We can say a class of, let's say circle,
| | 02:48 |
and if we save that and take a look at it
in your web browser, you'll see that we
| | 02:54 |
have little circles now next to all of
our list items here.
| | 03:01 |
There're some other values that we can
choose from, including disc, which is the default.
| | 03:06 |
Or you can use square.
And if you take a look at that in your
| | 03:09 |
web browser, you'll see nice little
squares over here next to those bulleted items.
| | 03:16 |
Foundation does tend to pull all of the
text over so it's in line and so that
| | 03:19 |
these list items are not in line with the
text here.
| | 03:23 |
Again, this is the styling of the box.
You can always write your own custom
| | 03:26 |
styles or work with SASS and Compass to
make this page look however you want.
| | 03:30 |
But we're talking about what foundation
does out-of-the-box.
| | 03:33 |
The next thing I want to take a look at
is that little bit of address information
| | 03:36 |
down here at the bottom under contact our
staff.
| | 03:40 |
In the UL, if you give this a class of
vcard and save that, vcard will wrap a
| | 03:44 |
lovely little box around your address
down here at the bottom of the page and
| | 03:49 |
take away the bullets, as well.
You can also set off the words
| | 03:55 |
contemporary art conference.
By adding in the LI, you can add a class
| | 04:01 |
of fn.
And if you were to do that, and you were
| | 04:06 |
to refresh the page, you would see that
that is now bold.
| | 04:14 |
That a few little things that you can do
to make your lists look better.
| | 04:17 |
Obviously, you can do more with custom
styling.
| | 04:20 |
Finally here in the footer of this
document, I'd like to make this list go
| | 04:24 |
horizontally which is also very easy to
do.
| | 04:29 |
Down here in my UL I'm going to add a
class of inline-list.
| | 04:34 |
So if I save that page and I go here into
Firefox and I refresh.
| | 04:43 |
Lo and behold.
We have a list going horizontally across
| | 04:46 |
the bottom of the page.
And if I wanted to center this footer
| | 04:49 |
across the whole bottom of the page, I
could do that as well.
| | 04:52 |
Currently, I have this in a large grid of
12 so this is going all the way across
| | 04:56 |
the bottom of the page over here to the
side.
| | 05:01 |
So if I wanted to center that text
actually in the middle, I could do that
| | 05:04 |
using the centering portion of the grid
system.
| | 05:08 |
Here inside of my footer class, instead
of a large 12, what if I set this up to
| | 05:12 |
be a large six, and I said large hyphen
centered.
| | 05:16 |
And if I do that, and put that into my
webpage, then my footer is going to
| | 05:19 |
center all the way across the bottom of
the entire page.
| | 05:23 |
So it's just sort of depends on how you'd
like to present it, and what your design
| | 05:28 |
sense says.
But you could certainly center this, or
| | 05:32 |
you could align it left, whatever you
like.
| | 05:36 |
And whatever strikes your fancy as far as
the design goes.
| | 05:38 |
That gives you a few tips on styling
lists inside of Foundation.
| | 05:43 |
| | Collapse this transcript |
| Styling buttons| 00:00 |
Buttons are useful to just about any
page.
| | 00:03 |
It's a way of drawing attention to an
important call to action.
| | 00:06 |
Think about how many web pages you've
seen that feature a really large button.
| | 00:11 |
Foundation has several combinations of
classes used to style buttons.
| | 00:15 |
As always, these are defaults that come
with Foundation, which can be overridden.
| | 00:19 |
Let's go ahead and add some register now
links to our HTML that will allow people
| | 00:22 |
to click on a button.
And then go register for the site, and
| | 00:26 |
I'm going to put that in, in three
different places, but I'm going to use
| | 00:29 |
the same little bit of HTML to do this.
Inside of your exercise files folder, you
| | 00:35 |
will find a file called 3-buttons.html.
You can use this file if you've not been
| | 00:40 |
following along through this particular
chapter.
| | 00:43 |
If you have been following along, we're
just continuing on in the same file.
| | 00:47 |
I've also put in your exercise files
folder a code snippets.
| | 00:51 |
And if you just want to go ahead and copy
that little bit of code that's there,
| | 00:54 |
it's some real simple mark up, some words
that say register now.
| | 00:58 |
And I'm going to go ahead and add this to
three places on my page, I'm going to put
| | 01:02 |
it here after the h3 and before the h2.
And I'm going to put a little blank space
| | 01:08 |
around it.
So that you can find it a little bit more
| | 01:10 |
easily on the page.
I'm also going to add it a little further
| | 01:14 |
down the page, after Tuesday here.
And then I'm going to add it once over
| | 01:19 |
here in the right hand column, just after
the second block quote here.
| | 01:25 |
I've got Register Now appearing in three
places on the page.
| | 01:30 |
And if I save this HTML and I put this in
a browser window.
| | 01:35 |
You'll see that the words register now
appear in several places around the page.
| | 01:39 |
Not terribly exciting, they definitely
are not calling interest to themselves.
| | 01:43 |
Although with as few colors as we have on
the page the blue does kind of jump out.
| | 01:47 |
But it is really quite subtle.
The first step is to make these actually
| | 01:50 |
look like a button.
And the way we can do that is simply by
| | 01:54 |
adding a class.
So inside of the a tag itself, we're
| | 01:59 |
going to add a class of button.
And so now I'm going to take that class
| | 02:06 |
of button, I'm going to paste it in all
three instances of the links here.
| | 02:12 |
And if I save that and take a look at
that in my web browser, now they actually
| | 02:16 |
look like buttons.
There we go, nice square blue buttons.
| | 02:21 |
Obviously if you were actually really
building this page, you'd probably make
| | 02:24 |
your Register Now buttons look the same.
But in the interest of showing you all
| | 02:27 |
the ways that Foundation can make buttons
look the same or different.
| | 02:31 |
I'm going to go ahead and talk to you
about some other classes that we can add
| | 02:33 |
to these buttons that will enhance the
way they look.
| | 02:37 |
One of the ways that you can change this
is through color.
| | 02:40 |
This is the default out of the box blue
that we have going on here, but there are
| | 02:43 |
a few other colors in Foundations.
So we can add color to these buttons
| | 02:48 |
through the following classes.
Success, is one of the classes that's a
| | 02:53 |
lovely shade of green.
I added that to the first button of the page.
| | 03:00 |
The second button, which is down here
after Tuesday, I'm going to add an
| | 03:03 |
additional class and I'm going to call
this one alert.
| | 03:07 |
This will make a red button.
And then over here in the right column,
| | 03:11 |
I'm going to add a class of secondary.
Secondary will make a grade button.
| | 03:19 |
Now if I refresh my page again, you will
see we have a great new button over here
| | 03:22 |
on the right side of the page.
Notice the lovely effect when we are over it.
| | 03:27 |
We have a nice green button over here and
we also have red button here at the
| | 03:31 |
bottom of the page.
So that's one way we can change the look
| | 03:35 |
of these buttons.
Another way we can change the look of the
| | 03:38 |
buttons is through size.
There are four sizes that come with Foundation.
| | 03:44 |
Those include tiny, small, medium and
large.
| | 03:47 |
The buttons that you saw on the page
right now are medium buttons.
| | 03:51 |
So I'll show you what tiny, small and
large look like.
| | 03:54 |
This button that's up here on the top of
the right column, I'm going to set to be tiny.
| | 04:00 |
The button that's here at the bottom of
the left column, I'm going to set to be small.
| | 04:08 |
And the button that's up towards the top
of the page, I'm going to set to be large.
| | 04:15 |
So if you save that and take a look at
that in the browser, you'll see some
| | 04:18 |
buttons get bigger, like that one.
Some buttons get smaller, like this one,
| | 04:24 |
which is now tiny, and this one is small.
Finally, we also have the ability to
| | 04:29 |
style these buttons to make either
rounded corners or completely rounded
| | 04:32 |
edges, so it'll look more pill like.
For this red button down here at the
| | 04:39 |
bottom of the page, I'm going to add a
class of radius.
| | 04:45 |
And what that will do is trim off those
pointy corners on the button, and give
| | 04:48 |
them very slightly rounded corners.
That's a very subtle sort of a effect.
| | 04:54 |
Here on register now, I'm going to give
this a class of round.
| | 05:00 |
And round will actually make this button
look pill like.
| | 05:03 |
So if I save that and I put this in the
web browser, sure enough that looks like
| | 05:07 |
a big green pill.
This one up here, tiny which we didn't change.
| | 05:13 |
That's still very pointy corners.
And down here the alert button has a very
| | 05:16 |
subtly rounded corner on it.
So, you see how we could stack those
| | 05:21 |
classes on top of each other to achieve a
look for the button that works best for
| | 05:24 |
whatever it is that we happen to be
doing.
| | 05:28 |
You can achieve some very different looks
with these buttons.
| | 05:31 |
And you can take these classes and
combine them to style your buttons
| | 05:34 |
however you'd like them to look.
| | 05:36 |
| | Collapse this transcript |
| Including panels| 00:00 |
Panels are a nice way of highlighting
certain text or areas on your webpage as
| | 00:04 |
important items.
By default, a panel is a screen back gray
| | 00:08 |
color with pointy corners.
It's a box that goes around whatever it
| | 00:12 |
is that you wrap it around.
You can add some additional styles to a
| | 00:15 |
panel to change its color and round the
corners if you wish.
| | 00:20 |
Panels will be as wide as their
containing grid columns.
| | 00:23 |
If you want panels to be side-by-side,
then your grid should reflect the columns
| | 00:26 |
of the appropriate width and number.
On this page, I have some scheduling
| | 00:32 |
information for Monday and Tuesday.
What I'd like to do is I'd like to set
| | 00:36 |
off that scheduling information as two
panels, and I'd like those panels to be
| | 00:39 |
sitting right next to each other.
What I"m going to do here to make this
| | 00:44 |
happen, is I'm going to nest the row.
So, I'm going to do a div with a class of
| | 00:52 |
row, to start with and after that, I'm
going to put in a div with a class of
| | 00:58 |
large-6 columns.
And that's going to wrap, all the way
| | 01:07 |
around the text that I have here.
So, down here at the bottom, I'll put a
| | 01:12 |
slash div and then after that large six
columns, I'm going to put in another div
| | 01:17 |
and this one will have a class of panel.
And then after that, I'm going to go
| | 01:27 |
ahead and add another div, also with a
class of large hyphen six columns.
| | 01:35 |
And I'm going to put in another div with
a class of panel around Tuesday here.
| | 01:43 |
There we go.
It's a lot of divs to keep track of, so,
| | 01:45 |
as you see, it's pretty easy to get off
track if you're not real careful about
| | 01:48 |
everything that you're doing.
All I've done here is I've taken my two
| | 01:52 |
paragraphs of information and marked them
up a little bit more with some additional
| | 01:56 |
grid-like information, that's that row
and then the large six.
| | 02:01 |
And then the thing that's going to make
these panelicious is the div with a class
| | 02:05 |
of panel.
Go ahead and save this.
| | 02:09 |
I'm going to go ahead and preview this in
my browser.
| | 02:12 |
And as I scroll on down the page here I
have two lovely side by side panels.
| | 02:17 |
Monday, and Tuesday, which sort of
renders these links at the top kind of
| | 02:20 |
useless at this point.
You can take them out if you wanted, but
| | 02:24 |
now I have two panels next to this, so it
looks kind of attractive on this page.
| | 02:29 |
There are some additional styles that you
can apply to panels to make them look a
| | 02:32 |
little bit different.
One is a class of call-out.
| | 02:35 |
Call-out will make the panel turn blue.
And the other class that you could add is radius.
| | 02:41 |
Radius is the same class that we just
saw, in fact, on this button right here.
| | 02:45 |
Radius will round the corners of the
panel.
| | 02:47 |
And you can use these together or
separately.
| | 02:49 |
So I'm going to go ahead and add those,
just so you can see what they look like.
| | 02:53 |
The Monday panel, I'm going to add a
class, callout.
| | 02:57 |
And to the Tuesday panel, I'm going to
add a class of radius.
| | 03:00 |
Now there's nothing that says you can't
have a class of panel callout radius, all
| | 03:03 |
three of them.
But just for fun, I've broken them up a
| | 03:07 |
little bit.
So if you save that page and preview that
| | 03:09 |
in your browser, you'll see that you have
a lovely blue panel over here, that's the
| | 03:14 |
call-out panel.
And over here on the side, this is the
| | 03:18 |
radius panel, and you can see that the
corners are very slightly rounded.
| | 03:23 |
Panels, a very nice way of highlighting
something that's important on your page,
| | 03:26 |
or calling attention to a certain piece
of information.
| | 03:30 |
As always, you can use custom styling to
change these panels, and make them look
| | 03:33 |
however you want.
| | 03:35 |
| | Collapse this transcript |
| Styling thumbnails| 00:00 |
Thumbnail galleries are everywhere.
We've even encountered them here in this course.
| | 00:04 |
Back in the grid chapter, we had
something that kind of looked like a
| | 00:07 |
Thumbnail Gallery.
I'd like to incorporate that HTML into
| | 00:11 |
this page that we've been developing.
That block grid that we talked about
| | 00:15 |
earlier is a great way to display these
thumbnails, but wouldn't it be even
| | 00:18 |
better if they looked kind of more
thumbnail-ish.
| | 00:22 |
Fortunately there's classes to do that
inside of Foundation.
| | 00:25 |
I am looking at my thumbnail document
here.
| | 00:28 |
If you've been following along with me
through the previous few videos in this
| | 00:31 |
chapter, just keep on working in the
document you're in.
| | 00:35 |
If you're jumping in right now to look at
this, there is a document called
| | 00:38 |
three-thumbnails.html inside of your
exercise files folder.
| | 00:43 |
Also in you exercise files folder, you'll
find a document called code snippets.txt.
| | 00:48 |
Go ahead and open that up, and copy the
HTML from that.
| | 00:51 |
This is our starting markup here for our
thumbnail grid.
| | 00:56 |
So, if you just copy that, and I'm
going to paste it into my document.
| | 00:59 |
And I'm going to just pass this Register
Now button here, in the main part of the
| | 01:04 |
webpage, right around line 51.
Go ahead and paste in that thumbnail gallery.
| | 01:09 |
So there we go.
We have our featured artists, we have a
| | 01:13 |
paragraph, we have our bulleted list,
it's all marked up here and we have our
| | 01:17 |
thumbnails inside of that.
So if you go ahead and save this document
| | 01:22 |
and display it in a browser, you should
see down here at the bottom of the page,
| | 01:25 |
there's our little opening text and all
of our featured artists right here.
| | 01:32 |
So now the next question is, how can we
make these guys look a little bit more
| | 01:35 |
like thumbnails.
And we can do that of course, with just a
| | 01:38 |
very simple class, and I'm going to apply
that class here to the image tag itself.
| | 01:43 |
I'm going to add a class of TH and that's
really all I have to do.
| | 01:48 |
If I add that one class of TH, and I've
added that to just the very first
| | 01:52 |
thumbnail here in the grid and save my
document.
| | 01:58 |
I'm going, I'll go ahead and refresh my
page.
| | 02:02 |
You'll see that this image is now got a
nice little border wrapped around it.
| | 02:06 |
And when I roll my mouse over it, you can
see there is a subtle blue hue appears
| | 02:10 |
all the way around the thumbnail.
It looks very, very clickable now.
| | 02:14 |
Of course, there's no anchor tag and
there's nowhere that this thumbnail is
| | 02:17 |
linking, but we will cover that in a
later video.
| | 02:20 |
You'll also see that my grid got thrown
off a little bit by putting the thumbnail
| | 02:24 |
class on that one image.
And the grid is thrown off here because I
| | 02:28 |
have that class applied to one image.
When I apply it to all of them, the grid
| | 02:33 |
will look okay again.
I'm going to go ahead and add that class
| | 02:36 |
of TH to all of these thumbnails.
Now, when I take a look at this again in
| | 02:42 |
my web browser, they all have lovely
thumbnail look to them.
| | 02:46 |
And when I roll my mouse over to them,
you can see the lovely blue sort of halo
| | 02:49 |
that appears around all these pictures.
It's just great.
| | 02:54 |
There is of course one more class that I
can add to this.
| | 02:57 |
Right now all of my thumbnails have all
got very pointy ends on them.
| | 03:00 |
Just as we've seen before, if you add the
class of radius.
| | 03:05 |
So instead of just TH, add TH and radius,
you will see a rounded corner.
| | 03:10 |
And I'm going to go ahead and add this
class of radius to just the very first
| | 03:14 |
row, to the very first three thumbnails,
just so that you can see what that looks like.
| | 03:21 |
Go ahead and save that.
Refresh your web page, and you should now
| | 03:25 |
see the very first few thumbnails have a
very subtle rounded corner applied to them.
| | 03:30 |
And remember that rounded corner is
applied only to this gray border that
| | 03:34 |
goes around the thumbnails.
It's not applied to the image itself.
| | 03:38 |
Note that the image still has pointy
corners.
| | 03:41 |
In your image treatment, if you want
these things to match, you may need to
| | 03:44 |
save your images out with a little bit of
a rounded corner on them, when you're
| | 03:47 |
working with them inside of Photoshop or
Fireworks or GIMP or any of the other
| | 03:50 |
image processing programs you might be
using.
| | 03:56 |
And the rest of them still have pointy
corners because I have not applied the
| | 03:58 |
radius class to those yet.
Our thumbnails are starting to look more thumbnaily.
| | 04:04 |
The next thing we need to do to those
thumbnails is actually, link them up to
| | 04:06 |
something that will make them go
somewhere when we click on them.
| | 04:09 |
And I'll be covering that in the next few
chapters.
| | 04:12 |
| | Collapse this transcript |
| Including flexible video| 00:00 |
The two most popular video sites out
there right now are YouTube and Vimeo.
| | 00:05 |
It's very common for a client to want to
incorporate video into their site, from
| | 00:08 |
one or both of these sources.
You probably already know how to embed a
| | 00:12 |
video on a page.
But can you style it with foundation to
| | 00:15 |
make sure that video is responsive?
Fortunately, that's really really easy to
| | 00:19 |
do with foundation.
I have a video here for Roux Academy.
| | 00:24 |
And this is the video that's displaying
here inside of Vimeo, and here is the
| | 00:29 |
exact same video here displaying inside
of YouTube.
| | 00:34 |
So what I'm going to do is, I'm going to
go ahead and incorporate these into my
| | 00:37 |
web page.
Right now I have open 3-video.html.
| | 00:42 |
If you've been following along with me in
this chapter, you can continue working in
| | 00:46 |
your exact same document.
If you're jumping in right here, you can
| | 00:49 |
find 3-video.html inside of your exercise
files folder, the links to these
| | 00:53 |
particular videos are available.
It's also a file inside of your Exercise
| | 00:59 |
Files folder, which contains these two
URLs so that you can go and get the
| | 01:02 |
videos there.
So, let's try the YouTube video first.
| | 01:08 |
I'm going to put this in just after about
the event but before the schedule.
| | 01:12 |
So, right in this area, I'm going to want
to drop in that YouTube video code.
| | 01:17 |
Inside of my browser, inside of YouTube,
if I go to the Share link down here at
| | 01:20 |
the bottom, this will give me a link.
Where I can email this link to somebody
| | 01:25 |
and they can click on it and watch inside
of the YouTube interface.
| | 01:29 |
But what I really want to do is embed
this.
| | 01:31 |
So, I'm going to click on the Embed link,
and there we have the code that I need.
| | 01:36 |
In order for this to show inside of my
web page at, in this case, 560x315, I can
| | 01:40 |
change that size to other sizes if I
want.
| | 01:44 |
There's all kinds of other options here.
I'm just going to take this as the
| | 01:48 |
default, and I'm going to Ctrl or Cmd+C
to copy that little bit of code.
| | 01:52 |
And then, I'm going to paste that on in
here, in sublime text.
| | 01:56 |
So, that's just going to put the video
inside the web page.
| | 02:00 |
In order for this to work with Foundation
and make sure that it's in a responsive
| | 02:03 |
kind of framework, then I'm going to need
to wrap this in a DIV tag.
| | 02:08 |
This is going to be a DIV with a class of
flex-video.
| | 02:15 |
And here is my video right here.
And then I'm going to close my DIV.
| | 02:24 |
If I just go ahead and save this page now
and I take a look at this in my web browser.
| | 02:29 |
She's scrolling down here, and there's my
YouTube video, and you can see this is
| | 02:33 |
responsive as I make the page smaller.
You can see that the video is going to
| | 02:38 |
re-size there inside of my grid until I
hit the 768 pixel break point.
| | 02:43 |
Because I'm using the large, this is
going to then stretch all the way across
| | 02:46 |
the page.
Had I used the small grid, it would
| | 02:49 |
continue to re-size within that small
grid area, whatever size it was.
| | 02:54 |
And, now as I make the page smaller, that
video is going to continue to re-size.
| | 02:58 |
So, that's YouTube.
What about Vimeo, which is also a very
| | 03:03 |
popular option?
Here within Vimeo, I'm going to need to
| | 03:07 |
go to my Share Link here.
And this is going to give me my embed
| | 03:11 |
code, right underneath of that.
And I'm going to copy that embed code,
| | 03:15 |
Ctrl or Cmd+C to copy it.
Then inside of sublime text, I'm going to
| | 03:20 |
Ctrl or Cmd+V to paste that on in place.
As I did with the YouTube video, I'm
| | 03:25 |
going to want to wrap this in a DIV class
of flex video, with a slash DIV down here.
| | 03:34 |
And I'm probably want to indent this
i-frame here a little bit.
| | 03:38 |
Make that a little bit easier to read.
The other thing that I'm going to need to
| | 03:42 |
add to this particular DIV, with a class
of flex-video, is actually a class of Vimeo.
| | 03:48 |
And Foundation has added this because of
the way that Vimeo is displaying their
| | 03:51 |
videos and where their control buttons
are located, and so forth.
| | 03:56 |
That they had to make a few additional
tweaks for a Vimeo video to work inside
| | 04:00 |
of the web page.
So, if you'll go ahead and save that, you
| | 04:04 |
can go ahead and take a look at that
inside of your web browser.
| | 04:08 |
And you'll now see that you have two
videos, one on top of the other, there we
| | 04:12 |
go, there's the Vimeo version.
And as we collapse the page here with
| | 04:16 |
Vimeo, you can see that it resizes until
we hit that break point.
| | 04:21 |
Then, it's going to stretch all the way
across the screen again.
| | 04:23 |
And then, of course, continue to re-size
smaller and smaller after that, as the
| | 04:26 |
screen gets progressively smaller.
So, it's really quite simple to embed
| | 04:32 |
videos inside of a Foundation-based web
page.
| | 04:35 |
All you need to do is remember to wrap
the div with a class of flex video, plus
| | 04:39 |
or minus that Vimeo class if you need to.
And that is going to make you have
| | 04:45 |
responsive video inside of your webpage.
| | 04:48 |
| | Collapse this transcript |
| Overriding the core Foundation CSS| 00:00 |
As I've mentioned at the beginning of the
course, Foundation offers a comprehensive
| | 00:04 |
way of changing your styles globally via
the use of Compass and Sass.
| | 00:08 |
This is the best way to style your
Foundation site since you can easily
| | 00:11 |
manage the global variables ensuring your
page is going to change uniformly.
| | 00:16 |
However, it is possible to not use Sass
and just use CSS to override Foundations
| | 00:20 |
core styling and of course enhance it as
well.
| | 00:24 |
You can use it to tool like Firebug to
identify the styles effecting an element
| | 00:28 |
on your page.
Copy those styles to your custom style
| | 00:31 |
sheet and then override those desired
values as always you can also create your
| | 00:35 |
own custom styles in the style sheet.
Which would be new styles that are
| | 00:39 |
outside the realm of foundation for
styling your page.
| | 00:43 |
And of course you can also combine
working with Sass and working with DCSS
| | 00:45 |
overrides when working on your site as
well.
| | 00:48 |
So I'm starting with this document here
called 3-overridecss.html.
| | 00:53 |
It's located inside your exercise files
folder if you have not been following
| | 00:56 |
along with me, if you have been following
along, it's the same document we've been
| | 01:00 |
working on this whole chapter.
So if I just put that in the web browser,
| | 01:05 |
this is the way the page is looking right
now.
| | 01:10 |
Let's say that I want to change this
button.
| | 01:12 |
Right now it's this lovely shade of
green, I would actually rather have this
| | 01:16 |
appear as an orange button.
So the easiest way to do this is to use a
| | 01:21 |
tool like Firebug.
You can download Firebug by going to
| | 01:25 |
getfirebug.com and download it and
install it inside of your Firefox web browser.
| | 01:30 |
It's also available for Chrome if that's
what you prefer.
| | 01:34 |
And I'm just going to go ahead and click
on Firebug.
| | 01:36 |
It's up here in the upper corner, looks
like a little roach.
| | 01:39 |
Click on the Firebug and you'll see your
page the way it's laid out.
| | 01:43 |
You can use this to locate where in the
HTML that button happens to appear.
| | 01:50 |
So it's somewhere inside the body tag, we
know that because the screen turned blue.
| | 01:53 |
It is in the first row.
So, we're going to go ahead here, it's in
| | 01:57 |
the first column so we're going to go
here.
| | 02:00 |
Well its not the h1 its not the sub
header it is this paragraph here and then
| | 02:04 |
here is my button.
So if I just click on that and then look
| | 02:08 |
over here on the side this is going to
give me all of the various classes that
| | 02:12 |
are used to style this particular button.
For example, it's telling me that the
| | 02:18 |
button round, there's my border radius
it's a 1000 pixels on every corner.
| | 02:23 |
Sort of ensures that whatever it's
applied to is always going to be round.
| | 02:27 |
Its going to be large so defining what
sizes large are and here's the part
| | 02:31 |
that's defining the color of success.
As we continue on down the page here we
| | 02:36 |
have the button itself and styling that's
associated with that.
| | 02:39 |
Notice it also has this transition as to
how the color is going to change as you
| | 02:43 |
transition in and out of the button.
So you can continue on down here and look
| | 02:48 |
at all the code that affects this
particular button.
| | 02:52 |
But we're really most interested in
button.success, which is the class of button.success.
| | 02:57 |
Notice we also have the html tag
button.success, which you could also use
| | 03:01 |
these classes with.
I'm just going to go ahead and copy this
| | 03:04 |
little bit of CSS here.
Ctrl+Cmd+C to copy it and then were
| | 03:08 |
going to head back into sublime text.
Open up app.css and then I'm going to add
| | 03:13 |
that style right here into this document,
just paste in that particular item.
| | 03:19 |
This is going to override the styling
that's in the Foundation CSS with
| | 03:24 |
whatever I change this to.
I'm going to change my background color
| | 03:29 |
here from that lovely shade of green to
fb0, which is an orange color.
| | 03:36 |
I'm also going to give this a border
color and that border color is going to
| | 03:42 |
be e6a800.
Finally, I'm going to give it a color
| | 03:45 |
itself, the text on the button is going
to be a dark grey which will make this
| | 03:49 |
easier to read.
And if you save that CSS and we go back
| | 03:53 |
to our webpage, you can turn off Firebug
there for a second.
| | 03:58 |
Hit Refresh.
Your button is going to become bright
| | 04:00 |
pumpkin orange and if you roll your mouse
over it though, it's still going to be
| | 04:04 |
dark green.
That's because we only change the regular
| | 04:08 |
state for the button.
We have not looked at the hover state.
| | 04:12 |
So to look at the hover state.
If we take a look at Firebug and you roll
| | 04:16 |
your mouse over the button, you see how
the code is changing here to tell you
| | 04:19 |
what's going on with this particular
style.
| | 04:23 |
Button.success:hover and
button.success:focus is going to change
| | 04:28 |
the color of the button to white and the
background color to green.
| | 04:33 |
It's very hard to copy this from Firebug
because I'm hovered over the button here
| | 04:37 |
so it's hard to grab that text but it's
fairly easy to remember.
| | 04:42 |
So I'm just going to copy that into my
style sheet.
| | 04:45 |
So button.success:hover,
button.success:focus,
| | 04:53 |
button.success:hover and
.button.success:focus.
| | 05:02 |
If we go ahead and add our style inside
of that we can we would like it to have a
| | 05:14 |
color of white.
And we would like it to have a background
| | 05:25 |
color of E6A800, that darker orange.
Now when you save this and you go back to
| | 05:34 |
your webpage and you hit refresh, there's
your button.
| | 05:38 |
When you hover over it, now it's going to
go a little bit darker and the text will
| | 05:41 |
change to white.
So we've just overwritten just for the
| | 05:46 |
button with a class of success.
It has to be a class of button and a
| | 05:49 |
class of success in order for these color
changes to affect this.
| | 05:55 |
So that's one way of reworking your CSS
here inside of foundation.
| | 05:59 |
In this particular case we take an
existing class and we've actually
| | 06:03 |
rewritten its properties inside of our
custom style sheet.
| | 06:07 |
We decided we love this orange color.
What if I'd like my panels to be this
| | 06:11 |
same sort of orange color here?
How could I make that happen?
| | 06:14 |
Well, you could certainly take one of the
styles that affects the panels and you
| | 06:18 |
could attach a color to that.
Or you could simply add another class and
| | 06:22 |
then write styling for that class.
That's the approach I'm going to take
| | 06:27 |
this time in my html down here in my
panels.
| | 06:30 |
Maybe I normally like my panels to be the
grey color or the blue color but for this
| | 06:34 |
particular panel I'd like for this to be
orange.
| | 06:38 |
I can just simply add another class to
that.
| | 06:40 |
Lets call it highlight and I'm going to
add that class to both of these.
| | 06:48 |
Both of the panels now have that class of
highlight.
| | 06:50 |
I'm going to go to my CSS here and I can
add them, a class of dot panel dot
| | 06:56 |
highlight and inside of that class I
could say I want a background-color of
| | 07:03 |
that orange fe0.
And I would like a color of that nice
| | 07:12 |
dark gray 333 and I want a border-color,
of E6A800 and you can go ahead and save that.
| | 07:22 |
And now when you take a look at your
webpage and you hit Refresh, there's your
| | 07:28 |
orange button and down here are your
orange panels.
| | 07:33 |
Now notice that the text in one panel is
white and the text in the other panel is
| | 07:37 |
that dark grey.
That actually has to do with the
| | 07:41 |
additional classes that are on those
panels.
| | 07:44 |
On that first panel we also have a class
of call out.
| | 07:48 |
And when we added the class of call out
that changed the panel to the blue color
| | 07:51 |
with white text.
So that white text isn't quite being
| | 07:55 |
overwritten from the call out.
Probably the smartest thing to do is just
| | 07:58 |
to take out that classic call outs since
we aren't really using it anyway and save
| | 08:02 |
your page.
And then when you refresh it again, your
| | 08:06 |
text for that panel for Monday will then
be the dark gray, the same as the panel
| | 08:10 |
for Tuesday is.
This is two ways you can override CSS in Foundation.
| | 08:17 |
You can either write your own custom
classes and apply them inside of your
| | 08:19 |
document with the styling that's
associated with them.
| | 08:23 |
Or you can find that little bit of code
that is responsible for styling something
| | 08:27 |
within Foundation.
And you can write a style to override
| | 08:31 |
that inside of your own custom style
sheet.
| | 08:34 |
| | Collapse this transcript |
| Working with visibility classes| 00:00 |
I want to take a look at one last area in
the styling that comes with Foundation.
| | 00:05 |
And that has to do with Foundations
visibility classes.
| | 00:08 |
These are classes that can be used to
make whatever items have the class,
| | 00:12 |
become either visible under certain
conditions or invisible under certain conditions.
| | 00:19 |
And there are a ton of these classes.
They're incredibly useful.
| | 00:24 |
And I just wanted to show you where you
can find the documentation for these on
| | 00:27 |
the Foundation website.
Then I'm going to show you one of these
| | 00:31 |
classes in action.
If you take a look in your web browser,
| | 00:34 |
at the Foundation website, which is
foundation.zurb.com, click on the Docs
| | 00:38 |
link here in the upper right corner.
Then you're going to click on Using Foundation.
| | 00:45 |
There's a link here for Visibility
Classes.
| | 00:48 |
So if you click on that, what you're
going to see here first of all is some of
| | 00:51 |
these visibility classes in action.
Here we've got the Show Visibility controls.
| | 00:57 |
This is going to show these sentences if
you're under certain conditions.
| | 01:02 |
That I'm on a medium, large, or extra
large screen, a large screen, large or
| | 01:05 |
extra large screen and so forth.
So if I make this smaller, you'll see how
| | 01:10 |
the text starts to adapt depending on the
size of the window that I'm creating here.
| | 01:18 |
Likewise here with the hiding.
This is also going to affect that kind of thing.
| | 01:23 |
It's telling me that I'm in landscape
orientation.
| | 01:26 |
So that's kind of cool.
Whether your phone is up and down or side
| | 01:28 |
to side, it will be able to tell you
whether you're in portrait or landscape
| | 01:31 |
orientation and whether you're on a touch
enabled device.
| | 01:35 |
So this first part of the documentation
just shows you some of these classes in action.
| | 01:40 |
Further down on the page here, we have
using our HTML classes with CSS, and this
| | 01:44 |
is a list of all of the possible classes
that you can include in your web page to
| | 01:48 |
show or hide something under various
conditions.
| | 01:54 |
First of all, here's a chunk of text
here, it's called the Show Classes.
| | 01:58 |
If you applied a class equals show for
small inside of your HTML.
| | 02:02 |
Whatever element that's applied to is
going to be visible through 768 pixels.
| | 02:07 |
But at 769 pixels, that particular item
would then be hidden.
| | 02:12 |
Some of these are for medium sizes, large
sizes, extra large sizes.
| | 02:17 |
And they give you the pixel dimensions
for their definitions of what small,
| | 02:20 |
medium, large, and extra large are.
Obviously you can always apply custom
| | 02:24 |
styling or work with Sass to change those
particular dimensions for these styles.
| | 02:30 |
Likewise the hide classes are going to
hide certain information.
| | 02:35 |
Say you have a great big huge picture you
could say hide for small and the picture
| | 02:39 |
would never show until you hit 768 pixels
and then at 769 pixels the picture would
| | 02:44 |
then show.
Likewise pretty much all of these classes
| | 02:49 |
for hides are mirroring those for shows.
You could line up several pictures on a
| | 02:53 |
page, and have different versions of the
image displaying.
| | 02:56 |
Depending on the dimensions of the
screen, and it doesn't have to be images.
| | 03:00 |
You could apply this to divs, to
paragraphs, to other elements that are
| | 03:04 |
there on your webpage.
Finally, down here towards the bottom, we
| | 03:08 |
have show and hide classes for landscape
and portrait orientations.
| | 03:11 |
If you have a great big long image that
looks really great on a landscape
| | 03:14 |
orientation, but it shrinks down so far,
say on your portrait orientation, then
| | 03:18 |
it's almost invisible.
Maybe you want to make it completely
| | 03:22 |
invisible and use one of these classes to
get rid of that particular image as you
| | 03:26 |
move into different types of layouts
screens.
| | 03:29 |
And likewise, you can have certain
classes that are available if something
| | 03:32 |
is a touch device or not a touch device.
That could be really handy if you've got
| | 03:37 |
a set of links that are kind of close
together.
| | 03:39 |
That works great if somebody's looking at
a website with a mouse, but if they've
| | 03:43 |
got fat fingers and they're taking a look
at it on their phone.
| | 03:47 |
Maybe you want some more space between
those links so you can show or hide
| | 03:50 |
various things for touch as well.
So that's where you find all these
| | 03:55 |
classes here on the Foundation website.
Once again this is in the documentation
| | 04:00 |
on the Docs link.
Under Using Foundation look at Visibility Classes.
| | 04:04 |
Scroll on down the page here and you'll
find this little block here that'll
| | 04:06 |
explain to you what all of the classes
are.
| | 04:09 |
So I'm going to show you this in action
using an image on the page.
| | 04:13 |
We've been working on to this point in
time.
| | 04:14 |
If you've been following along all the
way through the CSS chapter its the same
| | 04:18 |
document we've been working on.
If you're just jumping in, if you go to
| | 04:22 |
the exercise files you'll find a file
called three hyphen visibility.html.
| | 04:28 |
You will also need an image in there
called banner.jpg.
| | 04:32 |
Copy the image into your Image folder
inside of your little Foundation site.
| | 04:36 |
So I'm going to go ahead and add an image
to this particular document.
| | 04:41 |
I'm going to add that down here after the
h1 and before the h3.
| | 04:46 |
It's going to be an image with a source
of image slash banner.jpeg, alt equals
| | 04:52 |
quote, quote, your alt tag is supposed to
support what that image subject is about.
| | 05:01 |
If the image is just there to make the
page pretty, and maybe it doesn't really
| | 05:04 |
provide any information on the page other
than making it beautiful, you still have
| | 05:07 |
to have the alt attribute, but you don't
necessarily need to have text inside of it.
| | 05:13 |
So now that I've got this here on the
page, I'm just going to go ahead and save
| | 05:15 |
it and show you what the page looks like.
So I'm just going to open that in the browser.
| | 05:20 |
I have my image, it looks like a banner.
It's a pretty picture.
| | 05:23 |
That is the one change that I've made to
this page.
| | 05:26 |
As I make my page smaller.
That banner is going to shrink on down
| | 05:30 |
here, and then when I get to sort of this
tablet resolution of 768 pixels, it's
| | 05:34 |
going all the way across the page, and
then I continue to shrink this down for
| | 05:38 |
mobile devices.
And it just sort of looks like a strip of color.
| | 05:44 |
It does kind of look silly by the time it
gets down to this point.
| | 05:48 |
Not really enhancing the page that much.
It actually works much better up here at
| | 05:51 |
these larger resolutions.
So, what I would like to do is I'd like
| | 05:54 |
to show that picture.
When somebody's at more of a desktop resolution.
| | 05:58 |
But as they get smaller, say at this
break point here around 768 pixels, what
| | 06:02 |
I'd like to do is have this banner just
disappear, and not display on the page.
| | 06:09 |
To do that, I'm going to need to take a
look at my Visibility classes.
| | 06:12 |
So I'm saying I want to hide my images
after 768 pixels.
| | 06:18 |
So the correct class for that would be
Hide for Small.
| | 06:21 |
So I can just copy that.
And here inside of my webpage, I'm just
| | 06:27 |
going to add a class of hide-for-small.
And I'm going to save that.
| | 06:34 |
Now when I come back and look at my
webpage, you'll see that nothing's
| | 06:37 |
changed here for these larger dimensions.
I've got this picture, it's still in place.
| | 06:42 |
But as I make my screen smaller, when I
hit that 768 pixel break-point, that
| | 06:46 |
image completely disappears from the
page.
| | 06:50 |
Now they can certainly put in a second
image at this point and have it say Show
| | 06:53 |
For Small, so that I don't have no
picture on the page at all.
| | 06:57 |
That would be something that I could add
at this point, or I could just leave the
| | 07:00 |
page just the way it is.
So, now that you have a sense of how
| | 07:04 |
those visibility classes are working, you
may want to make use of them on your next
| | 07:08 |
Foundation project.
| | 07:11 |
| | Collapse this transcript |
| Challenge: Style a page| 00:00 |
Now that we've had nine videos on styling
inside of Foundation, it's time to part
| | 00:05 |
all of those wonderful learning
experiences into action.
| | 00:10 |
And what I've got here is a document
called 3-stylechallenge.html.
| | 00:15 |
You'll find it in your Exercise Files
folder.
| | 00:17 |
If you take a look at this document, it's
pretty darn simple.
| | 00:21 |
There's nothing in here but a bunch of
paragraphs.
| | 00:23 |
And this is a schedule for this
conference website that we've been
| | 00:27 |
working on.
It's just a series of paragraphs there's
| | 00:30 |
a couple links in here, there's a couple
images in here.
| | 00:33 |
Those images are also available inside of
your Exercise Files folder.
| | 00:37 |
If you've been following along with the
last view videos, you already have these
| | 00:41 |
images in your foundation site.
If you don't, you're going to need to
| | 00:46 |
copy over the folder called Thumbs and
the two images that are inside of there.
| | 00:51 |
And put that inside of your Images
folder, inside of your Foundation site,
| | 00:54 |
in order for these paths to work
correctly.
| | 00:58 |
If you've already been following along,
you've got the images so you don't need
| | 01:00 |
to recopy them.
That's pretty much what the code looks
| | 01:03 |
like, it's just a bunch of paragraphs.
If I take a look at this in my browser,
| | 01:07 |
you'll see that it's not a terribly
exciting page.
| | 01:11 |
It's just a lot of blah, blah, and a
couple of pictures here.
| | 01:15 |
What I'd like for you to do is take this
page and make it look lovely.
| | 01:21 |
Use the grid system and all the wonderful
learning that's come from the grid system
| | 01:24 |
videos to lay this page out in a more
interesting manner.
| | 01:28 |
And then, make use of some of those CSS
styles that would make this page more interesting.
| | 01:33 |
Obviously, the mark ups all wrong,
because it's all paragraphs.
| | 01:37 |
So, you're going to need to mark some
things up with headings.
| | 01:40 |
You may want to give this register now
link here.
| | 01:43 |
You might want to give that a treatment
as a button.
| | 01:45 |
You might want to make some columns here.
You might want to wipe lose of that
| | 01:48 |
panels, that we learned in the CSS
chapter and just try to make this page
| | 01:51 |
look a little bit more interesting as you
go.
| | 01:55 |
That's your challenge.
And I'll show you how I solved it in the
| | 01:58 |
next video.
| | 01:59 |
| | Collapse this transcript |
| Solution: Style a page| 00:00 |
So how'd you do with the challenge?
Hopefully you came up with some
| | 00:03 |
interesting ideas for laying out that
particular webpage.
| | 00:07 |
Here's what I did, I've got my schedule
centered in the middle of the page here.
| | 00:12 |
I've got a big blue box here across the
top, that's that panel that we've seen in
| | 00:16 |
action before.
And I've got my register now button set
| | 00:19 |
up with a big huge rounded pill like
button here.
| | 00:23 |
I've written a couple of custom styles,
as well.
| | 00:27 |
And then further down on the page here
I've got some headings.
| | 00:30 |
I've got these images here, I have been
given the thumbnail treatment.
| | 00:34 |
I've got some headings in place here.
Notice also this treatment that I've
| | 00:37 |
given to the time and the location for
each one of these particular events that
| | 00:41 |
are happening in this conference.
Instead of stacking them underneath each
| | 00:46 |
other I made them appear side by side.
Now that you know what my page looks like
| | 00:50 |
let me show you what my markup looks
like.
| | 00:54 |
So over here in sublime text, you'll see
here that I started this off with a row.
| | 01:00 |
And of course this was the header for the
webpage, so I gave that a class of header.
| | 01:04 |
And it's centered because way back, many
many videos ago, I wrote a style to
| | 01:08 |
center anything that's inside of the
header tag.
| | 01:12 |
So my text is centered inside of that.
A little bit further down on the page
| | 01:16 |
here, I've got my panel.
And you see that callout, remember
| | 01:20 |
callout makes it blue and turns the text
white.
| | 01:23 |
And radius rounds the corners just a tiny
little bit, so I've done that.
| | 01:28 |
Then I've written a custom style here.
This paragraph with a class of floatright.
| | 01:33 |
Inside of that is a link, that's the
button, I made it round.
| | 01:37 |
That gives it the pill like shape.
Secondary is the color gray, and large
| | 01:41 |
is, make it really honking big.
Then a little bit further on down the
| | 01:45 |
page here, I've divided the next part of
the page into two columns one for Monday
| | 01:49 |
one for Tuesday.
I've given these h2s with a class of subheader.
| | 01:55 |
So its not that big heavy h2 treatment
its a little bit lighter gray a little
| | 02:00 |
bit thinner text.
And then for the times here, underneath
| | 02:04 |
the names of each one of these sessions,
which are h3s.
| | 02:09 |
I've given this a class of inline list
that will make the time and the location
| | 02:12 |
show up next to each other.
Then, I've got my images here.
| | 02:17 |
They've been given the same custom class
of floatright.
| | 02:20 |
And of course, th is a thumbnail
treatment for your images.
| | 02:23 |
I think that pretty much hits the high
points of this page.
| | 02:27 |
So, I've just put in a few of these
classes to work here.
| | 02:31 |
It doesn't take a lot of code to make the
page look really different.
| | 02:34 |
Just a little bit of the foundation
markup and the page is looking much more interesting.
| | 02:40 |
So these are some styles that we've been
writing all along here.
| | 02:42 |
We've had the columns, styles is the
border that we've turned on and off where
| | 02:45 |
the grid's been concerned.
So this is my cumulative style sheet for
| | 02:49 |
the entire course.
The header was centering, where we
| | 02:52 |
centered things in the grid back in the
grid chapter.
| | 02:55 |
In this case, I've aligned all the text
in the header to the center.
| | 02:58 |
And then this was the treatment if I use
the success class, along with the button
| | 03:02 |
class together.
But since I didn't use success, I used
| | 03:06 |
secondary, my button is turned gray
instead.
| | 03:10 |
Then I wrote some custom styles here for
the panel.
| | 03:13 |
I gave it, also, a class of highlight.
I didn't use the class of highlight in
| | 03:16 |
this particular page.
The panel is not showing as that orange
| | 03:19 |
color, it's just blue.
So the custom styles that I wrote this
| | 03:23 |
time for this particular exercise, one of
them I used and one of them I didn't.
| | 03:29 |
The foundation doesn't have any classes
for making things float.
| | 03:33 |
And its always a very helpful thing to
have two classes to make things float on
| | 03:36 |
the page, to whatever these classes are
applied.
| | 03:39 |
You want to float images, you want to
float buttons, you want to float whatever
| | 03:42 |
it happens to be.
So I've written two classes, a floatleft
| | 03:46 |
and a floatright class, and I've aligned
these accordingly.
| | 03:49 |
So that there's a little bit of space
around that particular item.
| | 03:53 |
So the text can wrap around those objects
very, very nicely.
| | 03:56 |
I wrote both of these styles because it
seems silly to write a floatright, but
| | 03:59 |
not a floatleft.
I really only used one of these, that was
| | 04:03 |
the float right style.
You're welcome to take those styles and
| | 04:06 |
use them in your own work.
They are included in your exercise files
| | 04:09 |
as well.
If you take a look in the exercise files
| | 04:11 |
folder, you'll find a little text file
where I have these styles for you, so you
| | 04:15 |
can copy and paste them easily.
Your challenge page may look completely
| | 04:20 |
different than my solution, and that's
completely fine.
| | 04:22 |
I didn't really give you a whole lot of
guidelines for how that page should look.
| | 04:27 |
If you've made use of what you've learned
so far, you did a great job.
| | 04:30 |
| | Collapse this transcript |
|
|
4. Navigation SystemsAdding breadcrumbs| 00:00 |
So, in this next chapter, we're going to
move on and take a look at Foundations
| | 00:04 |
methodology for styling different kinds
of navigational systems.
| | 00:08 |
This document is the starting document
for this chapter, you can find it in your
| | 00:12 |
exercise files folder.
We'll just go ahead and open that up in a browser.
| | 00:17 |
You'll see how the page is laid out here.
There's a main navigation, that we'll
| | 00:21 |
ultimately wind up making go across the
page in a horizontal orientation.
| | 00:25 |
We have some sub-navigation over here,
which is going to go on the left side of
| | 00:29 |
the page, as it's own sub-navigation.
And then we have a breadcrumb, that's
| | 00:34 |
appearing here at the top of this page.
So, we're going to work on styling all of
| | 00:38 |
these things.
But in this video, I'm going to talk
| | 00:40 |
specifically about the breadcrumbs.
Breadcrumbs are a great way to show where
| | 00:44 |
you are in the hierarchy of a website.
They're really commonly used on websites
| | 00:48 |
that have more than about say 50 pages of
navigation.
| | 00:51 |
Foundation comes with some really simple
classes for styling the Breadcrumb bar on
| | 00:55 |
your webpage.
What we're trying to show here is that,
| | 00:58 |
you're on the home page, you went to the
about part of the website and now you're
| | 01:01 |
on the Mission page.
And then there's some additional
| | 01:05 |
navigation here under About, there's a
Mission, a Vision, and an Organizers page.
| | 01:10 |
What I'm going to do now, is show you how
the styling works for the breadcrumbs.
| | 01:14 |
Back here inside of sublime text, if you
scroll on down at this section class
| | 01:19 |
large seven, which is on line 46.
Just over that you'll see here line 48
| | 01:25 |
has a bulleted list, and this is your
breadcrumb navigation here.
| | 01:31 |
So in order to make this look like
breadcrumbs and not like a list, we're
| | 01:33 |
going to add a couple of classes.
So we're going to start just by taking
| | 01:37 |
our UL and add a class of breadcrumbs.
Go ahead and save that page, and then
| | 01:43 |
take a look at that in your browser.
You'll see now that the breadcrumb is
| | 01:46 |
oriented in a horizontal manner, it goes
very nicely across the top of the page here.
| | 01:51 |
And you can see the various links on the
way down the navigation homepage followed
| | 01:55 |
by the about page, followed by the
mission page.
| | 01:58 |
To show that we are actually on the
mission page though, you might want to
| | 02:01 |
add an additional class.
Here on the LI, you could add a class of
| | 02:07 |
current to indicate that you're at the
mission link inside of the navigation.
| | 02:14 |
So, if you go ahead and save that, and
take a look at that in the browser.
| | 02:20 |
Now the mission link is grayed out.
And when you roll your mouse under it, it
| | 02:24 |
doesn't turn into the finger, which
implies that it's clickable, the way it
| | 02:27 |
does with the about link.
In fact, this mission link is clickable,
| | 02:32 |
because there is an anchor tag associated
with the words mission.
| | 02:35 |
You can see that here inside of your
HTML, there it is.
| | 02:39 |
So, actually that link is clickable, but
we've used a few CSS tricks to hide the
| | 02:43 |
fact that it's a clickable link.
That's pretty much all there is to the
| | 02:47 |
breadcrumb to the page.
I happen to have nested this breadcrumb
| | 02:51 |
inside of a right column on the page, we
could have made it stretch across the page.
| | 02:56 |
And as this page is going to collapse,
I'll show you how that changes.
| | 03:02 |
I'm using a large grid for my layout
here, and the breadcrumb is now
| | 03:05 |
stretching all the way across the page as
it has gotten larger.
| | 03:09 |
And you can see that the bread crumb
continues to adapt as the page gets a
| | 03:12 |
little bit narrower.
Breadcrumbs again.
| | 03:17 |
Great way to indicate where you are in a
website's hierarchy.
| | 03:20 |
They're particularly wonderful if your
website is very large.
| | 03:23 |
| | Collapse this transcript |
| Formatting the side nav| 00:00 |
Now that our breadcrumbs are styled the
next thing I'd like to try is styling the
| | 00:04 |
side navigation.
So this is the navigation that appears on
| | 00:07 |
the left side of the web page.
Mostly we're going to be talking about
| | 00:11 |
this set of links right here about
Mission, Vision and Organizers.
| | 00:16 |
This set of navigation above looks like
site navigation.
| | 00:19 |
It's actually the main navigation for the
website and it will stretch across the
| | 00:22 |
page horizontally.
I'm not going to talk about that just yet.
| | 00:26 |
That's going to be in a video that's
coming up.
| | 00:28 |
Side navigation is really a common
addition to a lot of websites.
| | 00:32 |
It's a great place to park your secondary
navigation or you might just have a
| | 00:35 |
series of quick links or some other kind
of links over in a group that you would
| | 00:38 |
like to include in a sidebar like this
and you want them to be vertically oriented.
| | 00:45 |
Its very simple to format this.
Just as simple as it was to do the breadcrumbs.
| | 00:49 |
If you scroll on down here to right
around line 39.
| | 00:54 |
That is our bulleted list for our side
navigation and what we would like to do
| | 00:57 |
is add a class to the UL.
So that class is going to be quote side
| | 01:02 |
hyphen nav.
Indicating that this is side navigation.
| | 01:07 |
So if you go ahead and save that, we can
put that into a browser, and you can see
| | 01:11 |
now that the links are a little bit more
separated.
| | 01:16 |
The bullets have gone away.
The styling is extremely simple.
| | 01:20 |
That's by design because, remember,
Foundation is expecting that you are
| | 01:23 |
going to enhance their styling with a lot
of your own.
| | 01:26 |
So, maybe you're going to have a
different color.
| | 01:28 |
Maybe you're going to have little icons
appear next to those links.
| | 01:32 |
You can do anything you like with these
particular links but, this is all the
| | 01:35 |
side nav styling is going to do in terms
of styling from Foundation's core.
| | 01:42 |
One additional thing you might want to do
is indicate what page you're on.
| | 01:45 |
So, this mission link here is where we're
at.
| | 01:48 |
And we can indicate that that is
currently the active page of the website,
| | 01:52 |
through, you guessed it, a class called
Active.
| | 01:56 |
And we'll just apply a class of Active to
the LI, which will indicate where we are.
| | 02:00 |
If you save that page one more time, and
take a look at it here inside of your web
| | 02:04 |
browser, you'll see that the active link
is styled as Bold and is a nice dark grey color.
| | 02:11 |
So that is indicating where we are in our
navigation.
| | 02:15 |
It is, in fact, still clickable.
This is the finger cursor presentation
| | 02:18 |
which does show that you can definitely
click on this and reload the page if you
| | 02:22 |
wanted to.
All right.
| | 02:25 |
So that's styling for the side
navigation.
| | 02:27 |
Very, very simple.
Keep in mind you'll probably want to
| | 02:30 |
enhance that with a few styles of your
own.
| | 02:32 |
| | Collapse this transcript |
| Formatting the top nav bar| 00:00 |
Now that we've got the breadcrumbs and
the side nav all styled-up and in place,
| | 00:03 |
the next thing I want to work on is
formatting the top Navigation bar.
| | 00:08 |
Into a black bar that's going to stretch
all the way across the page.
| | 00:11 |
We want to make it responsive, so that as
the page gets narrower, the navigation's
| | 00:14 |
going to collapse behind a button that
will reveal the navigation when clicked.
| | 00:19 |
And I'll show you an example of what I
mean.
| | 00:22 |
Inside of the browser here, this is the
Foundation documentation website, at
| | 00:26 |
foundation.zurb.com/docs, you see the
black bar going across the very top of
| | 00:30 |
the screen.
That's the Navigation bar we're going to
| | 00:35 |
try to build.
As I start to make the page narrower.
| | 00:38 |
You'll see how nicely its collapsing.
Little bit by little bit until we hit our
| | 00:42 |
break point.
And at our break point, the navigation is
| | 00:45 |
completely hidden, and what we have
instead is this icon here that says menu.
| | 00:50 |
When you click that then you have a drop
down that will show you all of the
| | 00:53 |
navigation that is appearing on the rest
of the website.
| | 00:57 |
Including this button that says Getting
Started.
| | 01:00 |
That is what we're going to be building.
And we're going to go ahead and give that
| | 01:04 |
a try now, with the code that we have
here inside of 4-topbar.html.
| | 01:09 |
If you've been following along with the
videos in this chapter, you can just
| | 01:12 |
continue working in the document you have
there in front of you.
| | 01:15 |
If you're just jumping in at this point
in time, you'll find four hyphen topbar
| | 01:19 |
inside of the Exercise Files folder.
Copy down into your Foundation site.
| | 01:24 |
You see here how we have our starting
codes at line 24.
| | 01:27 |
This is the row that's going to contain
our navigation.
| | 01:30 |
So we have our div with a class of row,
and a div with a class of large 12 columns.
| | 01:34 |
I chose that because I wanted the
Navigation bar to stretch all the way
| | 01:37 |
across the page.
You could certainly put this Navigation
| | 01:41 |
bar in other types of grid systems as
well.
| | 01:44 |
Now I'm going to need to add some markup
to this, to make this work.
| | 01:47 |
One of the first things that I'm going to
do is around the list itself, we're going
| | 01:53 |
to add a nav tag, nav, with a class of
top hyphen bar.
| | 02:01 |
Foundation is expecting a nav tag in this
position and make sure it contains that
| | 02:05 |
style of top hyphen bar.
Then, this is going to split into two
| | 02:09 |
pieces at this point.
Part of the inside of nav class top bar
| | 02:13 |
is going to contain the information for
the button that's going to appear when
| | 02:17 |
the page widths become narrower.
And the other part of the Navigation bar,
| | 02:24 |
is going to contain the bulleted list
that you see here.
| | 02:28 |
So, just after that nav bar, before the
UL, I'm going to add a section tag.
| | 02:35 |
And the class for this is going to be.
Top hyphen bar hyphen section.
| | 02:43 |
And after the UL, we'll put in a slash
section.
| | 02:47 |
The point of this is to group together
this navigation that is going to display
| | 02:51 |
as a conventional sort of bulleted list
that's going horizontally at desktop
| | 02:56 |
types of resolutions.
We'll also want to add her on the UL a
| | 03:03 |
class of left.
This is going to push my navigation, as
| | 03:07 |
you might expect, to the left side of the
bar.
| | 03:09 |
If i wanted my navigation to be pushed to
the right side of the bar I'd make that a
| | 03:13 |
UL with a class of right.
That would be more similar to what you
| | 03:17 |
saw on the Foundation Docs page.
If we save what we've got so far, and we
| | 03:21 |
put this in a browser.
You'll see that, already we have the
| | 03:24 |
black bar that stretches across the page,
with the navigation contained inside of
| | 03:28 |
it, exactly as you'd expect.
As the page gets narrower though, we're
| | 03:32 |
going to see some funky behavior.
The bar gets a little bit narrower, now
| | 03:36 |
it just says Home.
We can only go home, we can't go anywhere
| | 03:39 |
else and that's because of course, we
don't have the code in place yet, for the
| | 03:42 |
button that's suppose to appear for the
menu.
| | 03:45 |
So, that's the next thing we're going to
need to code.
| | 03:48 |
That piece of code is going to come after
the nav with a class of top-bar we're
| | 03:51 |
going to put in another UL.
This UL will have a class of title hyphen area.
| | 03:59 |
And as always, don't forget to close your
ULs.
| | 04:06 |
Then inside of this UL, we're going to
put in an LI with a class of name.
| | 04:13 |
And I'll explain what that is in just a
second, and I'm also going to put in an
| | 04:19 |
LI with a class of toggle hyphen topbar
and a class of menu hyphen icon.
| | 04:29 |
That I'm going to put a link, a href
equals pound, and then I'm going to put
| | 04:35 |
in a span tag the word menu slash span.
Slash a, slash LI.
| | 04:45 |
So what did we just do here?
The first thing here is this LI with a
| | 04:48 |
class of name, what is that doing?
Potentially you could use that as the
| | 04:53 |
name of your website.
So if you look again back at the
| | 04:56 |
foundation Navigation bar here.
The word foundation that appears over
| | 05:01 |
here on the left side of the bar.
That is contained inside of the LI with a
| | 05:06 |
class of name.
And so that would be the name of your website.
| | 05:10 |
You'd set up that UL containing all the
navigation, and you'd give that a class
| | 05:14 |
of right.
That would push that navigation over to
| | 05:17 |
the right side of the page.
That's what they've done here in their
| | 05:19 |
Navigation bar.
What I found was, when I didn't include
| | 05:23 |
this, because obviously I'm not using
that piece of markup, my button did not
| | 05:27 |
work correctly for the menu toggle.
I don't know if that's a bug inside of
| | 05:32 |
foundation 4.0.9, which is what I'm using
now, or if that's actually a feature.
| | 05:37 |
But what I found was I needed to include
that bit of code in order for the menu
| | 05:40 |
button to work correctly.
The second bit of code here, this next LI
| | 05:45 |
with the word menu here, this as you can
probably guess from the menu icon class,
| | 05:49 |
is what will form the button that you can
click on to get to the navigation that
| | 05:53 |
will drop down at smaller screen
resolutions.
| | 05:58 |
By default this menu icon is going to be
the little three bar thing that you saw
| | 06:01 |
on the foundation site.
And the word menu is going to appear next
| | 06:06 |
to it.
And that is from this word menu that
| | 06:08 |
appears here.
So let's just take a look at what we've
| | 06:11 |
got here so far.
If you save this and preview it in your
| | 06:14 |
browser, then you'll have your Navigation
bar here.
| | 06:18 |
As you start to collapse things, then
you'll have the word menu appear over
| | 06:21 |
here, followed by the icon.
And when you click that, you should then
| | 06:25 |
see your navigation appear underneath.
Now, if you don't want the word menu next
| | 06:30 |
to this icon, you don't have to have it.
You can take the word menu out right here.
| | 06:36 |
You do still need to leave these span
tags in.
| | 06:39 |
You still need these a tags in as well.
So save that and take a look at the web
| | 06:44 |
page one more time and if you refresh it
the word menu will go away and you'll
| | 06:47 |
have just the icon.
The icon, of course, you could customize
| | 06:52 |
or change using custom styling inside of
Foundation.
| | 06:56 |
That's your basic responsive menu bar
inside of Foundation, with all the
| | 07:00 |
default looks and layouts and so forth.
In the next video, I'll show you how to
| | 07:06 |
incorporate drop-down menus into this.
| | 07:08 |
| | Collapse this transcript |
| Adding dropdown navigation to the top nav bar| 00:00 |
The next thing I'd like to add to my
Navigation bar are some drop-downs.
| | 00:04 |
Everybody loves drop-downs.
They're actually relatively simple to add
| | 00:08 |
inside of Foundation.
The Navigation bar we built to this point
| | 00:12 |
had a single level of navigation.
So, you could combine that with one of
| | 00:16 |
the other navigation types to make the
secondary navigation appear in the left
| | 00:19 |
side of the page.
You'd click on about to go to the about
| | 00:22 |
part of the webpage.
And then over on the left side, you'd
| | 00:25 |
have your links appear to all the
subnavigation to the about part of the website.
| | 00:30 |
We used to do webpages that way for years
and years and years, but these days more
| | 00:33 |
and more websites are using these drop
downs.
| | 00:36 |
So, Foundation comes with a very simple
system for adding drop downs to your page
| | 00:40 |
and they can go as many levels deep as
you wish.
| | 00:44 |
The first thing I'm going to need to do
is alter the code that I've got on my
| | 00:47 |
page so far.
Down here, probably around line 32, is
| | 00:52 |
the code that formats the top bar.
I'm working in the document called 4-dropdowns.
| | 00:58 |
This is the same document I've been
working on the whole chapter, just save
| | 01:01 |
and rename.
So, if you've been following along, you
| | 01:04 |
can go ahead and use this.
If you have not been following along, or
| | 01:08 |
you're jumping in here, check your
Exercise Files folder for this document.
| | 01:12 |
The other document you're going to find
here is this HTML snippet.
| | 01:15 |
And this HTML snippet is my additional
markup for the dropdowns.
| | 01:22 |
And basically, all I'm doing here is just
changing this so that we've got some
| | 01:26 |
levels of navigation.
Let's go ahead and start by just copying
| | 01:31 |
this bit of code.
I'm basically swapping out the section,
| | 01:34 |
with a class of to bar section, for what
I've got here.
| | 01:40 |
We're going to take out the section here.
Bye-bye.
| | 01:45 |
And paste in the new section, which is
quite a bit longer.
| | 01:49 |
So, this is a section with a class of
top-bar section.
| | 01:52 |
Just like we had before.
A ul with a class left, just like we had
| | 01:55 |
before, followed by a series of links.
The About page is a part of the website
| | 02:00 |
that we are currently on.
So, that is currently active.
| | 02:05 |
Then, I've added some sub navigation
here.
| | 02:08 |
Li ahref, here's the word artist slash a.
Notice that the closing li for this
| | 02:13 |
particular link does not occur until line
48 down here.
| | 02:17 |
That's really, really important.
This is the correct way to nest a list.
| | 02:21 |
The entire list that's nested needs to be
contained inside of its parent li.
| | 02:26 |
Inside of this li then, I have my next ul
with all of its li's inside of that.
| | 02:33 |
Then under venue, which is the next top
level navigation item.
| | 02:37 |
I've showed you what three levels of
navigation look like.
| | 02:39 |
So, we have venue as the level one.
We have an li here for Hotel Contempo.
| | 02:47 |
And in li here for elsewhere, which is
level 2, and then we go to a level 3
| | 02:51 |
here, which contains all of the elsewhere
links, Golden Dragon then and so forth.
| | 02:56 |
It's very easy as you build these
multiple level navigation bars to lose
| | 03:00 |
track of what ul is currently open and
what li is currently open.
| | 03:06 |
So you want to be very, very careful, and
double-check, and triple-check your work
| | 03:09 |
to make sure you've closed everything
correctly.
| | 03:12 |
That's what our current navigation here
looks like.
| | 03:14 |
And if we were just to save this, and we
were to take a look at it in the web
| | 03:17 |
browser, it's a mess.
We're seeing all our levels of navigation here.
| | 03:22 |
There's no drop-down that's working here.
And that's fine.
| | 03:25 |
We haven't put in any drop-down code yet.
All we've done is added these lists.
| | 03:29 |
The next thing we need to do then is add
the code that will make the drop downs work.
| | 03:33 |
And here's the way we do that.
For these li's which contain a ul, we are
| | 03:38 |
going to add a class to these so this li
will have a class of has-dropdown.
| | 03:47 |
So, I'm going to go ahead and highlight
that class of has-dropdown.
| | 03:51 |
And I'm going to apply that in a couple
of other places.
| | 03:55 |
So, I only need it once here under
artists.
| | 03:57 |
But under venue, we have a dropdown here.
And we also have one here associated with elsewhere.
| | 04:07 |
Then, the other thing that I need to do
is I need to tell the ul's that are
| | 04:10 |
affected by this that they are dropdowns.
For my ul's, I'm going to add a class of dropdown.
| | 04:19 |
This is right here inside of this ul,
just after artists.
| | 04:23 |
This first ul though, that has a class of
left does not have a class of dropdown.
| | 04:27 |
It itself is just that top level
navigation in the bar and there's no
| | 04:30 |
dropdown there, so we don't need to put
it there.
| | 04:34 |
Then, as we scroll on down the page here,
we'll need to include this ul here on
| | 04:37 |
line 50 will have a class of drop down.
That's the one under venue and the ul
| | 04:43 |
that's here on line 53, that's the one
that's under elsewhere, that's also going
| | 04:47 |
to have a class of dropdown.
Now, if you go ahead and save that and
| | 04:52 |
put that into your browser, you have the
Navigation bar that you expect.
| | 04:57 |
The grayed out item here is showing us
that this is the page that we're
| | 05:00 |
currently on.
But if bounce over artists you have a
| | 05:03 |
lovely drop down menu that appears.
Likewise, under venue, notice that I have
| | 05:07 |
elsewhere that appears along with its sub
navigation that I can navigate as well.
| | 05:14 |
Everywhere you go, there's a little arrow
that's indicating that there is a drop
| | 05:17 |
down menu that's present including on the
second level navigation.
| | 05:22 |
On the Foundation documentation website,
they actually have a Navigation bar that
| | 05:26 |
goes down 3 or 4 levels.
So, you can see what that looks like and
| | 05:29 |
you can have as many levels as you want.
Just because you can have many levels
| | 05:34 |
doesn't mean you should though, but it is
possible to nest as many levels of
| | 05:37 |
navigation as you wish inside of
Foundation.
| | 05:40 |
So, that's a relatively straightforward
way of adding drop-downs inside of your
| | 05:45 |
Foundation website.
| | 05:47 |
| | Collapse this transcript |
| Challenge: Navigation bar| 00:00 |
Now that you've seen all of the different
kinds of navigation that come with
| | 00:03 |
Foundation, it's time for your next
challenge.
| | 00:05 |
This document 4-challenge.html is
available in your Exercise Files folder.
| | 00:10 |
And it's actually the same document you
just finished with from the previous
| | 00:15 |
video, the drop-down example.
And if we put this into your browser,
| | 00:20 |
you'll see it looks exactly the same as
it did before and we have all the same
| | 00:24 |
drop downs as we had here before as well.
So for your challenge, you're going to
| | 00:30 |
combine some things that you learned in
the styling chapter with some things that
| | 00:33 |
you learned here in the navigation
chapter.
| | 00:36 |
Can you go through and change this
navigation bar?
| | 00:40 |
Any of them, really.
And make them look a little bit different.
| | 00:44 |
So, that means you're going to have to go
and track down some styling inside a firebug.
| | 00:49 |
Perhaps, figure out what the styles are
that make the NAV bars look the way they do.
| | 00:54 |
And then, you're going to have to write
some styles to change those in some kind
| | 00:58 |
of way.
Go ahead and give that a shot and I'll
| | 01:01 |
see you in the next video.
| | 01:02 |
| | Collapse this transcript |
| Solution: Navigation bar| 00:00 |
So, how'd you do.
What did you take a look at for your
| | 00:03 |
navigation bars.
Well, I focused on the big black bar in
| | 00:06 |
the middle of the page, and I have not
touched any of the HTML, so there is a
| | 00:10 |
file called 4-solution.html inside your
Exercise folder.
| | 00:16 |
It's exactly the same as the challenge
file, so none of the HTML was harmed in
| | 00:20 |
this process.
If you take a look, though, at this page
| | 00:23 |
inside of your web browser, you'll see
that I've changed the color of this
| | 00:27 |
navigation bar to orange and when you
take a look at your drop down menus They
| | 00:30 |
are also orange.
As I make my page narrower, this is a
| | 00:34 |
part that can trip people up.
We go down to this narrower size here.
| | 00:39 |
Remember you need to check all of your
styling in this part as well, to make
| | 00:42 |
sure that you've gotten all of those
styles and all of those color changes also.
| | 00:50 |
So that things are looking the way that
you want.
| | 00:52 |
How did I do this?
Well, tracked down a lot of these styles
| | 00:55 |
using Firebug.
If you turn on Firebug, we're going to
| | 00:58 |
take a look here, tracking 'em down
through Firebug.
| | 01:01 |
We're in our second row.
We know that we're in this large twelve columns.
| | 01:06 |
We know that we're in the nav bar.
If you click that, you'll see over here
| | 01:10 |
in your styles inside of Firebug that you
do have a top bar style here.
| | 01:15 |
So, I copied that on over.
It was 111111 for a color.
| | 01:21 |
I've overridden it as you see here with
app.css to this orange color.
| | 01:26 |
So that changed some of the bar.
Then I had to continue to track some of
| | 01:30 |
these things down one by one, to find all
of these styles.
| | 01:34 |
Sometimes there was a color available,
and sometimes it was at yet another level.
| | 01:39 |
Basically, I just went through here and I
tracked down each one of these.
| | 01:43 |
So here's another change that I have
here, the ul with a class of left.
| | 01:48 |
There's another change that I made.
I had to change everything that affected
| | 01:52 |
the bar.
But I also needed to change the styles
| | 01:55 |
once the page was minimized like this.
So, what was going on here, and what were
| | 02:00 |
the styles that were in here that I
needed to change, as well?
| | 02:04 |
If you take a look inside of your
exercise files folder, you'll find a CSS snippet.
| | 02:10 |
You can copy that and paste that into
your style sheet app.css.
| | 02:15 |
These are the navigation styles that I
had to write to change things to that
| | 02:19 |
orange color.
This FFA01F.
| | 02:24 |
And to change things to the lighter
orange color, where we were looking at
| | 02:28 |
the active state of the link as I'm
hovering over things.
| | 02:32 |
These are some fairly complicated styles
written with some fairly complicated CSS,
| | 02:36 |
including some CSS3, as you see here with
this A colon hover colon not.
| | 02:41 |
Meaning, of course, in the A hover state,
but not if this is a class of button.
| | 02:46 |
There's a number of things here that you
could have tried.
| | 02:49 |
I just tried to change my bar.
One of the big take away messages that
| | 02:52 |
you should have coming away from this
navigation challenge especially if you
| | 02:55 |
tried to change the color of the nav bar
is how many times these colors are
| | 02:58 |
embedded inside of the style sheet and
how many places you have to go to track
| | 03:01 |
this down.
This is a great reason that you should
| | 03:07 |
really be working with the SASS CSS as
opposed to working with these overrides
| | 03:10 |
that we just did here for the navigation
challenge.
| | 03:15 |
By centralizing those colors, you'll save
yourself a lot of time trying to track
| | 03:18 |
down all these styles and change all
these colors in so many different places.
| | 03:23 |
This is just one thing I focused on here,
the nav bar, but I could have focused on
| | 03:26 |
other areas of the webpage as well.
You might wind up with a very sizable
| | 03:31 |
override file, so really SASS is
definitely the best way to go, and you
| | 03:34 |
should read up on it.
| | 03:37 |
| | Collapse this transcript |
|
|
5. JavaScript EffectsClearing: A responsive lightbox| 00:00 |
We've slowly been working on a thumbnail
example through the last few chapters.
| | 00:04 |
In the grid chapter, I showed you how to
lay out a series of thumbnails using
| | 00:07 |
unordered lists and the appropriate
Foundation classes.
| | 00:12 |
Then in the styling chapter, we applied a
thumbnaily sort of look to our images.
| | 00:17 |
Now, finally, we're going to link these
same thumbnails up to larger versions of
| | 00:20 |
the pictures.
We can also apply captions to the images.
| | 00:24 |
This is the page that we're going to
start with, I'm showing you here in the
| | 00:27 |
browser first.
I'll show you the HTML in just a moment.
| | 00:30 |
And this is in Firefox.
So I've got a simple little Foundation
| | 00:34 |
page here, little text on the top, some
thumbnails underneath.
| | 00:38 |
When you click on these thumbnails,
they're actually going to take you to a
| | 00:41 |
large version of the picture.
This looks pretty awesome here inside of Firefox.
| | 00:46 |
There's a larger version of that artist,
right there.
| | 00:49 |
And they all sort of work like this, but
it looks a little bit different in Chrome.
| | 00:54 |
So if you were to look at this exact same
page here in Chrome and click on these
| | 00:58 |
pictures, the display is actually quite
different.
| | 01:01 |
That's because if you take a look at the
URL, all I've done is link to a large
| | 01:04 |
version of the picture.
Firefox, as a browser, has a nicer way of
| | 01:07 |
displaying the large version of the
picture than Chrome does.
| | 01:11 |
So, what I'd like to do now is, I'd like
to find a way I can take my thumbnails,
| | 01:15 |
display a larger version of the picture.
Maybe throw a caption in and maybe find a
| | 01:20 |
really cool way of displaying these.
Working with the markup that I already
| | 01:25 |
have here.
So I'm going to go ahead and show you
| | 01:27 |
that now.
If you take a look at your sublime text
| | 01:31 |
and open up the document called
five-clearing.html.
| | 01:35 |
It's inside of your exercise files
folder.
| | 01:38 |
We're going to go ahead and take a look
at what markup we have to start with.
| | 01:42 |
This is a row, I have set this up as a
large six, but centered on the page.
| | 01:47 |
And then we have a block of text here at
the top.
| | 01:50 |
And then underneath, we just have and
unordered list with a small block grid
| | 01:54 |
applied to this, three across.
And we have a link that goes to the large
| | 01:58 |
version of the picture, that goes around
the thumbnail version of the picture.
| | 02:04 |
And that's pretty much the whole mark up
that's here on this particular page.
| | 02:08 |
Now, what I would like to do is add some
additional mark up to make this a very
| | 02:12 |
interesting effect that Foundation calls
Clearing.
| | 02:16 |
To make this work in the Clearing format,
there's a couple of little pieces of code
| | 02:19 |
that I need to add.
Here in the UL, the class of small block
| | 02:26 |
three, I'm going to add another item
here.
| | 02:30 |
Clearing-thumbs.
I'm also going to add one more attribute
| | 02:36 |
to the UL, and that attribute is
data-clearing, just like that.
| | 02:42 |
Now, anytime in HTML 5 you see data
hyphen anything, that is your indication
| | 02:47 |
that this is something to do with
JavaScript.
| | 02:52 |
Data hyphen anything is permitted in the
HTML5 spec, only the HTML5 spec.
| | 02:57 |
None of the earlier ones.
And the idea here is that, you can use
| | 03:01 |
this to integrate with JavaScript and
jquery to make cool stuff happen on your webpage.
| | 03:07 |
Sometimes these data hyphen whatevers
have a value assigned to them, so you
| | 03:11 |
might see data hyphen clearing equals
something.
| | 03:14 |
And sometimes you'll just see them this
way.
| | 03:17 |
Remember that in HTML, you don't have to
have the equals sign in the assignment of
| | 03:21 |
value in the way you do in a XHTML web
page, where you always have to assigning
| | 03:25 |
a value.
Let's just go ahead and take a look at
| | 03:29 |
just that little bit of additional code
added to the page.
| | 03:33 |
If I save this and I display this inside
of my Firefox browser.
| | 03:38 |
Now, when I click one of these pictures,
look at the cool thing that we get as a result.
| | 03:44 |
This is actually sort of like a modal
window that we have going on here.
| | 03:47 |
I can click each one of these pictures,
these below are the thumbnails from that page.
| | 03:53 |
I can flip through these, using these
arrows so that I can flip through them.
| | 03:57 |
Or I can go directly to somebody's
picture by clicking on it here down in
| | 04:01 |
the lower navigation.
That is so awesome.
| | 04:05 |
And it was pretty easy to build this.
That is one thing that you can do here
| | 04:09 |
with these thumbnail grids inside of
Foundation.
| | 04:13 |
There's other ways you can make this
behave as well.
| | 04:18 |
On the li, the very first li on the list
here, if I add a class of clearing-feature.
| | 04:26 |
We're going to get a slightly different
treatment for this page.
| | 04:29 |
So we still need the clearing thumbs up
here on the UL, we still need that
| | 04:32 |
data-clearing attribute.
And then on the li, we're going to add a
| | 04:36 |
class of clearing-feature.
Now, if you saved that and put that
| | 04:40 |
inside of your web browser, you'll only
see one thumbnail here on the page rather
| | 04:43 |
than all of them at once.
And when you click on the one thumbnail,
| | 04:47 |
you'll still get the same interface.
So this is kind of like taking you to a
| | 04:52 |
gallery of more images.
Sometimes you see these on news site.
| | 04:55 |
You know, we've got the one image on the
page and you click on that, and it takes
| | 04:58 |
you into something else where you can see
more images.
| | 05:02 |
By adding that one tiny little class here
to that li, you've got something similar
| | 05:07 |
to that.
Probably, this page would work better
| | 05:10 |
design wise, if I didn't use just a
thumbnail.
| | 05:13 |
Maybe I have a larger version of the
picture, maybe I have some text that's on
| | 05:16 |
top of it or something that would explain
what happens when you click the picture.
| | 05:20 |
And then the last thing I want to add is,
when we go into our gallery right now,
| | 05:24 |
there is no caption for these pictures,
but a caption might be something that
| | 05:28 |
you'd want to add.
That is something that is possible.
| | 05:33 |
And the way that you would do that is,
within the image tag itself.
| | 05:38 |
So here on line 23, there's the image tag
with the thumbnail to this particular image.
| | 05:45 |
I can go ahead and add to this, the
following: data-caption.
| | 05:49 |
There it is again, that's one of those
attributes that you can add to a HTML tag
| | 05:53 |
with an HTML5 that has something to do
with JavaScript.
| | 05:57 |
But in this case we're gong to make it
equal something, and what we're going to
| | 06:01 |
make it equal is the actual caption
itself.
| | 06:05 |
So anything that I put here in between
these quotes will wind up being the caption.
| | 06:09 |
So this is a caption for the photo.
Now, if I do that, and view this in my
| | 06:17 |
webpage again, just refresh here.
When I click on my picture, here's my
| | 06:21 |
caption for the photo underneath.
And if I went through and added that for
| | 06:25 |
all of these pictures, we'd have a
caption underneath all of these photos.
| | 06:30 |
This is the clearing feature inside of
Foundation.
| | 06:33 |
Very, very interesting feature.
A very attractive way of presenting a
| | 06:37 |
nice and interactive gallery of images.
You can add captions, and there's a
| | 06:42 |
couple of different ways of presenting
this information on your webpage.
| | 06:46 |
| | Collapse this transcript |
| Orbit: A photo carousel| 00:00 |
Photo carousels are super popular.
It seems like everywhere you look someone
| | 00:04 |
else has posted a bunch of slides that
rotate on their homepage.
| | 00:08 |
Foundation comes with a really nice
JavaScript plugin that will allow you to
| | 00:13 |
achieve a photo carousel on your website
very quickly and easily.
| | 00:18 |
It's also responsive, and it works on
touch devices as well as desktops.
| | 00:23 |
This is my starting HTML document, which
you can find in your Exercise Files folder.
| | 00:28 |
You'll also need to copy over a folder of
images.
| | 00:32 |
It's called Banners.
Copy that folder of images directly into
| | 00:35 |
your Image folder inside of your
Foundation site.
| | 00:40 |
Let's just take a look at the way this
page is right now.
| | 00:42 |
It's pretty simple.
I've got a large ten, see these are kind
| | 00:45 |
of wide pictures, centered on the page.
And I just have a bulleted list.
| | 00:50 |
Each bullet contains one of my banners.
If I go ahead and preview that in the
| | 00:54 |
browser, it looks pretty much exactly as
you would expect.
| | 00:57 |
Here's a series of these paintings, one
right after the other, and obviously
| | 01:01 |
they're nothing like a photo carousel at
all.
| | 01:04 |
What we need to do to this is now change
this with a few of Foundation's classes.
| | 01:11 |
We're going to start by putting a div
around this UL.
| | 01:13 |
It's going to be a div with a class of
orbit hyphen container.
| | 01:22 |
And I'll close that div down here
underneath the UL.
| | 01:24 |
I'm going to indent this UL a little bit
to make code easier to read and dent that
| | 01:31 |
slash div.
Then the next thing I'm going to do is
| | 01:35 |
add this UL a couple of additional
classes.
| | 01:38 |
I'm going to add a class of orbit hyphen
slides hyphen container, and, I'm going
| | 01:47 |
to add data hyphen orbit.
Just as I mentioned in the previous
| | 01:55 |
video, data hyphen anything in HTML5
indicates that there's something going on
| | 01:59 |
here with JavaScript.
So this is going to be the handle that's
| | 02:02 |
going to connect things in with
JavaScript.
| | 02:06 |
And that's all you have to do to make an
image carousel inside of Foundation, just
| | 02:10 |
this tiny, little, minimal bit of stuff.
So if you go ahead and save that, and
| | 02:15 |
take a look at that inside of a browser.
This will have automatically reassembled
| | 02:21 |
itself into a image carousel.
There are some features here that you can see.
| | 02:27 |
Note up here at the top is this timer
bar.
| | 02:29 |
The timer bar is going to go across the
page slowly as each slide is coming up in rotation.
| | 02:37 |
I believe the default for this is about
five seconds, so that's why it feels like
| | 02:40 |
kind of a long time.
Notice that you can also pause by
| | 02:43 |
clicking the Pause button here and it
will just stay on this one slide until
| | 02:46 |
you click the Play button again.
Up here in the upper-left corner, you'll
| | 02:52 |
see that this is slide 4 of 5.
We also have these arrows here, where I
| | 02:56 |
can navigate backwards or forwards within
my rotation.
| | 03:00 |
And of course I also have these circles
down here on the bottom which will jump
| | 03:03 |
me around to wherever I might want to go
inside of my rotation.
| | 03:07 |
So, all of that is built automatically
into Orbit.
| | 03:10 |
Just to show you that this is responsive,
as I make the page smaller, so you can
| | 03:15 |
see my carousel starts to resize until we
hit that 768 break point, and then it
| | 03:19 |
becomes larger again.
We go all the way across.
| | 03:24 |
Remember, of course, in my grid that this
is a ten-column large.
| | 03:29 |
So as we go down to the smaller sizes
here, it's going to go all the way across
| | 03:33 |
the page and as i continue to make this
smaller, it starts to get ridiculous at
| | 03:37 |
some point in time.
You can't really see those images
| | 03:42 |
anymore, the arrows are a little bit
overwhelming, but that is a pretty small
| | 03:45 |
screen there.
So that is Orbit and the way that it
| | 03:48 |
works with just the minimal amount of
code that I've showed you.
| | 03:52 |
Now there's a couple of adjustments that
you can make to orbit as well.
| | 03:55 |
For example, the five second timing on
those slides, because I just have slides,
| | 04:00 |
no words on top of them, felt a little
bit slow.
| | 04:04 |
So one of the things that I can add here
is another of these data hyphen
| | 04:08 |
attributes in this UL tag, and that I'm
going to add data hyphen options.
| | 04:14 |
Equals, and then followed by timer
underscore speed colon 2500 semicolon,
| | 04:19 |
the syntax there is important because
this is a JavaScript variable that will
| | 04:24 |
be passed into the JavaScript so you want
to make sure that you put this in correctly.
| | 04:32 |
2500 refers to 2,500 milliseconds, or two
and a half seconds, so this will be about
| | 04:37 |
twice as fast.
On the rotation of our slides.
| | 04:41 |
So I'm going to go ahead and save that
and we can take a look at that inside of
| | 04:44 |
the browser and you can see that the
little bar up here in the corner's going
| | 04:47 |
much, much, much faster.
And you can see that we're going quicker
| | 04:51 |
in our rotation here with these slides.
The other thing that you might want to do
| | 04:57 |
is add some text to these slides, and you
can do that very easily, now, I'm not
| | 05:00 |
going to add text to all the slides, but
let's add it to just a couple.
| | 05:06 |
Inside of each LI tag, you're going to
add a div tag with a class of orbit
| | 05:13 |
hyphen caption.
And inside of that, you can put anything
| | 05:18 |
you want.
So you can put in heading tags or
| | 05:20 |
paragraphs of information or whatever you
want, or you can just type directly.
| | 05:25 |
So if I said something like lorum, ipsum,
blah, blah, blah, slash div.
| | 05:33 |
I can take that same caption and apply it
in a couple of other places here.
| | 05:38 |
Just to show you that not every slide has
to have a caption.
| | 05:40 |
You can caption all of them if you want.
You don't have to so I'll just go ahead
| | 05:45 |
and give this two slides here a caption.
So if I save that now so slides 2 and 3
| | 05:51 |
have a caption but 1, 4 and 5 do not.
There's slide 1 without the caption.
| | 05:57 |
Here's slide 2.
And this is a fairly standard sort of
| | 05:59 |
overlay kind of thing.
You see this in a lot of image carousels,
| | 06:03 |
with the text on top of it.
And you can of course include links
| | 06:07 |
inside of that, or any of your other
standard HTML markup you can put inside
| | 06:11 |
of the text that goes in those divs.
And that will show up on your carousel.
| | 06:18 |
So, that is the image carousel called
Orbit that's located inside of the
| | 06:22 |
Foundation framework, you can see that
this is very easy to set up and display
| | 06:26 |
on your website you might want to give
one of these a try yourself.
| | 06:31 |
| | Collapse this transcript |
| Reveal: A modal window| 00:00 |
A modal window is a specific kind of pop
up window with information in it.
| | 00:04 |
The screen is going to darken as the
modal window appears.
| | 00:08 |
Unlike a true pop up window, the browser
does not treat this as a completely
| | 00:11 |
separate instance of the browser window.
The modal window displays within the same
| | 00:17 |
window as the content.
And let me show you how you can make
| | 00:20 |
modal windows appear here inside of
Foundation.
| | 00:24 |
I've started with this document called
5-reveal.html.
| | 00:29 |
You'll find in in your exercise files
folder.
| | 00:32 |
If you have been following along with me,
you'll also have the image already in
| | 00:35 |
your images folder.
And if you don't, you're going to want to
| | 00:38 |
take the image that I have in the
exercise files folder and copy it into
| | 00:41 |
the images folder.
What we've got here is a very simple
| | 00:45 |
little bit of markup.
Once again, we have a row inside of that,
| | 00:48 |
we have a div with a class of large ten
centered on the page.
| | 00:53 |
Inside of that, we have a paragraph which
contains a link formatted to look like a
| | 00:57 |
large button.
Following that, we have just a little bit
| | 01:01 |
of text and a picture.
Notice my picture has a class of float left.
| | 01:07 |
And that class is a custom class that I
wrote several videos ago, and I've
| | 01:11 |
included that for you in your exercise
files folder.
| | 01:16 |
The style called float left if you need
to copy that into your app.css style sheet.
| | 01:21 |
Basically, it just makes the image here
float nicely on the page.
| | 01:25 |
Let's just take a look at what we've got
here.
| | 01:27 |
So, if I just open this up in my browser,
there's my big button; clicking it
| | 01:31 |
doesn't do anything, and underneath of
that I have a title, a nice picture and a
| | 01:34 |
chunk of text.
So what I'd like to have happen now is, I
| | 01:39 |
want to have just the button on the page
when I open up my browser window.
| | 01:43 |
And then when I click the button, I'm
going to get a window that comes up that
| | 01:46 |
comes up which will contain this
information.
| | 01:49 |
Her picture and her little bio here.
The way that I'm going to do that, is I'm
| | 01:52 |
going to add a little bit of markup and
some styling to my code here.
| | 01:56 |
First of all, I'm going to wrap a div
around my H2 and my paragraph with
| | 02:00 |
information here.
So, I'm going to put in a div and I'm
| | 02:04 |
actually going to assign this an ID.
The ID can be anything you want to call it.
| | 02:10 |
I think what makes sense here is LaRue
because, well, it's all about her, and
| | 02:14 |
the class will be reveal-modal.
Then, at the end of this paragraph, I'll
| | 02:21 |
close my div, slash div.
And, I'm going to indent my text here in
| | 02:25 |
between, just to make things a little bit
easier to read.
| | 02:29 |
That is the treatment for the window
here.
| | 02:37 |
Then up here for the button, what I
needed to do is connect the button to
| | 02:40 |
this window in such a way that when the
button is clicked the window will appear.
| | 02:45 |
And the way I'm going to do that is, I'm
going to assign one of those
| | 02:50 |
data-attributes here inside of my a tag,
and in this case it's data-reveal-id=larue.
| | 03:00 |
This is looking for the div that has an
ID of LaRue.
| | 03:05 |
And that becomes then, the modal window.
That's how these two pieces of
| | 03:09 |
information are talking to each other.
So if I'd called this div LaVonne
| | 03:12 |
instead, then my data reveal ID would be
LaVonne also.
| | 03:17 |
So, the most basic sense, that's all
that's needed to make this work.
| | 03:21 |
I'm going to go ahead and save my work,
and take a look at it inside of my
| | 03:23 |
browser window.
There's the button, exactly as you would expect.
| | 03:28 |
When I click it, my model window appears
here, but notice here that there's no
| | 03:32 |
obvious way here to close it.
I know as a developer that if I click in
| | 03:36 |
the darkened area outside of this, then
my modal window will go away.
| | 03:40 |
But many people who are looking at a
website might not know that that is in
| | 03:43 |
fact, the case.
So we probably want to add some kind of
| | 03:46 |
close button to this.
And Foundation has that built in as well.
| | 03:51 |
The very last line, what you want to do,
is you want to add a class equals quote close-reveal-modal.
| | 04:04 |
And of course slash a.
And in between these tags, if you put in
| | 04:09 |
ampersand pound, 215 semicolon.
Anytime you see a code like this inside
| | 04:16 |
of your HTML, it's calling for a special
character.
| | 04:19 |
Like a copyright symbol, or something
like that.
| | 04:22 |
In this particular case, we're calling
for a very specially formatted letter X
| | 04:26 |
that kind of looks like a closed window
icon.
| | 04:30 |
So if you go ahead and save this, and now
you can put this into your browser.
| | 04:35 |
And you'll see here that we have our
button for LaVonne LaRue.
| | 04:39 |
When I click that, this is going to open
up your modal window, and there's that X
| | 04:42 |
up here in the corner.
So now if I want to get rid of it, I can
| | 04:46 |
just click the X and the modal window
will go away.
| | 04:50 |
Modal windows might be a really helpful
thing for you in particular when it comes
| | 04:55 |
to thumbnails.
I talked to you about modal windows using
| | 04:59 |
the clearing JavaScript inside a
Foundation, but you can also do this with
| | 05:03 |
this modal window.
Instead of, let's say, this button, what
| | 05:08 |
if I had a thumbnail?
So all I need to do is just change my
| | 05:14 |
HTML here, instead of saying this as
LeVonne L LaRue, I could just put her picture.
| | 05:23 |
So image src equals, image slash, thumbs
slash, larue.jpg.
| | 05:30 |
And then give that alt tag, LaVonne L
LaRue.
| | 05:35 |
Click to enlarge.
And I could also of course add a class of
| | 05:40 |
TH, make it look like a thumbnail.
Of course I want to take out my class of
| | 05:46 |
button large.
So with this treatment, what I'll have
| | 05:50 |
instead is thumbnail and when I click on
it I'll gain modal window with more information.
| | 05:55 |
So if I save this, and I put that inside
of my browser window.
| | 05:58 |
There is my thumbnail, it's got that
class of TH, so when you roll your mouse
| | 06:02 |
over it gets that lovely hail around it.
When you click on it, now I get the full
| | 06:07 |
version of the picture as well as her
bio.
| | 06:10 |
That would be another way to handle these
modal windows.
| | 06:13 |
You could set up a whole thumbnail grid.
When you click on those images, then a
| | 06:17 |
modal window will come up and show you
more information about the thumbnail image.
| | 06:22 |
These modal windows are extremely useful,
and you'll find lots of applications for them.
| | 06:28 |
And they're very easy to set up with
Foundation.
| | 06:30 |
| | Collapse this transcript |
| Sections: Creating accordion panels and tabs for in-page navigation| 00:00 |
Sometimes you want to navigate between
items within a single page.
| | 00:04 |
Sometimes it's done through accordion
panels, and sometimes it's done with tabs.
| | 00:08 |
You might see this kind of treatment on
an e-commerce site.
| | 00:11 |
Where you might have one tab for the
specifications on a product A tab on the
| | 00:15 |
details about the product.
Maybe another tab with some comments on
| | 00:19 |
the product.
And then you can navigate between them
| | 00:21 |
while not leaving that single page of
information about the product itself.
| | 00:25 |
So, Foundation offers a way of building
these tabs and accordion panels via
| | 00:29 |
JavaScript plugin called Sections.
So I'm going to work within this
| | 00:34 |
particular piece of HTML.
This is called 5-sections.
| | 00:37 |
It's located inside of your exercise
files folder, and you can go ahead and
| | 00:41 |
pull that on out, copy it into your
Foundation site.
| | 00:45 |
You'll also find there a folder called
thumbs.
| | 00:48 |
if you've been following me along in the
course, you won't need to copy that
| | 00:51 |
folder again.
But if you haven't you'll want to copy
| | 00:54 |
that whole folder of thumbs into your
images folder in your Foundation site.
| | 00:59 |
There's also a custom style I'm using
here, float left, and I'm giving you the
| | 01:02 |
code for that as well inside of your
exercise files folder.
| | 01:07 |
You can copy that custom style into
app.css.
| | 01:11 |
If you've been following me along, you've
already got it there.
| | 01:13 |
So lets look at the code that I have here
on this page.
| | 01:16 |
So I start off with a row and then my div
with a class of large 12 columns.
| | 01:20 |
Followed by a couple of paragraphs, a
paragraph with Xhou Ta's name as well as
| | 01:24 |
a link.
Then underneath that I have a paragraph
| | 01:28 |
with an image inside of it and some
texts.
| | 01:30 |
And that's pretty much the same pattern
for the other two people who are listed here.
| | 01:34 |
If I take a look at this inside of my
browser, what I'll see right now is the
| | 01:37 |
paragraph of information, the image with
the text next to it.
| | 01:43 |
Jennifer Jerome's name is pushed over a
little bit here because my floats for
| | 01:46 |
each one of these images have not been
cleared.
| | 01:50 |
So the float for this image is extending
far enough that its pushing over the name
| | 01:54 |
for Jennifer Jerome.
And I'm not going to worry about that
| | 01:58 |
right now because when I add my
additional code it, that clearing issue
| | 02:01 |
is going to take care of itself.
But this is the way that the page is
| | 02:05 |
looking out at the box.
I'm going to add some code now to start
| | 02:08 |
making this look like the default
behavior of the sections javascript plug-in.
| | 02:16 |
Which it'll show as tabs when the screen
is large.
| | 02:18 |
But when the screen becomes smaller, it's
going to show this as an accordion panel.
| | 02:23 |
So to set that up, I'm going to go ahead
and add a div here at the very top of
| | 02:28 |
things, and this is going to have a class
of section-container as well as a class
| | 02:34 |
of auto.
That's going to be followed by data-section.
| | 02:42 |
And as I've been saying several times in
this chapter, anytime you see data hyphen
| | 02:46 |
that's an indication that this is a HTML
5 attribute that can talk to JavaScript
| | 02:51 |
and pass it some important information.
So I'm going to start that div there.
| | 02:58 |
And I'm going to end it here, after all
of the text, /div.
| | 03:02 |
Then I am going to wrap a section, as in
the section tag, section, with a class of section.
| | 03:10 |
And I'm going to wrap that around the
paragraph that contains the link for the
| | 03:15 |
person as well as the text that's going
to come after it, slash section
| | 03:20 |
underneath of that.
And we can indent that tag a little bit.
| | 03:29 |
And I can indent the text that goes
inside of that a little bit, as well.
| | 03:33 |
So I'm going to repeat that process here
for the other two people, adding a
| | 03:36 |
section with a class of section and a
slash section after that.
| | 03:42 |
The next thing I'm going to do is, in the
very first paragraph where I have this
| | 03:47 |
link, I'm going to add a class to this
paragraph and that's going to be a class
| | 03:51 |
of title.
So, I'm going to go ahead and add that
| | 03:56 |
three times.
Once here for each person boom, boom, boom.
| | 04:02 |
And then the last thing I'm going to do
is I'm going to apply a div around this
| | 04:06 |
paragraph of information here.
So where I've got the actual image
| | 04:11 |
thumbnail as well as the text, I'm
going to wrap a div here.
| | 04:15 |
And this div is going to have a class of
content and that will be followed by the
| | 04:20 |
paragraph with the information and a
slash div on the other side.
| | 04:26 |
So, I'm going to go ahead and put those
div's in now.
| | 04:29 |
Now that I've added these little bits of
code here.
| | 04:32 |
I put in a div with a class of content
around each chunk of content.
| | 04:35 |
I gave the paragraph the class of title
that goes around the words that are
| | 04:38 |
ultimately going to be the clickable
parts of the accordion.
| | 04:41 |
I wrapped a section around each one of
these things so now we're finally ready
| | 04:45 |
to preview this in a web browser.
So make sure you save your changes and
| | 04:50 |
then open this in a browser and then
you'll see the tabs here.
| | 04:53 |
So here's the picture along with the
biography next to it and you can flip
| | 04:57 |
through these tabs and of course you're
still staying on the same page.
| | 05:01 |
As I make my web browser smaller, we'll
see some adaptation of these tabs for a
| | 05:05 |
little bit until we hit our break point
and at the break point, this will now
| | 05:09 |
turn into an accordion panel.
I can navigate vertically and see all of
| | 05:14 |
these people.
So, by default, this is going to start
| | 05:19 |
with the first person who's listed here
but you can change that so that your tabs
| | 05:23 |
would start, perhaps on a different tab,
if that's what you wanted.
| | 05:29 |
And you would add that to the section
tab.
| | 05:32 |
So, if for example, I want Jennifer
Jerome to show first, in the section with
| | 05:36 |
the class of section here that comes
before her, I can add a class of active.
| | 05:41 |
And if I take a look at that updated page
then my accordion panel opens right to
| | 05:46 |
her I can still navigate to the other
people and as I make the page bigger, and
| | 05:51 |
let's say I just refresh it.
It will open to the Jennifer Jerome tab first.
| | 05:58 |
And then I can take a look at the other
tabs.
| | 06:01 |
Something else that I might want to do
here is, maybe I want to have just an
| | 06:04 |
accordion panel, no matter how wide, or
how narrow the screen is.
| | 06:09 |
And that's possible.
Simply by changing the top area up here.
| | 06:14 |
So the div with the class of section
container and auto data section, I'm
| | 06:18 |
going to change that, so instead of auto,
I'm going to change this to accordion,
| | 06:21 |
and instead of data section, I'm going to
assign that a value of accordion.
| | 06:29 |
So now I'll see just accordion behavior
with this page.
| | 06:32 |
So I'm going to preview that in a browser
and there we are.
| | 06:37 |
Its just an accordion even though my
browser is large.
| | 06:41 |
And as I make my browser smaller it stays
an accordion all the way on down to very
| | 06:45 |
small resolutions.
Likewise, I can change that accordion to
| | 06:52 |
tabs and the data section equals tabs and
save that.
| | 06:58 |
And that is going to give me the tab
based behavior here on the page instead.
| | 07:02 |
So there's my tabs.
And as I make my screen smaller, the tabs
| | 07:05 |
are still present no matter how narrow I
make that screen.
| | 07:10 |
Notice that that might be a drawback.
See how I've made my screen really small
| | 07:14 |
now, and you can't even get to all of the
tabs.
| | 07:18 |
So if you decide to use these tabs and
you have several of them, this is
| | 07:20 |
definitely something you're going to
want to test to make sure it's going to
| | 07:23 |
work on mobile devices.
It might be fine on a tablet, but it's
| | 07:26 |
not going to look that good on a phone.
So, that's how you make what's called the
| | 07:32 |
section inside of Foundation.
You can set up Section so that they show
| | 07:36 |
tabs in large screens and accordions in
small screens, or tabs all the time, or
| | 07:40 |
accordions all the time.
| | 07:42 |
| | Collapse this transcript |
| Challenge: Navigation and sections| 00:00 |
Ready for your final challenge for this
course?
| | 00:03 |
We're taking a look now at a combination
of navigation and JavaScript.
| | 00:07 |
So in the previous chapter, you took a
look at navigation in depth, and this is
| | 00:11 |
part of a Navigation bar that you styled
back in the navigation chapter.
| | 00:16 |
In this past chapter, you took a look at
the JavaScript plugin called Section.
| | 00:21 |
What I'd like to do now is I'd like for
you to try this navigation I'm giving you
| | 00:25 |
as a starting file.
And combine it with what you know about
| | 00:29 |
navigation and section to create
something that looks like this.
| | 00:34 |
These are tabs that are appearing here on
a large screen and when I click on them I
| | 00:38 |
get these nice drop down menus.
When I make my screen narrower, then I've
| | 00:45 |
actually got these set up to be an
accordion, that I can see my navigation
| | 00:48 |
going this way.
This is actually built on a lot of what
| | 00:54 |
you've already learned from both the
navigation chapter and from working with section.
| | 01:00 |
But I'll give you a hint of where you can
go for some more help.
| | 01:03 |
If you go to the Foundation documentation
site, take a look under docs here at the top.
| | 01:10 |
Click on JavaScript down here side and
then click on Section.
| | 01:14 |
This is the section documentation page.
Scroll on down the section documentation
| | 01:18 |
page until you get to the horizontal nav
slach nav bar.
| | 01:23 |
And this is actually what I asked you to
do, so this will help you with little bit
| | 01:28 |
of the html.
To get you started, to see if you can
| | 01:32 |
create some navigation that's going to be
tabs going across.
| | 01:36 |
And when the screen collapses, it'll wind
up being accordion panels.
| | 01:39 |
| | Collapse this transcript |
| Solution: Navigation and sections| 00:00 |
Okay.
So, how did you do?
| | 00:02 |
Take starting challenge file.
And you're going to have to add quite a
| | 00:06 |
bit of HTML to this in order to make this
work inside a Foundation.
| | 00:09 |
So, here I've got my starting row, here
on line 17.
| | 00:14 |
Followed by my class of large 3, large
centered columns.
| | 00:18 |
Obviously, I could have put this
elsewhere inside of a grid, and had other
| | 00:21 |
content on the page if I wished.
But I just decided to keep it simple, and
| | 00:25 |
focus on just this navigation piece.
Then after that, the HTML that I gave you
| | 00:30 |
had this p with the artist inside of it,
followed by this unordered list.
| | 00:35 |
So, we added a DIV with a class of
section-container, and horizontal-nav.
| | 00:41 |
And we also added one of those
data-attributes.
| | 00:44 |
In this case, it's data-section,
horizontal nav.
| | 00:48 |
That is the start of that DIV, and the
end of that DIV doesn't happen until
| | 00:52 |
almost down here at the bottom.
And I have commented all this for you.
| | 00:56 |
So we have the ending of the row, the
ending of the large 3, then that
| | 00:59 |
horizontal nav doesn't end until down
here.
| | 01:03 |
Then, we have two sections that surround
each one of these sets of ul's and the
| | 01:07 |
paragraph, so that section has a class of
section just as we saw before.
| | 01:13 |
We then have our p, to which we've added
a classive title.
| | 01:17 |
And then inside of that, we added this
DIV with a class of content and a ul with
| | 01:20 |
a class of side-nav.
Once you dropped all of those things in,
| | 01:24 |
then this p with a class of title winds
up being the clickable thing on the
| | 01:28 |
webpage that will toggle that dropdown
menu to appear.
| | 01:33 |
What appears inside of content is the
stuff that appears inside.
| | 01:37 |
So, this will become your drop down menu
when you're in the Tab View.
| | 01:40 |
And it will become the contents of the
Accordion panel when you're in the
| | 01:43 |
Accordion View.
This might be a useful kind of navigation
| | 01:46 |
for you to have on your website.
And it's very, very responsive.
| | 01:50 |
In that, you'll have nice tabs and drop
downs on large screens.
| | 01:54 |
But, it'll collapse down to an accordion
on a much smaller screen.
| | 01:59 |
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 |
Thank you so much for watching Up and
Running with Foundation.
| | 00:03 |
If you're wondering what the next steps
are, and where you can go to learn more.
| | 00:06 |
I recommend that you start by taking a
look at the Foundation Documentation at foundation.zurb.com/docs.
| | 00:16 |
This is where everything concerning
Foundation is described.
| | 00:20 |
Including all of the possibilities for
the HTML on the CSS.
| | 00:24 |
As well as an extensive section on Sass
and Compass, and all kinds of interesting
| | 00:27 |
JavaScript tidbits that might be useful
to you.
| | 00:31 |
So, the Foundation Documentation is a
great place to go.
| | 00:34 |
As I've mentioned many times in the
course, one of the things that you're
| | 00:38 |
really want to do if you're going to work
with Foundation seriously.
| | 00:42 |
Is make sure you know Compass and Sass.
If those are things you need to learn you
| | 00:46 |
might want to take a look at Joe Marini's
course, CSS with LESS and Sass.
| | 00:51 |
Which is also available here in the
lynda.com library.
| | 00:54 |
And if you've taken a look at foundation
and you think that maybe its either
| | 00:57 |
overkill for your project or maybe
there's not enough styling included.
| | 01:02 |
Or maybe that Sass stuff is a little bit
intimidating.
| | 01:05 |
You just want something that's
potentially a little bit easier to use.
| | 01:08 |
You can certainly take a look at a
different HTML5, CSS3 framework.
| | 01:13 |
Bootstrap is a great option for that.
So, if you like, you can take a look at
| | 01:16 |
my course, Up and Running with Bootstrap.
It's the same kind of format as the
| | 01:20 |
course that you just watched.
And it will give you information and
| | 01:24 |
background about Bootstrap, how to set it
up.
| | 01:26 |
And how you use many of the similar
features that I've showed you here in
| | 01:29 |
this video on Foundation.
I can show you how to set those up in
| | 01:33 |
Bootstrap as well.
My impression is that, Bootstrap has got
| | 01:36 |
a lot more styling available to it.
But Foundation is a lot more powerful
| | 01:40 |
framework with a lot more options that
are available.
| | 01:44 |
I would think that if you're more of an
introductory kind of developer you might
| | 01:48 |
be happier working with Bootstrap.
And if you are much more advanced, pretty
| | 01:52 |
solid on your HTML and CSS skills.
And that you're fairly comfortable
| | 01:57 |
working with hand coded CSS and HTML, you
may be happier working with Foundation.
| | 02:02 |
So in any case, I hope you have a great
time learning more about these HTML5
| | 02:05 |
frameworks like Foundation and Bootstrap.
And I hope to see you again in another video.
| | 02:11 |
| | Collapse this transcript |
|
|
