Vue.jsでCSSスタイルガイド作成に挑戦！（４） | バシャログ。
最近、FREETEL のスマホ（SIMフリー）を使い始めている kouraku です。おはこんばんちわ。 とりあえず、OCN モバイル ONEでデータ通信の契約だけしてのお試し中なのですが、これが思いの外なかなか良い感じです。何しろ、金額がとても安い！このまま移行しちゃおうか・・・なんて考えてしまうほどです。 さてさて前回は、コードの見直しとともに、カテゴリを動的に表示させるところまでやりました。 【前回】Vue.jsでCSSスタイルガイド作成に挑戦！（３） 今回は案件で使用することを想定して、 まずはstyleguideディレクトリへファイルを移動し、 setting.jsonで読み込ませたいCSSを設定し、 さらに複数のCSSを読み込めるようにしたいと思います。 styleguide ディレクトリを作成しファイルを移動する 現時点では、スタイルガイド用ファイル全てルート直下にある形にな
なんとなく…改め、Vue.jsでCSSスタイルガイド作成に挑戦 | バシャログ。
一体型VRヘッドセット『Oculus Go』がそろそろ発売されるのではないかと、ドキドキしながら待っている kouraku です。おはこんばんちわ。199＄という低価格にも関わらず、スペックがそれなりにあるらしい・・・ので、ここから一気にVRユーザーが増えてくれるのではないか、と期待をしています。 さてさて、前回は Vue.js を使ってみたら、もしかしたらCSSのスタイルガイドが作れちゃうんじゃないの！？・・・ということで、marked.js と highlight.js を導入して見た目を整えたり、サンプルコードの下にサンプル表示を追加してみました。 なんとなく（今更ながら）Vue.jsを試してみた〜その２ これだけでもスタイルガイドの形に近づいて気がしますが、更にスタイルガイドとして機能させるために、色々と追加していこうと思います。 表示仕様を変更してみる 前回までの表示は、読み込ん
動的デザインガイドラインのつくり方
Inside Frontend #2 / 動的デザインガイドラインのつくり方 / Masanari Hamada @nairirou / #InsideFE
デザインシステムの資料を作る時に参考にしたリンク集｜Ryo Yoshitake | THE GUILD
こんにちは、よりデザインの@ryo_panです。 この記事は何？DMMさんで「Atomic Design & Design Systems」をお話させて頂いた時に、自分が読んだ記事をまとめたものになります（いちおう全部目は通してる…ハズ）。デザインシステムについて書かれている記事ってまだまだ少ないのですが、情報源自体もまとまってないんですよね。実際、自分が↑の資料を作る時はほぼ手探り状態でした。 この記事がデザインシステムについてこれから学ぼうと思われている方の力に少しでもなれたら幸いです。例によって海外記事は僕の認識違いが起きている可能性があるので、「これそういう記事じゃないから！」というツッコミがあればぜひお願いします。 まずデザインシステムについて学びたい時はDesign Systems Handbook InVisionが作成したハンドブック。まず最初に目を通すならこれでしょう。デ
【全訳】JSだけじゃない！AirbnbのCSS/SCSSスタイルガイド - リクルート住まいカンパニー Tech Blog
こんにちは！2016年に新卒で入社した、SUUMOのフロント開発グループでエンジニアをしているやなぎさわです。 入社早々SUUMOのCSSを再設計をする機会があり、CSS/SASSのスタイルガイドを研究していたのですが、JavaScriptのスタイルガイドで有名なAirbnbがCSSのスタイルガイドを公開しているのを見つけました。 一人で開発していたり、CSS/SASSを書く人が少人数である場合は意外とその重要性に気付きにくいのがこのCSS/SASSのコーディング規約です。CSSは単純な言語であり単にスタイリングを当てるだけであればわりと簡単にできてしまうのですが、大規模開発や修正が頻繁に必要となる運用フェーズになるとその単純さがゆえにバグを作り出しやすくなってしまいます。 特にCSSでは全てのセレクタのスコープがグローバルであり、気を抜くとすぐにクラス名などが被ってしまいます。BEMとO
デザインシステム、パターンライブラリ、スタイルガイドそれぞれの定義と違い
ZackはUXPinのUXデザインライターです。彼の仕事はUX Magやawwwards、 Speckyboyで出版されています。 デザインシステム、パターンライブラリ、スタイルガイドという言葉が、同じような意味で使われていることがあります。 これら３つのコンセプトには繋がりはあれども、決して同じものではありません。 この記事では、定義を明確にして、それらがどのように繋がっているかを視覚化します。そしてデザインシステムを構築するための、主なガイドラインについて紹介します。 デザインシステムの定義 まず直接の定義を理解しましょう。そうすることで、これらの概念がどのように繋がっているかを学び、より良い製品作りに活用する方法を考えることができます。 デザインシステム―デザインの基準やドキュメント、原則、および基準を達成するためのUIパターンやコードコンポーネントなどのツールキットを、すべて含んだ
Nested Symbols & Auto-Updating Styleguides | Jan Losert - Store
Nested Symbols & Auto-Updating StyleguidesLet me present the smartest template and your future starting point for every User Interfaces in Sketch. Stop wasting your time by crafting the same design systems and elements from scratch over and over and over again - and let the magic of this template’s nested symbols begin!
Fractalを使ったスタイルガイドの作成（中級編）。このジェネレーターかなりいいですよ
先日書いた「スタイルガイドジェネレーターの『Fractal』がかなり良さそう」ではインストールと初期設定からウェブUIの起動までの必要最低限の設定について書きました。今回は、もう少し詳しい設定方法をまとめておきます。 Fractalを使ってこのブログのスタイルガイドも作りはじめてみたので、サンプルとして見ながら設定方法を読んでいくと、わかりやすいんじゃないかと思います。ソースもGithubにアップしてあるので、参考までにご覧くださいませ。 Rriverスタイルガイド Fractal用のソースファイル on Github では、まずはコンポーネントの作成と詳細設定から。行ってみましょう！ コンポーネントの作成と詳細設定 Fractalでコンポーネントを追加するにはcomponentsフォルダ内にテンプレートファイルを追加します。たとえばheadings.hbsというファイルを作ってcompo
スタイルガイドジェネレーターの「Fractal」がかなり良さそう
ずっと自分好みのスタイルガイドジェネレーターを探していたんですが、ようやく見つけました！「Fractal 」というツールで、かなり良さそうなのでご紹介します。 初級編、中級編の2回に分けて、初級編ではインストールと初級設定からウェブUIの起動までを、中級編ではコンポーネントのより細かい設定などについてご紹介します。公式ドキュメントは初めてだとわかりづらいところもあったので、その辺を補う形でまとめてみたいと思います。 ※先日、スタイルガイドとパターンライブラリの違いについてまとめましたが、スタイルガイドやパターンライブラリを自動生成するツールは「スタイルガイドジェネレーター」というのが一般的なようです。「パターンライブラリジェネレーター」とは呼ばないみたいですね。 では早速、「Fractalのはじめの一歩」的な感じで行ってみましょう！ Fractalとは まずは、ざっくりとFractalをご
Brand identity style guides | Logo Design Love
A collection of identity style guides from around the worldSee the grids, layouts, and details designers include in brand identity style guides for clients worldwide. Browsing identity style guides helps me learn what to include for my clients, so I collated a number of samples for reference. I hope you find the resource helpful, too. Audi CI Belfast brand identity guidelines Berkeley brand identi
サイト制作時のデザインやコードの「ぶれ」をなくすスタイルガイドを作成するためのテンプレート -Style Guide Boilerplate
ウェブサイトの制作時で大切なことの一つは、デザインやコードの「ぶれ」をなくすこと。 ウェブサイトを制作する際、プロジェクトに関わる全ての人が参考にできるデザインのスタイルガイドを作成するBootstrapベースのテンプレートを紹介します。 Style Guide Boilerplate Bootstrap Edition Style Guide Boilerplate -GitHub スタイルガイドは作成した時の利点が多く、もしまだ未の人は是非チャレンジしてみてください。 また、もう利用している人には、Bootstrapベースで簡単にスタイルガイドが作成できるので試す価値があると思います。 スタイルガイドを導入する利点 ウェブサイトのデザインや実装方法を定義し、一貫性を促進する。 モジュール形式の考え方を促進する。 ページを作成する際にパーツやエレメントで迷わないようにする。 ウェブサイト
Code for America Style Guide
Icons Icons are from icomoon. icon-facebook icon-twitter icon-feed icon-vimeo2 icon-lanyrd icon-flickr icon-mail icon-youtube icon-google-plus icon-google-plus2 icon-github icon-linkedin icon-skype icon-html5 icon-css3 icon-chrome icon-firefox icon-IE icon-opera icon-safari icon-share icon-github2 icon-user icon-cc icon-phone icon-location icon-envelop icon-alarm icon-print icon-database icon-undo
問題解決のためのスタイルガイド入門
定義が広いスタイルガイド フロントエンド開発者からスタイルガイドという言葉を耳にするようになりました。効率的、かつ一貫性のある見た目とコードをつくるための共有ツールとして、スタイルガイドが使われることがあります。一見、目新しくみえるスタイルガイドですが、最近生まれた新しいアイデアではありません。ロゴやコーポレートカラーの使い方を記したスタイルガイドは昔からありますし、ライターにもスタイルガイドがあります。 このように、開発者も、デザイナーも、ライターも同じように「スタイルガイド」という言葉を使っています。人によって、その言葉から受ける印象も異なれば、必要としている要素も異なります。YUI 並の UI アセット をスタイルガイドに含めることを期待している人もいます。アプリや Web サイト開発におけるスタイルガイドを作る際に難しいのは、何で作って管理するかではなく、どの範囲をスタイルガイドと
StyleDoccoでスタイルガイドを作る - シアトルコンサルティング サービス開発ブログ
こんにちは iijmyaです。 今回はスタイルガイドを作成できる「StyleDocco」をご紹介します。 1．スタイルガイドとは ページの部品（ボタンなど）について実際にどのような見た目になるのかについて、一覧にまとめるものとなります。 2．StyleDoccoでスタイルガイドを作る 「StyleDocco」は、CSSファイルにコメント形式でコンポーネントの説明とHTMLを書き込むとスタイルガイドを生成してくれる、node.jsで実装されたスタイルガイドジェネレータです。 ■ StyleDoccoのインストール それでは早速、ターミナル上で以下のコマンドを打ち、StyleDoccoをインストールしましょう。 ※ StyleDoccoをインストールするには、事前に「node.js」とパッケージ管理ツール「npm」がインストールされている必要があります。 $ sudo npm install
Sass Style Guide | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to cover choices unique to Sass. Here are some ideas that I’ve been gravitating toward. Perhaps they are useful to you or hel
Style Manual
Introduction I will always stick to British (Australian) spelling, but the rules of punctuation vary more subtly between British- and American-English; I’d like to pluck the most common sense rules from both. This is an absolutely incomplete, personal reference. When something is in question, I plan to document the opinions of multiple books, drawing my own conclusions and setting my own rules for
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Adele – Design Systems and Pattern Libraries Repository
納品用のWebサイトのスタイルガイドが簡単に作成できるHTMLのテンプレート -Style Guide Guide
CSSを書く、設計する時に参考にしておきたいCSSのガイドライン・スタイルガイドのまとめ