Skip to content

CSS for modern, responsive layout. No frameworks — just web-standards. 快適・モダンなCSSのベース。フレームワーク無し。ウェブ標準だけで。

License

Notifications You must be signed in to change notification settings

saltymouse/kihon

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Kihon・キホン

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

Size comparison

Project Uncompressed Gzipped
Kihon
Bootstrap

Browser support

IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
iOS 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

About

CSS for modern, responsive layout. No frameworks — just web-standards. 快適・モダンなCSSのベース。フレームワーク無し。ウェブ標準だけで。

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published