Sass Tutorials #25 - Asymmetric Grids Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey what this is Scott with level up
tuts and today we're going to talk about
asymmetrical grids within SAS and
singularity so in the last video we
created this symmetrical grid it was a
12 column grid and then we assigned this
paragraph to be three columns of the 12
and then this paragraph to be 9 columns
of the 12 so that's really great right I
mean that that's how you're used to
using grids that's that's how we've been
doing it for a long time but if we're
only using for this example if we're
only using content in this grid or this
column and this column then why are we
defining 12 columns and then saying 3
and then 8 or 3 and then 9 right so
that's where asymmetrical grids come in
basically you're building a grid using
only the things that you need and you do
it proportionally so you would say that
this grid column takes up you know 30%
well not 30% it takes up 3 of the 12
total and this takes up nine of the 12
total similar to how we're doing it
right now but just a little bit
different so let's go back to our our
code here and we're going to go in to
our grid so when we defined our grid
originally we said it was going to be 12
columns now we want to have two columns
but we want them we want there to be a
certain proportionally sized so we want
to say we want one that's three and one
that's sorry not eight one that's nine
and this is because if you remember we
already know that proportion that we
like where there was three and then nine
of course you can play around with these
numbers so this is going back to the
whole twelfth thing it doesn't have to
equal 12 it can equal whatever you'd
like it's still just going to do the
math to figure out you know what it
needs to be now if we save this let's
come into our styles and then if we come
out here we have a left bar
that we said was going to be three and
started the first position we're now
going to say it's going to be one column
starting up the first position and our
content area is also going to be one
column but starting at the second
position now if we come back to our page
and refresh not much has changed right
we still have this equal division well
we have this same division here that we
liked the three and eight called are
three and nine column I don't know I
keep saying eight three and nine columns
that we had here but now we only have to
define two columns and we're they're
throwing everything in the first column
or everything in the second column now
what's a little bit crazier of an
example that we could show you to just
show you exactly how insanely flexible
these asymmetrical grids are well I
noticed a really interesting example on
the the singularity documentation so I
figure I'll show you that one and what
I'm going to do first is I'm actually
going to increase this main width 2/4
1440 to make this a bit wider so we have
some more room to work with because on
that I'm not to run a lot of grits here
or a lot of columns in our grid so here
when we define our grid I'm going to say
we have one column that's 1 1 that's 2 1
that's 3 1 that's 4 and 1 that's 5 these
are all going to be you know this is
going to be double the size of this one
this is going to be 4 times the size of
this one and they're going to fill up
the entire container ok now I just need
to let's copy this paragraph here and
paste it a couple times and I'm going to
give these some classes and left bar
will now be no longer left bar but one
this is going to be two this is going to
be three and so on
so that this is four and the other one
is five and we'll have five columns here
head five there we go now I already
wrote some of the CSS just because I
don't want to have to have you watch me
type it all but what I've done here is I
have our five classes one two three four
and five and I said one starts in the
first position well starts in the first
position in spans one column two spans
one column starts in the second position
three is one and three one okay and so
on and so forth you get it right so if
we save this now come back to our page
and we refresh you'll now see we have
this really interesting grid right like
how cool is this that it took us no time
to set this grid up right for one it's
like a completely sort of different grid
than you've ever ever probably worked
with before but it allows for some
really interesting patterns and you can
do some really great stuff now it's not
like we couldn't replicate this grid
with a you know a grid with as many
columns I think I don't even know what
the total amount of columns there would
be in this one but it's not like we
couldn't really make this grid but the
point is is that with the asymmetric
grids you're using you're only making
the columns that you need and nothing
else because why else would you need
them so this is how you build an
asymmetrical grid using singularity so
go nuts or don't go nuts and just build
whatever design you had Specht out or
just experiment with it right try some
cool stuff and make some interesting
grids so as always this is Scott with
LevelUp Tut's if you have any questions
or comments leave a comment the video
there's a Pat Witter Facebook post on
the level of form there's lots of ways
you can reach out to us and be involved
in the level up community so thanks a
lot for watching and I'll see you in the
next one bye