Button mixin sample build with Sass
A Pen by Bilal Çınarlı on CodePen.
/* @author Bilal Cinarli */ | |
/** ------------------------------------------- | |
Size Related Mixins | |
------------------------------------------- **/ | |
/** | |
* Square or desired width-height for an element | |
*/ | |
@mixin dims($width, $height: null) { | |
width: $width; |
/* @author Bilal Cinarli */ | |
/** ------------------------------------------- | |
Media Query Mixins | |
------------------------------------------- **/ | |
/** | |
* Retina Image | |
*/ | |
@mixin retina-image($image, $ext: 'png'){ | |
background-image: url('#{$images}#{$image}.#{$ext}'); |
/* @author Bilal Cinarli */ | |
/** ------------------------------------------- | |
Text Related Functions | |
------------------------------------------- **/ | |
/** | |
* Rem to PX | |
*/ | |
@function rem-to-px($font-size) { | |
$u: unit($font-size); |
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 |
// 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 { |
# 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 |
@mixin fontface($name, $file, $weight: normal, $style: normal){ | |
@font-face { | |
font-family: "#{$name}"; | |
src: url('../fonts/#{$file}.eot'); | |
src: url('../fonts/#{$file}.eot?#iefix') format('embedded-opentype'), | |
url('../fonts/#{$file}.woff') format('woff'), | |
url('../fonts/#{$file}.ttf') format('truetype'), | |
url('../fonts/#{$file}.svg?#webfont') format('svg'); | |
font-weight: $weight; | |
font-style: $style; |
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); |