Sass Tutorials #29 - Juice; Mixins for Life Video Lecture | Introduction to Software as a Service (SaaS): Beginners Guide - IT & Software

hey what's up this is Scott with level
up tutorials and today I'm really
excited to show you a new collection of
mix ins called juice and now juice
offers a whole host of mix ins from
things like break points to just
stylistic changes and there's lots to go
over so we're going to take a couple of
videos and show you all of what juice
has to offer
so we're at juices home page which is
just juicy next dot us and then forward
slash juice of a link off to the
description in this video and as you can
see it's really nice looking site if we
scroll down usually this is some basic
documentation and it doesn't get too
deep so let's explain a little bit what
juice actually as it says mix-ins for
life and essentially that's really what
it is it's a collection of mix-ins it's
not necessarily meant to replace
anything you're already using but it
could in some ways cuz there's a nice
break point mixin there's a nice clear
fix mixin there's a nice vertical Center
mixin things that at things like compass
or Suzi already contained but if you're
using Suzi or compass with juice then
you might choose to use whichever one of
those mix-ins feels the best to you and
right now I'm really liking the way that
juices mix-ins are labeled because
they're nice and concise so let's go
ahead and install juice and then get
using a couple of the Nixons in the next
video we're gonna dive in to a little
bit more and show you some of what sort
of functions they have to offer what
sort of mix ends and we're just gonna
dive a little bit more so if we have at
the top here there's this setup so let's
click setup it's gonna scroll you down
here and as you can see you can install
juice with Bower since I'm not using
Bower on this current project that I'm
on I'm not going to do that you can also
clone it or fork it or you can just
download the repo for this example I'm
just gonna download the repo itself and
place it into our project manually so we
can see what's going on now I just have
a basic project setup something I've
been using for the Susi videos and some
HTML videos but it's nothing really
different it's just a standard sass
project here and I have my sass in an
CSS folder as I often do and you can see
we really just have this main desk
test file and that's all we have right
now now what we want out of this juice
master folder that we've downloaded off
of their website is with Indian dist or
the distribution folder and it's the
underscore juice SCSS let's go ahead and
drag this into our project here into our
s CSS folder and now we can actually
import this with this one line import
juice line here so let's come to our CSS
and at the top of our document we can
just say import juice because juice is
in the same folder directory it doesn't
have to look for it if we select juice
that you can see that it's nicely
documented you can actually pop through
here and pick apart any of their mix-ins
and it's pretty substantial there's a
567 lines of mix-ins here so as you can
see the installation process isn't super
involved we're essentially just
downloading a partial sass file here and
and importing it into our CSS so let's
go ahead and actually try something out
let's use some of these mix ins here so
let's come to their juice page and let's
come up top to the mix-ins and you'll
notice they have a really cool
breakpoints Vixen now what i like about
this is it's really concise it's just at
include bp4 break point now if you want
to have between two break points you can
just pass both of those values in here
so you can say between 480 and 1024
these Styles would be in effect you can
also just pass it min and then a value
and that's going to give you a minimum
width and then Max and then the volume
is going to give you your maximum width
or you can just use a preset and it's
gonna give you a preset value what's
awesome in here is that there are a ton
of presets let me bump this up a little
bit so you can see we have xx large X
large only X large up X large large only
but then it gets into things that might
be a little bit more useful like iPhone
4 iPhone 4 landscape iPhone 5 iPhone 6
plus things like that where it's less
about the pixel size and more about the
device you're trying to support now I do
appreciate
they have all these iPhones here I just
wish they would have maybe some other
popular devices as well but either way
if you want to know what the exact pixel
values for any of these are all you
simply have to do is head over to the
juice SCSS and if we wanted to we could
look at this map here it's a sass map
and it's break points we have extra
large extra-large only extra large large
only and they're all here and these
include things like min device with 320
max device width and so it's more than
just a pixel value it's actually your
entire media query either way it's
really nice and handy to have all of
these available without having to enter
any of this stuff yourself so it's going
to use one of them let's go to our page
here and as you can see there's not
really a lot going on I'm gonna do
something really sort of idiotic but
just to prove a point I'm gonna use one
of these breakpoints to change the
background color okay and this is just
sort of a standard test I use when I use
new technologies and I want to I just
want to make sure they're working
besides looking at the CSS itself I just
throw something dumb in here just so
it's painfully obvious that it's working
so since I don't have a device this is
on a computer I'm not gonna worry about
in these iPhone ones but I can say
something like when it's small then make
the background color red instead of teal
so let's come in here and in our body we
can type at include BP not be GBP and we
just simply have to say one of the
presets so without having any sort of
variable dollar set and before we can
just say it's small it include BP small
some brackets and let's go ahead and say
the background is going to be red now
let's come to our page and refresh when
we shrink our browser window you can see
that once we hit this small break point
value which we can tell from the actual
code is
next with 40 m/s so when it hits that 40
m/s is turning red and we're back to
teal cool so that is the breakpoint mix
in it's really super simple yeah I
actually think it's really elegant for
how simple it is and I love that there's
these presets what's great is that
because you can get in here you can add
and edit your own presets as you need to
so let's check out some more mix ins in
here if we scroll down you can see that
we have a single side border-radius now
you might know that border-radius is
sort of a pain when you're trying to do
both of the top borders because you have
to specify in two lines border top right
radius border top left radius so luckily
this mixin makes it easy it lets us do
it with one line and it this is you know
this is just a small convenience but
it's a nice little convenience to have
especially if you're using this
technique so let's go ahead and modify
our HTML here we can just say that this
column one is going to have a background
dark gray color of white and let's come
back to our page to make sure it does
okay let's give it some margin margin
will be 40 pixels and auto width will be
80% this stuff doesn't really matter I'm
just sort of making this stand out a
little bit give it some padding of just
20 pixels or so and now let's add this
border radius so we can say add include
border top radius with hyphens in there
and then we're going to pass it a value
that values going to be something like
10 pixels and let's say that let's check
out our page and as you can see if this
isn't obvious enough let's bump the size
up you can see we have a border radius
of 10 pixels on this box you know even
though the documentation doesn't specify
this it should be easy to say that if
wanted border bottom radius 10 pixels
all you have to do is change the word in
here and the mixin exists so let's say
we wanted to say border right radius and
it's there so what's nice about this is
it's flexible you can use it any way you
want but it just takes something that is
a two-line maybe pain to type all that
stuff out and maybe copy and paste it
just makes it really concise and easy to
understand okay so let's check out one
more mixin and we're gonna get into the
rest in another video so we have a
single transform now I like this single
transform plug-in because I always hate
typing transform : rotate parentheses
and then the value it seems to me like
it would just make more sense to just
say rotate 45 and now I mean I
understand why it is the way it is but
this sort of just takes some of the
unnecessary language out of it and lets
you just say rotate so let's go ahead
and rotate column 1 so we can just say
I'd include rotate and then 45 degrees
and then off with a semicolon come back
to our page and you can see our
paragraph here has been rotated 45
degrees so again this isn't anything
earth-shattering or groundbreaking
boorda's is just a little nicety that
makes writing your code less of a pain
so instead of just going down the list
and showing you all these mix-ins in the
next video i'm going to show you some of
the cooler stuff that's in juice so keep
watching as always this is Scott with
level up tutorials if you have any
questions or comments leave a comment
the video we're here to set that tour or
face book we love to hear from you
thanks for watching and we'll see you in
the next one bye