Skip to content

Instantly share code, notes, and snippets.

Ryuichi.N nukos

View GitHub Profile
View _data_state.scss
$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;
}
}
View _atoms-hoge.scss
$a-atom-setting: 1 !default;
@mixin a-label($var) {
//attrs
font-size: $var;
@content;
}
View _material-design-shadow-sass-fanction.scss
$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 Jul 6, 2016
Example: Atomic Design for SCSS
View _atom-overlay-badges.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 / gulpfile.js
Created Apr 7, 2015
image resize task.
View gulpfile.js
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 Aug 29, 2015
Webサイト公開前にやっておきたいことリスト
View website_debut_check_list.md

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

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

Prism CSS naming conventions

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

基本

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

カテゴリ

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

@nukos
nukos / _color_palettes_mixins.scss
Created Mar 6, 2015
SCSS Color Code Managemant Mixins.
View _color_palettes_mixins.scss
// 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:
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.