nukos

{% 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>

nukos

<h1>Embed Example</h1>
<p>hoge</p>

nukos

// 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

// 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

Prism CSS naming conventions

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

基本

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

カテゴリ

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

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

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

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

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

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

A Pen by nuko's kitchen on CodePen.

License.

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;