Atomic DesignからみたBootstrap｜Yoko Nishida
はじめまして。UIデザイナーの@nikoko45です。 最近Webサービスのデザインガイドラインを作っていて、特にコンポーネントをどうまとめたら良いのか模索中です。ユーザーには一貫したUIや世界観を提供でき、開発者にはもっと効率的に作業スピードをあげられる方法はないか考えてみました。 デザインガイドラインで目指したいこと 一貫性のあるデザインを維持するために、デザインファイルのテンプレート作成、コミュニケーションやレビューのコストを少しでも減らすことがゴールなのかなと思っています。（参考：一貫したデザインのためにデザインシステムを運用する方法） 色々記事を読み漁った結果、どうやらデザインガイドラインとしてコンポーネントを整理するにはAtomic Designが役立ちそうということで調べてみました。 Atomic DesignAtomic Designとは インターフェースに含まれる要素を、
CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
bootstrap-generators gemを使う。 - tkymtk's blog
はじめに Railsでtwitter-bootstrapを使う方法はいくつかあります。gemを使って導入する場合、 lessで使いたいときは、twitter-bootstrap-rails sassで使いたいときは、bootstrap-sass を選択するのがほとんどだと思います。 twitter-bootstrap-railsにはジェネレータの機能がありますが、bootstrap-sassにはありません。 なので、sass環境でbootstrapのテンプレートを生成できる、bootstrap-generatorsというgemを使ってみたいと思います。 bootstrap-generators の特徴 sass テンプレートを生成できる。 インストール Gemfileに次のラインを追加: gem 'bootstrap-generators' bundle installを実行: bundl
Rails 4 で Twitter Bootstrap と Font Awesome を利用する手順 - Qiita
Rails 4 で作るアプリケーションで、デザインに Twitter Bootstrap、アイコンに Font Awesome を使いたいので、それらを導入してみたメモです。 前提 CSS は Rails標準？の SASS のままで書きたいので、SASS 対応されているものを利用します。 基本的に、ここに書いてある手順通りにインストールします。 Bootstrap for Sass https://github.com/twbs/bootstrap-sass Font Awesome http://fortawesome.github.io/Font-Awesome/get-started/ 今回はローカルの Mac に 構築した Rails 環境に導入しています。 OS のバージョン： Mac OS X 10.9.4 (Mavericks) Ruby のバージョン： 2.1.2 Rail
[Rails] TwitterBootstrapとSassとAssetPipeline - Qiita
Ruby on Rails Tutorialのエッセンスを自分なりに整理してみる5 [Ruby基礎] ブロックとProcをちゃんと理解する http://qiita.com/kidachi_/items/15cfee9ec66804c3afd2 の続き。 Ruby on Rails Tutorial（chapter5） http://railstutorial.jp/chapters/filling-in-the-layout#sec-layout_exercises TwitterBootstrapの導入 Bootstrapでは、動的なCSS生成のためにLESSを使用している。 一方でRailsのAssetPipeline（詳細後述）はデフォルトではSassをサポートする。 →bootstrap-sass（gem）を導入し、Sassベースで扱えるようにする。 source 'https:
![[Rails] TwitterBootstrapとSassとAssetPipeline - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a1c27d27c7a1af177eefba7fd80592d464cbf9cf/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUmFpbHMlNUQlMjBUd2l0dGVyQm9vdHN0cmFwJUUzJTgxJUE4U2FzcyVFMyU4MSVBOEFzc2V0UGlwZWxpbmUmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWRmOGY4NmNkYjZjMjhkNDU4YTkzMTc4NmQwNDU0ZGRl%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBraWRhY2gxJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mMDA4Mzk3YzFlZTZlMTA4YTY1YmYwODZlYzgzZDRiZg%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44Ki44Kr44OE44Kt%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%2523212121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D2c52a8440e650cdfa040029c5246e9cd)
RailsでTwitterBootstrapを使ったflashメッセージ - Qiita
僕はbootstrapをよく使うので、bootstrapのAlerts Componentを使ってflash部分をpartial化してみる。 もちろんbootstrapじゃなくても、flashのタイプごとにhtmlとかcssを変えたい場合に応用できると思う。 <% flash.each do |type, message| %> <div class="alert <%= flash_class_for(type) %>" role="alert"> <button class="close" data-dismiss="alert">×</button> <%= message %> </div> <% end %>
Migrating to v5
Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5. v5.3.0 If you’re migrating from our previous alpha releases of v5.3.0, please review their changes in addition to this section. Helpers Colored links once again have !important so they work better with our newly added link utilities. Utilities Added new .d-inline-grid display ut
Bootstrapの画面を手軽に作れるツールまとめ
業務システムの画面やWebサービスの管理画面にBootstrapを採用するケースが増えていますが、それでもBootstrapならではの書き方を覚えないといけません。バージョンが上がるごとに書き方が変わるので習得が面倒と感じる人も多いでしょう。 そこで使ってみたいのがBootstrap用のUIビルダーです。ドラッグ&ドロップで画面が設計できれば作成も簡単ですよね。 lollytin beta 1.4 – A yummy HTML5 blockouterer! Bootstrapのデザインをドラッグ&ドロップで作っていくのですが、見た目はデフォルメされています。その分、細かいところにこだわりすぎずにさくさくと作っていくことができます。 Pingendo – web authoring with comfort PingendoはBootstrap専用のオーサリングソフトウェアです。Mac OS
Bootstrap Studio - The Revolutionary Web Design Tool
A powerful desktop app for creating responsive websites using the Bootstrap framework. Run Browser Demo Bootstrap Studio is a powerful desktop app for designing and prototyping websites. It comes with a large number of built-in components, which you can drag and drop to assemble responsive web pages. The app is built on top of the hugely popular Bootstrap framework, and exports clean and semantic
Bootstrap4の主な更新点 - Qiita
こうして見てみると、一段階上のサイズが追加されたというよりも、xs と sm の間が細かくなったという感じですね。 flexboxのサポート $enable-flex: true;を設定することでflexbox Layoutが使用されるようになります。これにより、tableやfloatを使っていた様々なハックが改善されるとのこと。ただし、IE9はflexbox Layoutをサポートしておらず、IE10でも古い仕様にしか対応していないため、デフォルトではこのオプションはfalseになっています。 well, thumbnail, panel を廃止、card に統一 コンポーネントの well, thumbnail, panelがなくなり、cardに統一されました。 CSSリセットを Reboot というモジュールに統一 CSSリセットには、Bootstrap3ではNormalize.cs
Social Buttons for Bootstrap
Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome! View on GitHub Download flag-icon-css Available Classes btn-adn #D87A68 btn-bitbucket #205081 btn-dropbox #1087DD btn-facebook #3B5998 btn-flickr #2BA9E1 btn-foursquare #f94877 btn-github #444444 btn-google #DD4B39 btn-instagram #3F729B btn-linkedin #007BB6 btn-microsoft #2672EC btn-odnoklassniki #F4731C btn-openid #F7931
ENTEREAL
まえおき WEB製作を担当させて頂いたあるお客様からのご要望だったのですが、なかなかタイトルだけでは、内容の想像が難しいため、まずは画像をご覧ください。 「画面上部から下にスライドダウンするメニュー (図1から図2へのような)」を、モバイルアプリで人気の「左からのスライドインするメニュー (図3から図4へのような)」にしたいのです。 ちなみに、本サイトも同様になっております。おそらくそれをご覧になってご相談下さったのではないでしょうか？ まずは まずは、フリーで提供されているjQueryのプラグインを探します。 今回は、Alberto Verela氏の「Sidr」を使用しましたが、同様のプラグインは複数存在します。 Snap.js PageSlide jPanelMenu Sidrの基本的な使い方 本家サイトから「sidr-package-1.1.1.zip」をダウンロードし、アーカイブを
4色ほど指定するだけでTwitter Bootstrapの配色を良い感じにしてくれるSass | mah365
そんなSassが町田先生のCustomizedTwitterBootstrapに含まれていたので、これをTwitter Bootstrap3に対応させてみたのでした。 ソース こちらが良い感じにしてくれるベースの変数です。 $base-color、$main-color、$accent-color、$base-text-colorを決めることで良い感じにしてくれます。僕は下のファイルみたいなテイストが好きです。ほんわかしている。仕事では使えない感じがある。 実際に読み込むときには、Twitter Bootstrapより先に変数を読み込んでおきます。 //--------------------------------------------------------- // Color Scheme for Bootstrap @import colors/try @import color
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RailsにBootstrapデザインを適用する - Qiita
Angular Bootstrap
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
Honoka - 日本語も美しく表示できるBootstrapテーマ
React-Bootstrap
Boostra/386 Disc 1
