sass-basis / basis Goto Github PK
View Code? Open in Web Editor NEWA lightweight responsive Sass/CSS framework based on flexible box.
Home Page: https://sass-basis.github.io/
License: MIT License
A lightweight responsive Sass/CSS framework based on flexible box.
Home Page: https://sass-basis.github.io/
License: MIT License
ブレイクポイントを em ベースにしたことで ._u-hidden-xx、_u-visible-xx が正しく動作しないようになっている。例えば、._u-hidden-md だと (max-width: 63em) and (min-width: 40em) だけど、lg は 64em〜となっており、63em と 64em 間の 16px の間で意図した動作が行われない。
これらのクラスおよび関連するミックスインを利用する場合は px ベースに変換するようにしたほうが良さそう。
ちなみに Foundation6 だと 63.9375em みたいになってる。こっちのが良いかな…
init-normalize がエラー。
normalizeをimportするのでは無く、copy するような実装に変えた方がいいやもしれぬ。
opacity に transition をかけると 1px ずれることがある。@mixin bs-transition-opacity()
に下記のコードを追加して対処する。
backface-visibility: hidden;
node_modulesのディレクトリ構造が変わったため。
There is a case in which the long contents of the pre element is overflowing. So added overflow: auto;
ドキュメントをきちんと整備(デザインとかも含め)しようとすると別リポジトリに分けておいたほうが管理しやすそう。
._c-row__col に overflow: hidden をつければ防止できるけど、わざと要素をはみ出させたいとかができなくなるので悩みどころ…。
後方互換性を破壊する変更( class の削除、命名の変更 )は、バージョン番号の一桁目を変更すべき。
二桁目は、機能追加。
三桁目は、機能に変更がない修正。(バグフィックスなど)
npmでアップデートしたりしたときに事故る。
basis のブラウザサポートは IE10 以上としているので、normalize.css より sanitize.css のほうがあっているかも?
https://10up.github.io/sanitize.css/
IE9 でも最低限のレイアウトは維持できるようにグリッドシステムを IE9 に対応させたい。
参考:FOX-CSS https://github.com/ronanlevesque/FOX-CSS/blob/master/sass/_grid-ie9.scss
要件によっては不要なので、プラグインっぽく別 CSS にわけたい。
sass で import する場合もある(というかそっちの方が多いはず)から、名前はプロダクト名にしといたほうがいいはず!
変数・関数・ミックスインの命名規則をなぜか -(ハイフン)つなぎにしてたけど、エディタで選択しにくいので (アンダースコア)区切りのほうが良くないか…。
Sass の場合「-」と「」は同一視されるので後方互換性的には問題ないし…
リポジトリに .css は含まれていないので、Gulp の環境が作れない人は簡単に使うことができない。結構致命的だと思うので .css もリポジトリに含めて、リリース時だけ .css もコミットするとかしたほうが良いかも。
/path/to/project
└── (empty)npm ERR! code 1
aria-hidden, readonly, disabled 等の属性に応じたスタイルを追加したい。
._c-row--nowrap
サイトによって余白を大きくしたい、とかがあるのでバーティカルリズムを崩さずに余白サイズを変更できるように、余白サイズに対する係数を設定できる変数を用意する。
見出しサイズも基本は h1 〜 h6 までカバーしているが、それだと h2 や h3 が相対的に大きくなりすぎる問題があるので、記事中で h5 や h6 を使わないのであれば相対的に h2 や h3 を小さくできるようにできたほうが便利である。そこで、こちらも見出しサイズに対する係数を設定できる変数を用意する。
._c-row--margin の各サイズのマージンがおかしい気がする。
._row__col--flex は用途的に子の高さを全て揃えたいときに使うことがほとんどだと思うので、._row--flex にしたほうが良いのではないか。
for v3.
#26 で npm install
したときに css を自動ビルドするようにしたけど下記のような問題点や検討点がある。
npm install sass-basis
として Travis CI でビルドさせるとき、Basis の自動ビルドが何度かこけて、リトライの末ビルドされる。#80npm install
で Basis を使うようなユーザーは自分でビルドできるはず。以上の理由から、npm install
時の自動ビルドは廃止し、ビルドされた CSS がほしいユーザー向けには引き続き GitHub の release ページからビルド済みの Basis を提供する。
For example: http://bitters.bourbon.io/
実際にサイト制作するときに、_base.scss で定義されたスタイルは邪魔になりそう。基本は normalize.css だけにして、_base.scss はテーマ CSS の1つとして分離するほうが良い気がする。
これはおそらくFlocssで言うところのコンポーネント。
_c-btn--ghost のホバー時のスタイルがついているが、案件によってホバーのスタイルは変わるので不要。
basis-ie9.css を読み込むと、inline-block のグリッドシステムが有効になり ._c-row のフォントサイズが 0 になるが、_c-row__col のフォントサイズ指定が rem のため IE8 以下ではフォントサイズが 0 のままとなり文字が表示されなくなる場合がある。そのため、basis-ie9.css でフォントサイズを px に直す必要あり。
Bourbon Neat みたいに、クラス付与しなくても @include でグリッド等組めるようにしたい。
https://github.com/hiloki/flocss
フレームワークとして提供するなら、コンポーネントレイヤーにした方が良いと思う。
「ProjectレイヤーがComponentレイヤーのモジュールを変更すること」のみが許可されているので。
Boostrap の .h1、.h2 みたいなクラスがあったほうが良い気がする。article や section でセクション区切って見出しレベルをリセットしたときにサイズに戸惑うことがある。
a 要素に _c-btn を付与すると、テキストに下線が表示されてします。_c-btn に text-decoration: none
が必要。
フレームワークなので、レポジトリ直下にsrcもしくはcssとかって置くべき。
不要なコメントが書き出されないようにコメントのフォーマットを見直す。
normalize.css を同梱するよりは、
https://github.com/necolas/normalize.css を import & postcss-at-import等で埋め込むか、
https://github.com/inuitcss/generic.normalize を importするほうが無難かと。
個人的には前者のほうが、モダンかと。
$bs-use-mixin-only
が false
のとき(デフォルト)、$bs-font-size
は 1.6rem で 16px 相当となるけど、$bs-use-mixin-only
が true
のときは foundation 層の CSS も読み込まれないため $bs-font-size
が 1.6rem だと 25.6px 相当となってしまう。
For example,
Component: _c-btn ...
Utility: _u-text--right ...
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v6.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v6.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: this package has been reintegrated into npm and is now out of date with respect to npm
> [email protected] install /Users/xxx/Desktop/test/node_modules/node-sass
> node scripts/install.js
Binary downloaded and installed at /Users/xxx/Desktop/test/node_modules/node-sass/vendor/darwin-x64-46/binding.node
> [email protected] postinstall /Users/xxx/Desktop/test/node_modules/node-sass
> node scripts/build.js
"/Users/xxx/Desktop/test/node_modules/node-sass/vendor/darwin-x64-46/binding.node" exists.
testing binary.
Binary is fine; exiting.
> [email protected] postinstall /Users/xxx/Desktop/test/node_modules/sass-basis
> gulp build
module.js:339
throw err;
^
Error: Cannot find module 'browser-sync'
at Function.Module._resolveFilename (module.js:337:15)
at Function.Module._load (module.js:287:25)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/Users/xxx/Desktop/test/node_modules/sass-basis/gulpfile.js:11:20)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
/Users/xxx/Desktop/test
└── (empty)
npm WARN enoent ENOENT: no such file or directory, open '/Users/xxx/Desktop/test/package.json'
npm WARN test No description
npm WARN test No repository field.
npm WARN test No README data
npm WARN test No license field.
npm ERR! Darwin 15.4.0
npm ERR! argv "/usr/local/Cellar/node/4.2.1/bin/node" "/usr/local/bin/npm" "install" "sass-basis"
npm ERR! node v4.2.1
npm ERR! npm v3.6.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] postinstall: `gulp build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script 'gulp build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the sass-basis package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs sass-basis
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls sass-basis
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /Users/xxx/Desktop/test/npm-debug.log
npm ERR! code 1
サイト全体で管理するべきグローバル変数・関数と、その場だけで良いローカルな変数・関数を整理したい。ミックスインもファイル構成を整理する(できれば #48 も可能なように)
_row, _col となっているが、基本的には、
_rowの直下の子要素に_colが来る
という使い方以外はしないはずなので、であれば、_row__col のようなElementとして命名すべきかと。
._row__col--1-2 ではなく、._row__col--1of2 のほうがわかりやすいのではないか?
aria-hidden="true"
is often used the web font tag.
スマホサイズのときに、_c-media__figure と _c-media__body が被ってしまう場合がある。flex-glow: 1
ではなく、flex: 1
に修正すれば良さそう。
Transition が Transion になってるところがある。
I feel this is more clean directory structure. But I feel github pages is hard.
_c-row--md-left とか、_c-row--md-top とか位置系のモディファイアは果たして本当に必要なのか。ブレイクポイント毎に左寄せ右寄せとか、上寄せ下寄せを切り替えることはほとんど無い気が…。これ消せばサイズも結構減らせるメリットも。
._row--margin としたときに、カラム間の左右の margin は 16px だけど、上下の margin は 8px と左右の半分になっている。ここは同じように 16px の margin となるようにするのが良いのではないか?
すべての変数に !default をつける。v2までにやらないとやばい
http://bulma.io/ の hero オブジェクトのようにフルスクリーンサイズでメインビジュアルを表示できるようなのはほしい。
初Issues失礼します。
NetBeans8.1を用いてサイト制作していたのですが、Basis v5.0.0でのcss出力時にエラーが出ておりました。
@keyframes bs-bounce-scale-110.0 {(ry)}
理由はcss出力時にbs-strip-unitによって'.'が入り込んでいて、それは識別子として使用不可な文字だからです。
@keyframeの定義
CSS識別子の定義
ブラウザ上では問題ないのですがそのためだけにエラーを手動で潰すのは少し面倒ですし、衛生的に少しよろしくありません。
ご確認と可能であれば修正、よろしくおねがいします。
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.