こんにちは！ サービスデザイン部のムライシです！今回、私はサービスデザイン部の活動で、弊社プロダクトのSassの@importを@useと@forwardに移行する取り組みを行いました！ （私のチーム...
サポート終了迫る！Sassの@importを@useと@forwardに移行しよう！ | GMOメディア クリエイターブログ
こんにちは！ サービスデザイン部のムライシです！今回、私はサービスデザイン部の活動で、弊社プロダクトのSassの@importを@useと@forwardに移行する取り組みを行いました！ （私のチーム...
Web制作者のためのSassの参考書.pdf
1,800万人が利用する『家族アルバム みてね』におけるK8s基盤のアップグレード戦略と継続的改善 / FamilyAlbum's upgrade strategy and continuous improvement for K8s infrastructure
Structuring Sass: Saying Goodbye to Atomic Design Ambiguity | Envato Tuts+
Atomic Design is a methodology outlining sensible code structure for stylesheets. It has a large following, but I find its naming conventions can sometimes be ambiguous. What’s a molecule? What’s an organism? How do we know where to draw the line between the two? These particular questions seem to be the greatest stumbling block for interpreting an atomic architecture. Atoms, Molecules, Organisms,
Family.scss
Family.scss is a set of 26 smart Sass mixins which will help you to manage the style of :nth-child’ified elements, in an easy and classy way. The goal of this project is to unleash the power of the nth-child property, in an easy way. The best way to understand each and every mixin, is to read it, literally. For example: first(3) => first three Each and every mixin is really easy to use, proceed li
ブラウザで表示が崩れた時の検証に便利！IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハック -Browser Hack Mixins
特定のブラウザで挙動がおかしい、期待通りにならない、そんな時の検証用に役立つ、IE6-11, Edge, Chrome, Safari, Firefoxなど各ブラウザのCSSハックがまとめられたSassのMixinを紹介します。 いざという時に、備えておきたいですね。 Browser Hack Mixins for Sass Browser Hack Mixinsの使い方 「_hacks.scss」をインポート。 コード: @import "hacks"; Mixinの使い方 基本書式: @include [Mixin_Name]{ selector, property, value } 記述例: @include only_ie9_below { .my_div, background-color, red } CSSハックの各ブラウザは、下記の通り。 そのブラウザのみ、バージョンのみ、
5 SASS Mixins I Use on Nearly Every Project
Warning: None of the following templates could be found: CodePen in themes "Array ( [0] => $public [1] => $default ) " in /home/customer/www/andrewhoule.me/public_html/vendor/silverstripe/framework/src/View/SSViewer.php on line 215 SASS is pretty great! It's become so integrated into my workflow that it's easy to underestimate how much I rely on it. I've had the pleasurable woeful experience of re
Avalanche - Responsive, Sass-based, BEM-syntax CSS grid system
Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system Code quality Easy, flexible naming convention Avalanche gives you a choice of three naming conventions for your width class names: fraction (1/4), percentage (25) or fragment (1-of-4). No need to spend time working out how many columns are in your nested layout - if a cell needs to take up half the width of it's container, te
Classy CSS: a Programmatic Approach to Sass Stylesheets
Classy CSS: a Programmatic Approach to Sass Stylesheets Published on November 15, 2015 I began writing this blog post a few weeks after releasing a semi-satirical article about my take on the mix of current CSS naming convention/styling trends on Sitepoint called Atomic OOBEMITSCSS. That was back in August, but life got in the way. I called it Atomic OOBEMITSCSS as a joke, but people started
BEMをSassで快適に書く方法
BEMとはBEMの概要もうすでにいろんなブログやQiitaなどで書かれていると思いますが、自分の頭を整理するためにも書いておきます。BEMはロシアの検索エンジン大手のYandexにより以下を達成するために開発された「cssの記述方法論」です。CSSセレクタの「命名規則」とも言われています。 Block, Element, ModifierBEMは、セレクタの役割を「Block」「Element」「Modifier」の3つの概念に分けて考えるCSSの設計思想です。BEMのドキュメントによると、Block、Element、Modifierは、それぞれ以下のように定義されています。 Block「Block」は独立したエンティティ（実体）であり、アプリケーションを「構成するパーツ」です。Blockは単一で用いることも可能だし、他のBlockを含んで複合的に用いることも可能です。Block名は基本的
Ayre – Sass powered responsive grid system
Introduction Grid units are defined by a minimum ideal width and a maximum number. The total number of units is increased dynamically based on the viewport size. Column widths, margins and breakpoints are specified in grid units. Documentation & Examples Using a unit width of 75px, a limit of 12 units, 10px gutters and 20px page margins. All of these variables can be customised, see the Options se
Overview
Flexible layouts, done your way Neutron does more than just let you build your layout quickly, it lets you maintain your work or change direction entirely with much less effort than other frameworks require. This flexibility lets you iterate faster and easier, your code can now keep up with the design changes that happen through the life of a project. @include columns(); // Try changing the column
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIkit
イマドキのコーダー環境構築2016
The Blog | Welcome to Adobe Blog
Atomic Docs
Bulma: Free, open source, and modern CSS framework based on Flexbox
The Blog | Welcome to Adobe Blog
DocumentCSS - DocumentCSS
Loading...
Bourbon: the Connoisseurs’ Choice for Sass Mixins Web Design Tutorials | Envato Tuts+