Brad Frost bradfrost

Atomic Design discusses the importance of crafting robust design systems, and introduces a methodology for which to create smart, deliberate, interface systems.

The book will begin by addressing the "why": why designers should care about thinking about Web interfaces in a more systematic way. I'll discuss the history of modular designsystems (after all, this type of thinking been around for a long while now), but discuss how the ever-shifting Web landscape is making systematic thinking a necessity.

The first section will also discuss the emerging trends and techniques that encourage more systematic thinking: style tiles, element collages, pattern libraries, UI frameworks, and more. And while I'll certainly extol the virtues of these techniques, I'll also bring to light a lot of the shortcomings and frustrations of UI frameworks and pattern libraries. This sets the stage to introduce a more sound, deliberate way of constructing an interface system.

The second chapter will define atomic design. Atomic desig

Answering the Front-end developer JavaScript interview questions to the best of my ability.

Explain event delegation

Sometimes you need to delegate events to things.

Explain how this works in JavaScript

This references the object or "thing" defined elsewhere. It's like "hey, thing I defined elsewhere, I'm talkin' to you."

Explain how prototypal inheritance works.

Name of Project [version number]

]

[Introduction text about the project. This should be a short summary of the project that explains what it is and why anyone should care about it]

[optional image]

Getting Started

Requirements

[include a bulleted list of any dependencies your project requires. Include links to the dependencies, and additionally links to helpful resources to get up and running with the project's dependencies]

	<div class="block">
	<img src="{{ img.square.src }}" alt="{{ img.square.alt }}" class="block__thumb" />
	<div class="block__body">
	<h2 class="block__title">{{ title }}</h2>
	<p class="block__subtitle">{{ subtitle }}</p>
	</div>
	</div>

	{
	"img": {
	"square": {
	"src": "../../images/fpo_square.png",
	"alt": "Square Thumbnail"
	},
	},
	"title" : "Lorem Ipsumdmada (32 characters)",
	"subtitle" : "Dolar sit amee consectetur"
	}

	"person" : {
	"img": {
	"square": {
	"src": "../../images/sample/avatar.jpg",
	"alt": "Thisisauser Withaverylonglastname"
	},
	},
	"title" : "Thisisauser Withaverylonglastname",
	"subtitle" : "Chief Executive Officer"
	}

	"peopleList" : [
	{
	"img": {
	"square": {
	"src": "../../images/sample/avatar-1.jpg",
	"alt": "Steve Boomshakalaka"
	},
	},
	"title" : "Steve Boomshakalaka",
	"subtitle" : "CIA"

	module.exports = function(grunt) {

	// Configuration
	grunt.initConfig({
	pkg: grunt.file.readJSON('package.json'),
	sass: {
	dist: {
	options: {
	style: 'compressed'
	},

	{{# person }}
	{{> molecules-block }}
	{{/ person }}

	{
	"isAdmin" : true
	}