$z: header, nav, pulldown, child; .header { z-index: index($z, header); // 1 } .child { z-index: index($z, child); // 4 }
Sassを使ったz-indexの管理 - Qiita
$z: header, nav, pulldown, child; .header { z-index: index($z, header); // 1 } .child { z-index: index($z, child); // 4 }
Buttons - A button library built with Sass
A CSS button library built with Sass & CompassDownloadCustomize Buttons 2.0 is coming soon!Enter your email to get notified when it launches! Follow @unicornuirocksTweetFlat Buttonspress me press me press me press me press me press me press me press me press me press me press me press me press me press me press me press me press me press me press me press me press me press me press me press me Glo
自動検出と自動修正でCSSを保守する - Qiita
CSSの保守に便利なcsscombとscss-lintについて説明します。 scss-lint scss-lintは、SCSSのコードから与えた設定に違反している箇所を報告してくれるツールです。jslintやrubocopのSCSS版のようなものです。これをCI等で定期的に実行しておくことで、ルールに違反したコードの蔓延を防ぎます。 csscomb csscombはNode製のツールで、CSSのコードを与えた設定に従って自動で変換してくれるものです。scss-lintを初めて導入するときに利用すれば、大半の警告を自動で修正してくれるでしょう。但しCSSの文法しか解釈できないため、SCSSに適用すると失敗する場合があります。SCSSで書かれたファイルに対して適用してみたところ、@includeなどの文法は受理されるものの、@ifなどの文法を受理できないようです。しかしながら問題となるケースが
csstyle
clean, simple styling for the web csstyle is a modern approach for crafting beautifully maintainable stylesheets. Keeping CSS clean and organized is really hard. csstyle provides a higher-level abstraction for writing modular CSS. Written for Sass, it makes your CSS readable and semantic, generates your selectors for you, and automatically handles things like specificity and nesting. csstyle makes
The Role of Utility Classes in Scalable CSS | David Clark Develops the Web
Lately, I’ve been thinking about how to write scalable CSS. Not so much about how to pull off snazzy effects, or take advantage of the latest modules, or play clever tricks with preprocessors — but how to create stylesheets that will remain coherent, maintainable, consistent, and extendable as projects grow and change — and how to do this systematically. I’ve been reading everything I can find on
Glitch Effect On Text / Images / SVG | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Lucas Bebber’s Glitch is a super cool effect. It’s like you’re looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space. It’s bonafide CSS trick if t
Bootstrap's Grid System vs. Susy: A Comparison — SitePoint
There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap. Today, I’ll like to introduce you to a slightly lesser known framework that has caught on for many people – Susy. In this article, I’ll show a comparison between Susy and Bootstrap’s grid system so you can f
Games from Merkur in Australia
Until the end of 2017, Merkur games were available in Australia online casinos For a while, the game manufacturer withdrew from the market in Australia. Due to the new gambling regulation, Merkur has decided to come back. This is not only a reason for die-hard fans to celebrate - after all, Merkur games are among the most beautiful and exciting classics of gambling. In Merkur online casinos, almos
My Current CSS and Sass Styleguide — SitePoint
It’s never easy to find a way to write consistent, future-proof, and robust CSS. It’s taken me months, if not years, to come up with a clean way to write mine. In fact, my process is still evolving, and I expect it to change even more. In the meantime I have accumulated enough knowledge to write an article about how I feel about writing CSS. I don’t claim that these suggestions are for everyone, a
Adventures in BEM and Responsive with SASS by wesruv on CodePen
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View. Objective I've been trying to wrap my head around how to apply BEM and the pros and cons of using it (or something like it). For those of you that
Lonely Planet & GitHub: CSSの構成と方針 - ワザノバ | wazanova
http://ianfeather.co.uk/css-at-lonely-planet/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約5時間前 CSS STATSが話題になったからでしょうか、自社のCSSの構成を分析して、記述方針について紹介するポストが続いています。 1) Lonely Planet Lonely Planetは旅行サイトらしく、写真/動画満載の構成です。 Quick Facts Sass Indented Syntax 150+ソースファイル キャッシュを考慮してコンパイルしたCSSは二つのスタイルシートに CSSはページ当たり35kb (gzip) 基本的には、remとpixelでサイズ指定。一部 em あり。 Preprocessor Railsを使っているが、Sprocketsは
PatternBolt
Patternbolt is a fine selection of SVG pattern backgrounds, packed in a single or SCSS (or CSS) file. The pattern is added in the ::after element and your original DOM's element still be inalterate and ready for manipulations. As .svg they weigh much less than .png or .jpg and they are also really easy to manipulate by CSS rules. As they are vectors they never pixelate, not even on a 4k display. T
Authoring Critical Above-the-Fold CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Ben Edwards. I saw Ben tweet about a simple Sass @mixin that allowed you designate bits of CSS as being “critical” – the idea being to load that critical CSS first and defer the loading of the rest of the CSS until later. A clever idea, and one that is gettin
Kite
Simple Kite uses `inline-block`, not the latest CSS Syntax. It's practical, simple to understand and easy to use. Flexible Kite behaves like flexbox: justify-content, etc. You could easily create complex modules. // kite core components // 1. Fill in `inline-block` gaps and then reset to `font-size` root font-size `rem` // 2. For Android: Android doesn't fill in `inline-block` gaps. `display: tabl
Use a Css framework but keep an uncommited and semantic markup
It seams that everybody is using some kind of css framework these days, and in my opinion: They are right! And you should be using one too! If there’s anybody working on a problem and was kind enough to share her knowledge with you, you should take it and embrace it. But it comes with a price… as it always does. tl;drUse sass @extend directive to separate the page’s markup from the boilerplate css
CSSセレクタの名前を付けるときに考えていること - morishitter blog
idを使うときも同じだけど、話をわかりやすくするためにclassに統一するということで。 個人的にはセレクタにidは使わない派です。 先日、@cssradarさんが「自分の仕事はclass名を決めた時点で8割終了している」みたいなことを言ってて、僕も概ね同意している。 それほどにCSSでは命名が大切だと思う。 そこで僕が普段どう考えてCSSセレクタに名前をつけ、ルールセットを定義しているのか書いてみた。 1. class名は意味を表すようにする（見た目の情報をのせない） 例えば、以下のようなもので .red { color: #f52; } .rounded { border-radius: .25rem; } .left-arrow { ... } 赤色だとか角丸だとか、見た目を表したclass名は付けないようにしている。 というのも、class名はHTMLのclass属性に書くもので、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A free tutorial to learn HTML and CSS
ペパボのフロントエンドスタンダード に関する記事一覧 - ペパボテックブログ
Used and Abused – CSS Inheritance and Our Misuse of the Cascade
SMACSS Your Sass Up
