ksyunnnn

.app

//- 　作業の流れ

  1. 全体の枠組み、headerやcontentを実装 done
  2. ルーティングを実装(top/aboutくらい) done
  3. 子ページを実装
  4. リファクタリング
  
//- ルール

ksyunnnn

$font-size-root: 16px;

$color-describe-casual-use: #333;
$color-describe-key: #eee;

// 継承元としてのみ利用
.class-font-root {
  font-family: monospace;
  font-size: $font-size-root;
}

ksyunnnn

.my-page
  .my-container
    h1 CodePenのためのテンプレート
    hr
    p rowgitを利用して、GistのCSSを読み込んでます。
    ul
      li
        a(href="https://rawgit.com/") https://rawgit.com/
      li
        a(href="https://gist.github.com/ksyunnnn/") https://gist.github.com/ksyunnnn/

ksyunnnn

@mixin max-screen($break-point) {
  @media screen and (max-width: $break-point) {
    @content;
  }
}

@mixin min-screen($break-point) {
  @media screen and (min-width: $break-point) {
    @content;

ksyunnnn

// 好みのスタイル
// * CDN化はこちら https://rawgit.com/

.class-font-root, .my-page {
  font-family: monospace;
  font-size: 16px;
}

.class-font-custom h1, .my-container h1 {
  font-size: 2rem;

ksyunnnn

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,

ksyunnnn

.container
  h1.title Hello, World!
  section.about
    h2 ABOUT
    p これはHTMLとCSSを学ぶためのサンプルコードです。
  section.how_it_works
    h2 HOW IT WORKS
    p 使い方は以下
    ol
      li Githubからソースをダウンロード(もしくはクローン)

ksyunnnn

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="rzSliderDemo">
    <div ng-controller="MainCtrl" class="wrapper">
        
        <article>
             <h2>Range slider</h2>
Min Value:
            <input id="min" type="number" ng-model="minRangeSlider.minValue" />

ksyunnnn

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 100000,
      step: 1000,
      classes: {

ksyunnnn

coding

A Pen by Kobashi syunsuke on CodePen.

License.