えっ！ビルド不要？JavaScriptで自動生成するスタイルガイドジェネレーターKalei | バシャログ。
娘の誕生日に、ドラえもんドンジャラDXをプレゼントしました ishida です。 娘とともにハマってしまいました。早く「ドンジャラ」って言いたいっ！ さてさて、皆さん HTML/CSSコーディングでスタイルガイド作成していますか？ スタイルガイドは、サイト内で定義されている部品を一覧化して こんなパーツを使ってますよーとするドキュメントです。 複数人でのページ制作や新規サイト構築後の運用には欠かせません。 ジェネレーターによるスタイルガイド生成も人気になりつつあり< 最近では、StyleDocco が有名ですね。 StyleDocco 以外にもスタイルガイド生成のツールはいろいろあります。 そのなかでもビルドを必要としないスタイルガイドジェネレーターのご紹介です。 ビルド不要なスタイルガイドジェネレーターKalei こちらのジェネレーター、コンパイルが不要で Ruby や Node.js
StyleDocco with Sass/Compass | Tech-Step
Usage I usually use Sass for css editing. So, let me introduce this with Sass. The markdown comments are the styledocco. Edit Scss /* # Import Compass plugins #### compass/reset -> reset css #### compass/css3/ -> for css mixins */ @import "compass/reset"; @import "compass/css3/"; $default-border-radius: 5px; /* # mixin gradient #### $start -> start color #### $end -> end color */ @mixin gradient($
WordPressのテーマ作成でStyleDoccoとCompassを使う : WordPress | FindxFine
WordPressテーマのstyle.cssからスタイルガイドを作成する。 mytheme | |-- docs | |-- css | |-- style.css インストール $ npm install -fg styledocco パーミションの関係でsudoでインストール。 $ sudo npm install -fg styledocco スタイルガイド作成 $ cd mytheme $ styledocco -n "my theme" -o docs/css style.css StyleDocco Sass + Compass プリプロセッサ Sass + Compassを使いstyle.cssを作成する。 style.scssを作成する。 style.scssをCompassでコンパイルしstyle.cssを作成する。 Sassはインストール済みとする。 Compassをイ
スタイルガイドを生成する「StyleDocco」の使用感 - Mach3.laBlog
この記事は賞味期限切れです。（更新から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
CSSスタイルガイドのススメ（StyleDocco入門編） | MONSTER DIVE
何故必要か？ 大規模のサイト制作や時間がないときなど、複数の人で制作を進めていると、 「このページをベースに量産お願い」 と頼まれたり、 「誰がこのclass上書きしたの？」 「同じようなclassがたくさん出来てしまった！」 と怒られたりした経験はオーサリングしている人なら誰もがあると思います。 そんなときに、制作を進める上でおすすめなのがサイトのCSSドキュメント。 ドキュメントというと固いイメージですが、要はCSSの説明・サンプルです。 "このページをベースに"というそのベースのCSSを把握するのに時間がかかったりもするので、それをCSSスタイルガイドがあればすぐに把握できる。 これが巷でCSSスタイルガイドと言われているものです。 ベースページの制作者も、コメントを入れる癖だけ付けてしまえば、あとは自動的にCSSスタイルガイドがコマンド一発で生成されます。 前置きが長くなったので、
StyleDoccoでスタイルガイドページを導入する | ajike switch
スタイルガイドって重要だなと痛感したので、StyleDoccoの導入方法についてまとめました。 「スタイルガイド」って何？ まずは「スタイルガイド」といってもピンとこない人がいるかもしれないのでその説明です。 Wikipediaによると、下記のようになっています。 ウェブサイトスタイルガイドの場合は、主に外観や技術的な側面に関するスタイルを規定する。 とまあこれでもピンとこないと思うので私なりに噛み砕いて言うと、サイト内のパーツや使いまわすスタイルを定義するものです。 実際に見たほうがはやいと思いますので、スタイルガイドページとして見れるものをあげてみます。 MailChimp Design Patterns Starbucs Style Guide Github Styleguide これらのページを見れば、一目で既に定義されているスタイルが分かるので無駄がおさえられますよね。 複数人で
【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
コーディングの必須ツールになりそう。ステキなCSSスタイルガイドを生成する｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog
プロジェクトでコーディングする時に、複数の作業者がいる場合にスタイルガイドはとても重要です。 特にスマートフォン向けのサービスでは、モジュールの共通化や画像のスプライト化がもろにページ表示速度に影響するため、より精度が高く細かいアップデートに耐えうるCSSスタイルガイドが必要になります。これをExcelやPowerPointで管理していると、細かい変更の反映が大変だし、なにより見にくい。 そんな時、こちらの記事「CSSプリプロセッサでスタイルガイド」 inkdesignの中で、 スタイルガイドは”生きている”ドキュメントでなければいけない というシビレるキャッチで紹介されていた「styleDocco」というスタイルガイドジェネレータを発見。 これはなんだか良さそうだ！とプロジェクトに取り入れてみることにしたので、導入とか設定とかをメモ。 「styleDocco」ってなに？ 「style
CSSプリプロセッサでスタイルガイド - inkdesign
07 Dec 2012 ※この記事は、CSS Preprocessor Advent Calendar 2012の7日目の記事です。 CSS PreprocessorとIAの親和性、という記事の影響を受けまして、こちらの記事で書かれていた、 CSS Preprocessor そのものを共通ドキュメントにしてしまうとか という点を拾わせていただき、スタイルガイドのツールを紹介しようとおもう。 スタイルガイドとはなにか スタイルガイドは簡単にいうと、モバイル時代におけるCSSの設計と実装から引用させてもらうと、ページ上の部品（コンポーネント）をあつめたリスト、ページのこと。デザインパターンと呼ばれることもあるかもしれない。 具体的な成果物としてどういったものを指すのかというのは実際のページをみてもらう方が早いとおもうので、一度下記のページも参照してほしい。 MailChimp Design P
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - leandono/compass-styledocco-example: Example of the use of styledocco with Sass & Compass.
http://toybox-design.net/?p=640
DecoDize.com is for sale | HugeDomains