MUSUBii(ムスビー)は、日本語ウェブサイトの下地として使える CSS フレームワークです。
- musubii — MUSUBii 本体
- musubii-optimize — MUSUBii のクラス名最適化ツール
Simple CSS Framework for JP
Home Page: https://musubii.qranoko.jp
MUSUBii(ムスビー)は、日本語ウェブサイトの下地として使える CSS フレームワークです。
游ゴシックの調整CSSがChrome58で効かなくなった。
http://qiita.com/RinoTsuka/items/1a86fbb719e0a76a3784
効かないとどうなるか。
win7でライトが当たると薄すぎる。また、YakuHanJPとの差が顕著↓
サイズ指定を間違えているので、通常のcode
より小さくなってしまっている。
before
.wysiwyg :not(pre) code {
font-size: 0.765em;
}
after
.wysiwyg :not(pre) code {
font-size: 0.875em;
}
.select[multiple] {
height: auto;
}
ブロック要素のmarginは、基本的に後ろの要素が前との距離を取るmargin設定を行っているが、グリッドは初期に作ったため、そのルールにのっとっていない。検討する。
.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;
}
}
musubii.min.css
は52.9KB).is-fit
の幅を1emに修正。
デフォルトCSSじゃない方までappearanceかかっているじゃない。消そう。
ただし、selectは矢印まで消えるので残すこと。
.fieldset
を追加。
書くのを忘れていた。_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;
}
}
}
どうやら、input type="datetime"は廃止されてるようだ。
他のモジュール調整を継承(a
pre
code
)。
よくあるサイトレイアウト、WordPressテーマベースを先に作っておきたい。
moftone v2.0.0 > v3.0.0
幅の指定はHTMLもしくはプロジェクトごとのCSSにゆだねるので削除。
@for $i from 1 through $split-table {
.table .box.is-width-#{$i} {
width: 100% / $split-table * $i;
}
}
グリッド・ボタン・フォーム・テーブルなどのレスポンシブ化CSSは似通っているので、まとめて書くこともできるのでは?
100vh超えた場合にコンテンツがセクションをまたぐ可能性。
IEバグを念のためチェック。
前回のアップデートで消している予定だった。
* {
&.is-none-touch {
@include touch {
display: none;
}
}
&.is-none-landscape {
@include landscape {
display: none;
}
}
&.is-none-portrait {
@include portrait {
display: none;
}
}
}
Shitaji.CSS
v3.0.0 > v4.0.0
CDNサービスとして配信をお願いしてきたjsDelivrが、npmとGitHubにアップしたものを自動的に取得する仕様に変わった。旧配信URLは残る。新しいアップデートは配信URLが変わっているので、ドキュメント・デモページに記載する。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/qrac/[email protected]/docs/css/musubii.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/docs/css/musubii.min.css">
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;
}
}
(ontouchstart="")つけないと動作しない。
感覚的な判断で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/
不躾な質問ですが、どうぞ宜しくお願いします。
モジュールの組み合わせによってmargin-topを設定しているが、場合によっては小さくしたり大きくしたい場合もあるので.is-margin-sm
などの追記で調整できないだろうか。
サイドバーによくあるレクタングルサイズ固定などを検討
ラベルをつけていた頃のCSS構成が残っているのでシンプルにする。
不要なCSSを削除。
* {
&.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;
}
}
}
preとテーブルのスクロールに-webkit-overflow-scrolling: touch;
をつけるかどうか。
http://codepen.io/qrac/pen/qmxYZX
数人からの賛同を得たので付与してみる。
使う人がいるかもしれないので、追加しといた方がいいかも。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.