この記事ではAtomic Designについて、Atomic Designとは？といったところから実例まで書いていきます。
Atomic Designはデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。
日本だとAbemaTV（アベマTV）で使われています（Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comからの情報）。
KUBOTA Shōta kubosho
🎯
kubosho
/ confuse.css
Last active
November 16, 2016 01:29
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* License: CC0 */ | |
| .article__mainImg { | |
| position: relative; | |
| } | |
| .article__mainImg::before, | |
| .article__mainImg::after { | |
| display: block; | |
| position: absolute; | |
| top: 10px; |
kubosho
/ init.coffee
Last active
March 18, 2017 07:57
automatic update by http://atom.io/packages/sync-settings
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Your init script | |
| # | |
| # Atom will evaluate this file each time a new window is opened. It is run | |
| # after packages are loaded/activated and after the previous editor state | |
| # has been restored. | |
| # | |
| # An example hack to log to the console when each text editor is saved. | |
| # | |
| # atom.workspace.observeTextEditors (editor) -> | |
| # editor.onDidSave -> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 下のほうが詳細度が高く見えるが実際は上のほうが詳細度が高い */ | |
| div .test { | |
| /* 詳細度は a=0, b=1, c=1 なので、11となる */ | |
| background-color: blue; | |
| } | |
| div div div div div div div div div div div div div { | |
| /* 詳細度は a=0, b=0, c=13 なので、13となる */ | |
| background-color: pink; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * ファイル内のお掃除 〜非表示レイヤーを削除 for Photoshop〜 | |
| * @author feb19, kubosho_ | |
| */ | |
| function splitsInvisible(layer) { | |
| switch ( layer.typename ) { | |
| case "Layers": | |
| for ( var i = layer.length - 1; i >= 0; i-- ) { | |
| return splitsInvisible(layer[i]); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (() => { | |
| function callback () { | |
| if (location.host !== 'github.com') { | |
| return | |
| } | |
| if (/[?&]w=/.test(location.search)) { | |
| return | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| if (location.host !== 'github.com') { | |
| return; | |
| } | |
| if (/[?&]w=/.test(location.search)) { | |
| return; | |
| } | |
| const isPullRequestPage = location.pathname.indexOf('files') > -1; |
kubosho
/ ko.preprocess.attr-src.js
Last active
April 12, 2016 03:38
Knockout preprocess for `attr: { src: "" }`
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ko.bindingHandlers.attr.preprocess = function (value, name, addBinding) { | |
| // value = { src:$data} | |
| value = value.replace(/ /g, ''); | |
| var re = /{(src):(.*)}/; | |
| var matchAttr = value.match(re); | |
| if (matchAttr === null) { | |
| return value; | |
| } |
kubosho
/ package.json
Last active
April 11, 2016 15:57
Why throw `node_modules/rxjs/Observable.d.ts(1,1): error TS2654: Exported external package typings file cannot contain tripleslash references. Please contact the package author to update the package definition` ?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "pinboard-read-later-list", | |
| "version": "0.1.0", | |
| "description": "", | |
| "main": "index.js", | |
| "scripts": { | |
| "start": "npm run build && python -m SimpleHTTPServer 8080", | |
| "tsc": "tsconfig -u && tsc -p .", | |
| "browserify": "browserify ./index.js -o ./bundle.js", | |
| "build": "npm run tsc && npm run browserify" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/usr/local/bin/python3 | |
| # -*- coding: utf-8 -*- | |
| # | |
| # IkaLog | |
| # ====== | |
| # Copyright (C) 2015 Takeshi HASEGAWA | |
| # | |
| # Licensed under the Apache License, Version 2.0 (the "License"); | |
| # you may not use this file except in compliance with the License. | |
| # You may obtain a copy of the License at |