カスタマイズ性抜群！Sassに対応したCSSフレームワークがアツイ！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 レスポンシブWebサイトを作成する際に重宝されているCSSフレームワークですが、「自由度が低い」「使わないUIパーツは邪魔になる」「カスタマイズするのに手間がかかる」「結果CSSファイルが肥大化してしまう」など、利用するうえでのデメリットも多々ありました。 実際フレームワークって、レスポンシブの大枠ができちゃってるし、コンポーネントが充実してる分あまり作り込む必要がないんで楽っちゃ楽なんですが、テンプレートに束縛されちゃデザイナーとしては面白くないしあまり頼りたくないってのも正直なところ。似たりよったりになるし。。 過去にCSSフレームワークの代表的存在「Bootstrap」を利用しましたが、柔軟性の低さに苦しめられたのを覚えています。 ですが最近はCompassのようにSassファイルが収められたシンプルでカスタマイズ性の高いCSSフレームワークが増
「デザイナー」の仕事が変わるかもしれない フロントエンドフレームワーク 10選 | coromos
皆さんは、Twitter Bootstrapを使ったことはありますか？ Twitter Bootstrapは、フロントエンドフレームワークの一種です。 フロントエンドフレームワークとは、HTML/CSS、JavaScriptで「多くの人が共通して作るであろう部品」を、簡単なコードを数語書くだけで使えるようにしてしまうフレームワークです。 今までは、デザイナーの仕事は一枚の巨大なPhotoshopファイルをつくること。その後は、それをマークアップをするエンジニアがそれをコードに置き換えていくことだと思われていました。 しかし、アジャイル・リーンな開発手法が増える中、初期の開発サイクルでこの「デザインをゼロからつくること」に時間をかけるべきか、疑問視されはじめています。 もしかしたら、あなたのデザイナーとしての次の仕事は、「Bootstrapで作られたサイトをカスタマイズすること」かも
PlayCanvas - オープンソース（MIT）になったHTML5＆WebGLベースのクラウド型ゲームエンジン！
イベント-Event 2024春 バンクーバーVFX/CG現地体験会 - 英語が苦手でも安心の6日間の... 2024-01-14 海外の映画・CG・Web業界への進出をサポートするチーム「Teamove」による「2024年春 VFX／CG現地体験会」の仮申し込み受付が開始されています！※CG専門の通訳が全日程アテンド！英語ができない方でも安心！ 続きを読む Blender アドオン プラグイン＆アドオン-Plugin&Addon Jiggle Maker v1.1 - クロスベースのボリューム揺れ物理挙動を簡... 2024-01-14 Lewdineer氏によるクロスベースのボリューム揺れ物理挙動を簡単にセットアップ出来るBlenderアドオン『Jiggle Maker v1.1』がGumroad上でリリースされています。 続きを読む Unreal Engine アセット アセット-A
Pure.css
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
CSSだけで美しいレスポンシブデザインを実現『Pure』 - slow living in the sky
根強いBootstrap人気 以前大ブームを起こしたレスポンシブデザインですが、その火付け役とも言えるのが Bootstrap ですね。 以前に比べては少し勢いが小さくなったように感じますが、未だに根強い人気があります。 Bootstrapの難点 ただ、Bootstrapは、 独特の記述ルール CSSだけでも100KB以上 JavaScriptを利用する JQueryに依存する カスタマイズが難しい など、イマイチ使い勝手が悪く、気軽に導入できるというものでもありませんでした。 Bootstrapの弱点を解決する『Pure』 そこで登場するのが、Yahoo!の開発した『Pure』です。 Pureの特徴は、 CSSフレームワーク 必要なのはCSSだけ 用途に応じて分割（Grids, Buttonsなど）して使うことも可能 すべて読み込んでも19KB JavaScriptを必要としないので、ほ
スマートフォン時代のCSS Frameworkあれこれ : 構想雑文
構想雑文 WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。 ここ最近のサイトへのアクセスログを見ていると、スマートフォンからのアクセスが増加傾向にあるので、ウェブサイトつくるときもスマートフォンに考慮したサイトにせねば、とようやく思い始めています。 スマートフォン向けのレイアウトをつくるのは苦手だし、特に、レスポンシブウェブデザインのレイアウトって面倒としか思えないし、どうするかなぁ、と思うもすぐにCSS Frameworkを使えば解決するかなぁ、と思って調べてみました。 CSS Frameworkの数あり過ぎです。 昔は、グリッドレイアウトをきれいに作成するぐらいのものでしたが
AngularJSのMVWパターンを理解する - Qiita
12/4の記事（AngularJSを使ったWebアプリのアーキテクチャ設計）で書くと言ったまま放置していたので、AngularJSのMVCパターンについて書いてみたいと思います。 AngularJSのMVCについては、12/19のお前のAngular.jsはもうMVCではない。と言われないためのTutorialというすばらしい記事がありますが、本記事ではもう少し抽象的な内容を扱ってみようかと思います。 MVW（Model-View-Whatever）パターンとは MVCパターンには、MVC2、MVP、MVVMなど数多くの派生パターンがあります。 目的は同じなのに派生パターンがたくさんあるのは、それぞれのプラットフォーム固有の問題（フレームワークの違いや、サーバサイドかクライアントサイドかの違いなど）によってMV*の*の役割が異なるからです。 AngularJSは公式ページで"Superhe
Polymer library - Polymer Project
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
「Foundation 4」によるサイト制作手法 - Build Insider
Webサイトを制作する際、現在ではスマートフォンやタブレットなどの「スマート・デバイス」への対応は必須要件となりつつある。その対応手法の1つが「レスポンシブWebデザイン」（以下、RWD）だ。 しかし、RWDは制作が煩雑になりがちで、制作現場からは決して歓迎されている手法とはいえない。その煩雑さを軽減するために注目されているのが、「CSSフレームワーク」を活用した制作手法である。 本記事では、そんなRWDの現状と、CSSフレームワークの1つである「Foundation 4」を利用したサイト制作手法を紹介しよう。 RWDの利点と欠点 RWDがこれほど注目されたのは、グーグル（Google）がブログで言及した「Building Smartphone-Optimized Websites」（次の画面を参照）および、その翻訳記事の影響が大きいだろう。グーグル自身が特定の技術や手法を推奨することは珍
Home - Scalable and Modular Architecture for CSS
SMACSS was written in 2011. This site remains for archival and educational purposes. I’ve been analyzing my process (and the process of those around me) and figuring out how best to structure code for projects on a larger scale. What I've found is a process that works equally well for sites small and large. Learn how to structure your CSS to allow for flexibility and maintainability as your projec
Bootstrap
BootstrapBootstrap v5.3 (switch to other versions) v5 releases Latest (5.3.x) v5.2.3 v5.1.3 v5.0.2 Previous releases v4.6.x v3.4.1 v2.3.2 All versions Get Security Updates for Bootstrap 3 & 4 Build fast, responsive sites with Bootstrap Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life w
レイアウトや配色等をインタラクティブに設定できるWordPressテーマを作る為のフレームワーク・PressWorkちょっとやばい
その場でインタラクティブにレイアウトや配色を 調整出来るようなテーマを作る為の開発者向け WordPressテーマフレームワークのご紹介。 久々に凄いなーと感じて脊髄反射的に記事に。 PressWorkで作られたテーマならユーザーが 直感でレイアウトを作る事が出来ます。 以前、直感でWebサイトを作成できるフリーWebサービスという記事を書いたんですが、このサービスのように、インタラクティブにレイアウトやカラーなどを決める事が出来るWordPressテーマ。というだけでも凄いんですが、これがフレームワークとして配布されているのでちょっと驚きでした。 HTML5で出来ています。管理画面に入る事も無く、FTP不要で直感的に、インタラクティブにレイアウトを組む事が出来ます。やばい。 以下に解説を少し。 テーマをアクティブにする 最初にテーマをアクティブにします。外観でPressWorkを選択する
7Sとは・意味｜MBAのグロービス経営大学院
7Sとは、企業戦略における、幾つかの要素の相互関係をあらわしたもの。優れた企業では、各要素がお互いを補い、強め合いながら戦略の実行に向かっているとされる。世界有数の戦略コンサルティングファームであるマッキンゼー・アンド・カンパニーが提唱した。 7Sは、ソフトの4Sとハードの3Sに分かれる。 ソフトの4S ①Shared value （共通の価値観・理念） ②Style（経営スタイル・社風） ③Staff（人材） ④Skill（スキル・能力） ハードの3S ⑤Strategy（戦略） ⑥Structure（組織構造） ⑦System（システム・制度） このうち、ソフトの4つは、価値観が絡む要素であるだけに慣性が働き、強制的にまたは短時間に変更することは難しいとされる部分である。 一方、ハードの3つは、変えようとする意思やプランがあれば、変更することが可能である。 手をつけやすいという理由から
HTML5でネイティブ風アプリを作るFEフレームワーク「Junior」:phpspot開発日誌
Junior - A front-end framework for building HTML5 mobile apps with a native look and feel. HTML5でネイティブ風アプリを作るFEフレームワーク「Junior」。 BootstrapライクなUIのWEBアプリが作れます。 ビューはJSONを定義して挙動を指定することが出来ます 各種UIコンポーネントはある程度揃っています。 関連エントリ これは超使いやすいページネーションの次世代UI フルスクリーンでページめくりをするUI実装デモ 数値の範囲を入力する際に便利なUI作成jQueryプラグイン「jQRangeSlider」 美麗なデザインのUIキット（PSD) ３０ iOSのアイコンフォルダ風のUIを作れるjQueryプラグイン「App Folders」 jQuery UI をタッチイベントに対応させ
Sencha Presents Sencha Touch
業界初のHTML5モバイルアプリ用フレームワーク Sencha Touchを使えばタッチスクリーンを装備したApple iOSや Android端末上でネイティブアプリのようなWebアプリが開発可能です。 Web標準技術に準拠 Sencha TouchはHTML5、CSS3、JavaScriptに特化した世界初のアプリケーションフレームワークです。SSencha Touchはこれらの技術が持つ力を最大限に引き出し、かつ柔軟で最適化されたアプリケーション開発を可能にします。Sencha Touchでは、音声や動画を組み込む為のコンポーネントやデータをオフラインでも利用可能にするlocalStorageプロキシーなどでHTML5の機能が利用されています。またSencha TouchのスタイルシートではCSS3を最大限活用してとても堅牢なスタイリングレイヤーを実現しています。 このライブラリはそ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
BEM
2013年上半期、チェックしておきたいCSSのフレームワークのまとめ
sidetap.it
GitHub - brajeshwar/grid: A simple & semantic responsive grid system.
Unity - Game engine, tools and mulitplatform
