BEMが採用されているCSSフレームワークまとめ - Qiita
有名どころのフレームワークだと独自クラスと見分けが付きにくかったり、作成したコーディング規約に矛盾が生じたりすることがあると思います。 業務でCSSフレームワークを利用する機会が出来たため、調査してみました。 BEM使われてるよ MATERIAL DESIGN LITE 全てのクラスにmdl-プレフィックスがついているため、自作/フレームワークとのクラスの違いが分かり易い マテリアルデザイン Goodle謹製 Topcoat こちらもtopcoat-プレフィックスがついている きめ細かい影使いが特徴のデザイン Adobe謹製 inuitcss まだcomming soon Components, Objects, Utilitiesというレイヤーを持っていて、それぞれc-, o-, u-プレフィックスがつく MVCSS modifierだけ採用して、elementはマルチクラスで対応してい
Topcoat
CSS for clean and fast web apps. Soooo Fast!Performance is our #1 goal. Every component we design is benchmarked for performance. You can see our results. Components GaloreWe have the building blocks to get you up and running fast. Our growing set of components were born from CSS. ThemeableIs that even a word? It should be! We love our theme, but we don’t want to hit your brand over the head with
新しくなったBootstrap 4の基本テンプレート、ナビゲーション、コンポーネントのまとめ
2018年1月18日、Bootstrap 4の安定版がようやくリリースされました。 Bootstrap 4ではFlexboxが採用され、それに伴いFloatは取り除かれ、CSSのソースはLessからSassに変更され、CSSの主要な単位はpxからremに変わり、デフォルトのフォントサイズは大きくなり、サポートブラウザからIE8,9は外れました。 ※pxはメディアクエリとグリッドのみ。 新しくなった、そして改訂された、Bootstrap 4の基本テンプレート、ナビゲーション、コンポーネントを紹介します。 Bootstrap Bootstrap 4の基本テンプレート Bootstrap 4のナビゲーションバーのテンプレート Bootstrap 4のコンポーネントのテンプレート Bootstrap 4の実験的なテンプレート Bootstrap 4の基本テンプレート まずは、Bootstrap 4
CSSリセットの新しい考え方、リセットと有用なコンポーネントだけのスタイルシート -Shoelace.css
レイアウトにfloatを使用していた頃はグリッドを構築するために、複雑なHTMLやテクニックが必要になることがありました。しかし、flexboxやCSS Gridの登場で、レスポンシブ対応の柔軟なグリッドを簡単に利用できるようになりました。 そんな時代に合わせて、グリッドは無し、有用なコンポーネントが簡単に利用できるリセット用のスタイルシートを紹介します。 Shoelace.css Shoelace.css -GitHub Shoelace.cssの特徴 Shoelace.cssの使い方 Shoelace.cssのデモ Shoelace.cssの特徴 グリッドはflexboxやCSS Grid、またBootstrapなどを利用し、プロジェクトにあったデザインでコンポーネントを作成することができます。 Shoelace.cssはフレームワークではなく、有用なコンポーネントが含まれたCSSリセ
お前ら今すぐそのCSSフレームワーク使うのやめろ! - Qiita
タイトルは釣りです。すみません。 CSSフレームワークって文章構造とスタイル情報の分離ができてなかったり、色々問題だよねって話です。 それではどうぞ。 CSSフレームワークの問題点 以下はBootstrapの公式から持ってきたサンプルコードです。 こちらのサンプルコードを見ながらCSSフレームワークの問題点を探っていきましょう。 <div class="row"> <div class="col-lg-6"> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> <input type="text" class="form-control" placeholder="Search for...">
CSS書きたくなさすぎ問題2017 - DRYな備忘録
css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。 参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス ググれ。 lightweight css framework - Google 検索 Gridだけやりたいやつは除外した。 Bootstrap Materialize mui （追記）UIkit （追記）Semantic UI Pure Bulma Skelton Spectre.css Kube Vuetify Fictoan avalanche Beuter Vanilla Milligram InvisCSS Look
Flexboxベースのレイアウトを実装できるCSSフレームワークまとめ - NxWorld
レイアウト（特にグリッドレイアウト）を作っていく上で、Flexboxを利用して且つ手軽に実装したいというときに便利なCSSフレームワークを紹介します。 Bootstrapのようにレイアウトに限らず様々なコンポーネントまで用意されているものもあれば、Flexboxを使ったグリッドレイアウトの実装のみに特化したシンプルなものまでいろいろありますが、全体的に適用したい箇所にクラスを付与するだけと簡単に利用できるものになります。 Bootstrap いまや定番といえるCSSフレームワークのひとつでご存知の方も多いBootstrapは、バージョン4からFlexboxを用いたグリッドシステムが利用できるようになりました。 使用方法も下記にあるようにこれまでのグリッドシステムを使用するときと同じような感じで使えるので、今までBootstrapを利用してきた人であれば尚更楽に導入できると思います。 また、
[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway | コリス
去年くらいまでは、こういったレスポンシブ対応のMasonryレイアウトはJavaScriptで実装するのが主流でした。jQueryのプラグインも数多くリリースされています。 そんなレスポンシブ対応のMasonryレイアウトをスクリプト無し、CSSで簡単に実装できるdrivewayを紹介します。CSSアニメーションを使ったインタラクションにも注目です！ 実装が簡単 インタラクティブ レスポンシブ対応 カスタマイズが簡単 拡張性も豊か 実装にはFlexboxが使用されており、2016年1月12日にIEの古いバージョンのサポートが終了し、実質IE11+となった現在、多くのプロジェクトで利用できるでしょう。 ちなみに、2017年4月11日にVistaのサポートも終了します。 参考: Windows 製品のサポート ライフサイクル について drivewayのデモ デモではdrivewayで実装され
![[CSS]レスポンシブ対応のMasonryレイアウトをスクリプト無し、ピュアCSSで簡単に実装できる -driveway | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/a99bb8a10dc67f32f5120a14ca9f4d9546de9b36/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016042601.png)
IE9+もサポート、CSS3 Flexboxを始める人にぴったりな極めてシンプルな使いやすいフレームワーク -FOX CSS
そろそろFlexboxを使ってみたいな、と考えている人にぴったりなCSS/Sassの超軽量フレームワークを紹介します。 もちろんFlexboxをバリバリ使っていて、シンプルなのが必要な人にもぴったりです。 FlexboxはIE11+対応ですが、IE9+にも一行加えるだけで同じHTMLで実装できます。 FOX CSS FOX CSS -GitHub Flexboxの各プロパティの使い方は、以前の記事を参考にしてください。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 FOX CSSの特徴 FOX CSSの使い方 FOX CSSのリセット FOX CSSのFlexbox FOX CSSの特徴 FOX CSSはモバイルファーストで設計されており、その半分がCSSリセット、もう半分がマイクロフレームワークで構成されています。 ライセンスはCC BY 3.0で、個人でも
[CSS]レスポンシブ対応の賢いアイデア、自在に伸び縮みするカード型レイアウトを実装するスタイルシート -chewing grid
テキストや画像や動画などをタイル状に配置する、レスポンシブ対応のカード型リストを実装できるCSSのグリッドを紹介します。 「chewing」の名の通り、表示サイズに合わせてチューイングガムのようにカードとグリッドが伸び縮みします。 デモはサイズの可変可能 chewing-grid.cssの使い方 Step 1: 外部ファイル 当スタイルシートを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" type="text/css" href="build/chewing-grid-atomic.css"/> </head> Step 2: HTML 各カードはリストで実装します。 <ul class="chew-row chew-row--col-4 chew-row--card-min-300 chew-row--card-min-500"> <
![[CSS]レスポンシブ対応の賢いアイデア、自在に伸び縮みするカード型レイアウトを実装するスタイルシート -chewing grid](https://cdn-ak-scissors.b.st-hatena.com/image/square/81c1fd0a7d6fa3666b599c77d612e26073e80137/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082501.png)
2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワーク さまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー 使いやすいアイコンフォント・Pure CSSのアイコン リセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd
亚洲一区在线曰日韩在线_大炕上的偷乱怀孕_在线观看永久免费网站_鬼父动漫
野兔AV,亚洲一区在线曰日韩在线_大炕上的偷乱怀孕_在线观看永久免费网站_鬼父动漫
Picnic CSS
Lightweight and beautiful library <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic">CDN | Download | GitHub Default HTML beautyThe native HTML elements get a boost so you don't need to write presentation classes mixed with your HTML. Picnic is completely modular so you can easily modify and test each part: Documentat
This page is moved
This page has moved to http://stylus-lang.com/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
lit
Styleguide & Boilerplate Patterns