Minimal and responsive CSS framework for fast building websites About Lemon provides minimal setup of styles such as grid system, buttons, and forms. I made this framework for the purpose of learning things like CSS and SASS but if someone of want to use it or contribute to it I will be really happy 😁 Also check my Github account for more open-source projects! Installation CDN <link href="https:/
BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM
8 February, 2017 Code Smells in CSS Revisited Written by Harry Roberts on CSS Wizardry. Table of Contents @extend String Concatenation for Classes Background Shorthand Key Selector Appearing More Than Once A Class Appearing in Another Component’s File BEM Mixes CSS @import Way back in 2012, I wrote a post about potential CSS anti-patterns called Code Smells in CSS. Looking back on that piece, I st
Sass has been my go-to for years. But for a while now, I've wanted to try a new styling setup with PostCSS and the cssnext plugin. I love the idea of writing future CSS syntax today and using tooling more aligned with other tools I'm used to. This personal site is a perfect test bed to try this new setup. The first step I took was an inventory of my Sass usage. I needed to know what features I was
So I was presented with this interesting problem by a co-worker to come up with a CSS solution for a very common problem. Basically we are looking at a common layout for a list of items that will be placed into a grid with two columns. Simple, right? Wrong. How do we do this? There are so many ways we can solve this problem that the solutions are a problem in itself. In this article I will walk th
CSSの保守に便利なcsscombとscss-lintについて説明します。 scss-lint scss-lintは、SCSSのコードから与えた設定に違反している箇所を報告してくれるツールです。jslintやrubocopのSCSS版のようなものです。これをCI等で定期的に実行しておくことで、ルールに違反したコードの蔓延を防ぎます。 csscomb csscombはNode製のツールで、CSSのコードを与えた設定に従って自動で変換してくれるものです。scss-lintを初めて導入するときに利用すれば、大半の警告を自動で修正してくれるでしょう。但しCSSの文法しか解釈できないため、SCSSに適用すると失敗する場合があります。SCSSで書かれたファイルに対して適用してみたところ、@includeなどの文法は受理されるものの、@ifなどの文法を受理できないようです。しかしながら問題となるケースが
スタートアップや少人数のチームでは、デザイナー（最終的なデザインの決定権を持つ人）がいないことも少なくないと思う。 また、エンジニアだけで何かサービスを作ることも多いだろう。 僕自身、そのような環境でよく開発をする。 僕はCSSはそこそこ書けるが、デザイナーではないのでサイトのデザインについては他のエンジニアと相談しながら決定している。 IllustratorやPhotoshopもほぼ全く使えないので（紙にざっくりレイアウトを書くことはあるが）、HTMLとCSSを修正しながらデザインを検討することになる。 「CSS書きました。」 「うーん、ここのコンテンツはもっと大きく表示させたい。色ももっと目立つ感じで。」 「なおしました。」 「うーん、やっぱり微妙かも。試しにここ2段組にしてみて。」 「」 なんてことになる。 今更言う必要はないと思うがCSSの設計は非常に脆く、アドホックな修正を繰り返
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt pellentesque lorem, id suscipit dolor rutrum id. Morbi facilisis porta volutpat. Fusce adipiscing, mauris quis congue tincidunt, sapien purus suscipit odio, quis dictum odio tortor in sem. Ut sit amet libero nec orci mattis fringilla. Praesent eu ipsum in sapien tincidunt molestie sed ut magna. Nam accumsan dui at orci rhoncus
Slides for a talk on modular Sass I gave at Function Pink, April 2013. CodePen examples here: http://codepen.io/collection/lmkqe Function Pink: http…
Top 5 CSS Libraries CSS is an essential part of any website. However, pure css code sometimes forces you to write too much unnecessary stuff, and many libraries are willing to take on the chore. Learn More 10 Sass libraries to help speed up website development SASS is one of the popular CSS preprocessors nowadays. Learn More 10 best libraries for CSS animation All in all I have tried about thirty
Built using SASS and CSS3 media queries, Centurion is a responsive web framework that scales with your device. No longer do you need to worry about the screen size of an iPhone or an Android tablet since Centurion does the work for you. Want to test Centurion out simply fork or download the repository on Github to get started and see the power a responsive framework can have on your next web proje
どんな感じで書けば楽できるかとか、後から修正しやすいかとか、そんなことです。 ボタンのスタイリングを例に、自分の通った道を追ってみます。 今回使う HTML は次のようになっています。 <div class="buttons"> <button class="edit">Edit</button><button class="publish">Publish</button><button class="delete">Delete</button> </div> これを CSS でスタイリングしていきます。 1. とりあえず個別指定 こんな極端な書き方する人はあまりいないでしょうけど、例として。 .edit { margin: 0 5px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 5px; widt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Amazon.co.jp: Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語: 平澤隆, 森田壮: 本
