Utility-FirstなCSS,UIフレームワークを比較してみた(TailwindCSS, Chakra UI, MUI)
こんにちはきよまるです@kiyokiyoabc 最近話題のUtility-First。皆さんも一度は耳にしたことがあるはずです。去年CSS設計完全ガイド が発売されたばかり（？）にも関わらず、この本が指南するCSSと人類の格闘の成果を無為にするような思想を持っています。(めっちゃいい本です) Utility-Firstの思想その一 クラス名とそのCSSをあらかじめ用意しておこう 終 制作・著作 ━━━━━ ⓃⒽⓀ まあその一といいましたがUtility-Firstに関しては一つの思想しかないです（多分）。 要するにクラス名を自分で考えてそれにCSSをつけるのではなく、あらかじめ用意されたユーティリティクラス（汎用的で実用的なクラス）を使って装飾しましょうということです。 Utility-Firstの何がいいのか 今まで模範とされてきたCSS設計のコードと、Utility-Firstなコード
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"
Cycle.js
A functional and reactive JavaScript framework for predictable code Read the docs
Hanami | The web, with simplicity
% gem install hanami Successfully installed hanami-2.1.0 3 gems installed % hanami new bookshelf Created bookshelf/ -> Within bookshelf/ -> # ... -> Running Bundler install... -> Running NPM install... -> Running Hanami install... % git init . && git add . && git commit -m "Initial commit" [main (root-commit) 629fc96] Initial commit 33 files changed, 1430 insertions(+) % heroku apps:create Creatin
FOAM Framework
High-level You write very high-level, declarative models, and FOAM builds many features from them: default views, storage, serialization, Java and Swift classes, and much more. Compact Your app and FOAM itself are both modeled, keeping your payload small. Our Gmail app is 150KB unzipped. With so little code to write, FOAM is perfect for rapid app development. Fast FOAM apps are small and load fast
デザイナはWeb Componentsに夢を見るのか - Qiita
2015年の今、Web制作のエンジニアに限らずデザイナも動向が気になるのは、次の2つでしょうか。なぜか。それは、どちらも、その以前と以後で「CSSの前と後」くらいのインパクトをWeb業界に与えるからです。 Web Components モジュール (あるいは、ECMAScript 6) いや、単にここのところ考えることが多かったので、忘れないうちにアウトプットしときたいだけかも。 コンポーネント まだ現時点のブラウザ対応はないものの、「コンポーネント(=独自タグ)」は既定路線で、HTMLのビューを組む場合の方法論として確立しつつあります。 AngularJS React Polymer いずれも「コンポーネント」志向です。ただ、Angularが独自の世界観で突っ走ったのに対し、ReactはいくらかWeb Componentsに寄り添った方向、PolymerはWeb Componentsその
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
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
Home | Aurelia
Why Aurelia? Join thousands creating next-generation apps. Easy to Learn Aurelia's standards-based, unobtrusive style makes it the only framework that empowers you to build components using vanilla JavaScript or TypeScript. If you know modern JS and HTML, there's little more to learn to build even the most complex apps. High Performance At the core of Aurelia is a high-performance, reactive system
Flight by Twitter
Overview Flight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes. Twitter uses it for their web applications. By way of example, we've included a simple email client demo (browse the source) built over the Flight framework. There's also a flight implementation over on the todoMVC site (source), courtesy of @mkuklis Flight uses jQuery and requires a module load
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React UIフレームワークのトレンド比較 - Qiita
Quasar Framework - Build high-performance VueJS user interfaces in record time
Vue.js Framework Components - Vuesax
https://vuetifyjs.com/ja/
Bulma: Free, open source, and modern CSS framework based on Flexbox
Capacitor by Ionic - Cross-platform apps with web technology
Konva.js - JavaScript 2d canvas library
gumbyframework.com
GitHub - YahooArchive/kobold: Visual regression testing framework, comparing screenshots from multiple builds
http://dietjs.com/