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

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

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

<button>Click me</button>

colmtuite

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

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

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

.euRYzy { 
  display: -webkit-box; 
  display: -moz-box; 
  display: -ms-inline-flexbox; 
  display: -webkit-inline-flex; 
  display: inline-flex;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;

colmtuite

.euRYzy,
.oEaCQ,
.bJrroZ,
.fgYRvT { 
  display: -webkit-box; 
  display: -moz-box; 
  display: -ms-inline-flexbox; 
  display: -webkit-inline-flex; 
  display: inline-flex;
  align-items: center;

colmtuite

export default class InputGroup extends React.Component {
    render(){
      return (
        <div>
          <Spacing type="padding" position="bottom" size="small">
            <InputLabel>Full name</InputLabel>
          </Spacing>
          <Input type="text" placeholder="Full name"></Input>
          <Spacing type="margin" position="top" size="small">
            <Text size="small" color="lightGray">A little hint below the input</Text>