質の高いスタイルガイドを作成するために考えておくべきこと ｜ Tips Note by TAM
TAMでは規模の大きな企業さまと仕事をすることが多いので、スタイルガイドを使った案件も比較的多いです。 数百ページ規模のサイトのスタイルガイドを作成してきましたが、考え方が少しずつ固まってきました。そして、この考え方はコードを書く人だけがもっていればいいわけではなく、ディレクターやデザイナー、部分的にはクライアント（発注者）にも共有しておく必要があると感じています。 この記事を読んだあとに、スタイルガイドを作るうえで考えておくべきことを知り、全員のスタート地点を揃えることができればいいなと思っています。 コーディングの知識がないとわからない箇所もありますが、冒頭にコーディング担当者以外に向けた要約を入れているので安心してください。 内容は以下のようになっています。 スタイルガイドを使うメリットとデメリットを共有する コーディング前に情報設計とデザインを固めておく ページの量産までにスタイル
Bits, the front-end component library for 24 ways | Bits of 24 ways
You are viewing the front-end component library for 24 ways. It is powered by Fractal, a tool that enables the rapid development of components, templates and pages. Component categories Utilities: Components with a single purpose and specific role Common: Components that may appear anywhere on the site Global: Components that appear on every page on the site Scopes: Components used to style scoped
kss-node Style Guide
Building style guides with kss-node This software is a Node.js implementation of Knyle Style Sheets (KSS), "a documentation syntax for CSS" that's intended to have syntax readable by humans and machines. Hence, the kss-node software can be used to create a "living style guide". Write human-readable documentation using "KSS syntax" comments. Can be added to CSS, Sass, LESS, or any other CSS Preproc
フロントエンドスタイルガイド： 定義と要件、コンポーネントチェックリスト
フロントエンドスタイルガイドは、デザインやテストを効率化し、UIの一貫性を高める。今回は、スタイルガイドの要件8個と、一般的なコンポーネント25個を紹介しよう。 Front-End Style-Guides: Definition, Requirements, Component Checklist by Page Laubheimer on March 27, 2016 日本語版2016年6月23日公開 フロントエンドスタイルガイドとは何か フロントエンドスタイルガイドがUXの現場でますます一般化してきている。Jeff GothelfとJosh Seidenが彼らの著書『Lean UX』で説明しているように、フロントエンドスタイルガイドはアジャイルやリーンな環境で生まれたものである。 定義： フロントエンドスタイルガイドとは、製品のユーザーインタフェースにある全要素のモジュールコレクショ
aigis - Style Guide Generator
Aigis is a style guide generator. Make easier and maintainable. View on GitHub What is aigis? Aigis is a Node.js package that parses comments in your CSS and auto-generate a style guide. It is similar to Hologram , like a Node.js implementation of Hologram. Why did we create aigis? We didn't want the dependence on Ruby environment only to generate a style guide. Less dependencies is better. So we
CodeGrid Module List
Gitには変更を元に戻す方法かいくつかあります。今回はそのうちインデックスの状態をワークツリーに反映して元に戻すcheckoutコマンドについて解説します。
Sass Guidelines
An opinionated styleguide for writing sane, maintainable and scalable Sass. The Sass Guidelines project has been translated into several languages by generous contributors. Open the options panel to switch. About the authorMy name is Kitty Giraudel, I am a French front-end developer, based in Berlin (Germany) since 2015, currently working at Cofenster. I have been writing Sass for several years no
Website Style Guide Resources
Website Style Guide Resources GitHub repo Twitter updates Contributors Examples Real life pattern libraries, code standards documents and content style guides. Carbon Design System By IBM Carbon is the design system for IBM Cloud products. It is a series of individual styles, components, and guidelines used for creating unified UI. frontendcodepatternsvoiceandtone Code For America frontendpatterns
The Typekit Blog | Creating a type style guide
As the makers of Paper for iPad, FiftyThree does some great work that has always impressed me — so I was pretty excited to work with them when they asked for some help cleaning up the type styles on their marketing website. As is the case in many projects, as the FiftyThree site grew, the type styles grew along with it. As they added pages for new products, the styles weren’t as reusable as the te
How To Create a Web Design Style Guide - Designmodo
How To Create a Web Design Style Guide Website DesignTomas Laurinavicius • March 09, 2017 • 6 minutes READ Creating websites is getting more and more complex and is usually not a one person job. It is important to ensure that design is consistent and optimized to meet business objectives and create enjoyable experiences for users. One of the ways to ensure that team is on the same page when design
gulpfile スタイルガイド - v0.5.0 - Qiita
このドキュメントは、gulpfileの再利用性/メンテナンス性を高めることを目的とした、非公式なスタイルガイドです。 更新情報 2014/10/05 - バージョン番号つけました。 2014/10/04 - 「タスク辞書」あらため「タスクの共有」に。以前の内容はgulpfilesとして別ドキュメントに。 はじめに gulpfileはgulp.jsのタスクを定義するファイルです。スクリプトファイルなので自由に書ける反面、プロジェクトが大きくなると、書式を統一が問題になります。そんな時、このスタイルガイドが役に立つでしょう。対象となるのは次のようなケースです。 gulp.js に慣れて来て、再利用性のあるタスクを書きたい チームで運用する必要があり、書式を統一したい スタイルガイドとして、下記を参考にしています。また、ここで述べない JavaScript / CoffeeScript の言語と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Frontify: Where Brands Live – Brand Management Software | Frontify
Fractal
Clearleft Fractal | ClearFractal
Web Components で 社内 UI ライブラリを作っている 話
Atlaskit by Atlassian
Atomic Docs
Living Styleguide by Devbridge
Style Guide Inspirations
DocumentCSS - DocumentCSS