search

jakegiltsoff / sassline

Set text on the web to a baseline grid with Sass & rems using a responsive modular-scale.
https://sassline.com
1.38k stars 91 forks source link

max breakpoint #42

Closed ThomasHoadley closed 8 years ago

ThomasHoadley commented 8 years ago

Hi there, loving sassline!

Having a bit of trouble though so I was wondering if you could explain how to use the max-width breakpoints.

I'm currently trying: @include breakpoint(break-0, break-2)

However the max doesn't seem to be working. Am i doing anything obviously wrong?

jakegiltsoff commented 8 years ago

@ThomasHoadley The breakpoints mixin predominantly works mobile-first for the breakpoints. To get the @media screen and (min-width: ... and max-width: ...) media-queries it is only set up to use number values, rather than the preset breakpoint values.

i.e. @include breakpoint(0, 768)

The reason this was set up as such is any styles set for one breakpoint can be overridden with then next larger breakpoint, thus @include breakpoint(break-0, break-2) is the same as setting some default styles, then overriding them at the second breakpoint @include breakpoint(break-2).

Does that make sense? A little complex to explain. Let me know if you have any more questions about this or if there is something specific you are trying to achieve.

ThomasHoadley commented 8 years ago

Yeah that helps thanks!

I've been reading through the comments in the files and they're really helpful! I personally also think what might help is a more in depth descriptions of each of the mixins and their differences in the docs. Would love to see that maybe in future updates? But yeah, thanks again!

jakegiltsoff commented 8 years ago

@ThomasHoadley Great, I’ll close this issue.

And yes I’ve been meaning to do proper documentation for Sassline for a long time, and have actually started working on it recently. Hopefully I’ll be releasing it in the next month.