[MUSIC]

Hello, it's really great to be

here again,

I'm Rachel Andrew and I've been working as a web developer for a very long time.

I like to say that I'm pre-CSS.

I remember people arguing, you know, you, about using CSS just for sorta

font tags in, instead of font tags and things, so I'm quite old.

but, I'm still very excited about the new developments in CSS.

And, it's some of this new stuff that I'm gonna talk a bit about today.

There's a whole bunch of kind of new and

shiny things in CSS to improve things like typography.

You know we don't have to cut up images for rounded corners anymore and so on.

But, actual layout, the tools you've got for

layout haven't really moved on very much for years.

You know, we're still using kind of

floats and sometimes maybe display table and things.

We haven't really got great layout tools.

And, this is kind of a problem, because things have moved on.

We're not just trying to lay out very simple

web pages anymore, we're also trying to lay out applications.

We're trying to lay out very complex things with CSS.

And, our existing lay out methods actually make that really, really hard.

But, thankfully, things are changing.

And, today, I've got a, sort of a rapid fire look at

some of the new things in CSS, that are really for layout.

And in particular, those things that are

good when we're thinking about laying out applications

and also for layouts that are gonna adjust

well according to the device that you're using.

[BLANK_AUDIO]

And, the first thing I'm gonna look at is that one

of these has got the most router support at the moment.

Some of the things I'll be looking at

today, actually, don't have browser implementations at the moment.

However, multi-column layouts actually got quite good implementations

in browsers, or at least part of the spec.

I'm, just as a quick note, I'm

generally not showing things like vendor prefixes here.

Most of this stuff requires vendor prefixes for some browsers.

You know, if you actually start using this stuff

in production, you'll have to test what's available now.

I'm just really showing what's in the spec.

So, multicolumn layout makes it possible to

take some content and arrange it in columns.

And, it'll then flow pretty much as content flows in a newspaper.

So, starting in the first column, and

flowing to evenly fill each column in turn.

Your columns are specified on the containing element.

In this case, the class called wrapped being added to

the div you can see with a lighter background color.

You can specify the width with column width.

And, the browser will work out how many columns

can fit into the space offered by the parent element.

You could instead use column count, and the browser will

create that number of columns and calculate the width for each.

You can control the gutters, so the gap's between each column.

And, this is achieved with the column gap property.

You can also set rules between columns using the Column

Rule property, and that takes values pretty much like Border does.

It's worth remembering with Column Rule, it

doesn't actually take up any space itself.

It overlays the column gap.

You need to make sure you have enough space

in your gap for that rule to fit in between.

If for some reason, you got a very fat rule, it's gonna sort of

start taking up space and, and come to close to the, the columns themselves.

You can use column span within your columns.

And, that would cause an element to span all columns.

Again, this this is quite reminiscent of your sort of magazine style

layouts and newspaper like design, being able to span things across columns.

Now, despite this having pretty good browser support.

Some of the specs implemented in some

browsers not everything is implemented in everything.

It's not that you use it often.

And I think, quite often, it's because people

only think of this as being used for

your current newspaper like columns, and quite rightly,

that's not a great reading experience on the web.

You know, what we don't want to be doing is reading all the

way down and have to scroll to the top and go back down again.

You know, that's not how we want to use web pages.

However, I think this is a really, really useful thing for small UI elements.

This is part of the interface within Perch, the CMS product that I work on.

And, we've just got a, a bunch of check

boxes here, and we're laying those out with multiple

columns, just cuz it kind of compresses the view

a bit and makes it easier to check them.

Now, that would just fall back to a long list, which is kind of okay.

And, a lot of the time when you're dealing with, sort

of, small UI elements, you don't need to worry about poly-filling stuff.

You don't need to worry about sort of, hacking in

a different display, using floats or browsers that don't support something.

Because actually, the fallback can just be, well, it just all linearizes.

And, that's okay.

So, I think, you know, multi call

is really worth exploring for those small elements.

You know, you don't necessarily need to think of

it as page layout, as, you know, big things.

[BLANK_AUDIO]

Right.

When we come to doing sort of responsive designs, if we are

doing those kind of column layouts, we want to put things in.

Multi-column layout works really well for responsive

design, because it's pretty much responsive by nature.

You've actually gotta try quite hard to restrict the columns.

If you use column width, for example, yeah, that will

quite naturally sort of adjust as your browser reduces in size.

Images placed in columns are constrained by the column width.

So, the kind of standard responsive design method of scaling

down an image because of its parent, that should work.

How's to say, non supporting browsers are

just going linearize, which is fine, usually.

You know, and if you're sort of designing

carefully, you can have things that will go

into columns if it's there and it will

just linearize if the browser doesn't have support.

I wouldn't bother trying to poly fill this genuinely.

I would just let the browser do what it does if it doesn't have support.

[BLANK_AUDIO]

These are a few resources to read more about using multi-col.

And, I'll be tweeting these slides, they'll go out

so don't worry about sort of copying things down.

And I also, there's a URL at the end that's got a link to all of

these resources and things so you can read more about each thing as we go through.

So, the next thing I'd like to take a look at is Flex Box.

Flexible Box layout module.

Now, I think this is something that we're starting to hear an

awful lot more about now because the browser support is getting better.

And, I think people are gettin quite

excited about the possibilities with Flex Box.

That's my obligatory cat slide.

The CSS flex with box layout module gives us a basically

a brand new layout mode in CSS and that's flex layout.

And, it's been designed to make it

easier to layout complex applications and web pages.

And, it really solves some of the most baffling problems that we have in CSS.

The kind of things where designers say, why on earth can't we do that?

You know, why can't we already do this in CSS?

Flexbox kind of brings us things that solve that quite nicely.

So, for instance spacing things out evenly is one of those things

that is like one of those, why is this so hard problems?

You know, I've got a group of things, I want to space

them out evenly and that's actually been really difficult for a long time.

So, I've got a navigation list which is linearized there.

I'd like to actually display that all in a line and have them spaced out evenly.

So, a value of flex with a display on it means we're using flex box.

And then, I can use the justified content props to decide whether I want space

around the elements, in which case, you get

equal space on each side of the element.

And, they don't line up flush there with the

right and left margin because space is all around.

Or, we can have space between the elements, and that

allows them to line up neatly on the right and left.

You know, we're not having to do anything crazy

like, you know, set the margin differently on the first

child, or use negative margins, or all these little

tricks that we've been using, Flexbox just kinda does this.

It's how it works.

So, the items here are displayed as a row using the flex direction property.

If we set it to row reverse, the order of the items reverses.

And, you can also have things that display column and column reverse.

So again, this is just one of those little things you sort of think,

well, it should be easy just to switch things around, and it of course isn't.

And so, that's when Flexbox will let us do.

Equal height boxes.

There's another kinda pain point of the web designer.

You know, why is it so difficult to have a set of items that are all

the same height even if the content within

the elements is, is different, is different lengths.

And the reason that's difficult generally, it's been difficult with our

existing layout modes is because things don't have relationship to each other.

If you've got a couple of divs on a

page, that got absolutely no relationship to each other.

One doesn't know how tall the other one is, so this

is how, so this is what flex box kind of solves.

So, I've got these three boxes in my mock up and

the key to equal height boxes is the align items property.

The default value of stretch means that all the

items will stretch to the height of the tallest.

You set that value to center, the boxes kinda center against each other.

And, if you set that value to flex end, and it all will line up at the baseline.

We can use the order property on flex items to assign them

an order in addition to being able to just set the direction.

Now, to me, anything that lets, sort of lets us get away

from having our layout dictated by source order is really, really useful.

Because, it allows us to lay stuff out in the

best way for the device, for instance, that somebody's on.

And, we don't need to kinda think well, how am I gonna order my source to

best let me lay this out in one way for mobile and one way for the web?

You know, any layout method that lets us get

away from source order, I think, is really, really cool.

Because, we've kinda been fighting against that for a very long time.

and, you know, the ideal is that we create

the source order, you know, the right way for

the document and then we actually lay it out

with CSS, but we're still making compromises at the moment.

We're still saying, we've gotta, we've gotta build this in a certain way.

We've gotta get this document in a certain way cuz otherwise, when we use floats to

get the desktop layout, you know, the contents

that in the wrong order for mobile or whatever.

So, I think things like flex box and some

newer stuff we're going to be looking at make a

real, real difference in terms of how we can

see our source and what we can do with it.

And, also as someone who deals with content management

most of the time, you know, it's quite exciting in

terms of, you know, producing content from content management system

and then be able to display it in different representations.

So, Flexbox gives us a really good example of how these early stage specs can change.

There was actually an early working draft that was implemented quite well

in, in quite a lot of browsers, and then the spec changed.

And, because there was already a working draft out there and people

had written about it and, and they'd shown examples, there's, kind of, information

out there about old Flex Box and new Flex Box, and it, you

need to check that, actually, what you're using are up to date resources.

This is a really useful article.

It just let's you know how you know whether

you're dealing with the current version of the speck.

Reasonable support.

But, some of the browsers support the old Flex Box and some new.

Bu,t there's reasonable support for, for Flex Box out there.

And, it's certainly part of the spec.

Now, it would be possible, of course, to poly fill some, some of Flex Box.

But you can also allow the browser to fall back again, to a linear state.

You can do things like use something like modernizer to detect flex

box support and then have a flex box and non flex box alternative.

Once again, I think if you use this stuff sparingly and if you use

this stuff for UI Elements, you can often get away with not poly filling.

You can often get away with just letting it fall back to a linearized state.

It's very, very different if you, if you think of these new

things as, well I've got to use them for my entire layout.

Well, that's kind of quite hard to do because you

don't want your entire layout back to a linearized state.

But, again as you saw with multi-col, it's kind of okay to have small UI

elements that have a simpler display and a

more complex display for browsers that support them.

And, this is a way you can start to use these sort of interesting new parts of CSS

without feeling like oh, you know, if they've not

got support the whole thing is gonna fall apart.

A

really good example of that is, and this

is solved by Flexbox site, which is on GitHub.

And, here's an example, and this is like

a media element type, media object type example.

There's lots of little examples of how you can be using

Flex Box to solve these little problems that you have in design.

Things that currently you're having to do quite complex things to make them work.

So, it is definitely worth having a look at that site at some of those, examples.

But, yeah.

They show how you can use, you know, small

parts of your design, can be, can be using FlexBox.

And, you can not worry so much if, if it falls back to a slightly linearized view.

I've

got a bunch, of, resources.

I mean, there's masses of stop in FlexBox that I've not shown here.

You know?

It's just what happens when you wrap rows of items, and so on.

If you're interested in it, there's some really good resources

here and youc an start to see, you know, how

it could be used and maybe how you can even

start to use it in the work that you're doing.

[BLANK_AUDIO]

So, my favorite new CSS module, is the grid layout module.

I think it's really, really exciting.

And, I still want to say it deals with content management a lot.

Particularly, very excited by grid layout.

Now, the problem is with the current incarnation of this

spec, there aren't actually any working examples of it in browsers.

So, it's quite hard to demonstrate

grid layout because there are no implementations.

I can't really show you screenshots.

However, there is an implementation of an earlier draft in Internet

Explorer 10, and they did a really nice job of implementing grid.

And, you can play around with it and you can see how it works.

However, it is slightly different from the current draft.

And, actually that draft has been through several changes as

I've been tracking this spec and as feedbacks come in.

So, I going to have a look.

I'm going to show you how it's supposed

to work according to the current working draft.

And, I'm going to show you a little bit

about how IE does it, so you can actually, if

you've got a copy of IE 10, you can in to, have a look and see how it works.

And in it, you can sorta get the idea.

And, I've got some examples out there that you can also have a play with.

So, grids basically allows us to define a grid on an element.

And, we can then position chart elements onto that grid.

Crucially, where elements are placed has got

no bearing on their order in the source.

So, it's almost a bit like absolute positioning in that

way, except the elements a part of a grid structure.

So, you don't have the problems you have with

absolute positioning where things kind of overlap each other.

Because again, with grid, they've got a relationship to each other.

They understand that they're there.

So, it's a pretty new proposal, and the

first public working draft prepared in April 2011.

And, as you can see, the editors for this draft are mostly from Microsoft.

And that, so this, this sort of early, early example

was implemented in Internet Explorer 10 using the MS prefix.

It's both a good thing because we can see how a grid-type layout

should work in a browser, and a confusing thing because the spec has changed.

But, you know, I mean, I think as

an industry, we quite like to bash Microsoft and

we like to say oh, you know, the terrible IE six, it's causing me all this trouble.

The Internet Explorer team have been doing some fantastic stuff with

CSS and given us some great examples of, of things to,

to play with and I think it's really worth looking at

sort of what they're doing and, and actually, you know, it's great.

It's really good to see that, coming from the browser manufacturers.

We should give them some credit for that.

So, the Cohen working draft was released on the tenth of September this year

and contained significant changes when compared to

the original draft and crucially this Microsoft implementation.

So, this is kind of how thing should work.

Nothing implements this at the moment fully.

So, to use grid, we define a grid using a new values display property, display grid.

That is also an, an inline grid property.

We can then define our grid.

So, if we want a grid that's got to fi,

that's got fixed width sidebars, a 20 pixel gutter between

sidebar main content, and a central area that stretches, that

would give you something like an old school sorta liquid layout.

We do this sort of thing.

The GUI template columns and GUI template rows properties were

referred to before September as GUI definition rows and columns.

And, you'll see articles that refer them as such.

It's basically the same thing.

They've just being renamed.

So, I've got some HTML like this, an article, some navigation, a quote.

And, without setting any positioning, the elements

all stack up like this because I've

declared a grid, but I've not positioned any of my elements on the grid.

They're all gonna kinda stack up in the corner.

So from then, we had a five column grid.

The 20 pixel gutters currently count as columns.

So, the value of the grid-columns start is the

line before the column that we want the content in.

Grid-column end is the line after the content.

The content is displaying in row two because you've

set the value of grid row start to two.

That's the line before the row you want the content in.

And, everything else is still stacked in row one, which you've not positioned yet.

I

could use the same method to position the title, the navigation, and the quote.

So, to place an item, what you doing is you're declaring grid lines around it.

And, I've added the actual grid lines to

this example to show how we position content.

So, the value there of grid columns start is three

because you want the content to start at line three.

The value of grid column n is four because you want the column to end at line four.

The grid row line before our content is two, so

we use two as the value for grid row start property.

And, grid row end is three.

So, we're basically kinda drawing a box around our content, which is inside.

And, we can span multiple rows or columns in the

grid by just specifying the end row or column line.

[BLANK_AUDIO]

The spec also includes a way to name the grid lines.

Again when doing this, you'd name the lines, not the actual area.

So, nav refers to the line before the navigation column.

And, doing this kind of solves the issue of

what happens if columns are added to the grid.

Using numbers works fine if the grid never changes.

But in, for instance, a responsive design, what you're probably gonna want to do is

have different grids for your different devices, you,

you know, you're different representations of that content.

If you use numbers, that's gonna get super confusing really fast.

Whereas if you name things, you can then, you

know, it's always, that's always navigation wherever it is.

There's another method as well, which I think will seem a lot simpler.

In that you can define areas of the grid using grid template areas.

So, you can then position things onto a named area and not worry about the

lines and of course you can then redefine

the template for different screen sizes and devices.

I think that this method will work very well for simple positioning of elements.

And, I think the line based method or naming

lines will work better for doing things like replicating

your, sort of, sixteen column grid system types that

you see you know, using floats and things currently.

I think that those will be, you know, easily

replicated by, you know, using the the, line based technology.

So, when I've presented on this subject in

the past, the feedback I've had from people,

seeing the last example is, you know, why

on earth are those gutters counted as a column?

That seems really confusing.

You know, other things like multi-col for instance,

we have gutters and we treat those as gutters.

We don't treat them as columns of content.

Lots of people have fed that back to

the Cirsis working group, and it's been discussed.

And, it looks like some sort of gutters will be included in the final spec.

And, I think that will be a lot

more logical because we can concentrate, then, on

actual columns of content rather than space between

them, which we currently have to worry about.

So, this is that discussion on the on the mailing list.

It is talking about using column gap and row gap.

And, these sort of discussions show how important it

is for developers to take an interest in emerging specs.

If we write about them, if we talk about them, if we try and figure

out how they work that gives feedback to the people who are actually writing spec.

And, also it show browser vendors that we care about this stuff.

And, that we want to in browsers if we are actually talking about it.

You know, it's to late.

When the thing, when a spec more or less

complete you know, when it's a candidate recommendation stage even.

It's to late then to start saying this doesn't work very well.

I don't like it.

Early on, is when you get chance to say, you know, I'd like this to be changed.

And, everyone can do that.

You know, even if you're confused about a spec.

I wrote up an article about grid initially and their were some thing I've got wrong.

And you know, when I, I, it was picked up by

the working group list, I said, oh, there's some confusion there.

They explained to me where I was confused,

but that actually informed the spec office that

their spec was a bit confusing because someone

who kind of knew about CSS was confused.

So actually, there's no problem you posting and saying, you

know, I'm not sure about this, or, how does this work?

[BLANK_AUDIO]

I'd like to show you a little bit about the iTen implementation, just because it's

out there and you can play with it and you can see how good works.

It is different, to, to the current one, but the actual general concepts.

Declaring a grid and placing items on it, is the same.

So, to define a grid in the

IE10 implementation, you are using, display MS Grid.

But you're with the MS, the, the MS prefix.

But also using grid rows and grid columns

rather than grid template rows and grid template columns.

But, they work pretty much the same as in the new draft.

Positioning items is even more different.

In fact, the syntax used is being reused with

a different name in the new grid placement properties.

So, this is how you place items on the grid for the Microsoft syntax.

So,

let's take our example of the main content that we used before.

Instead of declaring our four grid lines that go

around it, we're actually targeting the row and the column.

So, we're targeting the box instead of the lines around.

And, what this means is in the IE 10 implementation, you see

the column and row span properties that aren't needed in the new spec.

So, actually, the new spec is far more flexible, and you

know, sort of far more useful, I think, in the future.

Although it seems perhaps slightly more confusing than the initial implementation.

I've been writing quite a bit about grids.

And, I've got several examples that work in IE 10.

So, you can just, sort of, see, and play around with them.

See how they work.

And, I've also been detailing the differences

between the IE implementation and the new

working draft, which actually I need to

update because the, the draft has changed again.

So, the browser's report, there isn't really any.

And, a part from that is in I 10.

But I really think that grid is where we can see scope for solving some of

our biggest layout issues, and, really in terms

of our full page layout and application layout.

And the fact that we see a different implementation in IE10 to

the current spec is just the way of working with early stage implementations.

As we've seen with flexbox, you know,

things change as they go through the process.

And, I think it's been quite interesting tracking this spec because from what was

quite a difficult to use implementation, we're

starting to see things be renamed and changed.

They become more logical as we go through the process.

It's quite interesting.

I was just watching that on the working group.

The question I tend to get asked, when I talk

about both Flexbox and Grid is well, which would you use?

If both were implemented, which should you use?

And, I think ultimately, we'll use both.

Flex box is great for sort of, one dimensional

things that can linearized, and grid is good for things

where you want almost arbitrarily place things around, that

don't, that couldn't really be linearized as, as one thing.

That link there, is a very good explanation on the

Witman Group mailing list as the differences between the two.

I think, you know, ultimately when we've got support, we'll probably find

that we're using both of those in the, in the same layouts.

[BLANK_AUDIO].

It's a

bunch of grid resources.

There's some, there's not a huge amount

out there because there aren't any implementations,

so people tend not to want to

write about things that don't have browser implementations.

But, I've written a few things.

And, there are a few other things out there.

And, I think we'll probably see more of this coming up cuz I think

people will get quite excited by it when they start to see it implemented.

So, a few other things that are out there.

Less of the sort of, the big layout options.

And, the next mode that I'd like to look at is regions, CSS regions.

Now, this is come from Adobe in collaboration with Microsoft.

There's more information on the Adobe website and also some examples.

Now, Regions lets you flow content through

multiple containers independently of the source order.

Now, this sounds really strange in a web context.

However, this kind of layout is often used

in print design in particular in magazines and newspapers.

And, how regions works is easiest to see if you actually play around with it.

The last few things in this presentation are very, very new.

They do have some support out there, but normally you have to

do things like enable experimental features to, to have a look at them.

There's a useful page on the Adobe site

telling you how to do that in different browsers.

Regions is also being implemented in mobile Safari for iOS seven, so making

this stuff quite useful if you are doing things that's targeted for those devices.

So, here's some HTML.

I've got an article element that contains the entire content of an article.

And, I've then added a number of empty elements at the bottom of the document.

First, I use a new CSS property, flow-into using a webkit prefix.

If I, if I was doing that for, for a webkit browser which is the

ones you can really see it in now, and on the container for the content.

The value Article Thread is the name I've chosen

for this content, but that could be anything you want.

Once you do this, the content will actually

disappear because it's got nowhere to go yet.

So, each of my empty elements is a class of article regions.

So, I can now target that class as being the recipient of the content.

And this time, we're using the new flow-from property

with a value that's a name we used earlier.

And, if you refresh the page when doing this, you'd see

the content reappears because it's flowing into the first of our regions.

Now, once you've got content flowing, we can then lay it out.

So, we just style the layout of the regions.

I want the first few lines of my article to flow into region one.

So, I give it a height.

Once that height is reached, the content will

look for the next region to flow into.

So, I'm using FlexBox for the regions inside the region

wrapper, and you can create your layout anyway you want.

Regions isn't a layout tool, as such.

It just dictates where the content flows in a layout that you create.

So, here we got region one is first got to line at the top.

The three boxes are inside Region Wrapper that positioned using Flexbox.

Then, we got a final region, which is got a height set

to auto, and that's the recipient into the rest of the content.

so, you know, whatever content you got left, you've got somewhere for that to go.

Regions don't have to be adja, adjacent.

If my page like's cabbage drawings and I take

the class of the central region, I can stick an

image into there and the content will just skip

over and go into the next region at the end.

And, this basically means we can insert

elements without breaking up the content flow.

We can keep this chunk of content all together and we can

stick things into that, into that document without breaking up the content.

And again, as somebody that deals with content management,

this is great because it's always a problem, you know?

Where do you put those arbitrary images?

You just want to show to sort of, highlight the, you know, in your design.

Being able to have those out of the text is gonna be really useful.

Support is starting to come into browsers for regions.

however, with some differences.

There's a very interesting difference in IE

10, which again, early implementation of this.

But you won't be able to get the example I just

showed you to work in IE 10, because of a crucial difference.

With IE 10, you need to flow from content to stored in an iframe.

And I'll just show you that because it's slightly weird.

But I think it actually highlights one sort of, particular usage of this.

So, you have a document, which stores your article content.

And, it contains the article element text.

We use the HTML page we created as the source for an iframe.

So, with this in place, that's what we end up with.

I then use the Flow Into property on the iPhone.

I'm using the MS prefix, because this only ever

works in Internet Explorer, and again, the content disappears.

Our content now can flow into regions, just as before.

I'm using Flexbox again to I've used Flexbox in the last example.

I'm using Grid in its A10 incarnation here.

Again, you can use any layout message you want

that could be absolutely positioned, thet could be floated, whatever.

so, you know, Regions handles getting the content from a to b, and

you do your layout independently depending on what's best in, in your context.

In the Flexbooks example, I changed the height on the different boxes with grids.

I can obviously change the grid to adjust column widths or row heights.

So, I can change the second row's height, making

the set of three boxes shorter, containing less content.

I think great and regions will be useful for content, manage content because

you'll be able to create pretty

complex layouts without worrying about overflowing boxes.

And, I can kind of see what Microsoft

was thinking with that source from an iFrame thing.

Because, it makes a lot of sense if

you're only considering regions as official layout thing.

Perhaps, for using HTML before muscling for print.

Because this does kind of mirror those print layout tools, where

you can say, here's all my boxes for my magazine layout.

And then, you sort of lay, you, you put

the content in it flows itself into those boxes.

And, I think that's really where this is kind of coming from.

So, it's a different way of looking at web content.

In terms of web apps and tools, you can do stuff like, you

know, dime you creating new regions as content grows and flow content into them.

Or, allow people to customize the display effect content.

I really think Regions is, is quite interesting and,

and not really for so much additional web stuff.

There's a bunch of interesting information available

about regions including a lot of examples.

Adobe doing quite a good job of creating examples for us to have a look at.

[BLANK_AUDIO]

And now, I take a quick look at CSS Exclusions.

This module was originally linked to shapes, again, it came from Adobe.

And, these modules have been split

up recently into two different specifications.

We used to see things referring to exclusion and shapes and

an awful lot of the resources out there kinda bundle these together.

So, we are all familiar with floats in CSS.

However, floats are pretty limited when used

in to sort of float images because images.

If you float an image, you always float to the top.

So, you can float an item left, and wrap the text around it.

You can float an item right, and wrap the text around it.

But, you can't put an image right in the

middle of your document and wrap text around both sides.

You can't put one on the bottom and float the text around it.

Floats are fairly limited in what they can do.

So, CSS exclusions kind of you know seeks to solve that.

It allows you to wrap text on data elements that aren't floated.

And, it finds the wrap flow and wrap through properties.

So, with a quick example, we can see how this one works.

So, I've got a simple block of text, marked

up as an article with a class of main.

Below this, I've got a div containing an image, and I'd like

the image to appear floated inside the copy with the text wrapping around.

As with Regions, exclusions isn't a new positioning method.

So, to keep things simple, I'll just use absolute positioning, and place the image.

Because it was last in the document, it naturally displays sat on top of the text.

So, this is as we'd expect.

So, to make the text flow around, I use the Wrap Flow property set to both.

The content now honors the position of the element, and flows around it.

It knows it's there.

It goes round the outside.

I think that's going to be very, very useful and a

lot of people are like, well why didn't we have that already?

You can do, you can see here where we are with browser support.

You can do a lot of exclusion stuff in IE 10, and so that's, you know, get if

you haven't found themon my web site, if you

normally use a Mac and have a look at that.

And so, you can start to play with that.

And, though kind of few resources for this is

pretty new, but there's some nice examples out there.

Again, Adobe have been doing examples of this.

So finally, I'd like to take a quick look at CSS shapes.

As I mentioned, I was talking about

the exclusions module, exclusions was linked to shapes.

Earlier this year they were separated and the

first public working draft was published for Shapes.

So, when you looking for material out

there, you may well find stuff bundled together.

And, a lot of browsers supply information conflicts the two things.

This has made it quite difficult talk about Shapes at

the current time because of where these drafts currently are.

So, I've, I've just got a few example and a

point [UNKNOWN], so you can see how that's that's going on.

The actual working draft is the, the main link there.

There's also two editor's drafts that are out there, which bring back

some of the functionality that was removed from the first draft of this.

The earlier version of the combined exclusions and

shapes had shape inside as well as shape outside.

They shape inside properties missing from the current

level one draft and comes back in level two.

So, I've kind of broken my conventionist

presentation of only showing the latest working draft,

and included things that are only in an

editor's draft cuz this is really new stuff.

So, exclusion lets us flow text around square things.

Shapes lets us shape text around the edge of an image, or along a curve.

Which, is something we see a lot in print.

It's quite a common thing in a magazine.

But very hard to achieve on the web.

This is an example from the Adobe website.

The text of the poem is forming the shape of the

Raven and can be scaled in the browser, maintaining the shape.

So, the seven examples on Code pen, contributed by the Adobe team.

This example shows text flowing along the edge of a circle,

using the shape outside property, which exist in the new draft.

The Code pen examples are great if you have,

say Chrome Canary and you've enabled the experimental web features.

You can go to Code pen, you can play around with

the examples and you can start to see how they work.

That's kind of the best way to see how this is, this is playing out.

This

is a great example.

It lets you create polygon shapes to flow text inside.

And, you can sort of then see the values below.

You just play around with the, with the polygon.

And then, if you inspect the element, you can see the shape inside property.

And, this is the one that was removed from the

new draft, but it's come back into the level two draft.

Just as I was preparing this presentation, Adobe

published a new example of shapes for visual storytelling.

I think this blog post went up yesterday.

And now, when I show people this stuff,

I hear grumbling that it isn't very web-like.

That, you know, this is, this is all

about print design and it's not really web stuff.

But, I think there's gonna be interesting and

creative ways that we can be using this.

If we get away from thinking just about normal informational kind of pages.

You know, there is a call for that kind of, sort of

more visual, rich visual layouts that you could be doing with this stuff.

And, I think it's going to be really interesting to see what people do

once they've got implementations of this and we see them out in the world.

The, this example, the Alice in Wonderland example, is,

also available on, on GitHub so you can download the

code and have a play around with it and

see how it works if you've got a supporting browser.

And, there's, a bunch of, resources for shapes, again, some of them are

kind of bundled up with exclusion stuff,

because of what's happened with those specs.

But, there's a few of them out there.

And, I really would suggest that you just, you

know, get a browser that supports it and have

a little play around, because it's really interesting to

have a look at where these things are going.

As developers and not academics and things, it can seem that we've kind of got

no time to be looking at these new things that aren't, like, useful right now.

It's really easy to write all this stuff off and say, well,

I can't use it today, so I'm not gonna bother using it.

I'm not gonna bother looking at it.

I'm not gonna bother, you know, deciding, you know, how

it could be used or looking for problems in it.

But if we don't do that, we really kind of lose our

say with how these things progress and, you know, have a look at

the working group, see the discussions that are happening, and see the

fact that actually feedback from the

community shaping the way these specs develop.

You know, I'd really advice that people go and talk and particularly, if you're more

from the design background, you can see problems

for things grid, say, well, that's named strangely.

You know, let them know because once the specs get

to the material stage, you don't really have that chance.

And, that is all I have.

I don't, I've got time for questions.

I think I've just hit my time.

I've got a bunch of information about that, that URL.

I'm always very interested to talk about it and to see

examples, so do let me know if you've got any questions.

Thank you.

[SOUND]