Luis Cielak luiscielak

## UX Nights: Design Systems Resources
# Design Systems Resources
by: Sujan Khadgi

Atomic Design by Brad Frost:
http://atomicdesign.bradfrost.com/

Design Systems by Alla Kholmatova:
http://designsystemsbook.com/

Design Systems Handbook:

## wget images
wget -P out/ -i images.txt

## responsive_d3_example.html
<!DOCTYPE html>
<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>

body {
  font: 10px sans-serif;
}

rect {

## README
gnome-cups-manager
------------------

Once upon a time there was a printer who lived in the woods.  He was a
lonely printer, because nobody knew how to configure him.  He hoped
and hoped for someone to play with.

One day, the wind passed by the printer's cottage.  "Whoosh," said the
wind.  The printer became excited.  Maybe the wind would be his
friend!

## alfred-script.sh
cd /your/local/path/to/tweet-search/
rm last-results.html
search.py {query}
open last-results.html

## gist:450f157c9f12eb56e371
sudo gem install -n /usr/local/bin sass

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

content-main{ background:white};

## dabblet.css
/**
 * The first commented line is your dabblet’s title
 */

.icon-milestone{
	float:left;
	width:10px;
	height:10px;
	background:#292b2f;
	border:4px solid #33363b;

## dabblet.css
/**
 * Tutorial 3 - Floating a series of 'clear:right' images
 *
 *	http://css.maxdesign.com.au/floatutorial/tutorial0301.htm
 */

.floatright
{
float: right;
margin: 0 0 10px 10px;

## dabblet.css
/**
 * Tutorial 1 - floating an image to the right
*
 *	http://css.maxdesign.com.au/floatutorial/tutorial0101.htm
 */

.floatright
{
	float: right;
	margin: 0 0 10px 10px;
	# Design Systems Resources
	by: Sujan Khadgi

	Atomic Design by Brad Frost:
	http://atomicdesign.bradfrost.com/

	Design Systems by Alla Kholmatova:
	http://designsystemsbook.com/

	Design Systems Handbook:
	<!DOCTYPE html>
	<script src="http://mbostock.github.com/d3/d3.v2.js?2.8.1"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<style>

	body {
	font: 10px sans-serif;
	}

	rect {
	gnome-cups-manager
	------------------

	Once upon a time there was a printer who lived in the woods. He was a
	lonely printer, because nobody knew how to configure him. He hoped
	and hoped for someone to play with.

	One day, the wind passed by the printer's cottage. "Whoosh," said the
	wind. The printer became excited. Maybe the wind would be his
	friend!
	cd /your/local/path/to/tweet-search/
	rm last-results.html
	search.py {query}
	open last-results.html
	/**
	* The first commented line is your dabblet’s title
	*/

	background: #f06;
	background: linear-gradient(45deg, #f06, yellow);
	min-height: 100%;

	content-main{ background:white};
	/**
	* The first commented line is your dabblet’s title
	*/

	.icon-milestone{
	float:left;
	width:10px;
	height:10px;
	background:#292b2f;
	border:4px solid #33363b;
	/**
	* Tutorial 3 - Floating a series of 'clear:right' images
	*
	* http://css.maxdesign.com.au/floatutorial/tutorial0301.htm
	*/

	.floatright
	{
	float: right;
	margin: 0 0 10px 10px;
	/**
	* Tutorial 1 - floating an image to the right
	*
	* http://css.maxdesign.com.au/floatutorial/tutorial0101.htm
	*/

	.floatright
	{
	float: right;
	margin: 0 0 10px 10px;