Recipe Box by BoCode

index.pug

#app

recipe-box-by-bocode.markdown

Recipe Box by BoCode

A Pen by Bojan on CodePen.

License.

script.babel

class Layout extends React.Component {

	constructor() {
		super();
		this.state = {
			data: []
		};
	}

	render() {
		return (
			<BoxesContainer />
		);
	}

}

class Footer extends React.Component {

	render() {
		return (
			<footer className="page__footer">
				<div className="container">
					<div className="column four">
					<h2>Connect</h2>
					<ul className="connect-list">
						<li className="connect-list__item">
							<a 
								className="connect-list__link"							
								href="https://www.linkedin.com/in/bojancvjetkovic"
								target="newwindow"
							>
								<i className="zmdi zmdi-linkedin zmdi-hc-5x" />
							</a>
						</li>
						<li className="connect-list__item">
							<a 
								className="connect-list__link"							
								href="https://github.com/BoCode84"
								target="newwindow"
							>
								<i className="zmdi zmdi-github-alt zmdi-hc-5x" />
							</a>
						</li>
						<li className="connect-list__item">
							<a 
								className="connect-list__link"
								href="https://codepen.io/bojan-c/"
								target="newwindow"
							>
								<i className="zmdi zmdi-codepen zmdi-hc-5x" />
							</a>
						</li>												
					</ul>
					</div>
				</div>
			</footer>
		);
	}

}
class BoxesContainer extends React.Component {

	constructor() {
		super();
    const storedRecipe = localStorage.getItem('recipesFCC');
    var data;
    if ( storedRecipe ) { 
    data = JSON.parse(storedRecipe); 
    } else {
    data =   [
                {
                  key: 0,
                  title: "Salsa verde",
                  ingredients: "small pack tarragon\n\n2 small packs flat-leaf parsley\n\n30g wild garlic (or 2 garlic cloves)\n\n 3 tsp Dijon mustard\n\n 40g small capers, drained, rinsed and roughly chopped\n\n 200ml extra virgin olive oil\n\n 2 tbsp sherry vinegar",
                  instructions: "1. Chop the herbs and garlic with 1 tsp sea salt until very fine. Add the mustard and capers , and combine.\n2. Transfer the mixture to a bowl and stir in the olive oil. Add the vinegar, little by little, stirring and tasting as you go – trust your palate!",
                  img: "http://www.bbcgoodfood.com/sites/default/files/styles/recipe/public/recipe/recipe-image/2016/04/salsa-verde-2.jpg?itok=R9-68UMh"
                },
                {
                  key: 1,
                  title: "Maple-mustard pulled pork", 
                  ingredients: "200g sea salt\n\n300g light muscovado sugar\n\n2kg/4lb 8oz piece pork shoulder\n\n100ml maple syrup\n\n100g wholegrain mustard\n\n2 tbsp English mustard powder\n\n",
                  instructions:"1. Mix the sea salt and 200g of the sugar in a large food bag, add the pork and coat it well. (If you don’t have a bag, rub over the pork in a dish and cover with cling film.) Leave in the fridge overnight.\n\n2. The next day, remove the pork and wipe down the meat with kitchen paper. Heat oven to 140C/120C fan/gas 1. Mix the remaining sugar, the maple syrup, mustards and some ground pepper. Rub half the mixture over the pork and sit it on a rack in a roasting tin. Roast for 6 hrs.\n\n3. Spoon the remaining maple mixture over the pork and roast for 1 hr more.\n\n4. Rest the meat for 30 mins on a plate loosely covered with foil. To serve, tear the pork into big fat chunks and, after skimming the surface, spoon over any juices from the tin.", 
                  img:"http://www.bbcgoodfood.com/sites/default/files/styles/recipe/public/user-collections/my-colelction-image/2015/12/recipe-image-legacy-id--1119469_10.jpg?itok=2GIQyKfz"
                },
                {
                  key: 2, 
                  title: "Salmon & spinach with tartare cream", 
                  ingredients: "1 tsp sunflower or vegetable oil\n\n 2 skinless salmon fillet\n\n 250g bag spinach\n\n 2 tbsp reduced-fat crème fraîche\n\njuice ½ lemon\n\n 1 tsp caper, \n\n 2 tbsp flat-leaf parsley, chopped\n\nlemon wedges, to serve",
                  instructions: "1. Heat the oil in a pan, season the salmon on both sides, then fry for 4 mins each side until golden and the flesh flakes easily. Leave to rest on a plate while you cook the spinach.\n\n2. Tip the leaves into the hot pan, season well, then cover and leave to wilt for 1 min, stirring once or twice. Spoon the spinach onto plates, then top with the salmon. Gently heat the crème fraîche in the pan with a squeeze of the lemon juice, the capers and parsley, then season to taste. Be careful not to let it boil. Spoon the sauce over the fish, then serve with lemon wedges.",
                  img: "http://www.bbcgoodfood.com/sites/default/files/styles/recipe/public/user-collections/my-colelction-image/2015/12/recipe-image-legacy-id--52867_12.jpg?itok=pnLXWqFK"
                },
                {
                  key: 3,
                  title: "Spicy black bean tacos",
                  ingredients: "1 tbsp vegetable oil\n\n3 garlic cloves, chopped\n\n3 x 400g cans black beans, drained and rinsed\n\n3 tbsp cider vinegar\n\n1 ½ tbsp honey\n\n1 ½ tbsp smoked paprika\n\n1 ½ tbsp ground cumin\n\n1 small garlic clove\n\n2 tbsp roughly chopped coriander\n\n1 green chilli, sliced\n\n2 avocados, halved and stoned\n\njuice 1 lime\n\n110g pack pomegranate seeds\n\n1 green chilli, finely diced\n\n1 small white onion, finely diced\n\nsmall handful fresh coriander, chopped",
                  instructions: "1. In a large frying pan, heat the oil and add the garlic. Fry until golden, then add the beans. Pour in the cider vinegar, honey and spices along with 1 tsp or more of salt, to taste. Cook until warmed through, crushing gently with the back of your wooden spoon, then set aside.\n\n2. The best way to make the guacamole is with a large stone pestle and mortar, but you can use a medium bowl and a flat-ended rolling pin instead. Crush the garlic, coriander and chilli into a rough paste. Scoop in the avocado with a little salt and crush roughly – you want it chunky, not smooth. Squeeze in the lime juice and set aside.\n\n3. Mix the salsa ingredients in a small bowl. Heat a griddle pan or steamer and quickly griddle the tortillas or steam a stack of them to warm up. Reheat the bean mixture.\n\n4. To serve, put 1-2 heaped tbsp of beans on a tortilla. Top with a big spoonful of guacamole and some salsa, hot sauce and a dollop of soured cream or yogurt.",
                  img: "http://www.bbcgoodfood.com/sites/default/files/styles/recipe/public/recipe/recipe-image/2016/05/spicy-black-bean-tacos.jpg?itok=RTBXRL7L"
                }
              ]                  
                }
		this.state = {
			data,
		counter: 4,
		// The index of which recipe to populate box with
		currIndex: 0,
		showBox: false
		};
	}

	/* Function adds new recipe
	 * @params [String] title : new recipe title
	 * @return [String] ingredients : new recipe ingredients
	 */
	addRecipe(title, ingredients, instructions, img) {
		const data = this.state.data,
			  newCounter = this.state.counter + 1;

		this.setState({counter: newCounter});

		const newRecipe = {
			key: this.state.counter,
			title: title,
			ingredients: ingredients,
			instructions: instructions,
		}
		if ( img ) {
			newRecipe.img = img;
		}
		this.state.data.push(newRecipe);
		this.forceUpdate();		
	}

	/* Function returns index ofobject in array using key
	 * @params [Number] key : the key of object
	 * @return [Number] index : the index of object in state data
	 * array
	 */
	getIndex(key) {
		var i = this.state.data.findIndex((element)=>{
			if (element.key === key) { return true} })
		return i;
	}

	/* Function updates data in this.state and re renders components
	 * @params [Number] key : the key of object
	 *			   [String] title : title data
	 *				 [String] ingredients : ingredients data
	 * @return [Number] index : the index of object in state data
	 * array
	 */
	updateRecipe(key, title, ingredients, instructions, img) {
		const data = this.state.data;
		var i = this.getIndex(key);

		this.state.data[i].title = title;
		this.state.data[i].ingredients = ingredients;
		this.state.data[i].instructions = instructions;
		this.state.data[i].img = img;				
		this.forceUpdate();
    this.saveToLocal();
	}

	deleteRecipe(key){
		var i = this.getIndex(key);
		this.state.data.splice(i, 1);
		this.forceUpdate();
		this.closeBox();
    this.saveToLocal();    
	}
  
  saveToLocal() {
    localStorage.setItem('recipesFCC', JSON.stringify(this.state.data));
  }
  
	closeBox() {
		this.setState({showBox:false})
	}

	showBox(key) {
		const index = this.getIndex(key);
		this.setState({
			showBox: true,
			currIndex: index
		});
	}
	
	render() {
		var box;
		if (this.state.showBox) {
			box = 	<Box
						data={this.state.data[this.state.currIndex]}
						update={this.updateRecipe.bind(this)}
						delete={this.deleteRecipe.bind(this)}
						close={this.closeBox.bind(this)}
				    />
		}

		
		return (
			<div>
				{box}
				<HeaderHeader 
					add={this.addRecipe.bind(this)}
				/>
				<Index 
					data={this.state.data} 
					show={this.showBox.bind(this)}
				/>
				<Footer />
			</div>
		);
	}

}

class Tile extends React.Component {
	
	handleClick() {
		console.log(this.props.data.key)
		this.props.show(this.props.data.key);
	}

	render() {
		return (
				<div 
					className="tile"
					onClick={this.handleClick.bind(this)}
				>
					<TileMain 
						title = {this.props.data.title}					
						img = {this.props.data.img}
					/>
					<TileFooter 
					/>
				</div>
		);
	}

}

class TileMain extends React.Component {

	render() {

		var heroDiv;
		if (this.props.img) {
			heroDiv = <div
					className="tile__hero"
					style={{
						background: "url(" + this.props.img + ")", 
						backgroundSize: "100% auto",
    					backgroundPosition: "center center"	
					}}
				/>
		} else {
			heroDiv = <div 
					className="tile__hero" 
				   />
		}
		return (
			<main
				className="tile__main"
			>
				{heroDiv}
				<header className="tile__header"> 
					<h2 className="tile__title"> {this.props.title} </h2>
				</header>
			</main>
		);
	}

}

class Index extends React.Component {

	render() {
		const data = this.props.data,
					tileNodes = data.map( (data) => {
						return (
							<Tile
								show={this.props.show}
								data={data}
							/>
						);
					});
		return (
			<div className="container">
				<main className="tile-container">
					{tileNodes}
				</main>
			</div>
		);
	}

}

class TileHeader extends React.Component {

	render() {
		return (
			<header
				className="tile__header"
			>
				{this.props.title}
			</header>
		);
	}

}

class TileFooter extends React.Component {

	render() {
		return (
			<footer className="tile__footer">
				<button className="btn-primary">
					<i className="zmdi zmdi-open-in-new zmdi-hc-lg btn-icon" /> open recipe
				</button>
			</footer>
		);
	}

}

class HeaderHeader extends React.Component {

	constructor() {
		super();
		this.state = {
			isHidden: true
		};
	}

	toggleHidden() {
		if ( this.state.isHidden ) {
			this.setState({isHidden: false})
		} else {
			this.setState({isHidden: true})			
		}
	}

	render() {
		return (
			<header className="page__header">
				<div className="container flex-container">
						<h1>Recipe Box</h1>						
            <AddButton 
							toggleHidden={this.toggleHidden.bind(this)}
						/>					


				</div>
			{!this.state.isHidden && <AddRecipe add={this.props.add} toggleHidden={this.toggleHidden.bind(this)}/>}			
			</header>
		);
	}

}

class AddRecipe extends React.Component {
	constructor() {
		super();
		this.state = {
			error: false
		}
	}
	handleTitleChange(e) {
		this.setState({title: e.target.value})
	}

	handleImageChange(e) {
		this.setState({img: e.target.value})
	}

	handleIngredientsChange(e) {
		this.setState({ingredients: e.target.value})
	}

	handleInstructionsChange(e) {
		this.setState({instructions: e.target.value})
	}

	handleSubmit(e) {
		e.preventDefault();
		if ( !this.state.title || !this.state.ingredients || !this.state.instructions ) {
			this.error();
			return;
		}
		this.props.add(
			this.state.title, 
			this.state.ingredients, 
			this.state.instructions, 
			this.state.img
		)
		this.props.toggleHidden();
	}

	error(){
		this.setState({error: true});
	}

	/* closes form when overlay is clicked
	 */
	handleClick(e) {
		const formBg = document.querySelector(".form-bg");
	    const isClickInside = formBg.contains(e.target);

	    if (!isClickInside) {
	      //the click was outside the specifiedElement, do something
	      this.props.toggleHidden();
	    }
	}

	render() {
		var error;
		if ( this.state.error ) {
			error = 	<span className="text-color-warning">
							You must complete all fields marked as required
						</span>		
		}
		return (
			<div 
				className="form-bg-overlay"
				onClick={this.handleClick.bind(this)}
			>
				<div className="form-bg">
					<form
						className="form"
						onSubmit={this.handleSubmit.bind(this)}
					>
						<i 
							className = "zmdi zmdi-close zmdi-hc-2x pull-right" 
							onClick = {this.props.toggleHidden}
						/>
						<h2 className="form__title">Add Recipe</h2>
						<label for="recipeName">Recipe name *</label>	
						<input
						id = "recipeName"
						type="text"
						onChange={this.handleTitleChange.bind(this)}
						/>
						<label for="recipeName">Ingredients *</label>		
						<textarea
						id = "ingredients"
						onChange={this.handleIngredientsChange.bind(this)}					
						/>
						<label for="ingredients">Instructions *</label>
						<textarea
						onChange={this.handleInstructionsChange.bind(this)}					
						/>
						<label for="imageUrl">Image URL (optional)</label>	
						<input
						id = "imageUrl"
						type="text"
						onChange={this.handleImageChange.bind(this)}
						/>											
						<input
							type="submit"
							value="add recipe"
							className="btn-primary"
						/>
						{error}			
					</form>
				</div>
			</div>
		);
	}

}

class AddButton extends React.Component {

	render() {
		return (
			<button
				className="action pull-right"
				onClick={this.props.toggleHidden}
			>
				Add recipe
			</button>
		);
	}

}

class Main extends React.Component {

	handleChangeImg(e) {
		this.props.update({img: e.target.value});
	}

	handleChangeInstructions(e) {
		// Change ingredients to html of editable elements
		const re = /(?:\r\n|\r|\n)/g;
		const str = (toMarkdown(e.target.innerHTML));
		this.props.update({instructions: str});
	}

	handleChangeIngredients(e) {
		// Change ingredients to html of editable elements
		const re = /(?:\r\n|\r|\n)/g;
		const str = e.target.innerText.replace(re, '\n\n');
		this.props.update({ingredients: str});
	}

	rawMarkup(text) {
	    var rawMarkup = marked(text);
	    return {__html: rawMarkup };
  	}

	render() {
		const editable = this.props.editable;
		const editImg =  <input 
							type="text"
							onChange={this.handleChangeImg.bind(this)} 
							value={this.props.img}
						/>
		return (
			<main
				className="box__main"
			>
				<div className="row">
					<div className="column six">
						<h3 className="box__subheading">Ingredients</h3>
						<p
						className="box__ingredients"
						contentEditable={editable ? true : false}
						onBlur={this.handleChangeIngredients.bind(this)}
						dangerouslySetInnerHTML={this.rawMarkup(this.props.ingredients)}
		      			/>
		      		</div>
		      		<div className="column six">
		      			<img 
		      				src={this.props.img}
		      				className="box__img" 
		      			/>
		      			{editable && editImg}
		      		</div>
		      	</div>
				<h3>Instructions</h3>      			
				<p
				className="box__instructions"				
				contentEditable={editable ? true : false}
				onBlur={this.handleChangeInstructions.bind(this)}
				dangerouslySetInnerHTML={this.rawMarkup(this.props.instructions)}
      			/>

			</main>
		);
	}

}

class Header extends React.Component {

	handleChange(e) {
		// Change title to html of editable elements
		this.props.update({title: e.target.innerText});
	 console.log(this.props.title)
	}

	render() {
		return (
			<header
				className="box__header"
			>
				<h2
				className="box__title"
				contentEditable = {this.props.editable ? true : false}
				onKeyPress = {this.handleChange.bind(this)}
				>
					{this.props.title}
				</h2>
				<i 
					className = "zmdi zmdi-close zmdi-hc-2x pull-right" 
					onClick = {this.props.close}
				/>
			</header>
		);
	}

}

class BoxFooter extends React.Component {

	render() {
		return (
			<footer className="box__footer">
        <button
          className="btn-warning"        
          onClick={this.props.delete}
        >
          <i className="zmdi zmdi-delete zmdi-hc-lg btn-icon"/> Delete
        </button>
        <button
          onClick={this.props.toggleEdit}
        >
          <i className="zmdi zmdi-edit zmdi-hc-lg btn-icon"/> Edit
        </button>        
			</footer>
		);
	}

}

class Box extends React.Component {

	constructor() {
		super();
		this.state = {
			index: true,
			editable: false,
		}
	}

	deleteRecipe() {
		console.log(this.props)
		this.props.delete(this.props.data.key)
	}	

	/* closes form when overlay is clicked
	 */
	handleClick(e) {
		const formBg = document.querySelector(".box");
	    const isClickInside = formBg.contains(e.target);

	    if (!isClickInside) {
	      //the click was outside the specifiedElement, do something
	      this.props.close();
	    }
	}
	updateRecipe({
					key = this.props.data.key,
					title = this.props.data.title,
					ingredients = this.props.data.ingredients,
					instructions = this.props.data.instructions,
					img = this.props.data.img
				}) {

		this.props.update(key, title, ingredients, instructions, img);
	}

	toggleEdit() {
		console.log("thi")
		this.setState({editable: this.state.editable ? false : true});
	}
	render() {
		return (
			<div 
				className="box-bg-overlay"
				onClick={this.handleClick.bind(this)}
			>
				<div className="box">

					<Header
					 	title = {this.props.data.title}
					 	editable = {this.state.editable}
						update= {this.updateRecipe.bind(this)}
						close = {this.props.close}
					/>

					<Main
						ingredients = {this.props.data.ingredients}
						instructions = {this.props.data.instructions}
						img = {this.props.data.img}
						editable = {this.state.editable}
						update= {this.updateRecipe.bind(this)}
					/>

					<BoxFooter
						delete = {this.deleteRecipe.bind(this)}
						toggleEdit = {this.toggleEdit.bind(this)}
					/>

				</div>
			</div>
		);
	}

}

class MyApp extends React.Component {
	render() {
		return (
			<Layout />
		);
	}
}

const app = document.getElementById('app');

ReactDOM.render(<MyApp />, app);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/to-markdown/3.0.0/to-markdown.js"></script>

style.scss

// Variables
//

$color-primary: #000a96;
$color-primary-50: #1d2138;
$color-secondary: #28c0e2;
$color-white: #fff;
$color-warning: red;
$color-font: #333;
$border-width: 5px;

$breakpoint-md: 768px;

$font-stack: "roboto", "Helvetica Neue", Helvetica, Arial;

// Reset
//
* {
	box-sizing: border-box;
  transition: all .1s ease-in;
}

//Typography
//

body{ 
	font: 16px $font-stack;
	color: $color-font;
}

h1, h2, h3 {
	font-weight: 400;
}

ol {
	padding-left: 1rem;
}

li {
	margin-bottom: 1rem;
}

// Buttons
//

button,
input[type=submit] {
    border: none;
    border-radius: 2px;
    display: inline-block;
    height: 36px;
    line-height: 36px;
    margin-right: .5rem;
    outline: 0;
    padding: 0 2rem;
    text-transform: uppercase;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    vertical-align: middle;
    will-change: opacity, transform;
    transition: all .3s ease-out;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    background: $color-secondary;

    &:hover {
    	background: lighten($color-secondary, 5%)
  }
}

.btn-icon {
	margin-right: .5rem;
}

.btn-primary {
	color: $color-white;
	background: $color-primary;

	&:hover {
		background: lighten($color-primary, 5% );		
	}
}

.btn-warning {
	color: $color-white;	
	background: $color-warning;

	&:hover {
		background: lighten($color-warning, 5%)
	}
}
// Forms
//

input[type=text],
textarea {
	font: 1rem $font-stack;
	background-color: $color-white;
	border: none;
	border-bottom: 1px solid #9e9e9e;
	border-radius: 0;
	outline: none;
	height: 3rem;
	width: 100%;
	margin: 0 0 15px 0;
	padding: 0;
	box-shadow: none;
	box-sizing: content-box;
	transition: all 0.3s;	
	&:focus {
	    border-bottom: 1px solid $color-primary;
	    box-shadow: 0 1px 0 0 #26a69a;
	}
}
textarea {
	margin-top: .7rem;
	height: 8rem;
}
label {
	color: #9e9e9e;
    font-size: .8rem;
}

.form-bg {
	position: absolute;
	width: 100%;
	background: #fff;
	left: 0;
	/* box 10 
     * form-bg 15
	 */	
	z-index: 15;
	border-bottom: $border-width solid $color-primary;	
}

.form-bg-overlay {
	left: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	top: 0;
	background:	url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHklEQVQ4T2NkYGCoZ6AAMI4awDAaBgyjYcAwLMIAAClPCAHRrlQFAAAAAElFTkSuQmCC);
	background:	rgba(0, 0, 0, 0.5);
	/* box 10 
     * form-bg 15
	 */	
	z-index: 15;		
}

.form {
	margin: 0 auto;
    max-width: 800px;
    padding: 2em;
    width: 100%;
    color: $color-font;
}

.form__title {
	color: $color-font;
	margin-top: 0;
}

// Page
//

.page__header {
	background: $color-primary;
	color: $color-white;
	padding: 1em;
	margin-bottom: 1em;	
}

.page__footer {
	@extend .page__header;
	margin-bottom: 0;
}

// Tile
//
.tile-container {
	display: flex;
	flex-flow: row wrap;
}
.tile {
	cursor: pointer;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    border-radius: 2px;
    width: 100%;
    margin-bottom: 1rem;
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;   

    &:hover {
    	box-shadow: 0 4px 5px 0 rgba(0,0,0,0.16),0 4px 10px 0 rgba(0,0,0,0.12);    	
    } 	    
}

@media (min-width: $breakpoint-md){
	.tile {	
		float: left;
		margin-left: 5%;
		width: 29.99999%;
		&:nth-of-type(3n + 1){
			margin-left: 0;
		}
	}
}

.tile__header {
	@extend .page__header
}
.tile__title {
	margin: 0;
}
.tile__footer {
	border-top: 1px solid rgba(160,160,160,0.2);
	padding: .5rem;
}

.tile__hero {
	// important added to override styles set inline
    background-size: 100% auto!important;
    background-position: center center!important;	
	background-color: $color-primary;
	height: 150px;
}

// Box
//

.box-bg-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	background:	url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAHklEQVQ4T2NkYGCoZ6AAMI4awDAaBgyjYcAwLMIAAClPCAHRrlQFAAAAAElFTkSuQmCC);
	background:	rgba(0, 0, 0, 0.5);
	/* box 10 
     * form-bg 15
	 */
	z-index: 10;
}

.box {
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
	background: $color-white;
	/* box 10 
     * form-bg 15
	 */
	z-index: 10;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);	
}

.box__instructions,
.box__ingredients,
.box__title {
	
	padding: .5rem;
	border: $border-width solid transparent;

	&[contenteditable=true] {

		background: $color-primary-50;
		color: $color-font;	

		&:focus,
		&:active {
			border-color: $color-primary;	
      outline: none;
		}		
	}

}

.box__title {
	display: inline-block;
	margin: 0;
}

.box__header {
	@extend .page__header
}

.box__main {
	padding: 1em;
}

.box__img {
	width: 100%;
	height: auto;
}

.box__footer {
	@extend .page__header;
  margin-bottom: 0;
}

.box__subheading {
	margin-top: 0;
}

.zmdi-close {
	cursor: pointer;
}

// Connect
//

.connect-list {
	padding: 0;
}

.connect-list__item {
	display: inline-block;
	margin-right: 1rem;
}

.connect-list__link {
	color: $color-white;

	&:hover {
		color: $color-warning;
	}
}

// Grid
//

$container-width: 1200px;
$grid-breakpoint: 800px;
$grid-margin: 4%;
$grid-number: 12;

.row:before,
.row:after,
.clearfix:after {
    content: " ";
    display: table;
}

.row,
.container {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.container {
    max-width: $container-width;
    margin: 0 auto;
}

.column,
.column-mobile {
    width: 100%;
    float: left;
    box-sizing: border-box;
}

@media (min-width: 560px) {
    .container {
        width: 95%;
    }
}

@media (min-width: $grid-breakpoint) {

  .column {
    margin-left: $grid-margin;
  }

  .column:first-of-type {
    margin-left: 0;
  } 

  $column-width: ( 100 - ( $grid-margin * $grid-number - 1 ) ) / $grid-number ;
  $column-numbers: (one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve);

  @each $column-number in $column-numbers {

    $i: index($column-numbers, $column-number);

    .#{$column-number} { 
      width: $column-width + ( ($column-width + $grid-margin)  * ( $i - 1 ) ) 
    }

  }

}


// Utilities
//
.flex-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
.pull-right {
	float: right;
}

.text-color-warning{
	color: $color-warning;
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,700" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet" />