Google HTML/CSS Style Guide
Background This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS, including GSS files. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained. General General Style Rules Protocol Use HTTPS for embe
I made a style guide for my personal web site and you should too.—zachleat.com
I made a style guide for my personal web site and you should too. As my own little corner of the web uncermoniously turned ten years old this year, it’s really starting to feel more like a garden than a piece of software. I certainly enjoy tending to it. I can plant what I like and with proper care it can grow into something useful. After ten years, it’s time to stop tearing open seed packets and
Fractalを使ったスタイルガイドの作成（中級編）。このジェネレーターかなりいいですよ
先日書いた「スタイルガイドジェネレーターの『Fractal』がかなり良さそう」ではインストールと初期設定からウェブUIの起動までの必要最低限の設定について書きました。今回は、もう少し詳しい設定方法をまとめておきます。 Fractalを使ってこのブログのスタイルガイドも作りはじめてみたので、サンプルとして見ながら設定方法を読んでいくと、わかりやすいんじゃないかと思います。ソースもGithubにアップしてあるので、参考までにご覧くださいませ。 Rriverスタイルガイド Fractal用のソースファイル on Github では、まずはコンポーネントの作成と詳細設定から。行ってみましょう！ コンポーネントの作成と詳細設定 Fractalでコンポーネントを追加するにはcomponentsフォルダ内にテンプレートファイルを追加します。たとえばheadings.hbsというファイルを作ってcompo
スタイルガイドジェネレーター「Fractal」のデモを作ってみた | Rriver
先日ご紹介したスタイルガイドジェネレーターのFractalを使って、試しにこのブログのスタイルガイドを作ってみています。細かい設定方法などは、準備中の記事「スタイルガイドジェネレーター『Fractal』の初期設定（中級編）」でまとめる予定ですが、とりあえずサンプル用に作っているこのブログのスタイルガイド（コンポーネントライブラリ）を公開しちゃいます。 Rriver Component Library まだまだ制作途中ですけど、こういう新しいツールを試すときはサンプルのファイルが見られた方がわかりやすいと思うので、ご参考までに。 Fractalのソースファイル また、fractal.jsなどの設定ファイルを含むFractal用のソースファイルをGithubにアップしておきました。すごくベーシックなことしかやってませんが、Fractalを試す際の参考になれば幸いです。 Fractal用のソース
スタイルガイドジェネレーターの「Fractal」がかなり良さそう
ずっと自分好みのスタイルガイドジェネレーターを探していたんですが、ようやく見つけました！「Fractal 」というツールで、かなり良さそうなのでご紹介します。 初級編、中級編の2回に分けて、初級編ではインストールと初級設定からウェブUIの起動までを、中級編ではコンポーネントのより細かい設定などについてご紹介します。公式ドキュメントは初めてだとわかりづらいところもあったので、その辺を補う形でまとめてみたいと思います。 ※先日、スタイルガイドとパターンライブラリの違いについてまとめましたが、スタイルガイドやパターンライブラリを自動生成するツールは「スタイルガイドジェネレーター」というのが一般的なようです。「パターンライブラリジェネレーター」とは呼ばないみたいですね。 では早速、「Fractalのはじめの一歩」的な感じで行ってみましょう！ Fractalとは まずは、ざっくりとFractalをご
Air/shots
Air/shots is an internal initiative from our design tools team. A feature on air/shots originally published in Fast Company earlier this year. Airshots in action I’m a Design Technologist. To be honest, I’m not sure exactly what that means. While my official job description is to create tools for the Design team at Airbnb, I also try to keep in mind how the tools I develop can help the entire com
How To Create A Pattern Library And Why You Should Bother
What Is a Pattern Library? A pattern library is a collection of user interface design elements. The site UI-Patterns describes these user interface design patterns as: Recurring solutions that solve common design problems. Are you still confused? Well, that is not surprising. Web designers like to make things sound more complicated than they are! Essentially a pattern library is a collection of de
スタイルガイドとパターンライブラリの違い
最近、パターンライブラリの作成ツールを探していて「Fractal」というツールを試しています。で、ふと「スタイルガイドとパターンライブラリの違いってなんだっけ？」という疑問が湧いたので、ちょっと整理してみました。ちなみに、どっちがいいかを書いているわけではないです。 特にウェブ向けのものではスタイルガイドもパターンライブラリもほぼ同じ意味で使われていることが多い気がしますが、あえてスタイルガイドとパターンライブラリを違ったものとして定義するとどうなるか、まとめてみます。 スタイルガイド 企業や組織のブランドイメージを統一するためにまとめられたガイドライン ロゴの使い方、配色パターン、タイポグラフィなどのビジュアルデザインを定義する より総括的なものだと文章のトーン&マナーなどのコミュニケーションデザインを定義する場合もある UIパターンやコンポーネントのデザイン一覧（パターンライブラリ）を
Style Guide Templates | Frontify
Future-proof your brand with digital guidelines on how to stay on-brand at every touchpoint. Use best-practice templates and over 40 customizable elements to get you up, running, and focused on developing your brand. Get rid of that PDF monstrosity. You no longer need to be a design wizard to get your company on-brand. Just use predefined templates, customizable elements, and in-line editing. Oh,
How To Make And Maintain Atomic Design Systems With Pattern Lab 2 — Smashing Magazine
The benefits of UI design systems are now well known. They lead to more cohesive, consistent user experiences. They speed up your team’s workflow, allowing you to launch more stuff while saving huge amounts of time and money in the process. They establish a common vocabulary between disciplines, resulting in a more collaborative and constructive workflow. They make browser, device, performance, an
Your style guide’s missing something — and it’s big
Suuuuuurvey says … !Here’s the tweet that sparked this line of thinking. While I love the crowdsourcing of nomenclature, something about the winning answer (so far) kinda got to me. The thing is, I’m a content strategist. And there’s something I rarely see in brand style guides: voice, tone, and editorial guidelines. That kills me for two reasons: 1. We’re always saying content matters.And yet, wh
Creating A Living Style Guide: A Case Study — Smashing Magazine
Creating a living style guide is a long but worthwhile process. Steven Lambert made a few mistakes along the way that prevented developers and designers from adopting it sooner or using it effectively. However, he pushed through and eventually made it to the end. This is the story of how Steven developed a living style guide, the mistakes made along the way, and why the current landscape of style
Style Guide Driven Development With Atomic Docs | 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 Nick Berens, a senior front-end developer at wisnet.com. Nick and his team have been building websites through custom style guides for years. Over those years, Nick has been building and evolving a tool to help with this process. I’ll let Nick explain both th
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pattern Library vs Style Guide - what are the differences?
What is the Difference Between a Style Guide and Pattern Library?
Style Guides: Best Practices and Workflow for Web Developers
What Needs to Be in Your Style Guide? (And How Do You Enforce It?)
Introducing Drizzle
Lonely Planet Tech Blog
https://www.welchcanavan.com/styleguide-roundup/