benjohnson

# React Nested Router is only distributed with CommonJS.
# To get an UMD version run the command below.

$ npm install webpack
$ npm install react-nested-router

# Make a file: webpack.config.js containing:
module.exports = { output: { libraryTarget: "umd" }, externals: { "react": "react" } }

$ /node_modules/.bin/webpack node_modules/react-nested-router/modules/main.js output.js

benjohnson

<!-- Not possible in Twig --> <? $parties = array_merge($upcoming_local_parties, $upcoming_online_parties);?> <!-- Not possible in Twig -->

<? if(!empty($parties)): ?>
	<? $i = 0; ?>
	<ul class="cardGrid">
	<? foreach ($parties as $party): ?>
		<li class="party<? if ($i % 4 == 0) echo " row" ?>"><a href="<?= url::site("parties/profile/{$party['event_id']}"); ?>">
			<img src="<?= url::site("{$party['avatar_photo_id']}") . "/100/150"; ?>" alt="<?= $party['name']; ?>" />
			<h3><?= $party['name']; ?></h3>
			<?

benjohnson

.wrapper { width: 250px; height: 300px; font-family: "Helvetica"; font-size: 16px; line-height: 21px; }
ul { padding: 0; margin: 0; }
ul li {list-style-type: none; padding: 0; margin: 0;}

.cart-lineitem-wrapper { position: relative; }
.cart-lineitem-prices { float: right; }
.cart-lineitem-prices li { float: left; margin-left: 10px; }
.cart-lineitem-prices li:first-child { margin-left: 0; }
.cart-lineitem-details { float: left; }

benjohnson

.container { text-align: center; background: green; width: 100px; }
.item { display: inline-block; background: red }

benjohnson

.box { display: inline-block; position: relative;}

.box-inner { 
background: #35b5d0; 
font-family: helvetica; 
color: #FFF; 
margin-left: 22px; 
padding: 0 10px; 
line-height: 2em; }

benjohnson

ul { display: inline; background: orange; padding: 0;}
li { display: inline-block; background: red;}

benjohnson

ul { background: orange; padding: 0; white-space:nowrap; overflow-x:auto; }
li { list-style-type:none; display: inline-block; background: red; }
div { width: 20%; background: purple; overflow: hidden; }

benjohnson

.box {
	width: 50%;
	height: 170px;
	position: relative;
	overflow: hidden;
	margin: 20px;
}

.box img {
	max-width: 100%;

benjohnson

.box {
	width: 400px;
	height: 200px;
	overflow: hidden;
	position: relative;
	margin-bottom: 20px;
}

.box img {
	max-width: 100%;

benjohnson

.box {
	width: 50%;
	height: 180px;
	position: relative;
	overflow: hidden;
	margin: 20px;
}

.box img {
	max-width: 100%;