Skip to content

Instantly share code, notes, and snippets.

@mverissimo

mverissimo/base.scss

Last active March 30, 2019 18:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save mverissimo/4b0b021a40f0bca8f4758570aab3168d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save mverissimo/4b0b021a40f0bca8f4758570aab3168d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
base.scss
@import '~styles/reset';
@import '~styles/fonts.css';
/* stylelint-disable selector-max-type */
@-ms-viewport {
width: device-width;
}
@-o-viewport {
width: device-width;
}
@viewport {
width: device-width;
}
:root {
@if global-variable-exists(scale) {
--scale-element: 1;
--scale-font: 1;
@each $size in $scale {
@media (max-height: nth($size, 1)) {
--scale-element: #{nth($size, 2)};
--scale-font: #{nth($size, 2)};
}
}
}
}
html,
body {
min-height: 100vh;
background-color: $color-background;
}
html {
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: auto; // always show the vertical scrollbar so that content doesn't jump
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-sizing: border-box;
}
// inherited from <html>
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
@include responsive-font($font-size-min, $font-size);
position: relative;
margin: 0;
font-family: $font-family;
line-height: $line-height;
text-size-adjust: 100%; // iOS on orientation change
color: $color-font;
}
img {
display: block;
max-width: 100%;
height: auto;
}
// placeholders
input,
textarea,
select {
&::-webkit-input-placeholder {
color: $color-placeholder;
}
&::-moz-placeholder {
opacity: 1;
color: $color-placeholder;
}
&:-ms-input-placeholder {
color: $color-placeholder;
}
}
Raw
config.scss
@import 'variables';
@import 'grid';
@import 'mixins';
Raw
grid.scss
// Helper to convert straight number to percentage
@function convertify($number) {
@if type-of($number) == 'number' and unitless($number) {
@return percentage($number / $grid-column-count);
}
@return $number;
}
@mixin grid-row($direction: ltr, $align: stretch, $justify: flex-start, $grid-gutter: $gutter, $wrap: wrap) {
display: flex;
flex-wrap: $wrap;
align-items: $align;
justify-content: $justify;
margin-left: -($grid-gutter/2);
margin-right: -($grid-gutter/2);
@if $direction == ltr {
flex-direction: row;
}
@else {
flex-direction: row-reverse;
}
}
@mixin grid-col($width: 100%, $align: stretch, $grid-gutter: $gutter) {
flex: none;
align-self: $align;
padding-left: $grid-gutter/2;
padding-right: $grid-gutter/2;
width: convertify($width);
}
@mixin grid-offset-left($offset: 1) {
margin-left: convertify($offset);
}
@mixin grid-offset-right($offset: 1) {
margin-right: convertify($offset);
}
Raw
mixins.scss
@mixin fit {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@function strip-unit($number) {
@if type-of($number) == 'number' and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
@mixin responsive-font($min-size: $font-size-min, $size: $font-size, $limit: $page-limit) {
$scale-font-enable: global-variable-exists(scale);
$unitless-min: strip-unit($min-size);
$unitless-size: strip-unit($size);
$baseline: strip-unit($min-mobile);
$font-multiplier: (($unitless-size - $unitless-min) / (strip-unit($limit) - $baseline));
$font-baseline: ($unitless-min - $font-multiplier * $baseline);
@if $unitless-min >= $unitless-size {
@warn 'Responsive font: min-size equal or greater than size';
}
font-size: #{$unitless-min}px;
@if $scale-font-enable == true {
font-size: calc(#{$unitless-min}px * #{var(--scale-font)});
}
@media (min-width: $min-mobile) {
font-size: #{$unitless-min}px;
@if $scale-font-enable == true {
font-size: calc((#{$font-multiplier} * #{100vw} + (#{$font-baseline}px)) * #{var(--scale-font)});
}
@else {
font-size: calc((#{$font-multiplier} * #{100vw} + (#{$font-baseline}px)));
}
}
@media (min-width: $limit) {
font-size: #{$unitless-size}px;
@if $scale-font-enable == true {
font-size: calc(#{$unitless-size}px * #{var(--scale-font)});
}
}
}
// Alias for responsive-font mixin
@mixin rf($args...) {
@include responsive-font($args...);
}
@mixin vertically-responsive($property, $number) {
#{$property}: $number;
@if global-variable-exists(scale) {
@supports (--css: variables) {
#{$property}: calc(#{$number} * var(--scale-element));
}
}
}
// Segment customisable per-component / instance rather than being forced to work around defaults.
@mixin segment(
$padding-top: $segment-padding,
$padding-bottom: $segment-padding,
$padding-top-mobile: $segment-padding-mobile,
$padding-bottom-mobile: $segment-padding-mobile) {
flex-grow: 1;
// Set up unitless values
$padding-top-mobile-unitless: strip-unit($padding-top-mobile);
$padding-bottom-mobile-unitless: strip-unit($padding-bottom-mobile);
$padding-top-unitless: strip-unit($padding-top);
$padding-bottom-unitless: strip-unit($padding-bottom);
@include vertically-responsive(padding-top, $padding-top-mobile-unitless * 1px);
@include vertically-responsive(padding-bottom, $padding-bottom-mobile-unitless * 1px);
@media (min-width: $min-tablet) {
@include vertically-responsive(padding-top, percentage(($padding-top-unitless * 1px) / $page-limit));
@include vertically-responsive(padding-bottom, percentage(($padding-bottom-unitless * 1px) / $page-limit));
}
@media (min-width: $page-limit) {
@include vertically-responsive(padding-top, $padding-top-unitless * 1px);
@include vertically-responsive(padding-bottom, $padding-bottom-unitless * 1px);
}
}
@mixin container() {
flex-grow: 1;
margin: 0 auto;
padding-left: $container-gutter-mobile;
padding-right: $container-gutter-mobile;
max-width: $page-width + $container-gutter-mobile;
@media (min-width: $min-mobile) {
max-width: $page-width + $container-gutter-mobile * 2;
}
@media (min-width: $min-tablet) {
padding-left: $container-gutter-tablet;
padding-right: $container-gutter-tablet;
max-width: $page-width + $container-gutter-tablet * 2;
}
@media (min-width: $min-desktop) {
padding-left: $container-gutter-desktop;
padding-right: $container-gutter-desktop;
max-width: $page-width + $container-gutter-desktop * 2;
}
}
@mixin js-only {
html:not(:global(.no-js)) & {
@content;
}
}
@mixin no-js {
html:not(:global(.js)) & {
@content;
}
}
@mixin retina {
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi) {
@content;
}
}
// Gsap trans-in defaults
@mixin will-animate($transform: true, $opacity: true) {
@include js-only {
@if $opacity == true {
opacity: 0;
}
@if $transform == true {
will-change: opacity, transform;
}
@else {
will-change: opacity;
}
}
}
Raw
reset.scss
/* stylelint-disable */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
font-family: inherit;
font-style: inherit;
font-size: inherit;
font-weight: inherit;
border: 0;
border-radius: 0;
}
ol,
ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
button,
input,
textarea,
select {
font-family: inherit;
font-style: inherit;
font-size: inherit;
font-weight: inherit;
border: 0;
appearance: none;
&:focus:not(:focus-visible) {
outline: none;
}
}
/* stylelint-enable */
Raw
vars.scss
$gutter: 30px;
$container-gutter-mobile: $gutter;
$container-gutter-tablet: 50px;
$container-gutter-desktop: 70px;
// grid
$grid-column-count: 12;
$grid-baseline: 16px;
// page dimensions
$page-width: 1170px;
$page-limit: $page-width + ($container-gutter-desktop * 2);
// Fonts
$font-family: 'Gotham', sans-serif;
$font-heading: 'Gotham', sans-serif;
$font-size: 16px;
$font-size-min: 13px;
$line-height: 1.5;
// Colors
$color-yellow: #ffc000;
$color-font: #333;
$color-background: #fff;
$color-placeholder: #ddd;
// Timings
$transition-enter: 200ms;
$transition-leave: 500ms;
// Custom break point (Min)
$min-1800: 1800px;
$min-1440: 1440px;
$min-1280: 1280px;
$min-1200: 1200px;
$min-1080: 1080px;
$min-1024: 1024px;
$min-960: 960px;
$min-840: 840px;
$min-768: 768px;
$min-720: 720px;
$min-640: 640px;
$min-600: 600px;
$min-560: 560px;
$min-540: 540px;
$min-480: 480px;
$min-420: 420px;
$min-375: 375px;
$min-360: 360px;
// Custom break points (Max)
$max-1280: 1279px;
$max-1200: 1199px;
$max-1080: 1079px;
$max-1024: 1023px;
$max-960: 959px;
$max-840: 839px;
$max-768: 767px;
$max-720: 719px;
$max-640: 639px;
$max-600: 599px;
$max-540: 539px;
$max-480: 479px;
$max-420: 419px;
$max-375: 374px;
$max-360: 359px;
// Predefined breakpoints
$min-mobile: $min-420;
$min-tablet: $min-720;
$min-desktop: $min-1080;
// Vertical scaling values.
// remove this map to disable vertical scaling
// value 1 = height breakpoint, value 2 = multiplier
$scale: (
(920px, 0.975),
(800px, 0.95),
(690px, 0.925),
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment