Sass Tutorials #27 - Adding Columns at Breakpoints Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey what's up this is Scott with level
up Hut's and today I'm gonna be taking
our singularity just a little bit
further and we're gonna be talking about
some cool stuff you can do with
responsive grids now in the last video
we made a a symmetrical grid you saw we
defined it by saying we have three
columns well one one column that's the
size of three columns of one column
that's the size of eight columns equally
and then we assigned our left bar to the
small column and then our main content
to the the main wide area so this is
great but what happens if you want to
make this grid a little bit more
flexible because right now if you come
to our our page here this is what our
grid looks like and in fact if we just
we make it you know smaller okay it goes
to one column cool and sure enough we
could say at other breakpoints you know
maybe move these around or something but
we we have this asymmetrical grid and
even though it does everything we needed
to do it's pretty inflexible right now
luckily what we can do is add more
columns or different sized columns at
different widths and we can do that with
a a variable that calls a function
called add grid and we can come in here
and let's just say that to start off
this whole thing is only gonna have one
column right sure because right now it
just has one column however at 6:50 we
wanted to do something different
so we can say grids one and then we're
gonna define grids again
however this time we're gonna say add -
grid and then in parentheses we're going
to say what the grids were going to add
our so we could actually give it things
like perhaps this is going to be three
columns at
and then 650 pixels right so we can say
here at 650 we're going from one column
to three columns so let's see that in
action if we come back to our page here
and we refresh we'll see that we have
gone to what would be three equal
columns if we had three paragraphs right
so it's now one column and then now it's
going to three columns okay well that's
great
but what happens now if we want this to
now change a little bit more
dramatically now we want this to turn
into something asymmetrical well we can
come in here and we can add another one
of these in fact we can just keep adding
these at any given point as long as
you're progressively adding them so what
it's what it means is really this
assumes that you're building mobile
first so the first one is starting at
your lowest and then you're building up
right so this one we can say at 850 now
go to 3 sorry I'm trying to type here 3
& 8 like we had it before so let's
refresh let's refresh our page
and you'll see that nothing has happened
here right I mean this page is clearly
wider than the 850 that we told it
however we don't have that asymmetrical
proportion that we wanted well what you
have to do is you have to have another
media query for that break point where
you actually reassign them to the grid
based off of the new grid so the new
grid was very similar to the old grid
because we're both going to have them be
the first column first place first one
place at the second column for both so
now we refresh and we now see that our 3
& 8 grid is now taking place at 850 and
up in between 850 it's going to go to 3
columns like here and then after 650
it's going to go to one column
okay now let's try it even more radical
than that let's come in here in our grid
let's add one more and we're gonna say
at 1250 let's go to something totally
wild and we're gonna do like seven and
one okay now once again here we're going
to come into our mixin and I can really
just copy this because we're still
keeping the left bar in the first and
the right the content area in the second
to illustrate this I'm quickly going to
modify our HTML just a little bit and
I'm gonna put a h3 in here that says
left and then I'm going to put an h3 in
here that says main ok come back you see
now that our window is greater than 1250
so we now have the left column is taking
up this giant 7 and this is taking up 1
as we get smaller smaller smaller
smaller we now have our 3 and 8 and then
now here we have our 3 3 and 3 and of
course we have our 1 column like we've
had the whole time what's cool about
this is let's say we wanted them to sort
of switch positions right so so here the
left is on the left the whole time right
but what happens if we want the main
content area to now be super wide but
they can't the sidebar to be on the
right well let's actually swap some
numbers around here and we should be
able to do that so we're going to do
that in this largest one and now all we
have to do is say that the left bar
starts in the second column and the
content area starts in the first column
come here we refresh and the main column
is now on the left the left bar is on
the right and when I notice
I hit that break point it totally swaps
so this is just I don't know these this
singularity and the latest version of
Susy which I'm gonna go over to are
these just two amazing new grid
frameworks that are totally flexible and
can really handle anything you throw at
it so that is some more fun with
responsive grids now I should note if
you are not keen on doing mobile first
for some reason although I probably
would recommend it you could of course
define a variable that says mobile first
and then false and of course you would
have to take all of these grids and move
them in the opposite order and then you
would want your CSS to also be not
mobile first so I mean really I would
just recommend doing a mobile first it
really seems to be the best practice as
always this is Scott with LevelUp Tut's
if you have any questions or comments
they've become in the video or here to
set that Twitter level up Tut's we're
gonna be talking about a few more things
on singularity but I'm also going to get
started on a Suzy to toriel series
because I know a lot of people have been
really interested in that and more
importantly Suzy version two is like out
I think it's like in prevision right now
but it's it's awesome and it's exciting
and what it does is actually take some
ideas from singularity they talk about
that a little bit but it's it's pretty
darn cool so as always this is Scott
with LevelUp Hutt's if you have any
questions or comments leave a come in
the video here to set up a Twitter or
Facebook on our forum let us know what
you think we'd love to hear from you
thanks for watching and I'll see in the
next one bye