ruedap

.block
  .block__element foo

.is--responsive
  .block
    .block__element bar

ruedap

html {
  font-family: sans-serif;
}

html {
  -ms-text-size-adjust: 100%;
}

html {
  -webkit-text-size-adjust: 100%;

ruedap

$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
);

ruedap

%ul.List
  %li.List-item.List-item--active 1
  %li.List-item 2
  %li.List-item 3

ruedap

.switch-button
  .switch-button__button.is-active Type A
  .switch-button__button Type B
  .switch-button__button Type C

ruedap

input[type=radio] {
  display: none;

  & + label {
    position: relative;
    padding-left: 24px;
    cursor: pointer;

    &::before,
    &::after {

ruedap

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)

ruedap

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; }}

ruedap

class D3Example
  constructor: (@selector, width, height, @margin) ->
    @el = @defineRootElement(@selector, +width, +height, @margin)

  defineRootElement: (selector, width, height, margin) =>
    @width = width - margin.left - margin.right
    @height = height - margin.top - margin.bottom
    d3.select(selector)
      .append('svg')
      .attr('width', width)

ruedap

class D3Example
  constructor: (@selector, width, height, @margin) ->
    @el = @defineRootElement(@selector, +width, +height, @margin)

  defineRootElement: (selector, width, height, margin) =>
    @width = width - margin.left - margin.right
    @height = height - margin.top - margin.bottom
    d3.select(selector)
      .append('svg')
      .attr('width', width)