bcinarli

# define bourbon path, use a common library for preventing duplicates
add_import_path "path/to/your/bourbon/lib"

### -->> project paths, delete/comment if you use scout, codekit etc.
environment = :production # removes single line comments, keeps css comments
output_style = :compact

css_dir = "styles" #relative to project root
sass_dir = "styles-sass" #relative to project root
images_dir = "images" #relative to project root

bcinarli

@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;

bcinarli

Sass buttons

Button mixin sample build with Sass

A Pen by Bilal Çınarlı on CodePen.

License.

bcinarli

/* @author Bilal Cinarli */

/** -------------------------------------------
    Size Related Mixins
    ------------------------------------------- **/
/**
 * Square or desired width-height for an element
 */
@mixin dims($width, $height: null) {
    width: $width;

bcinarli

/* @author Bilal Cinarli */

/** -------------------------------------------
    Media Query Mixins
    ------------------------------------------- **/
/**
 * Retina Image
 */
@mixin retina-image($image, $ext: 'png'){
    background-image: url('#{$images}#{$image}.#{$ext}');

bcinarli

/* @author Bilal Cinarli */

/** -------------------------------------------
    Text Related Functions
    ------------------------------------------- **/
/**
  * Rem to PX
  */
@function rem-to-px($font-size) {
    $u: unit($font-size);

bcinarli

/**
* 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

bcinarli

var app = app || {};

(function(){
  "use strict";
  
  app.Collection = Backbone.Collection.extend({
    model: app.Model,
    // initial sort when collection fetched first time
    comparator: "id"
  });

bcinarli

// 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 {

bcinarli

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);