Sass Tutorials #26 - Responsive Grids With Breakpoint Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey what's up this is Scott with level
up tuts and today we're going to be
talking about how to make responsive
grids using singularity along with break
point and now the process for having
break point is very similar to what we
are used to before we need a require
statement in our config dot RB file just
the way we added singularity we're going
to want to add break point now we also
need to make sure we have the gem
installed on our system and you can
install the gem using things like Bower
or a gem file however since we just need
to make sure we have an under system for
right now I'm just going to do sudo gem
install break point it's going to ask
for my password and this is going to
download in one second here ok after
that is installed we can go ahead and
begin using the break point you'll
notice it's not going to complain about
not knowing what break point is after
I've installed it now the last thing we
need to do is just import it the same
way we would want to import anything
else and we have our Styles file or
importing singularity and our variables
so let's go ahead and actually import it
right above singularity right here and
there we go quote and now we can begin
to use break point let me check my I
term yet I don't have any error so it's
not giving me any confusion about what
break point is so therefore we're ready
to start using it ok so what is break
point right well break point is really
just another extension for compass
however it it allows you to use a really
simple media queries and then you can
use those along with the grid span mixin
that we used before to make your your
content adjust to the grid
so let's get it going with our post our
most very basic type
of a responsive site here so I'm just
going to go ahead and comment well I'm
going to go ahead and comment this out
right here and let's come and refresh
our page notice how I got rid of the
five columns but now I got to get revert
the HTML back give me one second here
okay so the HTML that I'm using is the
same that we were using from the video
before this where we had two columns we
had a Content area and a left bar our
grid is going to be a three and eight
and now let's come back here okay so
we're going to do this mobile first
right so you know the mobile first you
basically want the container to be you
want you know your content to be as it
is looks good on mobile and then design
outward from that or develop design
outward from that right so I'm actually
going to go ahead and delete this width
here too and refresh okay so now this is
getting a little bit better from here
let me actually just make this a little
bit smaller so we can see both of these
from here we can give the main area just
a padding of 5% okay
so this is going to be our mobile layout
now we want it when it gets to a certain
width we wanted to adjust and go into
our two columns that we had our left bar
and our content area
so using break point all we have to do
is use a mixin that they give us and
it's @include and then break point it's
nice and easy to remember
and now we just basically have to give
it a break point right so if we want to
say um at 400 pixels
we want the left bar let me turn these
comments off like that we want the left
bar and the right bar to both be on the
grid now okay and uh that's good just
like that okay so what we have here is
very basic website it's going to using
normal you know our normal classes it's
going to be in one column we have both
of our divs stacked on top of each other
it hits this break point then the left
bar is going to say be one column start
of the first position the content area
is going to be be one column start at
the second position we're using a
symmetrical grid so let's save this and
refresh our page and you'll notice when
it hits 400 pixels it gets into two
columns here and once we go below that
we now have just one column now the cool
thing about responsive sites and people
can say you know you want to break at
different different tablet sizes and
phone sizes and phones are really
getting impossible to really know all of
the different possible sizes
I mean Android phones alone are complete
almost every single ones like a
completely different dimension so a lot
of people are saying the way to design
for responsive sites is really to feel
it out right so to come in and say okay
that feels nice that break point is a
little too early this column is not
looking so good here where would that
feel better right that might feel better
right here so we can do that using our
tools here and we can see that the total
size the total width of this is like 800
pixels let's see when it starts to look
nice it's more like six hundred and
seventy pixels so it's at a four hundred
here let's say 650 pixels and save that
it's refresh it so now we have our two
columns when it's wide we get
here here here here here here and then
it breaks so this is just about as basic
as it gets right this sites always going
to respond to its containers but we're
really all we're doing is assigning
things to a grid at a certain break
point so break point is that simple to
get started but there's all sorts of
additional features that we're going to
go over and further videos and there's
all sorts of cool stuff that you can do
building really complex responsive grids
so get working make your basic
responsive grid in the next video we're
going to talk about a little bit more
advanced grids we're going to be adding
columns at breakpoints we're going to be
just completely changing our content
using breakpoints and singularity so as
always this is Scoville level of Tut's
if you have any questions or comments
comment the video or hit up at Twitter
Facebook the level of touch forum let us
know what you're thinking we love to
hear from you thanks and bye