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 ) {
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;
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(){
View website_debut_check_list.md

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

  • GoogleAnalytics
    • サイトの登録
    • プロパティ設定
      • ウェブマスター ツール サイトの有効化
      • ユーザー属性とインタレスト カテゴリに関するレポートの有効化
      • 拡張リンク アトリビューションを使用するの有効化
    • トラッキング情報
      • 参照元除外リストの確認
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;
View prism-css-naming-conventions-v0.1.0.md

Prism CSS naming conventions

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

基本

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

カテゴリ

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

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: