Skip to content

Instantly share code, notes, and snippets.

@dfosco

dfosco/browserslist

Last active Nov 27, 2016
Embed
What would you like to do?
Tachyons Breakpoint & Value Class Generator
> 1%
last 2 versions
@media screen {
.br0 {
border-radius: 0;
}
.br1 {
border-radius: 0.125rem;
}
.br2 {
border-radius: 0.25rem;
}
.br3 {
border-radius: 0.5rem;
}
.br-100 {
border-radius: 100%;
}
.br-pill {
border-radius: 9999px;
}
.br--bottom {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media screen and (min-width: 30em) {
.br0-ns {
border-radius: 0;
}
.br1-ns {
border-radius: 0.125rem;
}
.br2-ns {
border-radius: 0.25rem;
}
.br3-ns {
border-radius: 0.5rem;
}
.br-100-ns {
border-radius: 100%;
}
.br-pill-ns {
border-radius: 9999px;
}
.br--bottom-ns {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-ns {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-ns {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-ns {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.br0-m {
border-radius: 0;
}
.br1-m {
border-radius: 0.125rem;
}
.br2-m {
border-radius: 0.25rem;
}
.br3-m {
border-radius: 0.5rem;
}
.br-100-m {
border-radius: 100%;
}
.br-pill-m {
border-radius: 9999px;
}
.br--bottom-m {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-m {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-m {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-m {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
@media screen and (min-width: 60em) {
.br0-l {
border-radius: 0;
}
.br1-l {
border-radius: 0.125rem;
}
.br2-l {
border-radius: 0.25rem;
}
.br3-l {
border-radius: 0.5rem;
}
.br-100-l {
border-radius: 100%;
}
.br-pill-l {
border-radius: 9999px;
}
.br--bottom-l {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top-l {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right-l {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left-l {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
// See live version at http://www.sassmeister.com/gist/efee0492c9fcb21d523babee13e7f3b9
$breakpoint-not-small: 'screen and (min-width: 30em)' !default;
$breakpoint-medium: 'screen and (min-width: 30em) and (max-width: 60em)' !default;
$breakpoint-large: 'screen and (min-width: 60em)' !default;
// Breakpoint Values
$breakpoints: (
"": (#{screen}),
"-ns": (#{$breakpoint-not-small}),
"-m": (#{$breakpoint-medium}),
"-l": (#{$breakpoint-large})
);
// Breakpoint Loop
@each $media-query, $breakpoint in $breakpoints {
$breakpoint-prefix: nth($breakpoint, 1);
@media #{$breakpoint-prefix} {
// Class Name
.br {
$values: (
"0": (0),
"1": (.125rem),
"2": (0.25rem),
"3": (.5rem),
"-100": (100%),
"-pill": (9999px)
);
// Scale Loop
@each $value-name, $value-size in $values {
$border-value: nth($value-size, 1);
&#{$value-name}#{$media-query} {
border-radius: $border-value;
}
} // end scale loop
} // end class name
// Literal Values with media queries
.br--bottom#{$media-query} {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.br--top#{$media-query} {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.br--right#{$media-query} {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.br--left#{$media-query} {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
} // end breakpoint loop
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.