pug (Jade) + semantic ui

[tohshige]

Note Of Pug (Jade)

https://www.tam-tam.co.jp/tipsnote/html_css/post12789.html

Pugを記述してリアルタイムにHtml確認

http://aramboyajyan.github.io/online-jade-template-editor/

DWで編集しておいてHTMLを貼り付け　PUGへ

http://html2jade.aaron-powell.com/

SemanticUI

responsive.html https://semantic-ui.com/examples/responsive.html grid.html https://semantic-ui.com/examples/grid.html Class指定だけで使えるパーツ https://semantic-ui.com/examples/theming.html

[tohshige]

同じようなかごをパーツ化できる

//parts of kago
mixin pad(color,itemcode)
  .pad
    span.item_name
      span= color
    select.ui.right.big.label(name=itemcode)
      option 数量
      option 1
      option 2
    | 個
    label
      .ui.primary.tiny.button.cartAddBtn
        input(type='checkbox', name='chk', value='1')
        |  買い物カゴに追加する

//呼び出し
+pad('　レッドを', '10003922_8864_2_5980')
+pad(' ブラックを','10003922_8865_2_5980')

HTMLに書き出し

<div class="pad"><span class="item_name"> <span>　レッドを</span></span>
  <select class="ui right big label" name="10003922_8864_2_5980">
    <option selected="">数量</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>個
  <label>
    <div class="ui primary tiny button cartAddBtn">
      <input type="checkbox" name="chk" value="1"> 買い物カゴに追加する
    </div>
  </label>
</div>

<div class="pad"><span class="item_name"> <span> ブラックを</span></span>
  <select class="ui right big label" name="10003922_8865_2_5980">
    <option selected="">数量</option>
    <option value="1">1</option>
    <option value="2">2</option>
  </select>個
  <label>
    <div class="ui primary tiny button cartAddBtn">
      <input type="checkbox" name="chk" value="1"> 買い物カゴに追加する
    </div>
  </label>
</div>
<hr>

[tohshige]

rcart html generator

• 目的：htmlのあちこちに散らばったidの貼り付けなど 間違うべくして間違うようなルーチンワークを少しでも低減

  /used/pc.html　のパーツテンプレート

  https://github.com/tohshige/test/blob/master/used1/pugorg/mixins.pug

分解していくと以下の５パターンのパーツで構成されていた

将来的に突き詰めてCSVながして一発で作成とか、それでもデザイン画像Cssなどの調整は必須

//１つの商品
mixin item()
  .item

//商品画像-item img header
mixin itemImg(itemName,right)

//Selectboxなどのカゴ-parts of kago
mixin pad(color,itemcode,padStyle)

//商品スペックボタン- spec modal btn
mixin specBtn()

//商品画像ロールオーバー切り替え-rollover images
mixin rolloverImage(itemName,images)

//-商品説明モーダル
未pug可

[tohshige]

１商品 :HTML ４５行、PUG ４行に圧縮

<!-- 1つめ分 -->
 <div class="item">
   <div class="image"></div>
   <div class="content">
     <h3 class="header"></h3>
     <div class="description"></div>
     <div class="description">
       <div class="pad"><span class="item_name">　レッドを</span>
         <select class="ui right big label" name="10003922_8864_2_5980">
           <option>数量</option>
           <option>1</option>
           <option>2</option>
         </select>個
         <label>
           <div class="ui primary tiny button cartAddBtn">
             <input type="checkbox" name="chk" value="1"/> 買い物カゴに追加する
           </div>
         </label>
       </div>
       <div class="pad"><span class="item_name">ブラックを</span>
         <select class="ui right big label" name="10003922_8865_2_5980">
           <option>数量</option>
           <option>1</option>
           <option>2</option>
         </select>個
         <label>
           <div class="ui primary tiny button cartAddBtn">
             <input type="checkbox" name="chk" value="1"/> 買い物カゴに追加する
           </div>
         </label>
       </div>
       <hr/>
       <div class="supec_btn"><a class="modal-nice arrow_01" href="#">> 商品内容はこちら</a><a class="modal-sinpin arrow_01" href="#">> 新品同様/特価良品とは</a></div>
     </div>
   </div>
 </div>
 <!-- 1つめ分完了 -->

PUG ４行に圧縮

 // 1つめ分 
 +item
   +pad('　レッドを', '10003922_8864_2_5980')
   +pad('ブラックを','10003922_8865_2_5980','')
   +specBtn()(class='modal-'+ itemName)
 // 1つめ分完了

[tohshige]

レスポンシブ　BreakPoint　750pxくらいで http://w3q.jp/t/11974

[tohshige]

SemanticUI

responsive.html https://semantic-ui.com/examples/responsive.html grid.html https://semantic-ui.com/examples/grid.html Class指定だけで使えるパーツ https://semantic-ui.com/examples/theming.html

[tohshige]

semantic-ui media query

@media only screen and (max-width: 767px) {
@media only screen and (min-width: 768px) and (max-width: 991px) {
@media only screen and (min-width: 992px) and (max-width: 1199px) {
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
@media only screen and (min-width: 1920px) {

[tohshige]

normarize.css (ブラウザ依存CSSを吸収)　は Semantic.cssに内蔵されてので。指定の必要なし。 https://github.com/tohshige/test/blob/master/used1r/css/semantic.css#L49 used1r の方はUpdateしたので一応最新