I'm Nick Pettit.

>> I'm Jason Seifer.

>> And you're watching the Treehouse Show.

Your weekly dose of internets where talk about all things web design,

web development and more.

>> In this episode we'll be talking about CSS frameworks, polyfills,

html five patterns and more.

>> Let's check it out.

[MUSIC]

First up is Semantic UI this is user interface is the language of the web.

That's not really a complete sentence, at least what I said that is.

But no this is a CSS framework so let's take

a look here and, I could just click on each one of these individually, but let's

just click on All UI, that's way more >> We should make a CSS, Nick, and

then we could finally put U and I together.

>> [BLANK_AUDIO]

That was actually very nice, Jason, heh, I'm proud of you.

>> I know it would be nice to get some reciprocation once in a while.

>> So here is All UI, examples of all user-face interface elements.

And here we have some buttons.

So, these are pretty nice looking.

Looks fairly similar to something like Bootstrap, for example.

I do like the this cancel or save button, that's pretty neat.

>> What happens when you hit the or?

Nothing. >> Nothing.

>> Now that's good UI.

>> Wow. >> Or UX.

Is that UI or UX?

>> Actually have, I think, I think they have this element right over top of it.

The, the hover stay is actually pretty impressive here.

Anyway, moving on, they have these nice dividers here.

So that's pretty cool, if you need to split up some sections or

some buttons on website.

All sorts of little flag icons, that's nice.

Here's their different headers styles and their difference sub-headers.

They also have tons of other icons besides the country flags,

so that is always useful.

And then they have a couple of more things like input, really nice labels.

Anyway, you get the idea.

This is a pretty robust CSS framework.

They have lots of different components in here.

So definitely be sure to check this one out, I think it's pretty nice looking.

>> Yeah that's very cool.

Next up we have something called Fetch, which is a polyfill for window.fetch.

Now window.fetch is an ECMAScript six specification and

it also supports Promises.

Now what this is going to do is replace the XML http request functionality and

replace it with one function called Fetch.

>> It'd be nice if you would support some promises every now and then.

>> 'Kay.

I try.

It's just, you know, really hard to get a hold of you sometimes.

So, this is easily installed with Bower, just do Bower install fetch.

Now if you are using an older browther, browser

you need to install the ES6 Promise Library and then you are good to go.

So how do you use this.

It's very easy, you just call the fetch function, then give it a URL or path.

Then, using a Promise, call .then.

And then you get a response object.

You can just return the text of that, pass it to another Promise and

then do anything inside of that function.

Now this works with HTML as well as JSON and

you'll notice that they are chaining promises here.

Also you can check out response meta-data from headers or the status or

the status text.

You can do post with html or JSON and even upload files.

Now you can also do a little bit more, they have some more error handlers and

success handlers if you wanna get into that.

Check out a link in the show notes,

you can find a link to this project right below this video.

>> All right nice, well next up is a really cool post over on the Codrops

blog about how to create animated text fills.

Now this is really cool.

Let's look at this demo here.

Whoa! >> Whoa!

>> What is happening?

>> What? I know are we in a code machine?

>> Is this, is this animated border something or

is this like >> Wow.

>> This is, this is amazing.

>> What? >> Look at that.

You can fill in.

>> Is the Treehouse show or a a big budget Hollywood movie?

>> So you could fill in the text with whatever you want and

this is actually real text on this page.

I can actually highlight this.

>> Real text?

>> So that's pretty amazing.

Yea this isn't like a a svg or something like that or an image.

>> So there's a bunch of other examples here.

You can create some pretty different looking types of effects with.

>> Oh it's our time to shine.

>> Oh yeah, yeah look at that.

>> Oh sick burn.

>> Burn wow.

Man it is like.

It is like.

>> No we are on fire today.

>> It is like the 1995 internet all over again here.

So let's, let's go back to the, to the article here.

Back, back, back, back, back, and let's figure out how this was done.

So, there's actually a number of different techniques that you can use

to make this happen.

And they provide browser support for each one.

So that's pretty handy.

So the first method, and

the method I showed where you can actually highlight the text,

at least I'm assuming that's how they did this, is to use background-clip, text.

Now this is only supported in webkit based browsers so you have to use the webkit

prefix and of course it's not going to work in Firefox or Internet Explorer so

this is probably not something that you could use in production, but.

It is very cool to see what's possible.

So, you would use the background clip text property and

then you could set it to text here and then you set the text fill.

Then you get something that looks like this that's pretty cool.

So, there's more explanation of that method.

There's also SVG text.

Now, this will work in any browser, so that's nice, but it is not normal text

like you would expect, so this is a little >> Or you would text spec.

>> Text spec, that, that's pretty good, that's pretty good.

[LAUGH] so, you can't actually highlight this of course.

But it's still a way to get the same visual effect, at least.

There's a couple more techniques here >> Or text-niques.

>> Text-niques, wow, you're really sneaking them in there today.

>> Ooh. Wow.

There's one more technique here I wanted to mention here.

>> Text-nique.

Method number three.

SVG mask and SVG clippath.

So that is also supported in pretty much every modern browser.

So, anyway there's actually more methods there than the ones that I mentioned,

but definitely be sure to check out this post.

It's, it's pretty amazing, some of the effects that you can get.

Definitely would like nice for like, I don't know, the title of a webpage or

a big header or something like that.

>> Yeah, definitely.

Next up, we have something called HTML5 Pattern.

Now, this lets you, this is a bunch of example patterns for

the Input element, which is supported in HTML5.

So here is an example right here,

if we want to just support alpha numeric values inside of a text field,

and I'm just putting one two three four and then an at symbol.

I press Enter it says please match the required format.

Oh, okay, sorry about that, webpage.

Press enter, alright, cool, it works.

Submitted.

Now, if we look here, and do inspect element.

Check it out down here, it says input, required pattern.

And here is the pattern,

which is a regular expression and >> It doesn't look too regular to me.

>> No it is, that is something called a regular expression.

>> Oh, okay. >> And that is the normal form of it,

therefore, it is a regular, regular expression.

>> Hm >> So lets say we wanna have

a username that supports between two and 20 characters, okay, you want that?

Cool, how about a Twitter username, alright great.

Between one and 15 characters, maybe they should make the at symbol

voluntary at jseifer, nope, sorry, just put my actual twitter name in there.

Go ahead and follow me if you wanna.

It supports dates [LAUGH] a basic date,

full date valificat, validation, leap year checks.

There are some really compular, I'm sorry, complicated regular expressions, I don't.

>> Valification and compular.

>> [LAUGH] I'm just combining words today.

>> All right. >> Trying to save some time.

And here is a time validation.

Anyway, if you need to support some

regular expression patterns in your inputs, go ahead and check this out.

>> Very nice stuff, well next up is bass, base CSS.

>> Now Nick was, is a talking to me about this before.

He said he was all about it.

>> All about that base CSS.

>> Yep.

So this is low level CSS.

Oh, okay so I I get it.

Low-level Bass.

Yeah. >> Yeah.

>> So this is a, this is a low level >> Wait, maybe this is bass.

Eh, for being at like the low level of the water.

>> Oh below sea-level?

>> Yeah. >> Yeah, yeah, yeah.

Okay.

Both makes sense.

So, use your imagination, whatever you want.

It's low level CSS, and it's basically a CSS framework,

so not to dissimilar from Semantic UI, like where we were looking at previously.

Or something like foundation or Boot Strap, the difference here with this one,

is that it's very lightweight.

So, it's only 4.27 kilobytes, and

they show how many modules rules, and CSS declarations are actually in there.

So you can click through here and look at the buttons.

So there's some pretty normal plain looking buttons and

tables that are just basically nicer than the default styling that

the browser typically provides, so let's see if we can look at a few others here.

There is a grid system, so just like you would expect in

any modern CSS framework you have, columns and of course it is all responsive.

Let's look at like borders here.

There's colors, all sorts of nice stuff.

Anyway, you get the idea.

So this is, this is a very light weight CSS framework and

I like this because this can be good for something like prototyping.

So if you're just putting together some HTML content really quickly and you don't

necessarily want to worry too much about the specific styling things just yet.

This is good to just include and kind of make it look

nicer than the default styles, just so you can get an idea of where you're going.

Any way, really cool stuff.

Definitely be sure to check this one out.

>> Yeah, it's like a, it's a nice, like a nice base coat for your website.

>> Yeah. So

that's about all we have time for today.

Nick, who are you on Twitter?

>> I am @nickrp.

>> And I am @jseifer.

For information on anything we talked about check out the show notes right

below this video.

Thank you everybody for watching and we'll see you next week.

[MUSIC]

[BLANK_AUDIO]