Don't over-complicate your styles! You probably don't need Bootstrap to style your blog and demo pages.
スタイルを考えすぎるな!ブログやランディングページを作る際にはBootstrapは多分不要。
Modern web-standards are easy to use, widely supported, and have no network overhead (it's in the browser)!
最新のウェブ標準は使いやすくてよくサポートされている。しかも、すでにブラウザーに入っているためにデータ通信量はゼロ!
With just a light dusting of CSS you can turn your basic HTML into an easy-to-read experience.
たった100行のCSSでHTMLページを読みやすいオシャレなページに変換できる。
Kihon demonstrates the following modern techniques in under 800 bytes of CSS
キホンは下記の標準機能を800バイトで証明する
Technique | MDN Reference | Kihon Example |
---|---|---|
Responsive design / レスポンシブデザイン | media-queries | L35 |
Grid layouts / 2次元レイアウト | CSS Grid | |
Flexible content / 要素の配置を柔軟 | Flexbox | L35 |
Variables / 変数 | Custom properties | L1 |
Dark mode / ダークモード | prefers-color-scheme | L8 |
Stylish (system) fonts / オシャレなフォント(OS) | system-ui | L25 |
Multi-lingual style targets / 複数言語対応 | :lang | L41 |
Project | Uncompressed | Gzipped |
---|---|---|
Kihon | ||
Bootstrap |
![]() IE / Edge |
![]() Firefox |
![]() Chrome |
![]() Safari |
![]() iOS Safari |
---|---|---|---|---|
IE111, Edge 👍 | 👍 | 👍 | 👍 | 👍 |
1 Not supported but looks fine. Remove CSS Variables for full IE11 support.
Ready to use for most blogs and landing pages. Hack away and keep it simple!
このままでブログやランディングページとして使える!カスタマイズする場合にはシンプルにしておけ!
Inspired by the wonderfully subversive motherfuckingwebsite.com