BoxPistols

<!-- Material Design Components for the WebのCDNの読み込み 
https://github.com/material-components/material-components-web/tree/master/packages/mdc-typography
-->
<h1 class="mdc-typography--display1">マテリアルデザインTypography</h1>
<!-- Tool -->
<hr>
<div class="tool">
 Select a font from the list below:
 <select id="font-select">
  <option value="未設定">未設定</option>

BoxPistols

font-family 検証Win/Mac

A Pen by Pistol on CodePen.

License.

BoxPistols

/**
  * ======= Flex Box =======
  * Example:
  *   @include flex(center, center)
  *   @include flex(null, end, column, nowrap)
*/
@mixin flex($justify:null, $align:null, $column:null, $wrap:null) {
  display:flex;
  /**
    * justify-content / Horizontal ===（1st Argument）

BoxPistols

<section id="first" class="section">
  <div class="section__container">
    <p>First section</p>
    <p>↓Scroll↓</p>
  </div>
</section>
<section id="second" class="section obs">
  <div class="section__container">
    <p>Second section</p>
  </div>

BoxPistols

/* ===== Token ===== */

// font-size: px to rem Auto Calc
export const fz = (px) => {
    /* if html element has font-size get root fontSize
     *     => const fontSize = getComputedStyle( document.documentElement).fontSize
     */
    const fontSize = getComputedStyle(
        document.querySelector('body')
    ).fontSize

BoxPistols

---

---

Welcome to StackEdit!

Hi! I’m your first Markdown file in StackEdit. If you want to learn about StackEdit, you can read me. If you want to play with Markdown, you can edit me. Once you have finished with me, you can create new files by opening the file explorer on the left corner of the navigation bar.

• xxcxxxxxx
ccc

BoxPistols

<div id="page" :class="['hoge', nightMode ? 'theme-dark': '']">
	<label for="theme-toggle"><span>Toggle</span></label>
	<input type="checkbox" id="theme-toggle" v-model="nightMode">
</div>

BoxPistols

h1 Sass mixin Grid

.container AAA
  .row
    .w-1 .w-1
    .w-3 .w-3
    .w-3 .w-3
    .w-5 .w-5
  .row
    .w-sm-2 .w-sm-2

BoxPistols

https://onedrive.live.com?invref=f0ff6a20aca239c5&invscr=90

BoxPistols

@charset "UTF-8";

body {
  background: #234;
  color: #f9f9f9;
  font-weight: 500;
}


/* 見出し関係のスタイル */