nukos

$mix-data-state-prefix: 'is' !default;
$mix-data-state-attr: 'data' !default;

@mixin data-state($name, $state: true, $attr: $mix-data-state-attr, $prefix: $mix-data-state-prefix) {
  &[#{$attr}-#{$prefix}-#{$name}=#{$state}] {
    @content;
  }
}

nukos

$a-atom-setting: 1 !default;
@mixin a-label($var) {
  //attrs
  font-size: $var;
  @content;
}

nukos

$shadow-x-ratio:    0.375 !default;
$shadow-y-ratio:    0.375 !default;
$shadow-blur-lower: 1 !default;
$shadow-blur-ratio: 1 !default;
$shadow-color:      #000000 !default;
$shadow-alpha-init: 0.375 !default;
$shadow-alpha-lower: 0.175 !default;
$shadow-alpha-ratio: 0.005 !default;

@function layer-shadow( $dp: 0, $x: 0px, $y: 1px, $blur: 1px ) {

nukos

@mixin atom-overlay-badges {
  position:       absolute;
  margin:         0;
  padding:        vr(.2) vr(.3);

  line-height:    vr(1);
  font-size:      modular-scale(-4);
  font-weight:    bold;
  color:          #fff;

nukos

Example: $emitと$broadcast ('-' * 25)

A Pen by nuko's kitchen on CodePen.

License.

nukos

var gulp        = require('gulp');
var filelog     = require('gulp-filelog');
var glob        = require('glob-all');
var imageResize = require('gulp-image-resize');

var paths = {
  srcDir : 'source/articles'
}

gulp.task( 'image-optim:thumb', function(){

nukos

サイト立ち上げ時に最低限やっておきたいこと

• GoogleAnalytics
  • サイトの登録
  • プロパティ設定
    • ウェブマスター ツール サイトの有効化
    • ユーザー属性とインタレスト カテゴリに関するレポートの有効化
    • 拡張リンク アトリビューションを使用するの有効化
  • トラッキング情報
• 参照元除外リストの確認

nukos

// Prism 0.1.0
// http://prism.nukos.kitchen/
// Copyright 2015 nuko's kitchen
// MIT License

$COLOR-PRIMARY:        #fafafa !default;

$COLOR-TEXT_BASE:      #444444 !default;
$COLOR-TEXT_INVERSE:   #eeeeee !default;

nukos

Prism CSS naming conventions

SMACSSとSUIT CSS naming conventionsをベースに個人的なプロジェクトのみで使用するクラス名の命名規則について考えてみた。

基本

IDはスタイリングに使わずクラスのみを使用する。

カテゴリ

カテゴリ表すためにプレフィックスを使用する。

nukos

// Mixin to return the color code
// 
// $property_name - The name of the property.
// $args          - Argments.
//   - name     : Component name.
//   - palettes : Palettes Array (Default: $PALETTES).
//   - state    : <Option> State Name (Default: normal).
//   - theme    : <Option> Theme Name (Default: base). 
// 
// EXAMPLE: