colmtuite

const Button = styled.button`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  user-select: none;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;

colmtuite

import React from 'react'
import PropTypes from 'prop-types';

const alignment = {
  left: 'flex-start',
  center: 'center',
  right: 'flex-end'
}

const alignItems = alignment[align]

colmtuite

var cards = $.map(ui.item.parent('.js-CardsContainer .js-CardContainer'), function(el) {
    return {
        list_id: list_id,
        order: $(el).index()
    };
});

colmtuite

<button>Click me</button>

colmtuite

class Website < ApplicationRecord

    after_commit :update_slug, on: :create

    extend FriendlyId
    friendly_id :name, use: :slugged

    def update_slug
        unless slug.include? self.id.to_s
          self.slug = nil

colmtuite

Started GET "/w/1-untitled-website" for ::1 at 2017-01-29 11:25:40 +0000
Processing by WebsitesController#show as HTML
  Parameters: {"id"=>"1-untitled-website"}
  User Load (0.3ms)  SELECT  "users".* FROM "users" WHERE "users"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
  Website Load (0.3ms)  SELECT  "websites".* FROM "websites" WHERE "websites"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]
   (0.2ms)  SELECT COUNT(*) FROM "websites" WHERE "websites"."id" = ? AND "websites"."name" IS NULL  [["id", 1]]
Redirected to http://localhost:3000/w/1-untitled-website
Completed 302 Found in 6ms (ActiveRecord: 0.8ms)

colmtuite

<% @wall.lists.order(:order).where(archived: false).each do |list| %>
                <div>
                    <div class="bc-snow bw-1 bs-solid borderColor-silver br-m js-ListOutline">
                        <div class="bc-snow pt-xxs pb-xxs pl-xs pr-xs br-m">
                            <h4 class="fs-l ls-s fw-5 os-none js-ListTitle js-PreventLineBreak js-SelectAll js-FluidLeading" contenteditable="true" placeholder="List title..." spellcheck="false"><%= list.name %></h4>
                        </div>
                        <div class="oy-auto js-ListScrollContainer">
                            <div class="pl-xs pr-xs">
                                <ul class="height-100 mt-fc js-CardsContainer js-Sortable margin-0 padding-0 lst-none">
                                    <% list.cards.order(:order).where(archived: false).each do |card| %>

colmtuite

<div style="display: flex; flex-wrap: wrap; column-count: 2;">
  <div>I am on line 1.</div>
  <div>I am on line 1.</div>
  <div>I am on line 2.</div>
  <div>I am on line 2.</div>
</div>

colmtuite

<button class="button button--m button--flat bc-blue color-white">Button</button>
<button class="button button--m button--flat bc-red color-white">Button</button>
<button class="button button--m button--flat bc-green color-white">Button</button>

colmtuite

/* Root styles */

.button {
  display: inline-block;
  vertical-align: middle;
  appearance: none;
  white-space: nowrap;
  outline-style: none;
  user-select: none;
  font-weight: 500;