Till Sanders tillsanders

Generate menus using Laravel routes

<li>{{ HTML::link(URL::route('home'), trans('pages.home.name'), Route::currentRouteName() === 'home' ? array('class' => 'active') : null) }}</li>

{{ HTML::link(URL::route('news'), trans('pages.news.name'), in_array(Route::currentRouteName(), array('news', 'news-details')) ? array('class' => 'active') : null) }}

Favicons, Tiles, etc.

favicon.ico - 32x32
favicon.png - 32x32
apple-touch-icon.png - 180x180 (iPhone 6 Plus, others resize it automagically)
tile.png - 558x558
tile-wide.png - 558x270
tile-150x150.png - 150x150
tile-310x310.png - 310x310
tile-70x70.png - 70x70

Automatically get page meta from language files with Laravel

Use this in your blade layout:

<title>{{ trans('pages.'.Route::currentRouteName().'.title').trans('pages.title-suffix') }}</title>
<meta name="description" content="{{ trans('pages.'.Route::currentRouteName().'.description') }}" />
<meta name="keywords" content="{{ trans('pages.obligatory-keywords').trans('pages.'.Route::currentRouteName().'.keywords') }}" />

An example for lang//pages.php:

Language url prefix for Laravel 4

Not sure, where I got the initial code from :( But this is, what I use at the moment:

Add to app/config/app.php:

<?php
// [...]
'languages' => array('de', 'en'),

Install older versions of laravel via composer

php composer.phar create-project laravel/laravel <path> 4.1.*

Or, in case composer is installed globally:

composer create-project laravel/laravel 4.1.*

SCSS: rem-unit mixin provides support for older browsers

This mixin was taken from David Walshs Blog (great blog, by the way!); the article was witten by Sébastien Axinté. It provides a mixin to convert rem to px for older browsers.

Link different stylesheets in your head section. main.css for decent browsers and main-ie.css for IE < 9:

<!--[if (gt IE 8) | (IEMobile)]><!-->
      <link rel="stylesheet" href="/css/main.css">
<!--<![endif]-->

Animate the transformation of a mobile menu toggle into a cross

~~Animation~~ Transition for a mobile menu toggle. Three horizontal lines transform into a cross and back again. The top and bottom lines fall into the center, transforming into one line. The line(s) rotate clockwise, spawning a line at 45deg and stop at 135 deg, forming a cross. Demo: http://jsfiddle.net/SYYr5/84/

Annotations:

the animation uses four additional elements inside the a tag. This is not semantic, but we can at least use elements without a semantic meaning, like div and span
using a div as a second container, we are able to apply a padding to our a tag
We may need to use vendor prefixes :/

	#!/bin/bash
	glue graphics/sprites \
	--img=./graphics \
	--scss=./styles \
	--sprite-namespace= \
	--namespace="sprite" \
	--margin=5 \
	--retina
	mv ./styles/sprites.scss ./styles/scss/_sprites.scss