qrac / musubii Goto Github PK

View Code? Open in Web Editor NEW

149.0 9.0 6.0 4.26 MB

Simple CSS Framework for JP

Home Page: https://musubii.qranoko.jp

HTML 0.66% CSS 59.08% TypeScript 40.15% JavaScript 0.03% PHP 0.08%

css sass scss framework japanese musubii vuepress circleci

musubii's Introduction

MUSUBii

Site & Documentation

https://musubii.qranoko.jp

About

MUSUBii（ムスビー）は、日本語ウェブサイトの下地として使える CSS フレームワークです。

Packages

musubii — MUSUBii 本体
musubii-optimize — MUSUBii のクラス名最適化ツール

Credit

Author: Qrac
Organization: QRANOKO

musubii's People

Contributors

Stargazers

Watchers

Forkers

s-iwagishi yakio0613 hanahana0201 idocci sibukixxx m4k15y6666fk

musubii's Issues

游ゴシックの排除

游ゴシックの調整CSSがChrome58で効かなくなった。

http://qiita.com/RinoTsuka/items/1a86fbb719e0a76a3784

効かないとどうなるか。

win7でライトが当たると薄すぎる。また、YakuHanJPとの差が顕著↓

WYSIWYGのcodeサイズ調整

サイズ指定を間違えているので、通常のcodeより小さくなってしまっている。

before

.wysiwyg :not(pre) code {
  font-size: 0.765em;
}

after

.wysiwyg :not(pre) code {
  font-size: 0.875em;
}

select[multiple]が無い

.select[multiple] {
  height: auto;
}

グリッドのmargin検証

ブロック要素のmarginは、基本的に後ろの要素が前との距離を取るmargin設定を行っているが、グリッドは初期に作ったため、そのルールにのっとっていない。検討する。

ボタンの角丸を相対的なサイズ変更に対応

現在は2pxで統一しているが、2px～4px～で相対的に設定することを検討。

↓絶対値： border-radius: 2px;

↓相対値： border-radius: 0.125em;

グリッド溝を消すクラス追加

.grid.is-gap-none・.grid:not(.is-gap-none)

ボタンCSSの見直し

使用頻度の下がってきているFlatタイプの削除。

.btn.is-flat {
  border-bottom: 3px solid $dark-7;
  transition: none;
  &:hover {
    border-bottom-width: 2px;
    margin-top: 1px;
  }
  &:active {
    border-bottom: 1px solid transparent;
    margin-top: 2px;
  }
  &.is-disable,
  &.is-disable:hover,
  &.is-disable:active {
    border-bottom: 3px solid $dark-9;
    margin-top: 0;
  }
}

AMP対応

50KBまで（v1.2.0のmusubii.min.cssは52.9KB）
!important禁止

inputがiOSでダサいのをなんとかする

デフォルトCSSじゃない方までappearanceかかっているじゃない。消そう。
ただし、selectは矢印まで消えるので残すこと。

WYSIWYG imgタグ周りのマージン設定

書くのを忘れていた。_space.scssのWYSIWYG部分を更新する。

.wysiwyg {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    + h1,
    + h2,
    + h3,
    + h4,
    + h5,
    + h6 {
      margin-top: 1em;
    }
    + img,
    + p,
    + blockquote,
    + pre,
    + ul,
    + ol,
    + table,
    + hr {
      margin-top: 1em;
    }
  }
  img,
  p,
  blockquote,
  pre,
  ul,
  ol,
  table,
  hr {
    + h1,
    + h2,
    + h3,
    + h4,
    + h5,
    + h6 {
      margin-top: 2em;
    }
    + img,
    + p,
    + blockquote,
    + pre,
    + ul,
    + ol,
    + table,
    + hr {
      margin-top: 1em;
    }
  }
}

フォーム用ボタンの文字色調整

↑インプット・セレクト・ボタンのデフォルト文字色が黒すぎる。

↑他の文字色に合わせる。

テーブルCSSの見直し

幅の指定はHTMLもしくはプロジェクトごとのCSSにゆだねるので削除。

@for $i from 1 through $split-table {
  .table .box.is-width-#{$i} {
    width: 100% / $split-table * $i;
  }
}

ボタンとフォームのレスポンシブ対応

グリッド・ボタン・フォーム・テーブルなどのレスポンシブ化CSSは似通っているので、まとめて書くこともできるのでは？

100vhの指定方法

100vh超えた場合にコンテンツがセクションをまたぐ可能性。
IEバグを念のためチェック。

不要なutilityを除去

前回のアップデートで消している予定だった。

* {
  &.is-none-touch {
    @include touch {
      display: none;
    }
  }
  &.is-none-landscape {
    @include landscape {
      display: none;
    }
  }
  &.is-none-portrait {
    @include portrait {
      display: none;
    }
  }
}

jsDelivr リニューアル対応

CDNサービスとして配信をお願いしてきたjsDelivrが、npmとGitHubにアップしたものを自動的に取得する仕様に変わった。旧配信URLは残る。新しいアップデートは配信URLが変わっているので、ドキュメント・デモページに記載する。

MUSUBii / jsDelivr - GitHub

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/qrac/[email protected]/docs/css/musubii.min.css">

MUSUBii / jsDelivr - npm

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/docs/css/musubii.min.css">

select[multiple]のpadding調整

デスクトップで見たときにselectよりoptionにpaddingつけた方がいいなと思って修正したけれど、iOSで効いていないみたい。ボタンがつぶれて見えてしまうのでまずい。

リンクの下線調整

IE11だとinheritでテキストの色が引き継がれない。currentColorを使う。

before

.text.is-link {
  cursor: pointer;
  border-bottom: 1px solid;
  &:hover {
    border-bottom-color: transparent;
  }
}

.text.is-link-reverse {
  cursor: pointer;
  border-bottom: 1px solid transparent;
  &:hover {
    border-color: inherit;
  }
}

.wysiwyg a {
  cursor: pointer;
  color: $primary;
  border-bottom: 1px solid;
  &:hover,
  &:active {
    border-bottom-color: transparent;
  }
}

after

.text.is-link {
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  &:hover {
    border-bottom-color: transparent;
  }
}

.text.is-link-reverse {
  cursor: pointer;
  border-bottom: 1px solid transparent;
  &:hover {
    border-color: currentColor;
  }
}

.wysiwyg a {
  cursor: pointer;
  color: $primary;
  border-bottom: 1px solid currentColor;
  &:hover {
    border-bottom-color: transparent;
  }
}

iOSでflexboxの等分要素が折り返さないバグを修正

.is-mobile-0などで等分しつつ広がる要素がiOSでのみ折り返さずにはみ出る。

flex: 1 0 0%;をflex: 1 0 auto;に変更することで解決する。

ボタンホバー時の変化速度を0.12sに変更

感覚的な判断でtransition: ease-out 0.15s;を設定してきたが、RAIL | Google Developersを考慮し修正を加える。

CSSのみのアニメーション設定としては0.16sをクリアしているが、マシンの処理による遅延やスクリプトの実行が絡むことを想定し、0.12sに早める。

※v2.3.0時点で、MUSUBiiには.btn以外にtransitionを使っていない。

qracさんはじめまして。とてもよいフレームワークですね。一つ教えてください。下記デモをモバイルサイズで表示した場合、メインメニューにスクロールバーが表示される（折り返されない）のは意図した（何らかの外的要因による）挙動でしょうか？また、このことに関連することとして、DOCUMENTATIONには他のフレームワークによくあるナビゲーション部品(nav/navbar)が見当たりませんが、これは、今後開発予定なのか、それとも何らかの設計**があって敢えて作っていないのでしょうか？
https://qrac.github.io/musubii/

不躾な質問ですが、どうぞ宜しくお願いします。

* {
  &.is-small {
    font-size: 80%;
  }
  &.is-super {
    vertical-align: super;
    font-size: 70%;
  }
  &.is-none-touch {
    @include touch {
      display: none;
    }
  }
  &.is-none-landscape {
    @include landscape {
      display: none;
    }
  }
  &.is-none-portrait {
    @include portrait {
      display: none;
    }
  }
}