[B! Bootstrap] d4-1977のブックマーク

d4-1977 id:d4-1977

Bootstrapに関するd4-1977のブックマーク (30)

その案件、本当にBootstrapが必要ですか？
TAK(@tak_dcxi)です。今回はTwitterでちょくちょく話題になるBootstrapについて。 Bootstrapは非常に便利なフレームワークで、使いようによっては極めて高いコストパフォーマンスを発揮できるツールなのですが、適材適所という言葉があるように明らかにBootstrap向きではない案件でBootstrapを使ってコストパフォーマンスを高めるどころか運用コストを高めているような現場を何度か見てきました。今回はBootstrapが適する案件と適さない案件について、またBootstrapを利用する上で気をつけたいことなど、個人的に思うことを纏めていこうかと。 Bootstrapが向いている案件と向いていない案件いきなり結論ですが、僕が思うBootstrapが向いている案件・向いていない案件は以下のとおりです。 Bootstrapが向いている案件開発にかけられる時間が極
d4-1977 2020/10/23
とても良くわかります。こうしたツールを使うならそのレールに従うこと。もしくは、分割すること。実感中…

●Bootstrap

●CSS

●デザイン
リンク
フロントエンドエンジニアの積極募集を始めました - SmartHR Tech Blog
こんにちは、エンジニアの nabeliwo です。先日リリースされたカスタム社員名簿ではフロントエンドと BFF 層の開発を担当しました。かなりサクサク動くので機会がありましたらぜひ触ってみてください！カスタム社員名簿さて、表題の通りですがフロントエンドエンジニアの募集を始めました。本記事ではその経緯について書いていきたいと思います。フロントエンドエンジニア募集ページ僕が入社するまでのフロントエンド SmartHR は2015年2月に開発が始まったプロダクトです。今ではたくさんの機能を備えている大きなサービスですが、リリース当時は行政手続きの簡略化に特化した機能のみを提供しており、全体の画面の8割以上が入力フォームや一覧画面でした。この画像はSmartHR 2019年全社キックオフ資料からの抜粋ですが、3年間でどれくらいの機能が追加されたのかを物語ってくれています。当時のサ
d4-1977 2019/04/30
「!important」多様するのよくわかる…Bootstrapじゃないけれど辛いのワカル。フロントエンジニア4人でも大変となると何か辛い原因は他にもありそうな予感。デザイナーさんとも協力できているのかな🤔

Bootstrap

Rails

jQuery

JavaScript
リンク
CI&UIリニューアルしながらデザインシステムを作った話｜Yoko Nishida
﹁コデアル﹂という求人サービスのデザインシステムを作ってみました。CIリニューアルに伴う全スタイル＆コンポーネントの刷新、エンジニア＆デザイナー間の協業、そして約3ヶ月運用してみた感想をつづってみます。実際に使っているドキュメント、Sketchファイルはこちら↓ ・Codeal Design Guideline ・Codeal UIKit.sketch・Sketch Tips for Codeal Design Guideline Codeal Design Guidelineの中身はこんな感じ。 1. デザインシステムとは組織やサービスの形態によって解釈は分かれると思いますが、私はデザインシステム＝ブランド、設計、開発をつなげるガイドラインだと認識しています︵引用‥結局デザインシステムは何なのか︶スタイルガイドやテンプレートだけではなく、それらをチームでどう活用するかを言語化して
d4-1977 2018/05/20
知見だった

UI

Bootstrap

Zeplin

デザイン
リンク
Composable な UI 設計を目指したフロントエンド開発 | MEDLEY Developer Portal
2018-02-27Composableな UI設計を目指したフロントエンド開発こんにちは、開発本部の舘野です。医療介護の求人サイト﹁ジョブメドレー﹂の開発を担当しています。昨年、ジョブメドレーでは事業所が利用する採用管理画面の UIリニューアルを行いました。ユーザが使いやすい UIづくりを目指すために、長期間にわたり誰が開発しても一貫性ある UIを実現できるようなシステムが必要です。そこで今回は﹁Composable﹂な UIシステムの実現をテーマに、どのように開発を行ったのかについて、共有させていただきます。背景‥画面や機能追加のたびに UIの一貫性がなくなっていたジョブメドレーの採用管理画面とは、医療機関や介護施設の採用担当者が求人情報の管理や応募者の選考状況の管理などを行う画面です。この採用管理画面ですが、リニューアル以前はAngularをフレームワークとして採
d4-1977 2018/03/04
UIの課題は難しい。テストもないしなあ

Bootstrap

CSS

UI
リンク
Atomic DesignからみたBootstrap｜Yoko Nishida
はじめまして。UIデザイナーの@nikoko45です。最近Webサービスのデザインガイドラインを作っていて、特にコンポーネントをどうまとめたら良いのか模索中です。ユーザーには一貫したUIや世界観を提供でき、開発者にはもっと効率的に作業スピードをあげられる方法はないか考えてみました。デザインガイドラインで目指したいこと一貫性のあるデザインを維持するために、デザインファイルのテンプレート作成、コミュニケーションやレビューのコストを少しでも減らすことがゴールなのかなと思っています。︵参考‥一貫したデザインのためにデザインシステムを運用する方法︶色々記事を読み漁った結果、どうやらデザインガイドラインとしてコンポーネントを整理するにはAtomic Designが役立ちそうということで調べてみました。 Atomic DesignAtomic Designとはインターフェースに含まれる要素を、
d4-1977 2018/01/09
デザイン

Bootstrap

atomic design
リンク
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか?その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。欧文をベースに設計されたBootstrapをそのまま
d4-1977 2016/10/15
あとで読む

CSS

Bootstrap

デザイン
リンク
esa/CSSNite/esa.ioのBootstrap利用とCSSリファクタリング - esa-pages.io
> CSS Nite LP47 "Coder's High 2016"CSS Nite LP47 "Coder's High 2016" 2016年9月24日（土）小山田晃浩（@yomotsu）PixelGrid Inc. 坂巻翔大郎（@geckotang）PixelGrid Inc. 赤塚妙子（@ken_c_lo） esa LLC > 自己紹介自己紹介 > esa.io ?esa.io ? https://esa.io (読み方: ｴｻ・知ってる方？ﾉｼ) マークダウンで書けるチームで使うWikiみたいなものこのスライドもesaでできてる (\( ⁰⊖⁰)/) > アジェンダアジェンダ今日は esa.io で使っている Bootstrapのメリット・デメリットや CSSリファクタリングについてお話します。 > esa と PixelGrid の関係esa と PixelG
d4-1977 2016/09/25
Bootstrap 使っていたのか。うまく使いこなせるようにならないとなあ、と思う

cssnite

esa.io

Bootstrap

あとで読む

css
リンク
Bootstrapの画面を手軽に作れるツールまとめ
業務システムの画面やWebサービスの管理画面にBootstrapを採用するケースが増えていますが、それでもBootstrapならではの書き方を覚えないといけません。バージョンが上がるごとに書き方が変わるので習得が面倒と感じる人も多いでしょう。そこで使ってみたいのがBootstrap用のUIビルダーです。ドラッグ&ドロップで画面が設計できれば作成も簡単ですよね。 lollytin beta 1.4 – A yummy HTML5blockouterer! Bootstrapのデザインをドラッグ&ドロップで作っていくのですが、見た目はデフォルメされています。その分、細かいところにこだわりすぎずにさくさくと作っていくことができます。 Pingendo – web authoring with comfort PingendoはBootstrap専用のオーサリングソフトウェアです。MacOS
d4-1977 2016/02/14
あとで読む

Twitter Bootstrap

Bootstrap
リンク
Webデザインシステムはじめの一歩
CSS フレームワーク活用のタイミング Bootstrap、Foundation をはじめとした CSS フレームワークを一度くらい使ったことがあると思います。制作はもちろん、どのように CSS ファイルを整理すれば良いのか、どのようにデザインのルールを設計するのかといった CSS の書き方を学ぶ際にも使えます。もちろん CSS フレームワークはたくさんありますし、 Gridlex のように Flexbox を活用したグリッドシステムだけといった UIの特定要素のみを提供しているツールもあります。 CSS フレームワークは制作において非常に便利なツールですが、最終成果物として扱うかは注意が必要です。以下のような場合を除いて、CSS フレームワークはなるべく使わないようにしています。プロトタイプ作成 Photoshop やSketchのようなグラフィックツールで Web サイトをデザ
d4-1977 2016/01/22
CSS

Bootstrap

あとで読む

フレームワーク

デザイン
リンク
Bootstrap 3 学習ノート - Qiita
(2014-06-09 ... 18) Bootstrap3の学習記録ノートです。できるだけ手を抜かず隅々まできちんと調査し、コードはほぼ全て実際に試して確認しました。元々公開を意図したものではありませんが、ここまで詳細に調べた資料はそうはないと思いますので最低限の体裁を整えて公開します。みなさんのお役に立てば幸いです。なおHTML部分はほぼ全てjadeで記述しています。jadeを知らないと理解できないノートになってしまっていますが、生のHTMLではとてもこのスピードでは学習できません。どうかご了承下さい。なお﹁ここは違うのでは﹂﹁こうした方がよいのでは﹂などという点がありましたらGitHubのissuesかpull requestなどでお教え頂けるとありがたいです(6/19記)。 (Qiita用に追加) Qiitaコメントでのご指摘も歓迎します。その後しばらくしてバージョンが
d4-1977 2014/07/01
良い！

Bootstrap

3.1.1

まとめ

資料
リンク
新着記事
『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
d4-1977 2014/05/19
Bootstrap

WEBデザイン

テンプレート

あとで読む
リンク
Bootstrap用管理画面のUIテーマ（15個） - いぬらぼ
壁紙・写真8953 webデザイン3925 デザイン3291 絵画・イラスト・アート2193 動物1745 3D1724 UI1291 photoshop1083 フリー1004 風景834 自然821 かわいい689 wordpress679 素材652 テーマ632 チュートリアル626 フォント617 幻想的548 動画530 お洒落524 建築物501 犬430 テンプレ400 イラスト397 psd396 猫384 ロゴ331 jquery297 ブラシ296 プレミアム285 プラグイン274 テクスチャ260 CSS249 ミリタリー221 タイポグラフィ217 名刺213 gif212 都市風景210 インテリア206 宇宙203 エフェクト200 SF188 ポスター186 ファンタジー186
d4-1977 2014/04/27
Bootstrap

webデザイン

UI
リンク
jQueryプラグイン - Bootstrapを使ったカレンダーを実装 - Zabuto Calendar
Bootstrapを使ったカレンダーを実装するプラグイン﹁Zabuto Calendar﹂を紹介します。 jQueryプラグイン﹁Zabuto Calendar﹂このプラグインでは、大人気のCSSフレームワーク﹁Twitter Bootstrap﹂を使ったカレンダーを実装することができます。 JSON形式のデータを使って、カレンダー上にスケジュールを追加することができます。追加したスケジュールはカレンダー上で色が変わり、クリックすると内容をポップアップすることもできます。便利！デモでカレンダーの外観を確認してみてください。青色は本日、オレンジはJSONデータによるスケジュールです。スケジュールをクリックしてみてください。なかなかカッコイイですよー。﹁Zabuto Calendar﹂のデモデモのソース︵HTML + jQuery︶<!DOCTYPE html> <html> <head
d4-1977 2014/03/07
Bootstrap

jQuery
リンク
時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。 Bootstrap2版はこちら Datepicker for Bootstrap (別記事) 実装方法ダウンロード / サンプル (v0.2.6) スクリプト <link href="bootstrap.min.css" type="text/css" rel="stylesheet"> <link href="css/timepicker.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="js/bootstrap-timepicker.js" type="text/javascript"> 時刻指定時
d4-1977 2014/03/07
Bootstrap

jQuery
リンク
hobo-designs.com is Expired or Suspended.
「 hobo-designs.com 」のページは、ドメインが無効な状態です。こちらから変更・更新を行ってください。「 hobo-designs.com 」is Expired or Suspended. The WHOIS is here.
d4-1977 2014/03/07
Bootstrap

jQuery
リンク
期間を指定する場合のカスタマイズ | Workabroad.jp
Twitter Bootstrap使ってるとどうもjQuery UIのカレンダーのデザインが気に食わなくて、bootstrap-datepickerを使う人が多い気がします。jQuery UIは機能が凄いからいいけどね。で、データピッカーなんですが、ちょっとソースがいろいろあって混乱してしまうので整理します。 Stefan Petre http://www.eyecon.ro/bootstrap-datepicker/ ↓ vitalets https://github.com/vitalets/bootstrap-datepicker ↓ eternicode https://github.com/eternicode/bootstrap-datepicker 多分こんな流れです。 eternicodeのオンラインデモは分かりやすくていい。期間を指定させる単一の日付けではなくて、○
d4-1977 2014/03/07
Bootstrap

jQuery
リンク
bootstrapでKaminariを使ってpaginateする - Qiita
paginate︵データベースのデータがページに収まりきらない時に、それを分割して、複数ページにする︶するのに、Kaminariを用いて実現しようとした場合、bootstrapで定義されているpaginateのスタイリングとkaminariのスタイリングがうまく噛み合わず、表示がくずれる。それをどうやって修正するのかメモをしておく。２０１３年3月18日追記どうやら公式のTHEMEにbootstrap向けのtemplateがあった模様手動でやる方法の後に追記themes The generator has the ability to fetch several sample template themes from the external repository (github.com/amatsuda/kaminari_themes) in addition to the bun
d4-1977 2014/02/11
Bootstrap

kaminari
リンク
4色ほど指定するだけでTwitter Bootstrapの配色を良い感じにしてくれるSass | mah365
そんなSassが町田先生のCustomizedTwitter Bootstrapに含まれていたので、これをTwitter Bootstrap3に対応させてみたのでした。ソースこちらが良い感じにしてくれるベースの変数です。 $base-color、$main-color、$accent-color、$base-text-colorを決めることで良い感じにしてくれます。僕は下のファイルみたいなテイストが好きです。ほんわかしている。仕事では使えない感じがある。実際に読み込むときには、Twitter Bootstrapより先に変数を読み込んでおきます。 //--------------------------------------------------------- // Color Scheme for Bootstrap @import colors/try @import color
d4-1977 2014/02/05
Bootstrap

Twitter Bootstrap

sass

web制作
リンク
BootstrapをBEMに考えてみる - Blog.おにぎりたまごうぃんなー
この記事はBEM Advent Calendar 2013の22日目の記事です。こちらの記事を読んで、初めてBEMを知りました。BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号ほー。そのうち調べてみよう。と思ってても人間必要に迫られないとやりません！ Advent Calendarに参加することでやらなきゃいけない理由をつくるライフハック。とりあえずよく使っているBootstrapをBEMで記述するとどうなるかを考えてみました。よくあるあるヘッダーでBEMる Components - Navbar / Bootstrap bootstrapのコードはこう <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navba
d4-1977 2013/12/27
Bootstrap

CSS

BEM

web制作
リンク
ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個 | A40
レスポンシブWebデザインのサイトは国内でも増えてきましたが、制作するとなるとかなり手間がかかります。そんなとき役に立つのがレスポンシブWebデザイン対応のフレームワーク。中でも﹁Bootstrap﹂は、多彩な機能を備え、その使いやすさから広く知られています。そこで今回は、国内の秀逸なレスポンシブWebデザインを集めた﹁Responsive Web Design JP﹂から、Bootstrapを使って作られたサイトをご紹介したいと思います。whiteSTOUT フォトクリエイティブを中心としたマネージメントオフィスのサイトです。トップに大きな画像を使い、洗練されたイメージとなっています。 AGATHA E-SHOP アクセサリーブランド﹁AGATHA﹂のECサイトです。有名ブランドの、しかもECサイトにもBootstrapが使われています。 ACTUS online こちらは有名イン
d4-1977 2013/12/23
デザイン

Bootstrap

CSS

HTML5
リンク
1 2 次のページ