Shoelace: A forward-thinking library of web components.
Search Works with all frameworks 🧩 Works with CDNs 🚛 Fully customizable with CSS 🎨 Includes a dark theme 🌛 Built with accessibility in mind ♿️ First-class React support ⚛️ Built-in localization 💬 Open source 😸 More awesome than ever Quick Start Add the following code to your page. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.15.0/cdn/themes/light.css"
AWS、自社製品のために開発したデザインシステム「Cloudscape」オープンソースで公開。UIコンポーネント、デザインパターンなど
AWSは、マネジメントコンソールなど同社が提供する製品やサービスのWebアプリケーション画面を構築するために開発したデザインシステム「Cloudscape」をオープンソースで公開しました。 Cloudscape Design System, an AWS solution for building intuitive user experiences, is now open source! Cloudscape consists of guidelines to create web applications, along with the design resources and front-end components to streamline implementation.https://t.co/M8wKGqzH5E pic.twitter.com/9JOtkMF8Bi — A
Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Less code. More speedSpend less time writing UI code and more time building a great experience for your customers. import * as React from "react"; import { Box, Center, Image, Flex, Badge, Text } from "@chakra-ui/react"; import { MdStar } from "react-icons/md"; export default function Example() { return ( <Center h="100vh"> <Box p="5" maxW="320px" borderWidth="1px"> <Image borderRadius="md" src="h
Kotlin用デスクトップUIライブラリ「Compose for Desktop」が登場、Win/Mac/Linuxアプリ開発対応。JetBrains
オープンソースのプログラミング言語「Kotlin」の開発元であるJetBrainsは、Kotlinでデスクトップアプリケーションの開発を容易にするUIライブラリ「Jetpack Compose for Desktop」（以下、Compose for Desktop）を発表しました。 We just published Compose for Desktop Milestone 1! It provides a declarative & reactive way to create desktop user interfaces with pure Kotlin, and you can even share your UI with @AndroidDev! Read about it, try it & go build some desktop UIs!https://t.co/Jp
Onsen UI 2: Beautiful HTML5 Hybrid Mobile App Framework and Tools
The fastest way to develop beautiful HTML5 hybrid and mobile web apps Experience streamlined development with zero-time setup, using the technologies you already know and love - Javascript, HTML and CSS. Native look and feel with lots of ready-to-use components and automatic styling A rich variety of UI components specially designed for mobile apps. Onsen UI provides tabs, side menu, stack navigat
闇雲にディズニー映画みたいなアニメーションを GUI に実装するのはもうやめよう - Qiita
はじめに 本稿は UI Design Advent Calendar 2015 – 9日目の GUI アニメーションに関する記事です。 アニメーションの12の基本原則と GUI ディズニーの アニメーションの12の基本原則/12 basic principles of animation というのがありまして、要はこの原則に沿ってアニメーションを制作すればまるでそれが生きているかのような動きをする、平たく言えばディズニーっぽい動きになる、というものです。http://the12principles.tumblr.com がとてもわかりやすいので、うちいくつかを転載しておきます。 SQUASH & STRETCH ANTICIPATION FOLLOW THROUGH & OVERLAPPING ARCS ビデオ解説：The illusion of life これらを見ただけでも、『あー、デ
Photon - Electron開発者要注目のOS X風UIツールキット | ソフトアンテナ
元々GitHubのAtomエディタのために開発されたデスクトップアプリ作成用フレームワーク「Electron」。HTML/CSSといったWeb系技術を使って、クロスプラットフォームのデスクトップアプリを開発可能なため、多くの開発者の注目を集めています。 本日紹介する「Photon」は、このElectron用の便利なコンポーネントを多数収録したUIツールキットです(GitHub、Hacker News)。 ツールバー、タブ、ナビゲーション、リスト、ボタン、フォーム、テーブルといった、GUIアプリ作成に必要なさまざまなコンポーネントを、アプリケーションに素早く組み込むことができます。コンポーネントの見た目もOS X風でクールです。 以下ご紹介。 バー ヘッダーとフッターを組み込むことができます。 バーとアクション バーにボタンを設置してアクションを定義することもできまうｓ． バーとタブ タブを
ローディング時のズルい進捗表示
今開発中のPlayer!のログイン・登録画面で、こんな進捗表示をしていますが、これ実はフェイクだったりします( ´･‿･｀) (Qiitaの画像サイズ制限が厳しくて粗いです。キレイなものは実際にアプリダウンロードしてご覧下さい。) 経緯 元々、この画面はこういう進捗表示では無く、単にインジケーターがクルクルするだけで、進捗状態が分からないものでした。 特にネットワークが悪いところだと、バグって固まってしまったのでは？とユーザーを不安にさせるようで、たまにそういう声を聞くことがありました。 登録フローは大事なところなので、そういうところでこれが原因で離脱してしまうと残念なので、改善が必要でした。 そこで、ネットワーク処理にもたつきつつもちゃんと正常に処理をしているということを示すために、進捗を表示することにしました。 ただ、例えば大きな画像などメディアファイルダウンロードなどならともかく、こ
Touchstone JS – What’s Coming for This UI Framework
TouchstoneJS – Creating Your Visual Interaction People have the habit of checking their smartphones every few minutes, but they rarely think about how the app interface is made. Software-developing specialists utilize a variety of programming tools for the applications themselves, however, when it comes to making that part of the application that users interact with, developers use UI (user interf
画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール | UXデザイン会社Standardのブログ
2014.11.19 / UI 画面遷移に疑問を感じたあなたにオススメするUI Flowsというツール Tomohiro Suzuki クライアントやディレクターから渡された画面遷移図を元にワイヤーフレームを作ってみると、後から足りない画面が次々に発見された、または画面内の情報がどこに繋がるのか分からないといった経験はありませんか？ この画面遷移図というものは本来は制作範囲の全体像と構造を明確にし、必要な画面というものを洗い出したりするものです。通常のWebサイトであれば、従来のような画面遷移図でも問題ないかもしれませんが、多くのインタラクションが発生するサービスの設計では複雑化しやすく、何度も情報を行き来して確認することになるため時間がかかります。 原因のひとつとして、画面遷移図では画面名のみを記載して繋げていくことになるため、必要な情報が不足していることが挙げられます。その結果、本来で
Fluentd UIが出たので触ってみた - すずけんメモ
fluent/fluentd-ui https://github.com/fluent/fluentd-ui Fluentd用のWeb UIが出たようです。試しに触ってみます。 インストール READMEのとおりですが、 $ gem install fluentd-ui $ fluentd-ui start Open http://localhost:9292/ by your browser default account is username="admin" and password="changeme" もしくは、 $ git clone https://github.com/treasure-data/fluentd-ui $ cd fluentd-ui $ bundle install $ bundle exec rails s です。 僕はbundlerでいれることにしました
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
shadcn/ui
GitHub - zserge/lorca: Build cross-platform modern desktop apps in Go + HTML5
Storybook: Frontend workshop for UI development
Ant Design
GitHub - airyland/vux: Mobile UI Components based on Vue & WeUI
GitHub - shoutem/ui: Customizable set of components for React Native applications
Elemental UI
jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ
Free prototyping tool for web & mobile apps - Justinmind