サーバーサイドエンジニアだらけのチームでフロントエンドを改善するためにやったこと | FiNC Developers Blog
サーバーサイドエンジニアだらけのチームでフロントエンドを改善するためにやったこと はじめまして、エンジニアインターンの田中です。 各企業の従業員の健康状態を調べるアンケートシステムであるウェルネスサーベイというプロジェクトのリニューアルを行っています。 サーバーサイドはともかくフロントエンドは再利用性の低い負債となるコードが多くあったので、1から綺麗に設計をして寿命の長いコードにしていく必要があると考えました。 そこで、リニューアルの時にどのようなプロセスを踏んでフロントエンドを改善していこうとしたのかについて書きたいなと思います。なお今回は主にHTML/CSSについて話します。 今までの問題点開発環境リニューアル前のフロントエンドの開発環境は以下のとおりでした。 ERBSCSSCoffeeScript要するにデフォルトのRailsの設定のままですね。 それでは今までは具体的にどこが問題だ
MaterialDesign対応のUIフレームワーク5選
こんにちは。すーさんです。 今回はGoogleが提唱したデザインガイドライン「MaterialDesign」をWEBに取り入れる為のUIフレームワークをご紹介します。 Materialize まずはBootstrapライクなCSSフレームワーク。コンポーネントとドキュメントも一通り揃っており使いやすそうです。 Materialize Material Design for Bootstrap こちらはBootstrapベースのCSSフレームワーク。BootstrapコンポーネントもすべてMaterialDesignになっています Material Design for Bootstrap Paper Bootswatch for Bootstrap こちらもBootstrapベースのCSSフレームワーク。Bootstrapのテーマとして配布されています http://bootswatch.
%25E3%2581%25AEcss%25E3%2582%2584%25E3%2583%2595%25E3%2583%25AC%25E3%2583%25BC%25E3%2583%25A0%25E3%2583%25AF%25E3%2583%25BC%25E3%2582%25AF)
マテリアルデザイン(Material Design)のcssやフレームワーク - webhack / ウェブ技術が好き
2015-06-28 マテリアルデザイン(Material Design)のcssやフレームワーク ぼくはbootstrap + Paperを使う事がおおいのですが他にも良さげなcss/フレームワークがありますのでこの記事にまとめて行きます。 1.Materialize Documentation - Materializematerializecss.com bootstrapを使わずにレスポンシブなマテリアルデザインに向いています。カラーパレットをcssで指定できるのは分かり易くていいかなと思います。 2. Polymer https://www.polymer-project.org/1.0/ Web Componentsでサイトを作るのにマテリアルデザインを導入するならPolymerが向いています。更新頻度が速くて開発がどんどん進められている印象です。 3. Bootswatch
CSSフレームワークBourbon/Neat/Bitters/Refillsは美しい - Qiita
新規JekyllプロジェクトにBourbon, Neat, Bittersをインストールして作業したら、とても快適だった。 Bitters helps designers start projects faster by defining a basic set of Sass variables, default element style and project structure. – Bitters という説明の通り、新規プロジェクトがスタートダッシュできる感覚。最初からやりたいことに集中できる。 Bootstrapではスタートダッシュできるけど使い捨てのコードになりがち。ところが、Bittersのコードは長期的なメンテナンスにも耐えうる（はずだと筆者は判断している）。 コンテンツファースト アクセシビリティファースト モバイルファースト インブラウザーデザイン といった考え方や手
Bootstrap以外のCSSフレームワークを探してみた - Qiita
やりたかったこと CSSフレームワークを使いたい。けど、Bootstrapだとありきたりすぎる…というときに、他のCSSフレームワークを探してみました。 Bootstrap 以外のCSSフレームワークいろいろ HTML Kick start 全体的に丸みを帯びている。アイコンデザインがよい。 他の特徴はよく分からないです。 Cascade Also different from Twitter Bootstrap or other CSS Frameworks out there, Cascade Framework can be used for modern browsers and older browsers alike. All features of Cascade Framework support Internet Explorer from IE6 upwards or
「シングルページ」流行の7つの理由と最新事例まとめ (1/4)
「シングルページ」と呼ばれる、1ページで完結しているWebページを見かけることが多くなりました。シングルページの概要と、CSSフレームワークを使った実際のシングルページの作成を通して、シングルページのデザインの考え方や作成方法の知識を身につけられる連載をお届けします。解説はデザイナーの石嶋未来氏にお願いしました。（編集部） シングルページとは、1ページで完結しているWebページのことです。最近よく見かけるようになりましたね。シングルページのみを集めたギャラリーサイトなどもあり、Web制作に携わっている方であれば一度は目にしたことがあると思います。 シングルページで作られたサイト。左から、モバイルセキュリティソフトウェアのLookout, Inc,（https://www.lookout.com/）、「重陽」ブランドの包丁を製造販売している堺菊守 河村刃物株式会社（http://chouyo
知って得するSass/Compassのインストールと使い方
本連載「爆捗！ WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」（以下、Dreamweaver）でWordPressのテーマをカスタマイズできるようにする設定の方法を紹介。第2回の「WordPress初心者でも爆捗！ テンプレートカスタマイズ＆ショートコード作成超入門」でWordPressの内部構造、Dreamweaverを使ったテンプレートのカスタマイズ方法、ショートコードの作り方について解説した。 第3回の「CSSコーディングで泣かないためのSassの基礎知識と10の利点」では、さらなる爆捗のために、「Sass」についての概略を解説した。第4回の前回「いまさら聞けないSassの使い方入門―― インストールとコマンド、Dreamweaver連携」では、Sassの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
