Sass Tutorials #24 - Creating and Using a Symmetrical Grid Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey whats up this is scott with level of
tugs and today we're going to be
creating our first grid using
singularity and this is going to be
awesome it's going to be a just a real
basic 960 non-responsive grit but it's
going to do all sorts of cool stuff for
us so what I want to do first is create
a partial file if you didn't see our
video on globbing check it out i'm going
to be using globbing for this so i have
a partial in here that's just going to
be grid scss that's inside of my
variables folder and I'm going to send a
couple of variables so our grid system
needs some stuff to be set up right
basically we need a couple of variables
and those are grids and gutters so just
like any grid that you've ever used
before there's grids and gutters so for
grids you're going to tell it how many
columns it's going to have so I need to
say dollar sign grids just like that and
for this I'm going to give it a value
since uh we only have I don't know this
is going to be huge grid let's just do a
12 column grid that's pretty standard
and now let's have another variable
which we're going to have the dollar
sign and this is going to be gutters
okay so just like that and this is where
you tell it how big you want your
gathers to be now what's nice is that
you can give it a value like 1/3 so
going to be a third of the size of the
column so let's say if we had a 960 grid
12 columns each grid with 60 pixels wide
then the gutters would be 20 pixels or
one-third of 60 pixels so with
singularity it's important to know that
took grid frameworks you have gutters on
the far left and far-right singularity
does not assume you'll have gutters on
the far left or far right so it only has
gutters in between your columns the grid
goes to the edge of your container so
now let's go ahead and specify
we can specify the width of our
container and we need to actually make
some columns so our grid is set up right
here's our grid it works but now we need
to actually use it so we have this main
section and we want main to be actually
not this site with variable that left
over from the gloving we can say the
site is going to be nine 960 pixels wide
it's going to have a margin of zero and
auto so that it's nice and centered and
then we're going to have two columns
inside of here so let's actually make
this in our HTML so scroll down and this
is just Twitter or I mean that Twitter
this is just html5 boilerplate and I'm
just going to make a couple of divs here
we're going to have one named main and
this is going to just be the wrapper of
everything and now inside of Maine we're
going to have an aside that is going to
have a class of left our and then we're
going to have another div that's just
going to be class content area now um
I'm not worrying too much about
semantics or anything like that here
this is really just to get this grid
framework working i'm just going to
throw this up real quick now I've gone
and grab some hipster up so I'm just
going to throw a couple of paragraphs of
it just a little bit less in the sidebar
sidebar and here we go and now i'm
actually going to throw this page on to
the browser so we can see it here in
action
okay so we have our our page here it's
you know absolutely none awesome and
it's actually not even getting our
Styles at all that's because we have a
style dot CSS file here but by default
html5 boilerplate uses main dot CSS
someone changes real quick just to style
that CSS now if we refresh we see our
green background and our our two
paragraphs here that are center 960 cool
so actually let's make this font text
this color let's just say color white
just so it's not as terrible as this
black on green now that this is that
much better okay cool so we have a
container we have a site so now we need
to actually assign this content to the
grid and if you've used other grid
systems in the past you've known that in
your HTML you're putting things like all
hyphen one call hyphen 334 or just
something like that to put these divs or
whatever onto the grid well the best
part about singularity is you don't have
to add any mark up to your HTML and in
fact actually using after using
something like this on a few projects I
almost I can't imagine adding classes to
HTML just to get something to align to a
grid this new system is just so much
more easy to work with I cannot express
that anymore and so what we're going to
do is add a new mixin to each of these
columns and we're going to tell it what
the columns are right so we have a total
of twelve columns now we have our two
divs we have left bar and we have
content area now i'm going to go ahead
and say left bar here and i'm going to
use the mix in a grid span so i'm going
to say include grid hyphen span and now
i'm actually going to be giving it how
many columns i want this to span in what
position I want this to start in so this
is the left bar I want to
to take up three out of the 12 columns
and I wanted to start at the first
column because this is going to be on
the left so just like that the left bar
is now being placed three columns in the
first column we come to our page will
immediately see that the left bar is now
doing what it's supposed to be doing the
main content is overlapping it so what
we can do now is come to here and let's
add in our main content and always
content areas what we named this copy
this and now in here i'm going to say
include grid span and then for this one
we want this to take up the rest of the
space so obviously 12 minus 3 is 9 and
we have it starting at the fourth column
if we were to say this third column it
would still be overlapping because this
is taking up one two three columns and
this will start at number four and take
up 4 5 6 7 8 and 9 10 11 and 12 so let's
say this let's refresh we now have our
two columns fitting perfectly into this
container now what's totally awesome
about this is the container we can
literally say we want this to be 1200 we
can refresh and our columns are not
affected at all so we can take this and
really do anything we want with it and
these grid are just going to adjust to
it okay well this is just the bare bones
of singularity right this is the basic
as it gets a really basic 960 grid
what's cool about singularity is we can
do asymmetric grids where we have
columns that are different sizes and
stuff like that and we have tons of
access to build really great responsive
grids there's also a lot of other neat
little things we're going to get into
such as like an overlay where you can
actually
see the grid overlaid onto your content
do you can change how the gutters are so
this is singularity at its most basic we
have a 960 grid we have a sidebar in a
main column we could change these as
much as we wanted to and it's still
going to work in our container so that's
that's it for this lesson we're going to
get into the cooler stuff in the next
few so as always if you have any
questions leave a comment hits up on the
forums Facebook anything like that we're
level of Tut's everywhere so as always
this is scott to Lansky and thanks for
watching