Skip to content

Instantly share code, notes, and snippets.

View nukos's full-sized avatar

Ryuichi.N nukos

  • Tokyo/Japan
View GitHub Profile
$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;
}
}
$a-atom-setting: 1 !default;
@mixin a-label($var) {
//attrs
font-size: $var;
@content;
}
$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
nukos / _atom-overlay-badges.scss
Created July 6, 2016 01:50
Example: Atomic Design for SCSS
@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
nukos / Example: $emitと$broadcast.markdown
Created May 21, 2015 04:05
Example: $emitと$broadcast
@nukos
nukos / gulpfile.js
Created April 7, 2015 00:54
image resize task.
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
nukos / website_debut_check_list.md
Last active August 29, 2015 14:17
Webサイト公開前にやっておきたいことリスト

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

  • GoogleAnalytics
    • サイトの登録
    • プロパティ設定
      • ウェブマスター ツール サイトの有効化
      • ユーザー属性とインタレスト カテゴリに関するレポートの有効化
      • 拡張リンク アトリビューションを使用するの有効化
    • トラッキング情報
  • 参照元除外リストの確認
@nukos
nukos / _colors.scss
Last active August 29, 2015 14:16
Prism CSS Color Palette Management.
// 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
nukos / prism-css-naming-conventions-v0.1.0.md
Last active July 1, 2016 03:20
CSS Classの命名規則について

Prism CSS naming conventions

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

基本

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

カテゴリ

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

@nukos
nukos / _color_palettes_mixins.scss
Created March 6, 2015 12:22
SCSS Color Code Managemant Mixins.
// 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: