Tip:
Highlight text to annotate it
X
So you just got yourself a copy of the startup framework
or you just interested in seeing what all the stuff is about.
Hello I'm David East in today I'm gonna be helping you get started
with the startup framework. To access your copy the startup framework
you need to be logged in to Designmodo and then if you go to your account
you then go do you download section we can click right here to download Startup Framework.
you know is that startup is pretty big don't worry you're not gonna be hosting
all this
a lot of this is image assets as well as PSD's
and once it's downloaded you can open up the folder and you'll see two folders
within Startup Framework
one for designer and one for developer will be going over the contents within
the developer folder
within the developer folder you'll see a folder for common files
in common files is what it sounds like it's all the common assets that you're
going to be using
while using the startup framework and as
icon fonts and icon images
and common JavaScript library such as jQuery and modernizr
below count files is Flat UI and this is the same
free Flat UI that we all know and love and below Flat UI is the
manual
within the read full there this is where you can check out all the how to use
within the startup framework. So if we go and click on
index
we now within the user guide the startup framework. You get a little blurb
thinking you know about purchasing this
and then you have a button here help you get started
you'll see a blurb about using the html5 doctype
and will focus on getting started
now the following version is not getting set up with CSS rather than less
in the next video will be going over getting started with LESS.
So you can see down here we have a snippet of code
and this is all the assets that you're going to need
do get started, you'll see that Twitter Bootstrap
is used as well as bootstrap responsive and yet the reference Flat UI
we use some icon fonts as well as animations
and blow is jQuery bootstrap and other jQuery plugins
now we're going to need for our effects and functionality.
In the second step is the pic the styles that you want to use
so in this snippet you'll see that they're referencing styles for a header,
a content, blog, contacts and other
pieces at the start framework as well and the reason why we pick and choose
the styles
is because we can pick and choose different code blocks
and if you're wondering when a code block is will go back to the folder structure
to find that out so backing out to you the UI kit folder
you'll see all these folders for blog, contacts, content, crew, footer, header, price
and projects and these are all different types
have each HTML blocks we can use
so let's first check out the header. Within header you'll see a CSS folder
a less folder index HTML document.
Open up the index HTML to check out some of these header blocks
so these are all the haters that you can use within the startup framework
and as you know this isn't growing through these are all in a block format
this right here is a block in the one above
is also another block, so opened up the HTML page we could take the code
from this block in peace into a file of our own
and you would have our header already taken care for us
your pages in just going to be comprised of a header you're also going to want to
have other sections
such as content and perhaps even a footer and if you look at that top bar
up there
you'll see links for content, footer, project,
price table, blog, crew, contact,
all these things are common components use in applications
and you might notice that those top links nap exactly to the folder
structure we're looking through
we're now in UI Kit folder and you can see this within our
local URL
right here we have you like a content slash index 2.html
and within here are all the content blocks a you can
combine with the previous header that you may have chosen
in the same goes for the footer page these are all the flavors that weekend
and
a pen to the bottom of our page there's more things that you probably want to
use than just a header
any content into footer there's also more interactive things such as the
project page
a lot of times you might be selling an app or some type of product
and there's a lot of creative showcases within this project page
when my favorite is right here below but this
image hover over a fact you can imagine how easy is take your own images
and your own ideas and place them in this year an awesome feature of all this
is that it's all responsive
as you scroll down we can see that the same image effect
looks great on a phone
if you're selling something you're probably going to want to use a pricing
table
in all these are easily customized as well
and figure out more information about customizing these components
will go back to the startup user manual and will click on this
Overview tab and you'll see below it
and we have all over components within the start a framework so if we click on
header
you notice that is similar to the UI kit pages that we were looking at
but there's a big difference we have this question mark
to the right and you notice it's on every single block
so if we come however one question mark
you can see that we get a little overlay in a little box pops up saying how to
use this block
if you cook again we get a little push out
and this push out gives you steps and how you can set up
this component within the startup framework you get a little
overview about this block in how it's designed to be used
guide to the installation page if you haven't set up start up already
and then the next two steps depend on the version
that you're going to be using if you just gonna be using the CSS version
you take this mark up right here and you're just going to use that with the
CSS file
if using LESS and we're going to have to import
that specific less document all get into that later
so about here at this is the actual mark-up
that makes this header to block so we could simply just copy this
all the way to the bottom
and we keep pace that into our application
and as long as we've already gone through that setup process this'll work
perfectly
but we're interested and how we're going to customize this sows continue to
scroll down
and we can see that the fifth step its component modification
so the component modification step shows us how we can change the background
love this header block in this header block as a blue background
and odds are that you prolly gonna want to change that
and really do this step we can see that we just need to change the background
style
to the image that we want the background to be and we also can apply some a
passage that background if we wish
and he keeps growing down we can see there's more information
if you using the last version if you're familiar with LESS
you know that there's an a pacifier action that provides cross-browser
compatibility
for the opacity function and also if you want to replace the content within this
header block
we can redo this little step right here and I'll explain to us how to do so
so the meat scaffolding behind this header block is a hero units
so all we have to do is look inside the tax for the here yet
and then we can change anything how we wish in the next step
is the samples and the shows with samples this header block is used and
and this case you can see that is used in sample to so if I right click and
open this in a new tab
we can see this header used in a sample
and startup framework comes at several samples that I hope you understand how these
blocks are used together
and give you any inspiration for your ideas so we'll go back to our folder
structure
and take a look at the samples so back in the folder structure
we're going to want to take a look at the samples folder and as you can see
there are 25 samples
for us to look at so let's grow back up and start with the first one
and we'll just click on the index HTML document open it up
in here for sample we can see that we have a header block right here
and that allows the toggle through in see different headlines in images
and as you scroll down we get some fade effects
and the header actually shrinks and docs to the top of our page
so we have a content page
some animation sure the second part of our content
and then we also have a footer and there are 24
other sample pages and help inspire you and also help quickly build out your
idea.
So, seeing all this code is great but if you're a designer
you probably want to see the mockups that created this page
so if we go back to our folder structure,
we can scroll all the way back to the designer folder
and within here you'll see assets, images,
samples and you like it if we go to samples
go to the first sample we can open up the same sample
that we went through as HTML and you can see we have this load it up
resume and a little bit
we can see that it looks like the same piece of HTML now that we went through
and down here we have all our folders for all over layers
one thing to take no doubt if the numbers
within the folders its header number one,
content number four, content 25, and footer number six
in the significance of these numbers is that is the number
a block that is being used from the startup framework
so going to these folders we can see which blocks were used to create the
styles
so said I'm actually looking at samples we can go and look at the UI kits
themselves
so if we go back to her father and yes samples and we're going to UI Kit
it will go into header and will open up the PSD for header
will keep the layers
and we will update and I zoom in a bit
we see that these are all the haters into the right in the Layers we see
header number one, 2, 3 and all the way down to header number 23.
So, you have 23 headers the pic from
into customized, because within each header
we can change out the logo, we can mess around with a the text
we can even change out the Aero's that you click on to see the difference lives
one of the great things about this is you can actually drag this folder
into a blank PSD and you can use that as a header
and then we can go into the content folder,
and we can open up content one PSD
in within content want one PSD we can see all the content blocks within their
folders
so we could drag one of this content blocks and we could put that below a header
block
see can see it's very easy to stack these blocks in order to make a design
and then from there it's very easy to customize that design as well
so on the next tutorial will create a design by stacking multiple blocks in
Startup Framework
will do some customization as well and then you'll see just how powerful
the Startup Framework really is.