View foo.md

グローバルCSS

「グローバルCSS」とは、後述する「スコープ付きCSS」の対義語として使っている用語で、スコープ付きCSS以外のすべてのCSSを指します。 グローバルCSSのディレクトリ構成は、application.scssをCSSファイルの起点として、同じ階層に以下のディレクトリを作成しこの並び順に読み込まれる(カスケードする)ようにします

  1. abstractions (抽象)
  2. basics (基礎)
  3. components (部品)
  4. decorations (装飾)
  5. extras (臨時)
View markdo
## グローバルCSS
「グローバルCSS」とは、後述する「スコープ付きCSS」の対義語として使っている用語で、スコープ付きCSS以外のすべてのCSSを指します。
グローバルCSSのディレクトリ構成は、`application.scss`をCSSファイルの起点として、同じ階層に以下のディレクトリを作成し**この並び順に読み込まれる(カスケードする)ようにします**。
1. abstractions (抽象)
2. basics (基礎)
3. components (部品)
4. decorations (装飾)
5. extras (臨時)
View SassMeister-input-HTML.haml
.block
.block__element foo
.is--responsive
.block
.block__element bar
View daplog-edjo.css
html {
font-family: sans-serif;
}
html {
-ms-text-size-adjust: 100%;
}
html {
-webkit-text-size-adjust: 100%;
View gist:af5647f29bba99abfa9d
$mq-min-width-mobile: null;
$mq-min-width-tablet: 768px;
$mq-min-width-desktop: 992px;
$mq-min-breakpoints: (
mobile: $mq-min-width-mobile,
tablet: $mq-min-width-tablet,
desktop: $mq-min-width-desktop
);
View SassMeister-input-HTML.haml
%ul.List
%li.List-item.List-item--active 1
%li.List-item 2
%li.List-item 3
View switch-button.png
.switch-button
.switch-button__button.is-active Type A
.switch-button__button Type B
.switch-button__button Type C
View gist:fb404d8cf8d2d4cc5775
input[type=radio] {
display: none;
& + label {
position: relative;
padding-left: 24px;
cursor: pointer;
&::before,
&::after {
View D3Example.js.coffee
class D3Example
constructor: (@selector, width, height, @margin, hasBorder) ->
@margin = top: 20, right: 20, bottom: 20, left: 20 unless @margin
@el = @defineRootElement(@selector, +width, +height, @margin, hasBorder)
defineRootElement: (selector, width, height, margin, hasBorder) =>
@width = width - margin.left - margin.right
@height = height - margin.top - margin.bottom
d3.select(selector)
View untitled.rb
require 'pathname'
require 'rmagick'
images = Dir['*.png']
images.each {|image| i = Magick::Image.read(image).first; i.write(Pathname(image).sub_ext('.jpg')) { self.format='JPEG'; self.quality=80; }}