SCSS partials
CSS HTML
Latest commit 3a8f983 Apr 13, 2016 @hail2u Remove files field
Permalink
Failed to load latest commit information.
test Compat with `gh-pages` Jun 20, 2014
README.md add _centering.scss Nov 22, 2013
_black-prints.scss Use `black` instead of `currentColor` keyword Mar 2, 2014
_centering.scss add _centering.scss Nov 22, 2013
_clearfix.scss add microclearfix_block mixin Nov 6, 2013
_context-reset.scss add _context-reset.scss Feb 13, 2012
_corporate-colors.scss add brands May 31, 2013
_elegant-button.scss correct misspelling: ellegant -> elegant Apr 27, 2012
_emboss.scss initial commit Feb 13, 2011
_fake-aa.scss rename utils to fake-aa Apr 27, 2012
_grid-overlay.scss remove `-ms-` prefix from `linear-gradient()` Jul 11, 2012
_image-replacement.scss add `direction` for a RTL environment Jul 6, 2013
_lego-colors.scss add _lego-colors.scss Jun 11, 2013
_meyerweb-reset.scss remove trailing spaces Jul 7, 2012
_natural.scss Lint free Feb 15, 2015
_normalize.scss update _normalize.scss May 26, 2013
_reset.scss use single colon for `:before` and `:after` Mar 24, 2012
_selection.scss add `_selection.scss` Jul 13, 2012
_speech-bubble.scss use single colon for `:before` and `:after` Mar 24, 2012
_vanilla.scss use single colon for `:before` and `:after` Mar 24, 2012
_vendor-extension.scss Update prefixes Feb 13, 2015
_yui-base-min.scss initial commit Feb 13, 2011
_yui-fonts-min.scss initial commit Feb 13, 2011
_yui-reset-min.scss use single colon for `:before` and `:after` Mar 24, 2012
bower.json Version 1.3.1 Feb 15, 2015
package.json Remove files field Apr 12, 2016

README.md

SCSS Partials

SCCSファイルでインポートして使用する端切れ(partial)を放り込むリポジトリです。

INSTALLATION

Three options are available:

  1. Download package
  2. Clone with Git: $ git clone https://github.com/hail2u/scss-partials.git
  3. Install with Bower: $ bower install --save-dev hail2u-scss-partials

USAGE

@importを使ってSCSSファイルでインポートします。

@import "reset";
@import "clearfix";

拡張子とファイル名の先頭の_は不要です。

_clearfix.scss

clearfixを適用することができます。

header {
  @include clearfix;
}

IE6等のサポートが必要ないなら、生成されるコードがシンプルなminiclearfixを使用することもできます。

article {
  @include miniclearfix;
}

_emboss.scss

文字にtext-shadowによる軽いエンボスをかけることができます。

h1 { @include black-emboss(); }

_meyerweb-reset.scss

meyerwebで公開されているReset CSSをインポートすることができます。

_natural.scss

結局どうすればいいの? - Dive Into HTML5などで使われているシンプルなスタイルをインポートすることができます。文字や背景、リンクなどの色やフォントサイズ等の設定を変更することも可能です。

$link: green;
$font-size: 12px;

@import "natural";

_reset.scss

hail2u.netで使用していたリセットCSSをインポートすることができます。

_speech-bubble.scss

吹き出しを作ることができます。

.speech-bubble {
  @include speech-bubble(#9cf, 6px, 12px, $24px);
}

枠線付きを作ることもできます。

.bordered-speech-bubble {
  @include bordered-speech-bubble(#9cf, #369, 4px, 8px, 16px, $24px);
}

引数

  1. $bgcolor: 背景及び吹き出しの尻尾の色
  2. $round-size: 吹き出しの四隅の丸さ
  3. $tail-size: 吹き出しのサイズ
  4. $tail-position: 吹き出しの位置

_vanilla.scss

Vanilla CSS Un-Resetをインポートすることができます。

_vendor-extension.scss

ベンダー拡張プロパティとCSS3でのプロパティを一括指定することができます。

  • box-sizing
  • transform
  • transform-origin
  • transform-style
  • perspective
  • perspective-origin
  • backface-visibility
  • transition
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

値の指定はCSS3の仕様に従います。

_yui-base-min.scss

YUI 3のCSS Baseをインポートすることができます。

_yui-fonts-min.scss

YUI 3のCSS Fontsをインポートすることができます。インポートしたドキュメントでは変数を使ってフォントサイズの変更が行えます。

h1 {
  font-size: $yui-24px;
}

$yui-10pxから$yui-26pxまで定義されています。

_yui-reset-min.scss

YUI 3のCSS Resetをインポートすることができます。

_fake-aa.scss

CSS Transformのrotate(360deg)で軽くぼかしがかかることを利用して、Google Chromeでフォントがギザギザに見えることがある問題への対処を行います。

.fake-aa {
  @include fake-aa;

  font-family: "MS PMincho", serif;
}

_grid-overlay.scss

ページ全体にグリッドのオーバーレイ画像をCSSグラデーションを利用して表示します。CSSグラデーションを利用しているためInternet Explorer 9以下やOpera 10以下では表示されません。

body {
  @include grid-overlay(60px, 20px);
}

引数

  1. $column: カラムの幅
  2. $gutter: 溝(カラムとカラムの間)の幅

_normalize.scss

normalize.cssをインポートすることができます。

_context-reset.scss

全てのプロパティーをその初期値にリセットすることができます。

_elegant-button.scss

少しグラデーションのかかったきれいなボタンを作ることができます。

.elegant-button {
  @include elegant-button(#39c, #fff);
}

引数

  1. $bg: ボタンの背景色
  2. $fg: ボタンの前景色(文字色)

_image-replacement.scss

画像置換を行うためのテキストを隠すためのスタイルを導入できます。置換する画像の指定やサイズの決定は行えません。text-indentプロパティーを使ったものとfont-sizeプロパティーを使ったもの、擬似要素を使ったものの3種類があります。

_black-prints.scss

印刷向けに文字色や背景色をモノクロにリセットするためのスタイルを導入できます。印刷向けスタイルシートをインラインで埋め込む時に役に立ちます。

_corpolate-colors.scss

様々な企業のコーポレートカラーを手軽に参照できます。

_selection.scss

選択した時のスタイルをまとめて指定できます。

::-moz-selection {
  @include selection(#fff, #369);
}

::selection {
  @include selection(#fff, #369);
}

_lego-colors.scss

レゴブロックのカラースキームを手軽に参照できます。

_centering.scss

縦方向または横方向、及び両方向に中央揃えすることができます。

.centered-hv {
  @include centering-known();

  width: 80px;
  height: 80px;
}

widthheightプロパティーは必須です。ウィンドウではなく親要素のサイズを基準に中央揃えしたい場合は、親要素にposition: relativeが必要になります。

centering-unknownというミックスインもありますが実験段階で、上手く動かないかもしれません。

引数

  1. $horizontal: 横方向に中央揃えするかどうか
  2. $vertical: 縦方向に中央揃えするかどうか

LICENSE

SCSSファイルにライセンス条項が明記されていない限りすべてパブリック・ドメインとして提供されています。