Button mixin sample build with Sass
A Pen by Bilal Çınarlı on CodePen.
:root { | |
color-scheme: dark; | |
--primary: #bb86fc; | |
--primary-variant: #3700b3; | |
--on-primary: #000; | |
--secondary: #03dac5; | |
--secondary-variant: #d2e3fc; | |
--on-secondary: #000; | |
--on-secondary-variant: #018786; | |
--surface: #121212; |
# Install brew | |
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" | |
# Install Chrome | |
brew cask install google-chrome | |
# Install hyper | |
brew cask install hyper | |
hyper install hyperline | |
hyper install an-old-hype |
const fs = require('fs'); | |
const { rm } = require('./utils/file-actions'); | |
const cwd = process.cwd(); | |
const rm = (path) => { | |
if (fs.existsSync(path)){ | |
exec(`rm -r ${ path }`, (err) => { | |
if (err) { | |
console.log(err); |
// Sometimes you want to share some variables between your SCSS and JS/JSX code | |
// To do this, you can levarage the :export command in SCSS. | |
$alertInfo: #b8d3e8; | |
$alertWarning: #fdf9c3; | |
$alertSuccess: #cfc; | |
$alertError: #e63f3f; | |
// this exports the variable to be available in JS | |
:export { |
var app = app || {}; | |
(function(){ | |
"use strict"; | |
app.Collection = Backbone.Collection.extend({ | |
model: app.Model, | |
// initial sort when collection fetched first time | |
comparator: "id" | |
}); |
/** | |
* 1. http://www.paulirish.com/2012/box-sizing-border-box-ftw/ | |
* http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ | |
* http://fatihhayrioglu.com/css3-box-sizing-ozelligi/ | |
* | |
* 2. http://aestheticallyloyal.com/public/optimize-legibility/ | |
* | |
* 3. http://maxvoltar.com/archive/-webkit-font-smoothing | |
* | |
* 4. http://maximilianhoffmann.com/posts/better-font-rendering-on-osx |
/* @author Bilal Cinarli */ | |
/** ------------------------------------------- | |
Text Related Functions | |
------------------------------------------- **/ | |
/** | |
* Rem to PX | |
*/ | |
@function rem-to-px($font-size) { | |
$u: unit($font-size); |
/* @author Bilal Cinarli */ | |
/** ------------------------------------------- | |
Media Query Mixins | |
------------------------------------------- **/ | |
/** | |
* Retina Image | |
*/ | |
@mixin retina-image($image, $ext: 'png'){ | |
background-image: url('#{$images}#{$image}.#{$ext}'); |
/* @author Bilal Cinarli */ | |
/** ------------------------------------------- | |
Size Related Mixins | |
------------------------------------------- **/ | |
/** | |
* Square or desired width-height for an element | |
*/ | |
@mixin dims($width, $height: null) { | |
width: $width; |