Skip to content

Instantly share code, notes, and snippets.

Avatar

Ryuichi.N nukos

  • Tokyo/Japan
View GitHub Profile
@nukos
nukos / index.html
Created Jan 31, 2015
Jekyll for archive list
View index.html
{% for post in site.posts %}
{% capture month %}{{ post.date | date: '%m%Y' }}{% endcapture %}
{% capture nmonth %}{{ post.next.date | date: '%m%Y' }}{% endcapture %}
{% if month != nmonth %}
<li class="list-item">
<a href="/{{ post.date | date: '%Y/%m/' }}">
<span class="item-year" title="{{ post.date | date: '%Y年' }}">{{ post.date | date: '%Y' }}</span>
<span class="item-month" title="{{ post.date | date: '%m月' }}">{{ post.date | date: '%m' }}</span>
</a>
</li>
View example.html
<h1>Embed Example</h1>
<p>hoge</p>
@nukos
nukos / _color_palettes.scss
Last active Aug 29, 2015
SCSS Color Management Mixins.
View _color_palettes.scss
// Mixin to return the color code
//
// $palettes - Array containing the palette.
// $palette_name - The name of the palette.
// $property_name - The name of the property.
// $tone_name - (option) The name of the tone.
// $state_name - (option) The name of the state of tone.
//
@function palette( $palettes, $palette_name, $property_name, $state_name: 'normal', $tone_name: 'base' ){
$error_color : #cc0000;
@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:
@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 / _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 / website_debut_check_list.md
Last active Aug 29, 2015
Webサイト公開前にやっておきたいことリスト
View website_debut_check_list.md

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

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