CSS Utility Classes and "Separation of Concerns"
Software developer, author, and host of Full Stack Radio. August 7, 2017 Over the last several years, the way I write CSS has transitioned from a very "semantic" approach to something much more like what is often called "functional CSS." Writing CSS this way can evoke a pretty visceral reaction from a lot of developers, so I'd like to explain how I got to this point and share some of the lessons a
An Interactive Guide to Flexbox
IntroductionFlexbox is a remarkably powerful layout mode. When we truly understand how it works, we can build dynamic layouts that respond automatically, rearranging themselves as-needed. For example, check this out: This demo is heavily inspired by Adam Argyle’s incredible “4 layouts for the price of 1” codepen. It uses no media/container queries. Instead of setting arbitrary breakpoints, it uses
CSS Guidelines (2.2.5) – High-level advice and guidelines for writing sane, manageable, scalable CSS
CSS Guidelines High-level advice and guidelines for writing sane, manageable, scalable CSS About the Author CSS Guidelines is a document by me, Harry Roberts. I am a Consultant Front-end Architect from the UK, and I help companies all over the world write and manage better quality UIs for their products and teams. I am available for hire. Follow me on Twitter or Hire Me Support the Guidelines CSS
Text Effects With CSS (and A Little Contenteditable Trick) | CSS-Tricks
Get 30% off on all hosting plans with Cloudways, a managed cloud hosting platform for WordPress and more. Mandy Michael has been creating some incredible text effects with just the power of CSS. She uses every trick in the book: gradients, transforms, pseudo elements, shadows, and clipping paths to name a few. They are all real web text too. Custom fonts typically, but no images, canvas, or SVG or
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
游ゴシックを一瞬でクロスプラットフォームにするたったひとつの方法 | note - rxon.now.sh
游ゴシックを一瞬でクロスプラットフォームにするたったひとつの方法 2016-12-17 これはステマポエムです 時は2013年、かつてないほど美しく汎用性の高いフォントが二大OSにバンドルされることとなった。 その名は、游書体。 いままでMac、Windows両方のOSに同じデフォルトフォントは入っていなかっただけに、フォント指定におけるシルバーブレットになるかと思われた。 しかしMacとWindowsの游書体はPostscript nameと搭載ウェイトが異なり、Web開発者にはMacユーザーが多いためこの事に気づかずWindowsユーザーを中心に「游ゴシック見づらい」というインプレッションが広まった。 その後現在に至るまでこの差異を埋めるためのfont-family、@font-face指定を紹介する記事がReact入門記事並みに大量生産された。 モダン日本語フォント指定 // Spe
フロントエンドガイドラインについての質問表 - Qiita
この1ページの質問表は、チームで効果的なフロントエンドガイドラインをつくり一貫性とまとまりのあるコードを共に書けるようにする為の補助ツールである。 HTML HTMLの方針 HTMLを書く上でのチームとしての基本方針は何か？ (例： セマンティックなHTML5マークアップを書く, アクセシビリティ, 等。 これらの 資料 を 参照) HTML Tools HTML プリプロセッサーを使用しているか？ (例： HAML, Jade, など) テンプレートエンジンを使用しているか？ (Mustache, Handlebars, など) バックエンドの構成はフロントエンドに影響するか？ (例： WordPress はマークアップのクラスにwp-paginateを加える) もしあれば, そうしたルールをについてさらに説明できるか？ HTML 記述のスタイル スペースかタブか？ コメントルールはどう
20160930 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
Rotated text
Once I already shared this solution on the birdsite, but this time I’m going to write a bit more on it. The task is to get the text rotated by 90 degrees. The problem: it’s widely known that when you use transform, the block behaves similar to the position:relative — its place in the flow is not changed after the transformation, so the change is only visual. However, rather often you’ll need to ro
The Fab Four technique to create Responsive Emails without Media Queries
By Rémi Parmentier I think I found a new way to create responsive emails, without media queries. The solution involves the CSS calc() function and the three width, min-width and max-width properties. Or as I like to call them all together: the Fab Four (in CSS). calc() & width & min-width & max-width, aka The Fab Four (in CSS). The problem Making responsive emails is hard, especially since email c
Learn CSS Layout
This site teaches the CSS fundamentals that are used in any website's layout. I assume you already know what selectors, properties, and values are. And you probably know a thing or two about layout, though it may still be a rage-provoking activity for you. If you want to learn HTML and CSS from the beginning, you should check out this tutorial. Otherwise, let's see if we can save you some fury on
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
Bootstrap と BEM を組み合わせた CSS 設計パターンについて考える | Recruit Tech Blog
前置き - CSS 設計が難しい件について 誤解を恐れずに言うならば、CSS は変数も関数も条件分岐もない、ある種ゆるふわな言語（仕様）といえます。そのためプログラミング言語のように記述ミス一つで全ての挙動が止まるなんてことはありませんし、いくら冗長に記述しようがブラウザ上での挙動に差異が生まれることも殆どありません。ちょっと嗜めばそれっぽいものが作れてしまうので、マークアップエンジニアのいない小規模体制の組織であれば、サーバーサイドエンジニアやデザイナーが片手間で習得して実装してしまうというのも珍しいことではないでしょう。それでも良かったのかもしれません。これまでは…。 片手間で学習した知識というのはなかなか体系化されないものです。CSS も御多分に漏れずプログラミングのテクノロジーは日進月歩なため、その時は最新だった技術が僅か一年も経たないうちに廃れてしまい、バッドノウハウ化してしまう
Foundation for Sites | The most advanced responsive front-end frameworks in the world.
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
Build Web Layouts Easily With Susy | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Susy provides you with the tools to build your own grid layouts that match the needs of your website. It gives you the freedom and flexibility to build any design that you can imagine. It doesn’t matter if your design has 5, 14 or 48 columns. Unequal width columns? Susy’s got you covered. Why would
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
CSS Reference
GitHub - hiloki/flocss: CSS organization methodology.
https://descartes.io/
Stylus