Skip to content

Instantly share code, notes, and snippets.

@pixelspencil

pixelspencil/colours.scss

Last active July 7, 2020 08:19
Show Gist options
  • Save pixelspencil/79e82de78a6b049b8c227b464b56b196 to your computer and use it in GitHub Desktop.
Save pixelspencil/79e82de78a6b049b8c227b464b56b196 to your computer and use it in GitHub Desktop.
Download ZIP
SASS Template
Raw
colours.scss
/* Colors */
/* http://chir.ag/projects/name-that-color */
$lime: #b0eb00;
$bright-red: #b30015;
$dark-blue: #2a00b3;
$deep-cerulean: #0077b3;
$bondi-blue: #00b0b3;
$cyan: #24fbff;
$heliotrope: #8a7dff;
$silver-chalice: #a6a6a6;
$scorpion: #595959;
$tundora: #444;
$mine-shaft: #363636;
$cod-gray: #111;
Raw
global.scss
// variables
$font-stack: Helvetica, sans-serif;
$color-1: #333;
$color-2: #fff;
$rst: 0;
$whatever: 0;
body {
font: 100% $font-stack;
color: $color-1;
padding: $rst;
margin: $rst;
opacity: $whatever;
display:$someVal;
}
h1 {
color: $color-2;
}
div.parent { /* parent selector = div.parent {...}*/
color: $color-1;
span.child { /* child selector = div.parent span.child {...}*/
color: $color-2
}
}
.parent {
color:blue;
.child {
font-size:10px;
}
}
@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:
h1 {
font-family: Roboto, sans-serif;
text-align: center;
}
.banner {
border : { // example of using properties within
top: 4px solid black;
bottom: 4px solid black;
}
.slogan {
span {
font-size: 24px;
line-height: 200px;
}
position: absolute;
border: 4px solid black;
top: 200px;
left: 25%;
width: 50%;
height: 200px;
text-align: center;
}
font-family: 'Pacifico', cursive;
height: 400px;
background-image: url("lemonade.jpg");
}
.container {
.icon {
display: inline-block;
margin: 2%;
border: 4px solid black;
font-size: 32px;
}
text-align: center;
font-family: 'Pacifico', cursive;
}
Raw
grid.scss
/* https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/ */
/* https://codepen.io/joshgreen/pen/zwLCg */
Raw
mixins.scss
//Mixins Library
//input placeholder (framework.scss)
@mixin inputPlaceholder($color, $font-weight, $opacity) {
&::-webkit-input-placeholder {
color: $color;
font-weight: $font-weight;
opacity: $opacity;
}
&:-moz-placeholder{
color: $color;
font-weight: $font-weight;
opacity: $opacity;
}
&::-moz-placeholder {
color: $color;
font-weight: $font-weight;
opacity: $opacity;
}
&:-ms-input-placeholder{
color: $color;
font-weight: $font-weight;
opacity: $opacity;
}
}
//saturate preserving grayscale
@function saturate-maybe($color, $amount) {
@return if(saturation($color) <= 0.01, $color, saturate($color, $amount));
}
// Color Mixin (colors.scss)
@mixin generateColors($name, $color, $pair: #fff){
.#{$name} {
background: $color !important;
@if $pair == #fff {
color:$pair !important;
svg {
fill:$pair !important;
}
} @else {
color:$pair!important;
svg {
fill:$pair !important;
}
}
// @if $color == #fff {
// .slide.whiteSlide & {
// /* base: */
// box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10), 0 1px 4px 0 rgba(0,0,0,0.10);
// }
// }
}
//for stroke buttons
.text-#{$name} {
color: $color !important;
&.button svg {
fill: $color !important;
}
}
.stroke.button.#{$name} {
color: $color !important;
border-color: $color !important;
svg {
fill: $color !important;
}
}
}
// Insert Media
@mixin media($width, $minOrMax) {
@if $minOrMax == "max" {
$width: $width - 1px;
}
@media (#{$minOrMax}-width: $width) { @content; }
}
// Insert Media Range
@mixin mediaRange($width-1, $width-2) {
@media (max-width: $width-1) and (min-width: $width-2) { @content; }
}
Raw
reset.scss
/* CSS RESET */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
hr,
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 {
border: 0;
vertical-align: baseline;
margin: 0;
padding: 0
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
ol,
ul,
li {
list-style: none
}
blockquote,
q {
quotes: none
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
b,
strong {
font-weight: 600
}
html {
position: static !important;
top: 0 !important;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
Raw
styles.scss
/*
███████╗████████╗██╗ ██╗██╗ ███████╗███████╗
██╔════╝╚══██╔══╝╚██╗ ██╔╝██║ ██╔════╝██╔════╝
███████╗ ██║ ╚████╔╝ ██║ █████╗ ███████╗
╚════██║ ██║ ╚██╔╝ ██║ ██╔══╝ ╚════██║
███████║ ██║ ██║ ███████╗███████╗███████║
╚══════╝ ╚═╝ ╚═╝ ╚══════╝╚══════╝╚══════╝
==================================================
ANSI Shadow / http://patorjk.com/software/taag/
==================================================
DOCUMENT INFORMATION
==================================================
- Document: XX Theme
- Version: X.X.X
- Purpose: XXX
- URL: https://urlhere.com/
- Client: XXX
- Author: XXX
CSS DIRECTORY INDEX
==================================================
1. = GLOBAL
2. = PRIMARY
3. = TYPOGRAPHY
3. = HEADER
4. = SIDEBAR
5. = FOOTER
6. = UTILITIES
COLORS
==================================================
- default body text: #ffffcc
- subtitle h2 text: #ff9900
- form input borders: #cc9933
- default p text: #f0f0f0
- pre borders: #ffff99
FONTS
==================================================
- default body text: Arial, Helvetica Neue, Helvetica, sans-serif
- subtitle h2 text: Garamond, Hoefler Text, Times New Roman, Times, serif
- form input text: Cambria, Georgia, Times, Times New Roman, Times, serif
- default p text: Copperplate Light, Copperplate Gothic Light, serif
- pre and code: Consolas, Lucida Console, Monaco, monospace
*/
// CSS RESET
@import 'reset';
// MIXINS
@import 'mixins';
// VARIABLES
@import 'variables';
// GRID/LAYOUT
@import 'grid';
// TYPOGRAPHY
@import 'typography';
// COLORS
@import 'colors';
// USEFUL CLASSES
@import 'useful';
// UTILS
@import 'utils';
Raw
typography.scss
// *** Variables ***
@import "plumber";
@include plumber-set-defaults(
$font-size: 1,
$baseline: $body-baseline,
$grid-height: $gh
);
html {
font-size: 6px;
font-weight: 400;
color: $color-medium;
@media (max-width: 550px) {
font-size: 5px;
}
@media (min-width: 767px) {
font-size: 7px;
}
@media (min-width: 1024px) {
font-size: 6px;
}
}
body {
font-size: 15px;
}
.typography {
// HEADINGS
.h1, h1,
.h2, h2,
.h3, h3,
.h4, h4,
.h5, h5,
.h6, h6 {
font-style: normal;
letter-spacing: normal;
// WEIGHT VARIANTS
&.ultraLight {
font-weight: 100;
}
&.light {
font-weight: 300;
}
&.normal {
font-weight: 400;
}
&.semiBold {
font-weight: 500;
letter-spacing: -.05em
}
&.bold {
font-weight: 600;
letter-spacing: -.04em
}
&.ultraBold {
font-weight: 800;
letter-spacing: -.03em
}
}
// H1
.h1, h1 {
@include plumber(
$font-size: 8.4,
$line-height: 10,
$leading-top: 8,
$leading-bottom: 2,
$baseline: $header-baseline
);
// SIZE VARIANTS
&.small {
@include plumber(
$font-size: 6.4,
$line-height: 6,
$leading-top: 4,
$leading-bottom: 2,
$baseline: $header-baseline
);
}
&.large {
@include plumber(
$font-size: 9.6,
$line-height: 10,
$leading-top: 8,
$leading-bottom: 4,
$baseline: $header-baseline
);
}
&.huge {
@include plumber(
$font-size: 14.6,
$line-height: 15,
$leading-top: 10,
$leading-bottom: 4,
$baseline: $header-baseline
);
}
}
// H2
.h2, h2 {
@include plumber(
$font-size: 7.4,
$line-height: 8,
$leading-top: 6,
$leading-bottom: 2,
$baseline: $header-baseline
);
// SIZE VARIANTS
&.small {
@include plumber(
$font-size: 5.6,
$line-height: 6,
$leading-top: 4,
$leading-bottom: 0,
$baseline: $header-baseline
);
}
&.large {
@include plumber(
$font-size: 8.8,
$line-height: 9,
$leading-top: 6,
$leading-bottom: 2,
$baseline: $header-baseline
);
}
&.huge {
@include plumber(
$font-size: 11.2,
$line-height: 12,
$leading-top: 8,
$leading-bottom: 2,
$baseline: $header-baseline
);
}
}
// H3
.h3, h3 {
@include plumber(
$font-size: 6.4,
$line-height: 8,
$leading-top: 4,
$leading-bottom: 0,
$baseline: $header-baseline
);
// SIZE VARIANTS
&.small {
@include plumber(
$font-size: 4.8,
$line-height: 6,
$leading-top: 2,
$leading-bottom: 0,
$baseline: $header-baseline
);
}
&.large {
@include plumber(
$font-size: 8,
$line-height: 10,
$leading-top: 4,
$leading-bottom: 1,
$baseline: $header-baseline
);
}
&.huge {
@include plumber(
$font-size: 9.6,
$line-height: 10,
$leading-top: 6,
$leading-bottom: 2,
$baseline: $header-baseline
);
}
}
// H4
.h4, h4 {
@include plumber(
$font-size: 5.2,
$line-height: 6,
$leading-top: 4,
$leading-bottom: 0,
$baseline: $header-baseline
);
}
// H5
.h5, h5 {
@include plumber(
$font-size: 4.4,
$line-height: 6,
$leading-top: 4,
$leading-bottom: 0,
$baseline: $header-baseline
);
}
// H6
.h6, h6 {
@include plumber(
$font-size: 4,
$line-height: 4,
$leading-top: 4,
$leading-bottom: 0,
$baseline: $header-baseline
);
}
// P
p, .p, .p:not(.hero)+p, p:not(.hero)+p {
@include plumber(
$font-size: 3.5,
$line-height: 5,
$leading-top: 0,
$leading-bottom: 2,
$baseline: $body-baseline
);
text-rendering: optimizeLegibility;
// SIZE VARIANTS
&.micro {
@include plumber(
$font-size: 2.6,
$line-height: 4,
$leading-top: 2,
$leading-bottom: 0,
$baseline: $body-baseline
);
}
&.small {
@include plumber(
$font-size: 3,
$line-height: 4,
$leading-top: 2,
$leading-bottom: 0,
$baseline: $body-baseline
);
}
&.hero {
@include plumber(
$font-size: 5,
$line-height: 6,
$leading-top: 2,
$leading-bottom: 4,
$baseline: $body-baseline
);
font-weight: 300;
letter-spacing: -0.16rem;
}
}
//.slide:not(.whiteSlide) p.hero {font-weight: 400;}
// ELEMENTS
& strong {
font-weight: 600;
}
& em {
font-weight: 500;
}
& li {
@include plumber(
$font-size: 3.5,
$line-height: 4,
$leading-top: 0,
$leading-bottom: 1,
$baseline: $body-baseline
);
opacity: 0.8;
}
// LISTS
& ul, & ol {
margin: 4rem 4rem 4rem 8rem;
}
& ul li {
list-style: disc;
}
& ol li {
list-style: decimal;
}
// BLOCKQUOTE
& blockquote {
@include plumber(
$font-size: 3.2,
$line-height: 4,
$leading-top: 6,
$leading-bottom: 5,
$baseline: $body-baseline
);
padding-left: 4rem; padding-right: 4rem;
margin-left: 4rem; margin-right: 4rem;
padding-top: 1rem; padding-bottom: 1rem;
opacity: 0.9;
border-left: 5px solid #EEE;
}
// Quote
& q {
@include plumber(
$font-size: 3.2,
$line-height: 4,
$leading-top: 6,
$leading-bottom: 6,
$baseline: $body-baseline
);
padding-left: 4rem; padding-right: 4rem;
opacity: 0.9;
display: block;
}
& q:before, & q:after {
font-size: 5rem;
line-height: 0.1rem;
vertical-align: -1rem;
}
& q:before {
content: "“";
margin-right: 1rem;
}
& q:after {
content: "”";
margin-left: 1rem;
}
}
.article p, .article li {
// Make font-weight lighter on larger screens
@media (min-width: 768px) {
font-weight: 300;
}
}
// Make headings lighter on small screens
.article h1, .article .h2, .article .h3, .article h4, .article h5, .article h6 {
@media (max-width: 550px) {
opacity: 0.8;
}
}
Raw
useful.scss
/* Re-usable stuff */
// tables
.table { display: table; width: 100%; height: 100%; }
.cell { display: table-cell; text-align: center; vertical-align: middle; }
// overflow
.scroll-x { overflow-x: scroll;}
.scroll-y { overflow-y: scroll;}
.overflow-hidden, .scroll-hidden { overflow: hidden;}
.overflow-reset { overflow: auto !important;}
//fonts
.uppercase { text-transform: uppercase !important; }
.italic { font-style: italic !important;}
.ultraLight, .thin { font-weight: 100 !important;}
.light { font-weight: 300 !important;}
.normal { font-weight: normal !important;}
.semiBold { font-weight: 500 !important;}
.bold { font-weight: 600 !important;}
.ultraBold { font-weight: 900 !important;}
.noText { font-size: 0; }
//position
.top, .align-top { vertical-align: top !important;}
.left, .align-left { text-align: left !important;}
.right, .align-right { text-align: right !important;}
.center, .align-center { text-align: center !important;}
.middle { vertical-align: middle !important;}
.bottom { vertical-align: bottom !important;}
.rtl { direction: rtl; unicode-bidi: embed;}
.position-left { left: 0; }
.position-top { top: 0; }
.position-bottom { bottom: 0; }
.position-right { right: 0; }
.float-right { float: right !important;}
.float-left { float: left !important;}
.float-none { float: none !important;}
.slides.firstSlide .hideForFirstSlide,
.slides.lastSlide .hideForLastSlide {
display: none;
}
//specific
.block { display: block !important;}
.inlineBlock { display: inline-block !important;}
.inline { display: inline !important;}
.relative { position: relative !important;}
.absolute { position: absolute !important;}
.fixed { position: fixed !important;}
.nowrap { white-space: nowrap;}
.wide { width: 100% !important;}
.hidden { display: none; }
.nobr { white-space: nowrap; }
//move, bitch
[class*='shift-'] {
position: relative;
}
.shift-up-1 { top: -1px;}
.shift-up-2 { top: -2px;}
.shift-up-3 { top: -3px;}
.shift-up-4 { top: -4px;}
.shift-up-5 { top: -5px;}
.shift-down-1 { top: 1px;}
.shift-down-2 { top: 2px;}
.shift-down-3 { top: 3px;}
.shift-down-4 { top: 4px;}
.shift-down-5 { top: 5px;}
.shift-left-1 { left: -1px;}
.shift-left-2 { left: -2px;}
.shift-left-3 { left: -3px;}
.shift-left-4 { left: -4px;}
.shift-left-5 { left: -5px;}
.shift-right-1 { left: 1px;}
.shift-right-2 { left: 2px;}
.shift-right-3 { left: 3px;}
.shift-right-4 { left: 4px;}
.shift-right-5 { left: 5px;}
@include media($tablet, max){
.wideForTablet {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@include media($phablet, max){
.wideForPhablet {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@include media($phone, max){
.wideForPhone {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
//roundness
.round { border-radius: 999px !important; }
.rounded { border-radius: $rounded-border-radius !important; }
.rectangular { border-radius: 0 !important; }
//opacity
.opacity-0 { opacity: 0 !important;}
.opacity-1 { opacity: 0.1 !important;}
.opacity-2 { opacity: 0.2 !important;}
.opacity-3 { opacity: 0.3 !important;}
.opacity-4 { opacity: 0.4 !important;}
.opacity-5 { opacity: 0.5 !important;}
.opacity-6 { opacity: 0.6 !important;}
.opacity-7 { opacity: 0.7 !important;}
.opacity-8 { opacity: 0.8 !important;}
.opacity-9 { opacity: 0.9 !important;}
.opacity-10,
.opaque { opacity: 1 !important;}
.transparent { background: transparent !important }
// Crop
.crop { margin: 0 !important;}
.cropBottom { margin-bottom: 0 !important;}
.cropTop { margin-top: 0 !important;}
.cropLeft, .cropSides { margin-left: 0 !important;}
.cropRight, .cropSides { margin-right: 0 !important;}
// Trim
.trim { padding: 0 !important;}
.trimBottom { padding-bottom: 0 !important;}
.trimTop { padding-top: 0 !important;}
.trimLeft, .trimSides { padding-left: 0 !important;}
.trimRight, .trimSides { padding-right: 0 !important;}
//Padding and Margin Generation
$properties: padding padding-top padding-right padding-bottom padding-left margin margin-top margin-right margin-bottom margin-left;
@each $property in $properties {
$i: index($properties, $property);
@for $n from 0 through 20 {
$value: 10px * $n;
.#{$property}-#{$n} {
#{$property}: $value !important;
}
}
}
//Padding and Margin for Tablet
@include media($desktop, min){
@each $property in $properties {
$i: index($properties, $property);
@for $n from 0 through 20 {
$value: 10px * $n;
.#{$property}-desktop-#{$n} {
#{$property}: $value !important;
}
}
}
}
//Padding and Margin for Tablet
@include media($tablet, max){
@each $property in $properties {
$i: index($properties, $property);
@for $n from 0 through 20 {
$value: 10px * $n;
.#{$property}-tablet-#{$n} {
#{$property}: $value !important;
}
}
}
}
//Padding and Margin for Phablet
@include media($phablet, max){
@each $property in $properties {
$i: index($properties, $property);
@for $n from 0 through 20 {
$value: 10px * $n;
.#{$property}-phablet-#{$n} {
#{$property}: $value !important;
}
}
}
}
//Padding and Margin for Phone
@include media($phone, max){
@each $property in $properties {
$i: index($properties, $property);
@for $n from 0 through 20 {
$value: 10px * $n;
.#{$property}-phone-#{$n} {
#{$property}: $value !important;
}
}
}
}
.pointer-events { pointer-events: all !important; }
.disable-pointer-events { pointer-events: none !important; }
//
.space { padding: 0 20px;}
.pointer,
.cursorPointer { cursor: pointer;}
.cursorZoomIn {
cursor: pointer;
cursor: -moz-zoom-in !important;
cursor: -webkit-zoom-in !important;
}
.cursorZoomOut {
cursor: pointer;
cursor: -moz-zoom-out !important;
cursor: -webkit-zoom-out !important;
}
.cursorGrab {
cursor: move;
cursor: grab !important;
cursor: -moz-grab !important;
cursor: -webkit-grab !important;
}
.cursorGrab:active {
cursor: grabbing !important;
cursor: -moz-grabbing !important;
cursor: -webkit-grabbing !important;
}
//background
.pattern .background { background-repeat: repeat; background-size: auto;}
.attachment-fixed { background-attachment: fixed !important; background-size: cover !important;}
.disableClick { pointer-events: none;}
.cover { background-size: cover !important;}
.noSelect,.noSelect *, .disableSelect, .disableSelect * { -webkit-touch-callout: none!important; user-select: none!important;}
.selectable,.selectable *, .enableSelect, .enableSelect * { -webkit-touch-callout: auto!important; user-select: auto!important;}
.clearBoth:after { content: ""; clear: both; display: table;}
Raw
utilities.scss
// add utilities here
Raw
variables.scss
// FONTS
$body-font: ('Roboto', sans-serif);
$body-baseline: 0.1445;
$header-baseline: 0.1445;
$gh: 1rem;
//COLORS
$color-medium: #202020;
$default-button-color: #202020;
$default-dark-color: #202020;
$default-white-color: #fff;
// other colors you can find in the colors.scss file
//SHADOWS
$small-shadow: 0 1px 4px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1);
$medium-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.15), 0 0px 5px 0px rgba(0, 0, 0, 0.1);
$large-shadow: 0 10px 40px rgba(0,0,0,0.2);
//MATERIAL COLORS
$red: #F44336;
$pink: #E91E63;
$purple: #9C27B0;
$deepPurple: #673AB7;
$indigo: #3F51B5;
$blue: #2196F3;
$cyan: #00BCD4;
$teal: #009688;
$green: #4CAF50;
$lightGreen: #8BC34A;
$lime: #CDDC39;
$yellow: #FFEB3B;
$amber: #FFC107;
$orange: #FF9800;
$deepOrange: #FF5722;
$brown: #795548;
$gray: #9D9D9D;
$blueGray: #607D8B;
//WIDTH
$max-width: 1114px;
$desktop: 1240px;
$tablet: 1024px;
$phablet: 768px;
$phone: 436px;
//BORDER RADIUS
$default-border-radius: 4px;
$rounded-border-radius: 6px;
//SLIDE SPEED
$slide-speed-fast: 0.7s;
$slide-speed-normal: 1s;
$slide-speed-slow: 1.4s;
$slide-transition-smooth: cubic-bezier(.55,.05,.35,.95);
$slide-transition-bounce: cubic-bezier(0.45, 1.15, 0.5, 1);
//ELEMENT ANIMATION
$horizontal-distance: 50px;
$vertical-distance: 25px;
$start-delay: 10; //ms
//default
$default-duration: 800; //ms
$default-delay-step: 150; //ms
//fast
$fast-duration: 700; //ms
$fast-delay-step: 100; //ms
//slow
$slow-duration: 1000; //ms
$slow-delay-step: 200; //ms
//values
$blur-size: 10px;
$small-scale: 0.9;
$large-scale: 1.1;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment