Tenderfeel

ShowerCSS

ソーシャルゲームのマークアップを主軸にした大規模開発用のHTML/CSS設計思想。
風呂 https://github.com/hiloki/flocss といったらシャワーだよねっていう

　 　　　*　　　　　　*
　　＊　　　　　＋　　ネタです
　 　　 n ∧＿∧　n
　＋　(ﾖ（* ´∀｀）E)
　 　 　 Y 　　　 Y　　　　＊

Tenderfeel

//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--
// _flex.styl
//
// Flexible Box Layout Module  
// W3C Working Draft, 23 July 2009. stylus & BEMver  
//
//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--

// Flex
//

Tenderfeel

// Align
//
// インライン要素に有効。ブロック要素にはag-flexつかうよろし
//
// .align_c - center
// .align_l - left
// .align_r - right
//
// Markup:
// <p class="{$modifiers}">center</p>

Tenderfeel

/*
abs

position:absoluteによる配置

.abs ... ベース <br>
.abs_mc ... marginによるcenteringの略 <br>
.abs_mc_h ... marginによるセンタリング（horizontal) <br>
.abs_mc_v ... marginによるセンタリング(vertical) <br>
.abs_tc ... translateによるcenteringの略 <br>

Tenderfeel

// Float
//
// floatの操作
//
// .pull_l - left
// .pull_r - right
// .pull_c - clear
//
// Markup:

Tenderfeel

// Nowrap
//
// テキストの折り返しを禁止して、かつ
// テキストがエリアからはみ出る場合に最後の文字の後ろに...を加えて省略する
// ブロック要素にのみ効果あり
//
// Markup:
// <p class="text_nowrap" style="width:60px">ああああああああああああああああああ</p>
//
// Styleguide 3.5

Tenderfeel

// Centering
//
// display:blockにした上で左右marginをautoにする。
//
// Markup:
// <img class="center_block" width="80" height="80">
//
// Styleguide 3.2
//
.center_block

Tenderfeel

@echo off
setlocal enabledelayedexpansion

:start
cls

set COUNT=19
set innerColor=n
set startCnt=2

Tenderfeel

/*
grid

flexと併用できる。<br>
親の横幅が基準になるので、marginやpaddingを指定しているとはみ出す。ag-flex_1の方がいい場合もあります。

http://getbootstrap.com/css/#grid

```
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |

Tenderfeel

//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--
// _spacer.scssより
//--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--*--

/*
 Spacer

  margin, paddingの汎用クラスをカカッとつくる。
  空白の因数x倍率