spuit 0.0.6

data/assets/stylesheets/spuit/variables/_defaults.scss

@@ -0,0 +1,3 @@
+$gradient: linear-gradient(to right bottom, #000 0%, lighten(#000, 10%) 100%) !default;
+$shadow: 0px 5px 10px rgba(0, 0, 0, 0.1) !default;
+$transition: all 0.2s ease-out !default;

data/assets/stylesheets/spuit/variables/_fonts.scss

@@ -0,0 +1,6 @@
+$font-sans: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif !default;
+$font-serif: 'ヒラギノ明朝 Pro W6', 'Hiragino Mincho Pro', 'HGS明朝E', 'ＭＳ Ｐ明朝', serif !default;
+
+$font-yu: YuGothic, '游ゴシック',$font-sans !default;
+$font-yumin: YuMincho, '游明朝',$font-serif !default;
+$font-code: Consolas, 'Courier New', Courier, monospace !default;

data/assets/stylesheets/spuit/variables/_media-queries.scss

@@ -0,0 +1,31 @@
+$grid-breakpoints: (
+  xs: 0,
+  sm: 34em,
+  md: 48em,
+  lg: 62em,
+  xl: 75em
+) !default;
+
+$grid-breakpoints-px: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+$grid-breakpoints-bs3: (
+  xs: 0,
+  sm: 34em,
+  md: 48em,
+  lg: 62em
+) !default;
+
+$grids-breakpoints-bs3-px: (
+  xs: 0,
+  sm: 750px,
+  md: 970px,
+  lg: 1170px
+) !default;
+
+$media-retina: (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi);

data/assets/stylesheets/spuit/variables/_svgs.scss

@@ -0,0 +1,7 @@
+$svg-hamburger: '%0A%3Csvg%20width%3D%2228px%22%20height%3D%2224px%22%20viewBox%3D%226%208%2028%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3Crect%20id%3D%22Rectangle%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20x%3D%226%22%20y%3D%228%22%20width%3D%2228%22%20height%3D%224%22%3E%3C/rect%3E%0A%20%20%20%20%3Crect%20id%3D%22Rectangle1%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20x%3D%226%22%20y%3D%2218%22%20width%3D%2228%22%20height%3D%224%22%3E%3C/rect%3E%0A%20%20%20%20%3Crect%20id%3D%22Rectangle2%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20x%3D%226%22%20y%3D%2228%22%20width%3D%2228%22%20height%3D%224%22%3E%3C/rect%3E%0A%3C/svg%3E';
+
+$svg-twitter:  '%3Csvg%20width%3D%2226px%22%20height%3D%2222px%22%20viewBox%3D%228%209%2026%2022%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M16.26924%2C30.6112994%20C25.89192%2C30.6112994%2031.15512%2C22.6389794%2031.15512%2C15.7254194%20C31.15512%2C15.4989794%2031.15512%2C15.2735594%2031.13982%2C15.0491594%20C32.163728%2C14.3085485%2033.0475826%2C13.3915364%2033.75%2C12.3410594%20C32.7951566%2C12.7641572%2031.7822459%2C13.0416247%2030.74508%2C13.1641994%20C31.8372389%2C12.5103611%2032.654646%2C11.4819869%2033.04518%2C10.2704594%20C32.0182006%2C10.8798639%2030.894659%2C11.3093417%2029.72304%2C11.5403594%20C28.1013244%2C9.8159416%2025.5244337%2C9.39388427%2023.4373403%2C10.510853%20C21.3502468%2C11.6278216%2020.2720005%2C14.0060317%2020.80722%2C16.3119194%20C16.6006337%2C16.101034%2012.6813653%2C14.1141492%2010.0248%2C10.8457394%20C8.63619521%2C13.2362571%209.34546764%2C16.2944361%2011.64456%2C17.8296794%20C10.811976%2C17.8050031%209.99754496%2C17.5804049%209.27%2C17.1748394%20L9.27%2C17.2411394%20C9.2706815%2C19.7315643%2011.0261865%2C21.8765653%2013.4673%2C22.3696994%20C12.697067%2C22.5797583%2011.8889322%2C22.6104646%2011.10498%2C22.4594594%20C11.7903669%2C24.5906707%2013.7545061%2C26.050659%2015.99282%2C26.0926994%20C14.1402297%2C27.54868%2011.8516807%2C28.3390737%209.49542%2C28.3366994%20C9.07916164%2C28.3359003%208.66330815%2C28.3106971%208.25%2C28.2612194%20C10.6425487%2C29.7966015%2013.4264117%2C30.6110107%2016.26924%2C30.6072194%22%20id%3D%22shape%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22nonzero%22%3E%3C/path%3E%0A%3C/svg%3E';
+
+$svg-hatena: '%0A%3Csvg%20width%3D%2222px%22%20height%3D%2220px%22%20viewBox%3D%229%2010%2022%2020%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M17.91544%2C25.36632%20C17.43128%2C25.66368%2016.59696%2C25.80976%2015.42632%2C25.80976%20L13.69448%2C25.80976%20L13.69448%2C21.83744%20L15.50112%2C21.83744%20C16.70336%2C21.83744%2017.53432%2C21.98864%2017.97632%2C22.29072%20C18.42552%2C22.59296%2018.64648%2C23.12664%2018.64648%2C23.89272%20C18.64648%2C24.57832%2018.40432%2C25.07072%2017.91544%2C25.36632%20Z%20M13.69448%2C14.93992%20L14.75864%2C14.93992%20C15.98848%2C14.93992%2016.81472%2C15.0788%2017.24112%2C15.35504%20C17.66192%2C15.63296%2017.8764%2C16.11224%2017.8764%2C16.79536%20C17.8764%2C17.45248%2017.64808%2C17.91544%2017.1964%2C18.18688%20C16.73904%2C18.45328%2015.9048%2C18.58816%2014.68384%2C18.58816%20L13.69448%2C18.58816%20L13.69448%2C14.93992%20Z%20M22.25328%2C20.64824%20C21.52864%2C19.8384%2020.52144%2C19.38336%2019.22888%2C19.28504%20C20.37848%2C18.9716%2021.21344%2C18.51336%2021.74152%2C17.90088%20C22.26712%2C17.29656%2022.52784%2C16.47616%2022.52784%2C15.44368%20C22.52784%2C14.6264%2022.3492%2C13.90328%2022.00304%2C13.27872%20C21.64816%2C12.658%2021.13792%2C12.16088%2020.46776%2C11.78896%20C19.8812%2C11.4664%2019.18432%2C11.23896%2018.37192%2C11.1048%20C17.55552%2C10.9748%2016.12656%2C10.90912%2014.07624%2C10.90912%20L9.09088%2C10.90912%20L9.09088%2C29.09088%20L14.22736%2C29.09088%20C16.29064%2C29.09088%2017.77888%2C29.01864%2018.68872%2C28.8804%20C19.59768%2C28.73752%2020.36048%2C28.49704%2020.97792%2C28.16736%20C21.74152%2C27.76432%2022.32392%2C27.19088%2022.73096%2C26.45408%20C23.1404%2C25.71488%2023.34344%2C24.86256%2023.34344%2C23.88776%20C23.34344%2C22.53944%2022.98024%2C21.45576%2022.25328%2C20.64824%20L22.25328%2C20.64824%20Z%22%20id%3D%22Fill-4%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%3E%3C/path%3E%0A%20%20%20%20%3Cpath%20d%3D%22M28.60648%2C24.48488%20C27.33392%2C24.48488%2026.30304%2C25.51504%2026.30304%2C26.78752%20C26.30304%2C28.06%2027.33392%2C29.09088%2028.60648%2C29.09088%20C29.87736%2C29.09088%2030.90912%2C28.06%2030.90912%2C26.78752%20C30.90912%2C25.51504%2029.87736%2C24.48488%2028.60648%2C24.48488%22%20id%3D%22Fill-5%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%3E%3C/path%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Fill-6%22%20stroke%3D%22none%22%20fill%3D%22%23FFFFFF%22%20fill-rule%3D%22evenodd%22%20points%3D%2226.60608%2023.0311998%2030.60608%2023.0311998%2030.60608%2010.9099998%2026.60608%2010.9099998%22%3E%3C/polygon%3E%0A%3C/svg%3E';
+
+$svg-facebook: '%0A%3Csvg%20width%3D%2218px%22%20height%3D%2234px%22%20viewBox%3D%2216%206%2018%2034%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M27.4852836%2C39.9843284%20L27.4852836%2C24.558209%20L32.6633433%2C24.558209%20L33.4385672%2C18.5462687%20L27.4852836%2C18.5462687%20L27.4852836%2C14.7079104%20C27.4852836%2C12.9673134%2027.9685672%2C11.781194%2030.4646866%2C11.781194%20L33.6482687%2C11.7797015%20L33.6482687%2C6.40268657%20C33.0975224%2C6.32955224%2031.2078209%2C6.1658209%2029.0093134%2C6.1658209%20C24.4193134%2C6.1658209%2021.2770746%2C8.96746269%2021.2770746%2C14.1126866%20L21.2770746%2C18.5462687%20L16.0858806%2C18.5462687%20L16.0858806%2C24.558209%20L21.2770746%2C24.558209%20L21.2770746%2C39.9843284%20L27.4852836%2C39.9843284%20Z%22%20id%3D%22Fill-4%22%20stroke%3D%22none%22%20fill%3D%22%23FEFEFE%22%20fill-rule%3D%22evenodd%22%3E%3C/path%3E%0A%3C/svg%3E';

data/assets/stylesheets/spuit/variables/_timing-functions.sass

@@ -0,0 +1,37 @@
+// from: https://github.com/thoughtbot/bourbon/blob/master/dist/addons/_timing-functions.scss
+// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
+// Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html
+
+// EASE IN
+$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530)
+$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190)
+$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220)
+$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060)
+$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715)
+$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035)
+$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335)
+$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045)
+
+// EASE OUT
+$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940)
+$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000)
+$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000)
+$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000)
+$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000)
+$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000)
+$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000)
+$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275)
+
+// EASE IN OUT
+$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955)
+$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000)
+$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000)
+$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000)
+$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950)
+$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000)
+$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860)
+$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550)
+
+// (similar elastic).
+$ease-out-elastic: cubic-bezier(0.370, 1.650, 0.410, 0.780)
+$ease-in-elastic: cubic-bezier(0.370, 0.650, 0.410, -0.780)

data/assets/stylesheets/styles.scss

@@ -0,0 +1,164 @@
+@import '../../spuit';
+
+@import 'styles/config/variables';
+@import 'styles/config/mixins';
+
+@include include-animations
+@include include-normalize
+@include include-grid
+
+// basic styles
+
+html {
+  font-size: 100%;
+  @include breakpoint-down(md) {
+    font-size: 80%;
+  }
+}
+
+body {
+  @include font(1rem);
+  color: $color-black;
+}
+
+// demo styles
+
+.demo-styles {
+  color: $color-black;
+
+  h1 {
+    @include font(2.8rem);
+    font-weight: 300;
+  }
+  h2 {
+    @include font(2.0rem);
+    font-weight: 300;
+  }
+  h3 {
+    @include font(1.6rem);
+  }
+  h4 {
+    @include font(1.5rem);
+  }
+  h5 {
+    @include font(1.3rem);
+  }
+  h6 {
+    @include font(1.2rem);
+  }
+  p {
+    @include font(1rem);
+  }
+  form {
+    @include font(1rem);
+  }
+  input[type=text] {
+    @include input;
+  }
+  textarea {
+    @include input;
+    line-height: 1.6rem;
+    height: 120px;
+  }
+  legend {
+    @include font(inherit);
+  }
+  .radio {
+    @include radio-base;
+  }
+  .radio-inside {
+    @include radio-base(span);
+  }
+  .checkbox {
+    @include checkbox-base;
+  }
+  .checkbox-inside {
+    @include checkbox-base(span);
+  }
+  .select {
+    @include select-base;
+  }
+  .table {
+    @include table;
+    margin-bottom: 10px;
+
+    &-line{
+      @include table-line;
+      margin-bottom: 10px;
+    }
+    &-stripe{
+      @include table-stripe;
+      margin-bottom: 10px;
+    }
+  }
+  .fieldset {
+    @include fieldset-flex;
+  }
+  .button {
+    @include button;
+  }
+  .button-semiflat {
+    @include font;
+    @include button-semiflat;
+  }
+  .button-border {
+    @include font;
+    @include button-border;
+  }
+  .button-emboss {
+    @include font;
+    @include button-emboss;
+  }
+  .button-group {
+    display: flex;
+    justify-content: space-between;
+    > * {
+      width: 100%;
+      border-radius: 0;
+      &:first-child {
+        border-radius: 3px 0 0 3px;
+      }
+      &:last-child {
+        border-radius: 0 3px 3px 0;
+      }
+    }
+  }
+  .reset-ul {
+    @include reset-ul;
+  }
+  .word-break {
+    @include word-break;
+    display: inline-block;
+    width: 100px;
+    background: #f8f8f8;
+    padding: 10px;
+  }
+  .word-break-none {
+    @include word-break(false);
+    display: inline-block;
+    width: 100px;
+    background: #f8f8f8;
+    padding: 10px;
+  }
+  .text-overflow {
+    @include text-overflow();
+    display: inline-block;
+    width: 100px;
+    background: #f8f8f8;
+    padding: 10px;
+  }
+
+  .icon-hamburger {
+    @include icon-hamburger;
+  }
+  .icon-twitter {
+    @include icon-twitter;
+  }
+  .icon-facebook {
+    @include icon-facebook;
+  }
+  .icon-hatena {
+    @include icon-hatena;
+  }
+
+}

data/assets/stylesheets/styles/config/_mixins.scss

@@ -0,0 +1,23 @@
+@include include-opensans;
+
+@mixin font($size: 1rem, $line-height: normal, $weight: 400) {
+  font-family: 'Open Sans', $font-sans;
+  font-size: $size;
+  font-weight: $weight;
+  line-height: $line-height;
+}
+
+@mixin button {
+  @include font;
+  @include button-normal;
+}
+
+@mixin input {
+  @include font;
+  @include input-normal(100%);
+}
+
+@mixin table {
+  @include font(1rem);
+  @include table-normal;
+}

data/assets/stylesheets/styles/config/_variables.scss

@@ -0,0 +1,4 @@
+// colors
+$color-black: #444;
+$color-blue: #529ef6;
+$color-pink: #E87571;

data/dist/index.html

@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title></title>
+
+    <link href="/stylesheets/styles.css" rel="stylesheet">
+  </head>
+  <body>
+
+    <div class="container">
+      <div class="row">
+        <div class="col-12">
+          <p>Spuit</p>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+      <div class="row">
+        <div class="col-md-4">
+          <section class="demo-styles">
+            <h2>Text Styles</h2>
+            <h1>heading 1</h1>
+            <h2>heading 2</h2>
+            <h3>heading 3</h3>
+            <h4>heading 4</h4>
+            <h5>heading 5</h5>
+            <h6>heading 6</h6>
+            <p>paragraf <a href="#">link</a> <b>bold</b></p>
+          </section>
+        </div>
+        <div class="col-md-4">
+          <section class="demo-styles">
+            <h2>Utilities</h2>
+            <h3>word break</h3>
+            <p class="word-break">.word-break</p>
+            <br>
+            <p class="word-break-none">.word-break-none</p>
+            <h3>text-overflow</h3>
+            <p class="text-overflow">.text-overflow</p>
+          </section>
+        </div>
+        <div class="col-md-4">
+          <section class="demo-styles">
+            <h2>button styles</h2>
+            <a href="#" class="button">Button</a>
+            <input type="submit" class="button" value="Button" />
+            <button type="button" class="button">Button</button>
+            <a href="#" class="button is-loading">Button</a>
+            <a href="#" class="button-semiflat">Button</a>
+            <a href="#" class="button-border">Button</a>
+            <a href="#" class="button-emboss">Button</a>
+          </section>
+
+          <section class="demo-styles">
+            <h2>icon styles</h2>
+            <i class="icon-hamburger"></i>
+            <i class="icon-twitter"></i>
+            <i class="icon-facebook"></i>
+            <i class="icon-hatena"></i>
+          </section>
+
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-4">
+          <section class="demo-styles">
+            <h2>Form styles</h2>
+
+            <form>
+              <div class="fieldset">
+                <legend>お名前</legend>
+                <div>
+                  <input id="field-text" placeholder="お名前" type="text">
+                </div>
+              </div>
+              <div class="fieldset">
+                <legend>お問い合わせ内容</legend>
+                <textarea cols="50" id="field-textarea" placeholder="お問い合わせ内容を入力下さい" rows="10"></textarea>
+              </div>
+              <div class="fieldset">
+                <legend>ラジオボタン（並列）</legend>
+                <ul class="reset-ul">
+                  <li class="radio">
+                    <input id="field-radio-0" name="field-radio" type="radio" value="0">
+                    <label for="field-radio-0">
+                    ラジオボタン 0
+                    </label>
+                  </li>
+                  <li class="radio">
+                    <input id="field-radio-1" name="field-radio" type="radio" value="1">
+                    <label for="field-radio-1">
+                    ラジオボタン 1
+                    </label>
+                  </li>
+                  <li class="radio">
+                    <input id="field-radio-2" name="field-radio" type="radio" value="2">
+                    <label for="field-radio-2">
+                    ラジオボタン 2
+                    </label>
+                  </li>
+                </ul>
+              </div>
+              <div class="fieldset">
+                <legend>ラジオボタン（入れ子）</legend>
+                <ul class="reset-ul">
+                  <li class="radio-inside">
+                    <label for="field-radio-inside-0">
+                      <input id="field-radio-inside-0" name="field-radio-inside" type="radio" value="0">
+                      <span>
+                      ラジオボタン 0
+                      </span>
+                    </label>
+                  </li>
+                  <li class="radio-inside">
+                    <label for="field-radio-inside-1">
+                      <input id="field-radio-inside-1" name="field-radio-inside" type="radio" value="1">
+                      <span>
+                      ラジオボタン 1
+                      </span>
+                    </label>
+                  </li>
+                  <li class="radio-inside">
+                    <label for="field-radio-inside-2">
+                      <input id="field-radio-inside-2" name="field-radio-inside" type="radio" value="2">
+                      <span>
+                      ラジオボタン 2
+                      </span>
+                    </label>
+                  </li>
+                </ul>
+              </div>
+              <div class="fieldset">
+                <legend>チェックボックス（並列）</legend>
+                <ul class="reset-ul">
+                  <li class="checkbox">
+                    <input id="field-checkbox-0" type="checkbox" value="0">
+                    <label for="field-checkbox-0">
+                    チェックボックス 0
+                    </label>
+                  </li>
+                  <li class="checkbox">
+                    <input id="field-checkbox-1" type="checkbox" value="1">
+                    <label for="field-checkbox-1">
+                    チェックボックス 1
+                    </label>
+                  </li>
+                  <li class="checkbox">
+                    <input id="field-checkbox-2" type="checkbox" value="2">
+                    <label for="field-checkbox-2">
+                    チェックボックス 2
+                    </label>
+                  </li>
+                </ul>
+              </div>
+              <div class="fieldset">
+                <legend>チェックボックス（入れ子）</legend>
+                <ul class="reset-ul">
+                  <li class="checkbox-inside">
+                    <label for="field-checkbox-inside-0">
+                      <input id="field-checkbox-inside-0" type="checkbox" value="0">
+                      <span>
+                      チェックボックス 0
+                      </span>
+                    </label>
+                  </li>
+                  <li class="checkbox-inside">
+                    <label for="field-checkbox-inside-1">
+                      <input id="field-checkbox-inside-1" type="checkbox" value="1">
+                      <span>
+                      チェックボックス 1
+                      </span>
+                    </label>
+                  </li>
+                  <li class="checkbox-inside">
+                    <label for="field-checkbox-inside-2">
+                      <input id="field-checkbox-inside-2" type="checkbox" value="2">
+                      <span>
+                      チェックボックス 2
+                      </span>
+                    </label>
+                  </li>
+                </ul>
+              </div>
+              <div class="fieldset">
+                <legend>セレクトボックス</legend>
+                <div class="select">
+                  <select id="field-select">
+                    <option value="1">選択肢1</option>
+                    <option value="2">選択肢2</option>
+                    <option value="3">選択肢3</option>
+                  </select>
+                </div>
+              </div>
+              <div class="fieldset">
+                <div class="button-group">
+                  <input class="button" type="submit" value="送信">
+                  <input class="button-border" type="reset" value="リセット">
+                </div>
+              </div>
+            </form>
+          </section>
+        </div>
+        <div class="col-md-4">
+          <section class="demo-styles">
+            <h2>Table styles</h2>
+            <table class="table">
+              <thead>
+                <tr>
+                  <th>xxx</th>
+                  <th>xxx</th>
+                  <th>xxx</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                </tr>
+                <tr>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                </tr>
+                <tr>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                </tr>
+              </tbody>
+            </table>
+            <table class="table-line">
+              <thead>
+                <tr>
+                  <th>xxx</th>
+                  <th>xxx</th>
+                  <th>xxx</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                </tr>
+                <tr>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                </tr>
+                <tr>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                </tr>
+              </tbody>
+            </table>
+            <table class="table-stripe">
+              <thead>
+                <tr>
+                  <th>xxx</th>
+                  <th>xxx</th>
+                  <th>xxx</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                </tr>
+                <tr>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                </tr>
+                <tr>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                  <td>xxx</td>
+                </tr>
+              </tbody>
+            </table>
+          </section>
+        </div>
+      </div>
+    </div>
+
+    <div class="container pt-3">
+      <div class="row">
+        <div class="col-12">
+          <p><a href="https://github.com/is8r/spuit" target="_blank">github</a></p>
+        </div>
+      </div>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
+    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> -->
+    <script src="/javascripts/scripts.min.js"></script>
+  </body>
+</html>