[MUSIC PLAYING]
Hey, everyone.
What's up?
It's Rob Dodson.
Palmer 1.0 is in the house and today, I'm
going to introduce you to the brand new Polymer Starter Kit.
So come on down and let's get hacking.
So Polymer Starter Kit is brand new opinionated scaffold
for building Polymer apps, and it
is jam packed full of awesome.
Out of the box, it provides a really nice layout
that leverages the latest 1.0 material design elements.
It also has support for theming using custom properties,
and we showed these off in the last episode.
Now you're seeing it kind of at a bigger
scale, which is really cool.
The other really awesome thing about the Starter Kit
is that it comes with optional support
for offline first development, which
means in your application, you can go.
You could set it into Airplane mode, refresh the browser,
and everything would still load.
You could even navigate to different pages
within your application.
Things would still work.
What's doing this magic behind the scenes
is a new technology called Service Worker,
and I'm going to talk more about that in a future episode
because it's just so cool.
So how do you get started?
Well, there's two approaches.
You could head over to the Polymer Starter Kit home page
and download the zip bundle.
That is one way to do it.
Or, if you want to be a hotshot like me,
you can install the Polymer Yeoman Generator.
The generator pulls down the latest version of the Starter
Kit so anytime you want to just spin up a new project,
you just go to your command line,
you type "yo polymer," and boom, you're ready to rock.
Now, once you're set up, bust open your editor
and this is what you should see.
The files in the root of the project
are dedicated to things like package management--
I've got a package JSON here-- linters with JSNRC and JSCSRC.
So all this is build type stuff.
Up here in the App Directory, this
is actually where all of the UI for my application
is going to live.
And because I downloaded the version that
has support for the Gulp build process,
I've also got a Gulp file here.
But if you went with the light version which doesn't include
Gulp, that's totally fine.
You don't necessarily need this for this tutorial,
but I just want you to know that that's there.
So all of these files might seem really overwhelming,
but don't panic.
There's tons of great stuff in here
and I'm going to help walk you through all of it
over the next few episodes of Polycast.
For today, let's just start really small.
We're going to preview the app and then
we're going to update some of the theme colors.
Now, because the Starter Kit uses Gulp for its
build process, I'm going to hop onto my terminal and type
out "gulp serve," which will put boot a local server,
and it's even going to open my browser for me,
which is pretty awesome.
Nice.
Now, if you're using the light version
of the site which doesn't include Gulp,
you can use your own server.
So here, I'm just booting up Python simple HTTP server
on port 3,000.
And then I would need to go and open my browser myself,
but this is an option for the folks who
downloaded that version.
Next, I'm going to open up my elements.html file
and I'm going to drop in a paper FAB, which
is short for Floating Action Button.
So I scroll down.
There's a lot of elements that are imported already,
but just right underneath the Paper toolbar here,
I'll drop in my own import for Paper FAB.
So I can have a little bit of UI showing up on the screen.
Next, I'm going to hop over to my index.html file.
And in the section that says "data route home,"
I'm going to take this paragraph here and just delete
it and replace it with my floating action button.
So get rid of this p-tag and drop in that paper FAB
and give it an icon of Add.
Now when I save this and go back to my browser,
that floating action button is just
going to be there on screen even though I haven't hit
Refresh or anything like that.
Now, the way that this is working
is the Gulp version of the Starter Kit
comes with a tool called Browser Sync,
and Browser Sync synchronizes updates to all of your devices
whenever you save files in your editor.
So if I had a phone or a tablet plugged into my laptop right
now, I was trying to debug on all of them once,
they would all refresh all at the same instant,
which is really cool.
Next, I'm going to open up the apptheme.html file.
And if you watched the previous episode,
this should look kind of familiar to you.
Inside of this file, we've got custom properties
for theming our entire application.
So you see, I've got this root pseudo class up here,
and then a few different custom properties over there
on the right.
Now, I can use these.
These are basically the hooks that all of the material design
elements in the application have exposed to me
so that I can style and theme them.
This root pseudo class right here,
if you've never seen one of those
before, that just targets the highest parent in the page,
and it's a good place to provide some values for our custom
properties.
Now, a way to do that is to go over to a site
called Material Palette, and you can actually just select colors
that you want to use.
These are all coming from the material design color palette.
You can just click on a few swatches.
So I'm going to pick pink and light blue.
This is going to build a palette for me.
And you can actually see a preview up there
in the top right, and then down below it,
there are some hex values.
So I can copy and paste those hex values into my theme file.
And once I save this, I switch back over to my browser.
And you can see that now my header is updated,
the floating action button is updated,
and even these little lighter colors over here in my icons
have been updated.
So really cool.
Just with a tiny bit of work, we've
already started theming this application
and dropping new elements into it.
So you've taken your first step into the world of Polymer 1.0
and I hope you're all really excited.
I'm going to keep digging into the Starter Kit,
showing off some of the cool features here on Polycast.
So be sure to click that little Subscribe button.
Ask questions down in the comments if you have them.
AS always, thanks for watching and I'll see you next time.
[MUSIC PLAYING]
Hey, guys.
What's up?
Rob.
The Q&A time.
Todd Judd writes in and says, "In Polymer 0.5,
you had layout attributes that came bundled with Polymer.
Those don't seem to be around in Polymer 1.0,
so what happened to those?
Good question, Todd.
Around version Polymer 0.8, 0.9, we
switched from using attributes to classes.
And then in 1.0, we actually took all of those classes
and we bundled them up into their own element set
called Iron Flex Layout.
So you can actually follow this link right here
and go to the repo for Iron Flex Layout.
And inside that repo, we have custom properties
that you can apply to your own elements.
We also have CSS files in there that you can just
import into your elements and use those to get your Flexbox
layout attributes back, or layout classes, I should say.
So again, Todd, great question.
Thanks for writing in.
We will send you some swag.
If you have questions about Polymer,
leave them down in the comments.
If it's a juicy question, we will try and feature you.
As always, thank you so much for watching
and I'll see you next time.