Thomas Mayrhofer webpapaya

Possibilities for a CSS architecture in 2016

CSS in a growing web application is really, really hard. I'm doing CSS related projects on various side projects and my internships in New York and Vienna for a while. Every time I'm starting a new CSS project from scratch I always feel like: This time I need to do it right. The hard truth is, every CSS project I touched until now, didn't feel right, even if they had been touched by Senior Creative Developers (That's what experienced CSS enthusiasts have been called at my internship in New York). At some point the whole styling of your application just feels bloated with special rules everywhere. They either come from browser incompatibilities or designers who want to move a heading 1px to the top and 3px to the bottom. Even though most requirements from designers might seem stupid for us developers, it's the designers job to make the product, landing page or whatever else he was designing look awesome. As developers we somehow need to implement and deliver th

	export const executeAndReturn = (fn) => {
	return (argument) => {
	fn();
	return argument;
	}
	};

	#!/bin/bash

	if [ "$TRAVIS_PULL_REQUEST" != "false" -o "$TRAVIS_BRANCH" != "$CHANGELOG_BRANCH" ]; then
	echo "This commit was made against the $TRAVIS_BRANCH and not $CHANGELOG_BRANCH! Changelog not updated!"
	exit 0
	fi

	gem install rack -v 1.6.4
	gem install github_changelog_generator

	import {
	assertThat,
	equalTo,
	} from 'hamjest';
	import { getDaysInMonth } from './day';

	describe('getDaysInMonth()', () => {
	it('April has 30 days', () =>
	assertThat(getDaysInMonth(4, 2016), equalTo(30)));

	message = %w(
	Lorem ipsum dolor sit amet, consetetur
	sadipscing elitr, sed diam nonumy eirmod
	tempor invidunt ut labore et dolore magna
	).join(' ')

	const required = () => {throw Error('Parameter missing')};
	const myFn = (myArgument = required()) => {};

	it('throws error when argument is not present', () => {
	assert.throws(() => {
	myFn();
	});
	});

	const assert = (description, test) => {
	if(test()) { console.log(`✔ ${description}`); }
	else { console.error(`✖ ${description}`); }
	};

	const describe = (description, tests) => {
	console.log('----------------------------');
	console.log(`%c${description}`, `font-weight:800;`);
	tests();
	};

	@media all and (-webkit-min-device-pixel-ratio: 0) {
	select.form-control {
	// Make background transparent so that the arrow is "clickable"
	position: relative;
	z-index: 1;
	background: transparent;
	-webkit-appearance: none;
	}

	.select--wrp {