コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして、アメーバ事業本部 teens事業部の谷です。業務ではフロントエンドデベロッパーとして、主にHTML/CSSの設計・実装をおこなっています。 今回は、以前斉藤が書いた「モバイル時代におけるCSSの設計と実装」という記事で触れられていたコンポーネントリストもといスタイルガイドについてのお話です。 スタイルガイドの事例と、スタイルガイドを生成するツール StyleDocco の紹介をします。スタイルガイドとは先の記事より引用すると、ページ上の部品（コンポーネント、モジュール）を集めたリスト、ページのことです。どれがコンポーネントで、どれがモジ
StyleDocco
StyleDocco generates documentation and style guide documents from your stylesheets. Stylesheet comments will be parsed through Markdown and displayed in a generated HTML document. You can write HTML code prefixed with 4 spaces or between code fences (```) in your comments, and StyleDocco shows a preview with the styles applied, and displays the example HTML code. The previews are rendered in resiz
StyleDoccoはスタイルシート中に書いた設定をドキュメント化するソフトウェアです。 Webデザインにおいてスタイルシートは欠かせません。Webサイトのスタイルシート設定をドキュメントにしたい時に使いたいのがStyleDoccoです。 インストールします。 デモです。右側にスタイルシート、左側にその説明が表示されています。 HTMLのコーディング方法と、その結果とかが上下に並んで表示されます。 リスト表示などもあります。 スマートフォンの幅に指定することもできます。 レスポンシブWebデザインの場合は便利そうです。 Bootstrapで作られたデモもあります。 ボタンのデザイン。こうやって表示されると分かりやすいですね。 StyleDoccoを使うとCSSファイル中に書いた設定の使い方をそのままドキュメントにできるようになります。書き方と実際に適用した結果が分かれば、Webデザイナーの
この記事は賞味期限切れです。（更新から1年が経過しています） 先日スタイルガイドを制作する機会がありまして、 せっかくなので、スタイルガイドの生成に利用したStyleDoccoの使用感などをまとめておきます。 スタイルガイドについて ざっくり言うとスタイルシートのドキュメントです。 自分一人で完結するその場限りのページなら良いのですが、 複数人のチームで組み込んでいたり、メンテナンス担当が他の方だったりする場合、 プロジェクトのCSSをドキュメント化しておく必要が出てきますね。例えば、 どのような命名規則や方針で書かれていて どこになにがあり どのようなモジュールがどこで使えて そのモジュールはどうするとどのような挙動を起こすのか 等をまとめておく文書になると思います。 規模によってはかなり骨な作業になりそうです。 StyleDoccoとは StyleDocco StyleDocco ge
【Grunt】styledoccoでCSSスタイルガイドを自動作成をしてみる。 | DevelopersIO
アジェンダ styledoccoとは? 導入準備 Gruntの設定 CSSのコメント記述方法 動作確認 styledoccoとは？ Node.jsを使用して、CSSのスタイルガイドを作成してくれます。 導入準備 今回はNode.jsのパッケージを使用します。当ブログでも環境構築のご紹介していますので、以下を参考にNode.jsをインストールしてください。 【もうすぐバレンタインデー】デザイナーがCoffeeScprit、TypeScriptの開発環境（Win/Mac）をインストールしてみる 今回の動作環境 OS:windows7 Gruntをインストールする。 今回styledoccoを自動化するに際に、Gruntにお世話になるので以下コマンドからGruntをインスールします。 npm install -g grunt npm install -g grunt-cli gruntで自動化し
StyleDoccoでstyleguideを作成
フロントエンドの開発で業務を引き継ぐと面倒なのがスタイルシートの仕様の把握です。 スタイルガイドがあるとメンテナンスやアップデートも非常に行いやすいのですが、スタイルガイドを作成するのは結構面倒。 そんなこんなでcssのコメントで対応してたが、そろそろキチンとしよう思い、styleguide document generatorを検討してみた。 styleguide document generatorについて有名どころの StyleDocco と kss があるので、今回はStyleDoccoについて。 StyleDocco generates style guide documents from your stylesheets by parsing your stylesheet comments through Markdown. You can write HTML snippe
読了: 約 5 分 サービスを長期に渡って運用しているとデザインのパーツをどうするか、不要なものなのか否かわからなくなってきますよね。デザインも広がって来て、特殊な例が出て来たり、混在してくるとカオスな状態になります。 スタイルガイドを使う意味 wiki等でデザインを管理するのは、更新の手間やチームメンバーが変わった際などの役割分担・引き継ぎなどの手間が発生するなど無駄が多いので出来ればやりたくありませんね。 一々HTMLとCSSを切り出して、別のところに切り貼りするというのは長期に渡ると思ったよりもストレスになります。開発しながら管理したいというのが理想ですよね。スタイルガイドとして有名かつ歴史のあるstyledoccoの記事は多いのですが、Gulp+stylus+styledoccoという環境の記事がなかったので、今回は自分の環境をご紹介しておきます。完全なる俺得です。 まず最初に、諸
賢く使うStyleDocco導入ガイド 前編 基本的な使い方 短期集中連載の第1回目はStyleDoccoの基本的な使い方を解説します。インストールからスタイルガイド生成までの過程を順を追って紹介しています。 StyleDoccoとは StyleDoccoとは、Node.jsで作られたスタイルガイドジェネレータ*です。 *注：スタイルガイドジェネレータ StyleDocco以外にもRuby製のKSS、KSSのNode.js製kss-node、HTMLベースのKaleiなどもあります。 CSSに適切なコメントを書くことで、CSSのスタイルガイドを自動的に作成することができます。 スタイルガイドは、開発中やサイトの運営中に、デザインが変更されるたびに、細かくメンテナンスをする必要があります。情報がメンテナンスされていないスタイルガイドでは意味がありません。しかしながら、HTMLとCSSをそのつ
GitHub - indieisaconcept/grunt-styleguide: Universal CSS styleguide generator for grunt. Easily integrate Styledocco or KSS styleguide generation into your development workflow.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
この記事は賞味期限切れです。（更新から1年が経過しています） 先日スタイルガイドを制作する機会がありまして、 せっかくなので、スタイルガイドの生成に利用したStyleDoccoの使用感などをまとめておきます。 スタイルガイドについて ざっくり言うとスタイルシートのドキュメントです。 自分一人で完結するその場限りのページなら良いのですが、 複数人のチームで組み込んでいたり、メンテナンス担当が他の方だったりする場合、 プロジェクトのCSSをドキュメント化しておく必要が出てきますね。例えば、 どのような命名規則や方針で書かれていて どこになにがあり どのようなモジュールがどこで使えて そのモジュールはどうするとどのような挙動を起こすのか 等をまとめておく文書になると思います。 規模によってはかなり骨な作業になりそうです。 StyleDoccoとは StyleDocco StyleDocco ge
StyleDoccoでスタイルガイドを作る - シアトルコンサルティング サービス開発ブログ
こんにちは iijmyaです。 今回はスタイルガイドを作成できる「StyleDocco」をご紹介します。 1．スタイルガイドとは ページの部品（ボタンなど）について実際にどのような見た目になるのかについて、一覧にまとめるものとなります。 2．StyleDoccoでスタイルガイドを作る 「StyleDocco」は、CSSファイルにコメント形式でコンポーネントの説明とHTMLを書き込むとスタイルガイドを生成してくれる、node.jsで実装されたスタイルガイドジェネレータです。 ■ StyleDoccoのインストール それでは早速、ターミナル上で以下のコマンドを打ち、StyleDoccoをインストールしましょう。 ※ StyleDoccoをインストールするには、事前に「node.js」とパッケージ管理ツール「npm」がインストールされている必要があります。 $ sudo npm install
GitHub - jacobrask/styledocco: Automatically generate a style guide from your stylesheets.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
スタイルガイドって重要だなと痛感したので、StyleDoccoの導入方法についてまとめました。 「スタイルガイド」って何？ まずは「スタイルガイド」といってもピンとこない人がいるかもしれないのでその説明です。 Wikipediaによると、下記のようになっています。 ウェブサイトスタイルガイドの場合は、主に外観や技術的な側面に関するスタイルを規定する。 とまあこれでもピンとこないと思うので私なりに噛み砕いて言うと、サイト内のパーツや使いまわすスタイルを定義するものです。 実際に見たほうがはやいと思いますので、スタイルガイドページとして見れるものをあげてみます。 MailChimp Design Patterns Starbucs Style Guide Github Styleguide これらのページを見れば、一目で既に定義されているスタイルが分かるので無駄がおさえられますよね。 複数人で
スタイルガイドについて マークアップの仕様に関する決めごと：本の題名表記を斜体にする、数字や日付の表記法、文献引用の作法など。 文体に関する決めごと：単語の綴り（スペリング）、句読法、時制、です体／である体など。 スタイルガイドには空白や活字などタイポグラフィに関わるような要素に関して規定するものもある。ウェブサイトスタイルガイドの場合は、主に外観や技術的な側面に関するスタイルを規定する。 wikipedia参照 スタイルガイドはcssを作った本人以外にも、IDやクラス、コンポーネントなどの役割を分かりやすく伝えることができ、サイトデザインの一貫性を促進することができます。 また、業務を引き継ぐとなったときも、スタイルガイドがあればコーディングルールなども一目で分かるので、勘違いや相違もなくなります。 スタイルガイドジェネレーターはstyleDocco以外にもいくつかありますが、styl
スタイルガイドのDOMにスタイルが当たってない…。本当は該当のCSSが当たった状態でボタンが表示されるはずなのに、普通のリンクになってる…。 原因はどうやらこれだった。 Error in resulted files when using the --preprocessor option on stylus files · Issue #25 · jacobrask/styledocco 2年前のissueなのに4ヶ月前の返答。要はstyledocco --preprocessor "stylus -p"を渡してあげれという事ですね。stylus -pとpオプション渡さないと、標準出力でのメッセージをそのまま渡してしまうので、CSSとして読み込めないということらしい。 おかげで、ちゃんとDOMにスタイルが当たるようになりました! あともうissueがcloseされてはいるんですが、Chr
styleguide: { xxx: { options: { framework: { name: 'styledocco' } }, files: { // … }, } }, $ time grunt styleguide Running "styleguide:dist" (styleguide) task >> DEST: … Done, without errors. real 2m2.127s user 1m59.839s sys 0m2.192s
GitHub - leandono/compass-styledocco-example: Example of the use of styledocco with Sass & Compass.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
何故必要か？ 大規模のサイト制作や時間がないときなど、複数の人で制作を進めていると、 「このページをベースに量産お願い」 と頼まれたり、 「誰がこのclass上書きしたの？」 「同じようなclassがたくさん出来てしまった！」 と怒られたりした経験はオーサリングしている人なら誰もがあると思います。 そんなときに、制作を進める上でおすすめなのがサイトのCSSドキュメント。 ドキュメントというと固いイメージですが、要はCSSの説明・サンプルです。 "このページをベースに"というそのベースのCSSを把握するのに時間がかかったりもするので、それをCSSスタイルガイドがあればすぐに把握できる。 これが巷でCSSスタイルガイドと言われているものです。 ベースページの制作者も、コメントを入れる癖だけ付けてしまえば、あとは自動的にCSSスタイルガイドがコマンド一発で生成されます。 前置きが長くなったので、
Node.js - styledoccoでstylusのスタイルガイド作った結果www - Qiita [キータ] これにも書きましたが、現在Chromeではstyledoccoのiframe部分がエラー吐いて見れなくなってます。 Preview iframe can't render in Chrome 33 · Issue #111 · jacobrask/styledocco ここで自分も報告したんですが、この時勘違いしていて、npmに上がってるバージョンで既に対策してたのにまだこのバグが出てるんだと思ってましたが、実は対策したバージョンがnpmに上がってないということでした。 で、GitHubのHEADを適用してみるとちゃんとiframeが表示されるので、npmのstyledoccoのバージョンが上がるまでは以下のようにpackage.jsonに書いておくと良いと思います。 "de
コーダー向けにCygwinは使わず、Windows上だけで完結するようにしてみました 事前準備 msys-git Windows向けgit python2.7+ python（nvmwの実行に必要） nvmw Windows向けのnode.jsのバージョン管理ツール 補足 msys-gitとpython2.7はパッケージインストールなので簡単です。 nvmwもgithubのコマンドをコマンドプロンプトにコピペでいけます。 nvmwをインストールしたら コマンドプロンプト上で
Grunt × SCSS × Compass × StyleDocco（開発環境構築メモ） - Qiita
$ mkdir -p ~/develop/grunt $ cd ~/develop/grunt # compassプロジェクトを作成します。 $ compass create grunt-test # stylesheetsというディレクトリーが生成されますが、今回は不要なので削除します。 $ rm -R grunt-test/stylesheets # sassというディレクトリーが生成されますが、今回はscssなのでリネームします。 $ mv grunt-test/sass grunt-test/scss http_path = "/" # SCSS(Sass)ファイルの置き場所 sass_dir = "scss" # コンパイルのCSSファイルの置き場所 css_dir = (environment == :production) ? "assets/css" : "docs/css
2013年1月9日にStyleDoccoの勉強会があったので、どのように環境構築したかを纏めておくのだ。(Unix系OSで構築) StyleDoccoとは「スタイルシートからドキュメント/スタイルガイドを作成するツール」とある。 /* Provides extra visual weight and identifies the primary action in a set of buttons. <button class="btn primary">Primary</button> */ .btn.primary { background: steelblue; color: snow; border: 2px outset steelblue; } 上記の様に、CSSを記述すると、コメントの部分(/* …. */)がドキュメントとして生成される。(StyleDoccoから引用) S
HTML5 boilerplateをsassでgulpでstyledoccoな感じにしてみた - Photosynthesic blog
Google web starter kit を触っていて、gulpとstyledoccoという素敵ツールを知ったのでhtml5 boilerplateをベースにsassとgulpを導入してstyledoccoでstyleguideも自動生成する、というのを作ってみました。（・・・Google web starter kitをベースにする方が早い気もするのですが、モジュールやらコンポーネントの内容やSassの構成とかがイマイチ凡人には理解しかねたので今後のアップデートに超期待しています。） といっても、ほぼGoogle web starter kit のgulpfile.jsをぱく・・・参照させていただいております。ディレクトリを変えて、styledoccoのためのソースを加えただけ。 手順 前準備：gulpは公式を参照に予めインストールしているとして。 1. 先ずはHTML5 boile
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『StyleDoccoによるCSSスタイルガイドの導入』
スタイルシートをドキュメント化する際にぜひ！·StyleDocco MOONGIFT
スタイルガイドを生成する「StyleDocco」の使用感 - Mach3.laBlog
Gulp+stylus+styledoccoでフロントのスタイルガイド生成 – T2
賢く使うStyleDocco導入ガイド | 前編 基本的な使い方
スタイルガイドを生成する「StyleDocco」の使用感 - Mach3.laBlog
StyleDoccoでスタイルガイドページを導入する | ajike switch
» 美しいスタイルガイドが作れるstyleDoccoを使ってみる | isee ウェブに関するブログ
styledoccoでstylusのスタイルガイド作った結果www - Qiita
遅いgrunt-styleguide + styledoccoを爆速にする - Qiita
CSSスタイルガイドのススメ（StyleDocco入門編） | MONSTER DIVE
StyledoccoがChromeでiframe部分見えねーよ!という場合の当座の解決法 - Qiita
StyleDocco導入（windows編） - Qiita
How to setup StyleDocco with Grunt | ryuone's memo