A really common design pattern I see come up a lot are those angled blocks of colour in the bottom of containers, you’ve probably come across it, it looks something like the image below. Angled colour block inside a squareThis happened to turn up on one of our projects and rather than implementing with an image or SVG we decided to use a linear-gradient, the benefit of this is that it’s really eas
Hey kids, you ready for me to tell you all about this newfangled thing called Bootstrap? Well get un-ready, ‘cause I’d never do that to you. It’s not that Bootstrap isn’t great, it’s just that if you work in web design, and you’ve been paying any attention at all, you already know about it. And if you don’t… well… welcome to the industry! We have some articles you may want to check out. For everyo
I know I also have a terrible record with open source maintenance, so I thought I’d archive the original and just post this instead. Do with it what you want! To be super clear, this is a reset that works for me, personally and us at Set Studio. Whenever I refer to “we”, that’s who I’m referring to. The reset in wholepermalink /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box;
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Different website designs often call for a shape other than a square or rectangle to respond to a click event. Perhaps your site has some kind of tilted or curved banner where the click area would be awkwardly large as a straight rectangle. Or you have a large uniquely shaped logo where you
CSS 設計でいう保守性とは、新しいルールの追加・更新のしやすさ をあらわす。保守性を高めるためには、変更の局所化、他のルールへの副作用を最小にするアーキテクチャ を採用します。 設計思想は FLOCSS ベースの ECSS + rscss + Tailwind CSS のいいとこ取り 命名規則は MindBEMding (以降、BEM) 開発言語は Sass + PostCSS コンポーネント粒度 FLOCSS ではプロジェクトにおいて繰り返されるビジュアルパターンをすべて Object として定義します。Object には、Component と Project のレイヤーがあり、この 2 つの判別において Atomic Design のコンポーネント粒度の考えを拝借します。具体的には、 Component:Atoms Project:Molecules に分類します。 単語間の区切り
詳細度の広い順に定義をしていくため、下のレイヤーに行くにつれ詳細度は上がっていく。 Settingsプリプロセッサなどで利用するグローバル変数や全体の設定を置く。 ここではプロジェクト内のグローバルな設定を記述する。(SASS 変数や CSS Variables の定義) $font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; $white: #fff !default; $black: #000 !default; $gray: #f8f9fa !default;
ITCSSは、OOCSSやBEM、SMACSSのようなCSS methodology(方法論)の1つでInverted Triangle CSS(逆三角形CSS)の略称。 提唱したのは、csswizardryのHarry Roberts氏。 ITCSSに関するドキュメントはあまり多くない。 セルビアでITCSSについて紹介している動画がYoutubeにあがってる。そのときのスライドがManaging CSS Projects with ITCSS // Speaker Deck。 ITCSSは、プロジェクトのCSSをより良く管理していくのに、以下のことが必要としていて、 A sane environment that is accessible to lots of people. To tame and manage source order and the cascade. To cr
Understanding ITCSS: Real case using ITCSS in a GhostCMS blog I have applied the ITCSS architecture in the theme designed for my own blog https://carloscaballero.io the theme is available in GitHub so you can use it freely. CSS is a painful when not written properly and sadly the majority of times CSS is incorrectly organized. The main problems when you use CSS are the following ones: Global scope
Carloscaballero.io Theme: A free, open source theme for Ghost • 12th April 2019 • 3 min read I developed, together with my student Alejandro Torres, a redesign of the theme of this blog using the ITCSS architecture. After having been working on the complete redesign of the blog we thought that it is best to release it for the community and let any user study it and improve it. You can find the sou
Do you know the impact unused CSS has on performance? Spoiler: It’s a lot! In this article, we’ll explore a Sass-oriented solution for dealing with unused CSS, avoiding the need for complicated Node.js dependencies involving headless browsers, and DOM emulation. In modern front-end development, developers should aim to write CSS which is scalable and maintainable. Otherwise, they risk losing contr
You can’t position: sticky; a <thead>. Nor a <tr>. But you can sticky a <th>, which means you can make sticky headers inside a regular ol’ <table>. This is tricky stuff, because if you didn’t know this weird quirk, it would be hard to blame you. It makes way more sense to sticky a parent element like the table header rather than each individual element in a row. The issue boils down to the fact th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く