CSSのみで表現OK 人気レイアウトやUIパターンを集めた便利ライブラリ CSS Layout
依存性なしで、フレームワークも必要なし。 CSSの特別なテクニックも必要とせず、リアルに使えるCSSレイアウトやUIパターンを集めたサイト CSS Layout が注目を集めています。 フロントエンジニアとして働くひとは、ウェブサイト制作においてどれだけ多くのレイアウトやコンポーネントを扱う必要があるかよく分かるでしょう。 人気のあるレイアウトやUIコンポーネントを提供するCSSフレームワークはたくさんありますが、すべてを自分のプロジェクトに加えたくないときも。 そんな悩みを解決すべく、CSS Layout ではCSSのみで構築できる人気レイアウトやUIコンポーネントを集め、カテゴリ別にまとめています。 FlexboxやCSS Gridといった最新CSS機能によって実現されたレイアウトは、それぞれのニーズに合わせて簡単にカスタマイズでき、スターターキットとしても最適です。 パーツを組み合わ
Utility-FirstなCSS,UIフレームワークを比較してみた(TailwindCSS, Chakra UI, MUI)
こんにちはきよまるです@kiyokiyoabc 最近話題のUtility-First。皆さんも一度は耳にしたことがあるはずです。去年CSS設計完全ガイド が発売されたばかり（？）にも関わらず、この本が指南するCSSと人類の格闘の成果を無為にするような思想を持っています。(めっちゃいい本です) Utility-Firstの思想その一 クラス名とそのCSSをあらかじめ用意しておこう 終 制作・著作 ━━━━━ ⓃⒽⓀ まあその一といいましたがUtility-Firstに関しては一つの思想しかないです（多分）。 要するにクラス名を自分で考えてそれにCSSをつけるのではなく、あらかじめ用意されたユーティリティクラス（汎用的で実用的なクラス）を使って装飾しましょうということです。 Utility-Firstの何がいいのか 今まで模範とされてきたCSS設計のコードと、Utility-Firstなコード
Pico CSS • Minimal CSS Framework for semantic HTML
Minimal CSS Framework for Semantic HTMLA minimalist and lightweight starter kit that prioritizes semantic syntax, making every HTML element responsive and elegant by default. Write HTML, Add Pico CSS, and Voilà! 12.1K GitHub Stars 74.1K Monthly Npm Downloads (Last month) 3.2M Monthly JSDelivr Requests (Last month) A Superpowered HTML ResetWith just the right amount of everything, Pico is a great s
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
これは便利だ！CSSでイラレみたいに行揃えを調整できるtext-align-lastを覚えた
最後の行だけ右揃え（または左揃えに）して！ なんてときにはCSSのtext-align-lastプロパティがちょっと便利です。知らなかった方はこちらの記事でどうぞ。 ときに、ほとんど気づかれないようなささいな箇所がユーザー・エクスペリエンスを左右するものです。そのささいな箇所には、Webページの見出しに追加されたテキストシャドウや適切な行間も含まれます。 その点、text-align-lastプロパティは役立つものです。段落の最後の行または強制改行の直前の行をどのように配置するかを指定します。段落の最後の行は通常、1行を埋めるための十分なテキスト量は用意されません。だからこそ、text-align-lastプロパティは重要なのです。違いに気づくか気づかないかくらいの違いですが、Webサイトの全体的な見栄えを改善するものなのです。 この記事は、text-align-lastプロパティのすべて
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
Center and crop images with a single line of CSS
It’s simple. Set your image crop dimensions and use this line in your CSS: img { object-fit: cover; }That’s it. No need for unsemantic, wrapping divs or any other nonsense. This technique works great for cropping awkwardly-sized avatar pictures down to squares or circles. Take this wide photo of a bear below for example. Once object-fit: cover is applied to the image and a width and height are set
Blog ◩ CSS PREprocessors
How to round decimal numbers with custom precision, set decimal places, using ceil and floor functions
MUI - Material Design CSS Framework
The MUI package includes all the necessary code to use MUI components on the web and over email. In addition, we're working on React and WebComponents libraries to give developers more flexibility on the web. mui-0.10.3/ ├── angular │ ├── mui-angular.js │ └── mui-angular.min.js ├── css │ ├── mui.css │ ├── mui.min.css │ ├── mui-rtl.css │ └── mui-rtl.min.css ├── email │ ├── mui-email-i
Gallery CSS
Include gallery.css & gallery.theme.css <link rel="stylesheet" href="css/gallery.theme.css"> <link rel="stylesheet" href="css/gallery.min.css"> Mark up your gallery <div class="gallery items-3"> <div id="item-1" class="control-operator"></div> <div id="item-2" class="control-operator"></div> <div id="item-3" class="control-operator"></div> <figure class="item"> <h1>1</h1> </figure> <figure class="
Turret
A library of Documentation, Elements, Components, Icons, and a Grid for rapid responsive website development.Simple and Stylish Create accessible, semantic, and responsive websites easily with Turret. Turret is a front-end styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites. Responsive Turret has a simple and intuitive grid system and re
BlessCSS
Summer sizzler! Score a bonza 80% off HostPapa's 3-year plan - only $2.36/month! Get Deal Thanks for stopping by guys. It's been a while since I updated the original Bless CSS framework. I stopped hosting the site as server costs were getting a bit much. Instead my friend Nathan and I started working on a new site helping Australians better understand web hosting providers. Feel free to contact me
CSS Flexbox Please!
CSS Flexbox Please! The CSS Flexible Box Layout Model, or "flexbox", is one of the specification in CSS3. It provides for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React UIフレームワークのトレンド比較 - Qiita
Gradients for Tailwind CSS | Hypercolor
Bulma: Free, open source, and modern CSS framework based on Flexbox
GitHub - manabuyasuda/class-name: CSSのクラス名に使われる単語一覧
GitHub - you-dont-need/You-Dont-Need-JavaScript: CSS is powerful, you can do a lot of things without JS.
GitHub - kriswallsmith/assetic: Asset Management for PHP
gumbyframework.com
