Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
The New CSS Layout
40:50 with Rachel AndrewIn the last few years we have seen a great leap forward in what we can achieve with CSS – web fonts, gradients, shadows and media queries are now part of our everyday toolkit. CSS layout itself, however, has moved on little. Developers have experimented with using display: table and display: inline-block for layout, in order to mitigate the limitations of layouts based on absolute positioning and floats. Yet, these methods seem as much like hacks as those they try to replace, and come with their own problems. The future of CSS layout looks far brighter. In this talk Rachel will be covering some of the exciting modules that are part of the CSS3 specification. While they have limited browser support today, they can already be used in certain circumstances. More importantly, they are the future of CSS layout, and all of us working with CSS should take an interest in where it is heading.
-
0:00
[MUSIC]
-
0:00
Hello, it's really great to be
-
0:07
here again,
-
0:15
I'm Rachel Andrew and I've been working as a web developer for a very long time.
-
0:20
I like to say that I'm pre-CSS.
-
0:22
I remember people arguing, you know, you, about using CSS just for sorta
-
0:26
font tags in, instead of font tags and things, so I'm quite old.
-
0:31
but, I'm still very excited about the new developments in CSS.
-
0:36
And, it's some of this new stuff that I'm gonna talk a bit about today.
-
0:43
There's a whole bunch of kind of new and
-
0:46
shiny things in CSS to improve things like typography.
-
0:50
You know we don't have to cut up images for rounded corners anymore and so on.
-
0:54
But, actual layout, the tools you've got for
-
0:57
layout haven't really moved on very much for years.
-
1:01
You know, we're still using kind of
-
1:03
floats and sometimes maybe display table and things.
-
1:06
We haven't really got great layout tools.
-
1:11
And, this is kind of a problem, because things have moved on.
-
1:14
We're not just trying to lay out very simple
-
1:16
web pages anymore, we're also trying to lay out applications.
-
1:19
We're trying to lay out very complex things with CSS.
-
1:22
And, our existing lay out methods actually make that really, really hard.
-
1:29
But, thankfully, things are changing.
-
1:31
And, today, I've got a, sort of a rapid fire look at
-
1:34
some of the new things in CSS, that are really for layout.
-
1:39
And in particular, those things that are
-
1:40
good when we're thinking about laying out applications
-
1:43
and also for layouts that are gonna adjust
-
1:45
well according to the device that you're using.
-
1:47
[BLANK_AUDIO]
-
1:52
And, the first thing I'm gonna look at is that one
-
1:54
of these has got the most router support at the moment.
-
1:57
Some of the things I'll be looking at
-
1:59
today, actually, don't have browser implementations at the moment.
-
2:03
However, multi-column layouts actually got quite good implementations
-
2:06
in browsers, or at least part of the spec.
-
2:10
I'm, just as a quick note, I'm
-
2:11
generally not showing things like vendor prefixes here.
-
2:14
Most of this stuff requires vendor prefixes for some browsers.
-
2:18
You know, if you actually start using this stuff
-
2:20
in production, you'll have to test what's available now.
-
2:23
I'm just really showing what's in the spec.
-
2:27
So, multicolumn layout makes it possible to
-
2:29
take some content and arrange it in columns.
-
2:31
And, it'll then flow pretty much as content flows in a newspaper.
-
2:35
So, starting in the first column, and
-
2:37
flowing to evenly fill each column in turn.
-
2:41
Your columns are specified on the containing element.
-
2:44
In this case, the class called wrapped being added to
-
2:47
the div you can see with a lighter background color.
-
2:52
You can specify the width with column width.
-
2:54
And, the browser will work out how many columns
-
2:56
can fit into the space offered by the parent element.
-
3:01
You could instead use column count, and the browser will
-
3:04
create that number of columns and calculate the width for each.
-
3:11
You can control the gutters, so the gap's between each column.
-
3:14
And, this is achieved with the column gap property.
-
3:21
You can also set rules between columns using the Column
-
3:24
Rule property, and that takes values pretty much like Border does.
-
3:28
It's worth remembering with Column Rule, it
-
3:30
doesn't actually take up any space itself.
-
3:33
It overlays the column gap.
-
3:34
You need to make sure you have enough space
-
3:36
in your gap for that rule to fit in between.
-
3:38
If for some reason, you got a very fat rule, it's gonna sort of
-
3:41
start taking up space and, and come to close to the, the columns themselves.
-
3:47
You can use column span within your columns.
-
3:50
And, that would cause an element to span all columns.
-
3:53
Again, this this is quite reminiscent of your sort of magazine style
-
3:56
layouts and newspaper like design, being able to span things across columns.
-
4:04
Now, despite this having pretty good browser support.
-
4:07
Some of the specs implemented in some
-
4:09
browsers not everything is implemented in everything.
-
4:13
It's not that you use it often.
-
4:14
And I think, quite often, it's because people
-
4:17
only think of this as being used for
-
4:19
your current newspaper like columns, and quite rightly,
-
4:23
that's not a great reading experience on the web.
-
4:25
You know, what we don't want to be doing is reading all the
-
4:28
way down and have to scroll to the top and go back down again.
-
4:30
You know, that's not how we want to use web pages.
-
4:33
However, I think this is a really, really useful thing for small UI elements.
-
4:41
This is part of the interface within Perch, the CMS product that I work on.
-
4:46
And, we've just got a, a bunch of check
-
4:48
boxes here, and we're laying those out with multiple
-
4:51
columns, just cuz it kind of compresses the view
-
4:53
a bit and makes it easier to check them.
-
4:55
Now, that would just fall back to a long list, which is kind of okay.
-
5:00
And, a lot of the time when you're dealing with, sort
-
5:03
of, small UI elements, you don't need to worry about poly-filling stuff.
-
5:07
You don't need to worry about sort of, hacking in
-
5:09
a different display, using floats or browsers that don't support something.
-
5:13
Because actually, the fallback can just be, well, it just all linearizes.
-
5:17
And, that's okay.
-
5:18
So, I think, you know, multi call
-
5:20
is really worth exploring for those small elements.
-
5:23
You know, you don't necessarily need to think of
-
5:25
it as page layout, as, you know, big things.
-
5:28
[BLANK_AUDIO]
-
5:31
Right.
-
5:31
When we come to doing sort of responsive designs, if we are
-
5:34
doing those kind of column layouts, we want to put things in.
-
5:37
Multi-column layout works really well for responsive
-
5:40
design, because it's pretty much responsive by nature.
-
5:42
You've actually gotta try quite hard to restrict the columns.
-
5:46
If you use column width, for example, yeah, that will
-
5:49
quite naturally sort of adjust as your browser reduces in size.
-
5:54
Images placed in columns are constrained by the column width.
-
5:57
So, the kind of standard responsive design method of scaling
-
6:00
down an image because of its parent, that should work.
-
6:07
How's to say, non supporting browsers are
-
6:09
just going linearize, which is fine, usually.
-
6:12
You know, and if you're sort of designing
-
6:14
carefully, you can have things that will go
-
6:16
into columns if it's there and it will
-
6:18
just linearize if the browser doesn't have support.
-
6:21
I wouldn't bother trying to poly fill this genuinely.
-
6:24
I would just let the browser do what it does if it doesn't have support.
-
6:26
[BLANK_AUDIO]
-
6:30
These are a few resources to read more about using multi-col.
-
6:34
And, I'll be tweeting these slides, they'll go out
-
6:36
so don't worry about sort of copying things down.
-
6:38
And I also, there's a URL at the end that's got a link to all of
-
6:42
these resources and things so you can read more about each thing as we go through.
-
6:51
So, the next thing I'd like to take a look at is Flex Box.
-
6:54
Flexible Box layout module.
-
6:56
Now, I think this is something that we're starting to hear an
-
6:58
awful lot more about now because the browser support is getting better.
-
7:02
And, I think people are gettin quite
-
7:03
excited about the possibilities with Flex Box.
-
7:07
That's my obligatory cat slide.
-
7:09
The CSS flex with box layout module gives us a basically
-
7:13
a brand new layout mode in CSS and that's flex layout.
-
7:17
And, it's been designed to make it
-
7:18
easier to layout complex applications and web pages.
-
7:22
And, it really solves some of the most baffling problems that we have in CSS.
-
7:26
The kind of things where designers say, why on earth can't we do that?
-
7:30
You know, why can't we already do this in CSS?
-
7:33
Flexbox kind of brings us things that solve that quite nicely.
-
7:38
So, for instance spacing things out evenly is one of those things
-
7:43
that is like one of those, why is this so hard problems?
-
7:47
You know, I've got a group of things, I want to space
-
7:49
them out evenly and that's actually been really difficult for a long time.
-
7:54
So, I've got a navigation list which is linearized there.
-
7:57
I'd like to actually display that all in a line and have them spaced out evenly.
-
8:05
So, a value of flex with a display on it means we're using flex box.
-
8:11
And then, I can use the justified content props to decide whether I want space
-
8:14
around the elements, in which case, you get
-
8:16
equal space on each side of the element.
-
8:19
And, they don't line up flush there with the
-
8:21
right and left margin because space is all around.
-
8:24
Or, we can have space between the elements, and that
-
8:26
allows them to line up neatly on the right and left.
-
8:30
You know, we're not having to do anything crazy
-
8:32
like, you know, set the margin differently on the first
-
8:35
child, or use negative margins, or all these little
-
8:38
tricks that we've been using, Flexbox just kinda does this.
-
8:41
It's how it works.
-
8:48
So, the items here are displayed as a row using the flex direction property.
-
8:55
If we set it to row reverse, the order of the items reverses.
-
8:59
And, you can also have things that display column and column reverse.
-
9:03
So again, this is just one of those little things you sort of think,
-
9:06
well, it should be easy just to switch things around, and it of course isn't.
-
9:09
And so, that's when Flexbox will let us do.
-
9:15
Equal height boxes.
-
9:17
There's another kinda pain point of the web designer.
-
9:20
You know, why is it so difficult to have a set of items that are all
-
9:23
the same height even if the content within
-
9:25
the elements is, is different, is different lengths.
-
9:29
And the reason that's difficult generally, it's been difficult with our
-
9:32
existing layout modes is because things don't have relationship to each other.
-
9:37
If you've got a couple of divs on a
-
9:39
page, that got absolutely no relationship to each other.
-
9:42
One doesn't know how tall the other one is, so this
-
9:46
is how, so this is what flex box kind of solves.
-
9:49
So, I've got these three boxes in my mock up and
-
9:53
the key to equal height boxes is the align items property.
-
9:57
The default value of stretch means that all the
-
9:59
items will stretch to the height of the tallest.
-
10:04
You set that value to center, the boxes kinda center against each other.
-
10:08
And, if you set that value to flex end, and it all will line up at the baseline.
-
10:15
We can use the order property on flex items to assign them
-
10:18
an order in addition to being able to just set the direction.
-
10:22
Now, to me, anything that lets, sort of lets us get away
-
10:25
from having our layout dictated by source order is really, really useful.
-
10:31
Because, it allows us to lay stuff out in the
-
10:33
best way for the device, for instance, that somebody's on.
-
10:37
And, we don't need to kinda think well, how am I gonna order my source to
-
10:42
best let me lay this out in one way for mobile and one way for the web?
-
10:46
You know, any layout method that lets us get
-
10:49
away from source order, I think, is really, really cool.
-
10:53
Because, we've kinda been fighting against that for a very long time.
-
10:57
and, you know, the ideal is that we create
-
11:00
the source order, you know, the right way for
-
11:02
the document and then we actually lay it out
-
11:05
with CSS, but we're still making compromises at the moment.
-
11:08
We're still saying, we've gotta, we've gotta build this in a certain way.
-
11:11
We've gotta get this document in a certain way cuz otherwise, when we use floats to
-
11:17
get the desktop layout, you know, the contents
-
11:19
that in the wrong order for mobile or whatever.
-
11:22
So, I think things like flex box and some
-
11:25
newer stuff we're going to be looking at make a
-
11:26
real, real difference in terms of how we can
-
11:29
see our source and what we can do with it.
-
11:31
And, also as someone who deals with content management
-
11:34
most of the time, you know, it's quite exciting in
-
11:36
terms of, you know, producing content from content management system
-
11:39
and then be able to display it in different representations.
-
11:45
So, Flexbox gives us a really good example of how these early stage specs can change.
-
11:50
There was actually an early working draft that was implemented quite well
-
11:54
in, in quite a lot of browsers, and then the spec changed.
-
11:58
And, because there was already a working draft out there and people
-
12:01
had written about it and, and they'd shown examples, there's, kind of, information
-
12:06
out there about old Flex Box and new Flex Box, and it, you
-
12:10
need to check that, actually, what you're using are up to date resources.
-
12:13
This is a really useful article.
-
12:14
It just let's you know how you know whether
-
12:16
you're dealing with the current version of the speck.
-
12:24
Reasonable support.
-
12:25
But, some of the browsers support the old Flex Box and some new.
-
12:28
Bu,t there's reasonable support for, for Flex Box out there.
-
12:32
And, it's certainly part of the spec.
-
12:35
Now, it would be possible, of course, to poly fill some, some of Flex Box.
-
12:39
But you can also allow the browser to fall back again, to a linear state.
-
12:43
You can do things like use something like modernizer to detect flex
-
12:46
box support and then have a flex box and non flex box alternative.
-
12:52
Once again, I think if you use this stuff sparingly and if you use
-
12:56
this stuff for UI Elements, you can often get away with not poly filling.
-
13:01
You can often get away with just letting it fall back to a linearized state.
-
13:06
It's very, very different if you, if you think of these new
-
13:09
things as, well I've got to use them for my entire layout.
-
13:11
Well, that's kind of quite hard to do because you
-
13:15
don't want your entire layout back to a linearized state.
-
13:18
But, again as you saw with multi-col, it's kind of okay to have small UI
-
13:21
elements that have a simpler display and a
-
13:23
more complex display for browsers that support them.
-
13:26
And, this is a way you can start to use these sort of interesting new parts of CSS
-
13:32
without feeling like oh, you know, if they've not
-
13:34
got support the whole thing is gonna fall apart.
-
13:36
A
-
13:38
really good example of that is, and this
-
13:41
is solved by Flexbox site, which is on GitHub.
-
13:44
And, here's an example, and this is like
-
13:47
a media element type, media object type example.
-
13:51
There's lots of little examples of how you can be using
-
13:53
Flex Box to solve these little problems that you have in design.
-
13:58
Things that currently you're having to do quite complex things to make them work.
-
14:03
So, it is definitely worth having a look at that site at some of those, examples.
-
14:07
But, yeah.
-
14:07
They show how you can use, you know, small
-
14:09
parts of your design, can be, can be using FlexBox.
-
14:12
And, you can not worry so much if, if it falls back to a slightly linearized view.
-
14:16
I've
-
14:19
got a bunch, of, resources.
-
14:21
I mean, there's masses of stop in FlexBox that I've not shown here.
-
14:23
You know?
-
14:23
It's just what happens when you wrap rows of items, and so on.
-
14:27
If you're interested in it, there's some really good resources
-
14:30
here and youc an start to see, you know, how
-
14:31
it could be used and maybe how you can even
-
14:33
start to use it in the work that you're doing.
-
14:36
[BLANK_AUDIO]
-
14:43
So, my favorite new CSS module, is the grid layout module.
-
14:50
I think it's really, really exciting.
-
14:53
And, I still want to say it deals with content management a lot.
-
14:56
Particularly, very excited by grid layout.
-
15:00
Now, the problem is with the current incarnation of this
-
15:03
spec, there aren't actually any working examples of it in browsers.
-
15:08
So, it's quite hard to demonstrate
-
15:09
grid layout because there are no implementations.
-
15:11
I can't really show you screenshots.
-
15:15
However, there is an implementation of an earlier draft in Internet
-
15:19
Explorer 10, and they did a really nice job of implementing grid.
-
15:24
And, you can play around with it and you can see how it works.
-
15:27
However, it is slightly different from the current draft.
-
15:30
And, actually that draft has been through several changes as
-
15:34
I've been tracking this spec and as feedbacks come in.
-
15:38
So, I going to have a look.
-
15:39
I'm going to show you how it's supposed
-
15:40
to work according to the current working draft.
-
15:43
And, I'm going to show you a little bit
-
15:44
about how IE does it, so you can actually, if
-
15:46
you've got a copy of IE 10, you can in to, have a look and see how it works.
-
15:50
And in it, you can sorta get the idea.
-
15:51
And, I've got some examples out there that you can also have a play with.
-
15:57
So, grids basically allows us to define a grid on an element.
-
16:00
And, we can then position chart elements onto that grid.
-
16:05
Crucially, where elements are placed has got
-
16:07
no bearing on their order in the source.
-
16:10
So, it's almost a bit like absolute positioning in that
-
16:12
way, except the elements a part of a grid structure.
-
16:14
So, you don't have the problems you have with
-
16:16
absolute positioning where things kind of overlap each other.
-
16:19
Because again, with grid, they've got a relationship to each other.
-
16:22
They understand that they're there.
-
16:28
So, it's a pretty new proposal, and the
-
16:30
first public working draft prepared in April 2011.
-
16:35
And, as you can see, the editors for this draft are mostly from Microsoft.
-
16:39
And that, so this, this sort of early, early example
-
16:43
was implemented in Internet Explorer 10 using the MS prefix.
-
16:47
It's both a good thing because we can see how a grid-type layout
-
16:51
should work in a browser, and a confusing thing because the spec has changed.
-
16:55
But, you know, I mean, I think as
-
16:56
an industry, we quite like to bash Microsoft and
-
16:58
we like to say oh, you know, the terrible IE six, it's causing me all this trouble.
-
17:03
The Internet Explorer team have been doing some fantastic stuff with
-
17:06
CSS and given us some great examples of, of things to,
-
17:10
to play with and I think it's really worth looking at
-
17:13
sort of what they're doing and, and actually, you know, it's great.
-
17:16
It's really good to see that, coming from the browser manufacturers.
-
17:19
We should give them some credit for that.
-
17:23
So, the Cohen working draft was released on the tenth of September this year
-
17:27
and contained significant changes when compared to
-
17:30
the original draft and crucially this Microsoft implementation.
-
17:34
So, this is kind of how thing should work.
-
17:37
Nothing implements this at the moment fully.
-
17:41
So, to use grid, we define a grid using a new values display property, display grid.
-
17:47
That is also an, an inline grid property.
-
17:51
We can then define our grid.
-
17:54
So, if we want a grid that's got to fi,
-
17:56
that's got fixed width sidebars, a 20 pixel gutter between
-
17:58
sidebar main content, and a central area that stretches, that
-
18:01
would give you something like an old school sorta liquid layout.
-
18:05
We do this sort of thing.
-
18:07
The GUI template columns and GUI template rows properties were
-
18:12
referred to before September as GUI definition rows and columns.
-
18:16
And, you'll see articles that refer them as such.
-
18:18
It's basically the same thing.
-
18:19
They've just being renamed.
-
18:23
So, I've got some HTML like this, an article, some navigation, a quote.
-
18:28
And, without setting any positioning, the elements
-
18:31
all stack up like this because I've
-
18:34
declared a grid, but I've not positioned any of my elements on the grid.
-
18:36
They're all gonna kinda stack up in the corner.
-
18:43
So from then, we had a five column grid.
-
18:44
The 20 pixel gutters currently count as columns.
-
18:48
So, the value of the grid-columns start is the
-
18:50
line before the column that we want the content in.
-
18:52
Grid-column end is the line after the content.
-
18:56
The content is displaying in row two because you've
-
18:59
set the value of grid row start to two.
-
19:02
That's the line before the row you want the content in.
-
19:04
And, everything else is still stacked in row one, which you've not positioned yet.
-
19:07
I
-
19:12
could use the same method to position the title, the navigation, and the quote.
-
19:19
So, to place an item, what you doing is you're declaring grid lines around it.
-
19:25
And, I've added the actual grid lines to
-
19:27
this example to show how we position content.
-
19:32
So, the value there of grid columns start is three
-
19:36
because you want the content to start at line three.
-
19:40
The value of grid column n is four because you want the column to end at line four.
-
19:46
The grid row line before our content is two, so
-
19:48
we use two as the value for grid row start property.
-
19:53
And, grid row end is three.
-
19:54
So, we're basically kinda drawing a box around our content, which is inside.
-
19:58
And, we can span multiple rows or columns in the
-
20:00
grid by just specifying the end row or column line.
-
20:03
[BLANK_AUDIO]
-
20:07
The spec also includes a way to name the grid lines.
-
20:11
Again when doing this, you'd name the lines, not the actual area.
-
20:14
So, nav refers to the line before the navigation column.
-
20:20
And, doing this kind of solves the issue of
-
20:22
what happens if columns are added to the grid.
-
20:25
Using numbers works fine if the grid never changes.
-
20:28
But in, for instance, a responsive design, what you're probably gonna want to do is
-
20:32
have different grids for your different devices, you,
-
20:34
you know, you're different representations of that content.
-
20:37
If you use numbers, that's gonna get super confusing really fast.
-
20:41
Whereas if you name things, you can then, you
-
20:43
know, it's always, that's always navigation wherever it is.
-
20:49
There's another method as well, which I think will seem a lot simpler.
-
20:52
In that you can define areas of the grid using grid template areas.
-
21:00
So, you can then position things onto a named area and not worry about the
-
21:04
lines and of course you can then redefine
-
21:06
the template for different screen sizes and devices.
-
21:11
I think that this method will work very well for simple positioning of elements.
-
21:15
And, I think the line based method or naming
-
21:17
lines will work better for doing things like replicating
-
21:20
your, sort of, sixteen column grid system types that
-
21:24
you see you know, using floats and things currently.
-
21:27
I think that those will be, you know, easily
-
21:29
replicated by, you know, using the the, line based technology.
-
21:37
So, when I've presented on this subject in
-
21:39
the past, the feedback I've had from people,
-
21:42
seeing the last example is, you know, why
-
21:44
on earth are those gutters counted as a column?
-
21:46
That seems really confusing.
-
21:48
You know, other things like multi-col for instance,
-
21:51
we have gutters and we treat those as gutters.
-
21:53
We don't treat them as columns of content.
-
21:56
Lots of people have fed that back to
-
21:57
the Cirsis working group, and it's been discussed.
-
22:00
And, it looks like some sort of gutters will be included in the final spec.
-
22:04
And, I think that will be a lot
-
22:06
more logical because we can concentrate, then, on
-
22:08
actual columns of content rather than space between
-
22:11
them, which we currently have to worry about.
-
22:13
So, this is that discussion on the on the mailing list.
-
22:21
It is talking about using column gap and row gap.
-
22:24
And, these sort of discussions show how important it
-
22:26
is for developers to take an interest in emerging specs.
-
22:30
If we write about them, if we talk about them, if we try and figure
-
22:34
out how they work that gives feedback to the people who are actually writing spec.
-
22:38
And, also it show browser vendors that we care about this stuff.
-
22:42
And, that we want to in browsers if we are actually talking about it.
-
22:46
You know, it's to late.
-
22:48
When the thing, when a spec more or less
-
22:50
complete you know, when it's a candidate recommendation stage even.
-
22:53
It's to late then to start saying this doesn't work very well.
-
22:56
I don't like it.
-
22:57
Early on, is when you get chance to say, you know, I'd like this to be changed.
-
23:02
And, everyone can do that.
-
23:03
You know, even if you're confused about a spec.
-
23:05
I wrote up an article about grid initially and their were some thing I've got wrong.
-
23:09
And you know, when I, I, it was picked up by
-
23:12
the working group list, I said, oh, there's some confusion there.
-
23:15
They explained to me where I was confused,
-
23:16
but that actually informed the spec office that
-
23:19
their spec was a bit confusing because someone
-
23:21
who kind of knew about CSS was confused.
-
23:24
So actually, there's no problem you posting and saying, you
-
23:26
know, I'm not sure about this, or, how does this work?
-
23:28
[BLANK_AUDIO]
-
23:32
I'd like to show you a little bit about the iTen implementation, just because it's
-
23:35
out there and you can play with it and you can see how good works.
-
23:39
It is different, to, to the current one, but the actual general concepts.
-
23:44
Declaring a grid and placing items on it, is the same.
-
23:49
So, to define a grid in the
-
23:51
IE10 implementation, you are using, display MS Grid.
-
23:56
But you're with the MS, the, the MS prefix.
-
23:59
But also using grid rows and grid columns
-
24:03
rather than grid template rows and grid template columns.
-
24:05
But, they work pretty much the same as in the new draft.
-
24:09
Positioning items is even more different.
-
24:12
In fact, the syntax used is being reused with
-
24:15
a different name in the new grid placement properties.
-
24:18
So, this is how you place items on the grid for the Microsoft syntax.
-
24:21
So,
-
24:24
let's take our example of the main content that we used before.
-
24:28
Instead of declaring our four grid lines that go
-
24:30
around it, we're actually targeting the row and the column.
-
24:35
So, we're targeting the box instead of the lines around.
-
24:38
And, what this means is in the IE 10 implementation, you see
-
24:42
the column and row span properties that aren't needed in the new spec.
-
24:45
So, actually, the new spec is far more flexible, and you
-
24:48
know, sort of far more useful, I think, in the future.
-
24:50
Although it seems perhaps slightly more confusing than the initial implementation.
-
24:56
I've been writing quite a bit about grids.
-
24:58
And, I've got several examples that work in IE 10.
-
25:01
So, you can just, sort of, see, and play around with them.
-
25:04
See how they work.
-
25:06
And, I've also been detailing the differences
-
25:08
between the IE implementation and the new
-
25:09
working draft, which actually I need to
-
25:11
update because the, the draft has changed again.
-
25:16
So, the browser's report, there isn't really any.
-
25:18
And, a part from that is in I 10.
-
25:21
But I really think that grid is where we can see scope for solving some of
-
25:26
our biggest layout issues, and, really in terms
-
25:28
of our full page layout and application layout.
-
25:32
And the fact that we see a different implementation in IE10 to
-
25:35
the current spec is just the way of working with early stage implementations.
-
25:40
As we've seen with flexbox, you know,
-
25:41
things change as they go through the process.
-
25:44
And, I think it's been quite interesting tracking this spec because from what was
-
25:49
quite a difficult to use implementation, we're
-
25:52
starting to see things be renamed and changed.
-
25:55
They become more logical as we go through the process.
-
25:58
It's quite interesting.
-
25:58
I was just watching that on the working group.
-
26:03
The question I tend to get asked, when I talk
-
26:05
about both Flexbox and Grid is well, which would you use?
-
26:08
If both were implemented, which should you use?
-
26:10
And, I think ultimately, we'll use both.
-
26:15
Flex box is great for sort of, one dimensional
-
26:17
things that can linearized, and grid is good for things
-
26:21
where you want almost arbitrarily place things around, that
-
26:25
don't, that couldn't really be linearized as, as one thing.
-
26:28
That link there, is a very good explanation on the
-
26:32
Witman Group mailing list as the differences between the two.
-
26:35
I think, you know, ultimately when we've got support, we'll probably find
-
26:39
that we're using both of those in the, in the same layouts.
-
26:41
[BLANK_AUDIO].
-
26:41
It's a
-
26:45
bunch of grid resources.
-
26:48
There's some, there's not a huge amount
-
26:49
out there because there aren't any implementations,
-
26:51
so people tend not to want to
-
26:52
write about things that don't have browser implementations.
-
26:55
But, I've written a few things.
-
26:57
And, there are a few other things out there.
-
26:58
And, I think we'll probably see more of this coming up cuz I think
-
27:01
people will get quite excited by it when they start to see it implemented.
-
27:09
So, a few other things that are out there.
-
27:12
Less of the sort of, the big layout options.
-
27:15
And, the next mode that I'd like to look at is regions, CSS regions.
-
27:21
Now, this is come from Adobe in collaboration with Microsoft.
-
27:24
There's more information on the Adobe website and also some examples.
-
27:28
Now, Regions lets you flow content through
-
27:31
multiple containers independently of the source order.
-
27:34
Now, this sounds really strange in a web context.
-
27:37
However, this kind of layout is often used
-
27:39
in print design in particular in magazines and newspapers.
-
27:43
And, how regions works is easiest to see if you actually play around with it.
-
27:49
The last few things in this presentation are very, very new.
-
27:53
They do have some support out there, but normally you have to
-
27:56
do things like enable experimental features to, to have a look at them.
-
28:00
There's a useful page on the Adobe site
-
28:02
telling you how to do that in different browsers.
-
28:07
Regions is also being implemented in mobile Safari for iOS seven, so making
-
28:12
this stuff quite useful if you are doing things that's targeted for those devices.
-
28:18
So, here's some HTML.
-
28:20
I've got an article element that contains the entire content of an article.
-
28:24
And, I've then added a number of empty elements at the bottom of the document.
-
28:30
First, I use a new CSS property, flow-into using a webkit prefix.
-
28:34
If I, if I was doing that for, for a webkit browser which is the
-
28:38
ones you can really see it in now, and on the container for the content.
-
28:41
The value Article Thread is the name I've chosen
-
28:43
for this content, but that could be anything you want.
-
28:46
Once you do this, the content will actually
-
28:48
disappear because it's got nowhere to go yet.
-
28:54
So, each of my empty elements is a class of article regions.
-
28:57
So, I can now target that class as being the recipient of the content.
-
29:01
And this time, we're using the new flow-from property
-
29:04
with a value that's a name we used earlier.
-
29:07
And, if you refresh the page when doing this, you'd see
-
29:10
the content reappears because it's flowing into the first of our regions.
-
29:14
Now, once you've got content flowing, we can then lay it out.
-
29:19
So, we just style the layout of the regions.
-
29:21
I want the first few lines of my article to flow into region one.
-
29:24
So, I give it a height.
-
29:26
Once that height is reached, the content will
-
29:28
look for the next region to flow into.
-
29:32
So, I'm using FlexBox for the regions inside the region
-
29:34
wrapper, and you can create your layout anyway you want.
-
29:37
Regions isn't a layout tool, as such.
-
29:40
It just dictates where the content flows in a layout that you create.
-
29:46
So, here we got region one is first got to line at the top.
-
29:50
The three boxes are inside Region Wrapper that positioned using Flexbox.
-
29:54
Then, we got a final region, which is got a height set
-
29:57
to auto, and that's the recipient into the rest of the content.
-
30:01
so, you know, whatever content you got left, you've got somewhere for that to go.
-
30:06
Regions don't have to be adja, adjacent.
-
30:09
If my page like's cabbage drawings and I take
-
30:11
the class of the central region, I can stick an
-
30:14
image into there and the content will just skip
-
30:16
over and go into the next region at the end.
-
30:19
And, this basically means we can insert
-
30:20
elements without breaking up the content flow.
-
30:23
We can keep this chunk of content all together and we can
-
30:25
stick things into that, into that document without breaking up the content.
-
30:29
And again, as somebody that deals with content management,
-
30:31
this is great because it's always a problem, you know?
-
30:34
Where do you put those arbitrary images?
-
30:36
You just want to show to sort of, highlight the, you know, in your design.
-
30:40
Being able to have those out of the text is gonna be really useful.
-
30:46
Support is starting to come into browsers for regions.
-
30:48
however, with some differences.
-
30:50
There's a very interesting difference in IE
-
30:52
10, which again, early implementation of this.
-
30:56
But you won't be able to get the example I just
-
30:58
showed you to work in IE 10, because of a crucial difference.
-
31:02
With IE 10, you need to flow from content to stored in an iframe.
-
31:06
And I'll just show you that because it's slightly weird.
-
31:09
But I think it actually highlights one sort of, particular usage of this.
-
31:14
So, you have a document, which stores your article content.
-
31:17
And, it contains the article element text.
-
31:21
We use the HTML page we created as the source for an iframe.
-
31:25
So, with this in place, that's what we end up with.
-
31:30
I then use the Flow Into property on the iPhone.
-
31:32
I'm using the MS prefix, because this only ever
-
31:35
works in Internet Explorer, and again, the content disappears.
-
31:40
Our content now can flow into regions, just as before.
-
31:47
I'm using Flexbox again to I've used Flexbox in the last example.
-
31:50
I'm using Grid in its A10 incarnation here.
-
31:53
Again, you can use any layout message you want
-
31:55
that could be absolutely positioned, thet could be floated, whatever.
-
32:00
so, you know, Regions handles getting the content from a to b, and
-
32:03
you do your layout independently depending on what's best in, in your context.
-
32:09
In the Flexbooks example, I changed the height on the different boxes with grids.
-
32:13
I can obviously change the grid to adjust column widths or row heights.
-
32:17
So, I can change the second row's height, making
-
32:20
the set of three boxes shorter, containing less content.
-
32:24
I think great and regions will be useful for content, manage content because
-
32:28
you'll be able to create pretty
-
32:29
complex layouts without worrying about overflowing boxes.
-
32:33
And, I can kind of see what Microsoft
-
32:35
was thinking with that source from an iFrame thing.
-
32:38
Because, it makes a lot of sense if
-
32:39
you're only considering regions as official layout thing.
-
32:43
Perhaps, for using HTML before muscling for print.
-
32:47
Because this does kind of mirror those print layout tools, where
-
32:49
you can say, here's all my boxes for my magazine layout.
-
32:53
And then, you sort of lay, you, you put
-
32:54
the content in it flows itself into those boxes.
-
32:57
And, I think that's really where this is kind of coming from.
-
33:01
So, it's a different way of looking at web content.
-
33:04
In terms of web apps and tools, you can do stuff like, you
-
33:07
know, dime you creating new regions as content grows and flow content into them.
-
33:11
Or, allow people to customize the display effect content.
-
33:14
I really think Regions is, is quite interesting and,
-
33:18
and not really for so much additional web stuff.
-
33:22
There's a bunch of interesting information available
-
33:24
about regions including a lot of examples.
-
33:27
Adobe doing quite a good job of creating examples for us to have a look at.
-
33:30
[BLANK_AUDIO]
-
33:34
And now, I take a quick look at CSS Exclusions.
-
33:40
This module was originally linked to shapes, again, it came from Adobe.
-
33:46
And, these modules have been split
-
33:48
up recently into two different specifications.
-
33:51
We used to see things referring to exclusion and shapes and
-
33:54
an awful lot of the resources out there kinda bundle these together.
-
33:59
So, we are all familiar with floats in CSS.
-
34:01
However, floats are pretty limited when used
-
34:04
in to sort of float images because images.
-
34:07
If you float an image, you always float to the top.
-
34:09
So, you can float an item left, and wrap the text around it.
-
34:12
You can float an item right, and wrap the text around it.
-
34:15
But, you can't put an image right in the
-
34:17
middle of your document and wrap text around both sides.
-
34:19
You can't put one on the bottom and float the text around it.
-
34:22
Floats are fairly limited in what they can do.
-
34:26
So, CSS exclusions kind of you know seeks to solve that.
-
34:30
It allows you to wrap text on data elements that aren't floated.
-
34:33
And, it finds the wrap flow and wrap through properties.
-
34:38
So, with a quick example, we can see how this one works.
-
34:42
So, I've got a simple block of text, marked
-
34:44
up as an article with a class of main.
-
34:46
Below this, I've got a div containing an image, and I'd like
-
34:49
the image to appear floated inside the copy with the text wrapping around.
-
34:54
As with Regions, exclusions isn't a new positioning method.
-
34:58
So, to keep things simple, I'll just use absolute positioning, and place the image.
-
35:01
Because it was last in the document, it naturally displays sat on top of the text.
-
35:05
So, this is as we'd expect.
-
35:08
So, to make the text flow around, I use the Wrap Flow property set to both.
-
35:13
The content now honors the position of the element, and flows around it.
-
35:16
It knows it's there.
-
35:17
It goes round the outside.
-
35:19
I think that's going to be very, very useful and a
-
35:22
lot of people are like, well why didn't we have that already?
-
35:25
You can do, you can see here where we are with browser support.
-
35:29
You can do a lot of exclusion stuff in IE 10, and so that's, you know, get if
-
35:33
you haven't found themon my web site, if you
-
35:36
normally use a Mac and have a look at that.
-
35:38
And so, you can start to play with that.
-
35:41
And, though kind of few resources for this is
-
35:44
pretty new, but there's some nice examples out there.
-
35:46
Again, Adobe have been doing examples of this.
-
35:54
So finally, I'd like to take a quick look at CSS shapes.
-
35:58
As I mentioned, I was talking about
-
35:59
the exclusions module, exclusions was linked to shapes.
-
36:03
Earlier this year they were separated and the
-
36:05
first public working draft was published for Shapes.
-
36:08
So, when you looking for material out
-
36:10
there, you may well find stuff bundled together.
-
36:12
And, a lot of browsers supply information conflicts the two things.
-
36:17
This has made it quite difficult talk about Shapes at
-
36:20
the current time because of where these drafts currently are.
-
36:23
So, I've, I've just got a few example and a
-
36:24
point [UNKNOWN], so you can see how that's that's going on.
-
36:28
The actual working draft is the, the main link there.
-
36:32
There's also two editor's drafts that are out there, which bring back
-
36:35
some of the functionality that was removed from the first draft of this.
-
36:40
The earlier version of the combined exclusions and
-
36:43
shapes had shape inside as well as shape outside.
-
36:48
They shape inside properties missing from the current
-
36:51
level one draft and comes back in level two.
-
36:53
So, I've kind of broken my conventionist
-
36:55
presentation of only showing the latest working draft,
-
36:58
and included things that are only in an
-
36:59
editor's draft cuz this is really new stuff.
-
37:04
So, exclusion lets us flow text around square things.
-
37:09
Shapes lets us shape text around the edge of an image, or along a curve.
-
37:13
Which, is something we see a lot in print.
-
37:15
It's quite a common thing in a magazine.
-
37:17
But very hard to achieve on the web.
-
37:20
This is an example from the Adobe website.
-
37:22
The text of the poem is forming the shape of the
-
37:24
Raven and can be scaled in the browser, maintaining the shape.
-
37:32
So, the seven examples on Code pen, contributed by the Adobe team.
-
37:35
This example shows text flowing along the edge of a circle,
-
37:38
using the shape outside property, which exist in the new draft.
-
37:42
The Code pen examples are great if you have,
-
37:44
say Chrome Canary and you've enabled the experimental web features.
-
37:48
You can go to Code pen, you can play around with
-
37:50
the examples and you can start to see how they work.
-
37:53
That's kind of the best way to see how this is, this is playing out.
-
37:55
This
-
37:59
is a great example.
-
38:00
It lets you create polygon shapes to flow text inside.
-
38:04
And, you can sort of then see the values below.
-
38:06
You just play around with the, with the polygon.
-
38:09
And then, if you inspect the element, you can see the shape inside property.
-
38:14
And, this is the one that was removed from the
-
38:16
new draft, but it's come back into the level two draft.
-
38:22
Just as I was preparing this presentation, Adobe
-
38:24
published a new example of shapes for visual storytelling.
-
38:29
I think this blog post went up yesterday.
-
38:31
And now, when I show people this stuff,
-
38:34
I hear grumbling that it isn't very web-like.
-
38:37
That, you know, this is, this is all
-
38:39
about print design and it's not really web stuff.
-
38:42
But, I think there's gonna be interesting and
-
38:43
creative ways that we can be using this.
-
38:47
If we get away from thinking just about normal informational kind of pages.
-
38:51
You know, there is a call for that kind of, sort of
-
38:54
more visual, rich visual layouts that you could be doing with this stuff.
-
38:57
And, I think it's going to be really interesting to see what people do
-
39:01
once they've got implementations of this and we see them out in the world.
-
39:05
The, this example, the Alice in Wonderland example, is,
-
39:08
also available on, on GitHub so you can download the
-
39:11
code and have a play around with it and
-
39:12
see how it works if you've got a supporting browser.
-
39:15
And, there's, a bunch of, resources for shapes, again, some of them are
-
39:20
kind of bundled up with exclusion stuff,
-
39:23
because of what's happened with those specs.
-
39:25
But, there's a few of them out there.
-
39:26
And, I really would suggest that you just, you
-
39:28
know, get a browser that supports it and have
-
39:30
a little play around, because it's really interesting to
-
39:33
have a look at where these things are going.
-
39:38
As developers and not academics and things, it can seem that we've kind of got
-
39:42
no time to be looking at these new things that aren't, like, useful right now.
-
39:47
It's really easy to write all this stuff off and say, well,
-
39:50
I can't use it today, so I'm not gonna bother using it.
-
39:52
I'm not gonna bother looking at it.
-
39:54
I'm not gonna bother, you know, deciding, you know, how
-
39:56
it could be used or looking for problems in it.
-
40:00
But if we don't do that, we really kind of lose our
-
40:02
say with how these things progress and, you know, have a look at
-
40:06
the working group, see the discussions that are happening, and see the
-
40:09
fact that actually feedback from the
-
40:11
community shaping the way these specs develop.
-
40:14
You know, I'd really advice that people go and talk and particularly, if you're more
-
40:17
from the design background, you can see problems
-
40:19
for things grid, say, well, that's named strangely.
-
40:22
You know, let them know because once the specs get
-
40:25
to the material stage, you don't really have that chance.
-
40:32
And, that is all I have.
-
40:33
I don't, I've got time for questions.
-
40:34
I think I've just hit my time.
-
40:36
I've got a bunch of information about that, that URL.
-
40:39
I'm always very interested to talk about it and to see
-
40:41
examples, so do let me know if you've got any questions.
-
40:45
Thank you.
-
40:45
[SOUND]
You need to sign up for Treehouse in order to download course files.
Sign up