qrac / Musubii
Licence: cc0-1.0
Simple CSS Framework for JP
Stars: ✭ 138
Projects that are alternatives of or similar to Musubii
Primitive
⛏️ A front-end design toolkit for developing web apps.
Stars: ✭ 783 (+467.39%)
Mutual labels: framework, scss, sass
Hocus Pocus
Universal and lightweight stylesheet starter kit
Stars: ✭ 128 (-7.25%)
Mutual labels: framework, scss, sass
Css
The CSS design system that powers GitHub
Stars: ✭ 10,670 (+7631.88%)
Mutual labels: framework, scss, sass
Baseguide
Lightweight and robust CSS framework for prototyping and production code.
Stars: ✭ 127 (-7.97%)
Mutual labels: framework, scss, sass
Wordless
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Stars: ✭ 1,374 (+895.65%)
Mutual labels: framework, scss, sass
Quickmenu
The new era of mobile navigation for the web, we're out of hamburgers.
Stars: ✭ 119 (-13.77%)
Mutual labels: scss, sass
Refills
Refills is maintained by the thoughtbot design team. It is funded by
thoughtbot, inc. and the names and logos for thoughtbot are
trademarks of thoughtbot, inc.
Stars: ✭ 1,523 (+1003.62%)
Mutual labels: scss, sass
Frasco
Quick starter for Jekyll including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, ESLint, imagemin, Browsersync, etc.
Stars: ✭ 123 (-10.87%)
Mutual labels: scss, sass
Fast
Develop, build, deploy, redeploy, and teardown frontend projects fast.
Stars: ✭ 126 (-8.7%)
Mutual labels: scss, sass
Compass Inuit
💮 Compass extension for inuit.css. More than 40k users served!
Stars: ✭ 127 (-7.97%)
Mutual labels: scss, sass
Sscss
Light Sass lib for managing your font-size, margin, padding, and position values across breakpoints.
Stars: ✭ 119 (-13.77%)
Mutual labels: scss, sass
Mq Scss
Extremely powerful Sass media query mixin. Allows you to create almost any media query you can imagine.
Stars: ✭ 122 (-11.59%)
Mutual labels: scss, sass
Rollup Plugin Styles
🎨 Universal Rollup plugin for styles: PostCSS, Sass, Less, Stylus and more.
Stars: ✭ 116 (-15.94%)
Mutual labels: scss, sass
Awesome Sass
Sass is an extension of CSS that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized, and get small stylesheets up and running quickly.
Stars: ✭ 1,714 (+1142.03%)
Mutual labels: scss, sass
Shards Ui
🎨Shards is a beautiful & modern Bootstrap 4 UI kit packed with extra templates and components.
Stars: ✭ 1,718 (+1144.93%)
Mutual labels: scss, sass
Basis
A lightweight responsive Sass/CSS framework based on flexible box.
Stars: ✭ 133 (-3.62%)
Mutual labels: scss, sass
Fictoan
Mockups with markup — https://sujan-s.github.io/fictoan/
Stars: ✭ 114 (-17.39%)
Mutual labels: scss, sass
MUSUBii
Simple CSS Framework for JP
MUSUBiiは日本語サイトのインブラウザデザインを想定したシンプルで薄味のレスポンシブ対応CSSフレームワークです。
Site & Documentation
About
「腹が減ってはコードが書けぬ」
Web デザインの腹ごなしに、CSS フレームワーク「MUSUBii（むすびー）」をどうぞ。MUSUBii は、日本語サイトのデザイン・コーディングを元気づけます。
- OOCSS を応用したラフな設計
- 日本語フォントの利用を想定
- JavaScript 未使用
Detail
Markup
要素 .(xxxx) 1 つに対して、状態 .is-(xxxx) を複数追加してスタイリングするのが基本です。また、すべてのクラス名は英小文字・数字・ハイフン 1 つで構成されています。
Layers
CSS のレイヤーは大きく 4 つに分類。「下地にレイアウトを組んでボタンやテキストを置いたら調整する」使い方です。実務で固有のスタイルとなる components や pages が加わることも想定しています。
| Layer | Detail |
|---|---|
bases |
文字色などの下地 |
layouts |
セクション・グリッドシステムなど |
elements |
ボタン・テキスト・フォームなど |
utilities |
調整用モディファイア |
Responsive
CSS は 5 つの画面サイズで可変できるレスポンシブウェブデザインになっています。
| Name | Value |
|---|---|
mobile |
~ 575px |
fablet |
576px ~ 767px |
tablet |
768px ~ 991px |
desktop |
992px ~ 1199px |
wide |
1200px ~ |
Unit
CSS の単位は em と px を採用。エレメントの大きさをフォントサイズ変更で一括調整できます。また、すべての値には 16 を割れる数値を用いているため、サイズ変更を行った場合に割り切れない端数が出づらくなっています。
File size
出力される CSS ファイル の容量は Bootstrap・Bulma の半分以下で、72KB 程度です。
Install
npm インストールからの SCSS 利用を想定しています。
npm install musubii
yarn add musubii
Support
日本で多く使われているブラウザを基準にバグフィックスを行なっています。
| Chrome | Firefox | IE | Ege | Safari(Mac) |
|---|---|---|---|---|
| Newest | Newest | *11~ | Newest | Newest |
| Safari(iOS) | Chrome(Android) | Browser(Android) |
|---|---|---|
| Newest | Newest | *4.4~ |
- *SCSS で CSS Variables を有効化した場合、 IE11・Android Browser では色プロパティが認識されなくなります。Ponyfill の導入を検討してください。
- *PostCSS の設定によっては IE11・Android Browser が非対応となります
License
- CC0 1.0 Public Domain
Credit
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].