jensgro

<!-- @una made this -->

<ul class="color-list">
    <li class="color-box brick-red"></li>
    <li class="color-box strawberry"></li>
    <li class="color-box deep-orange"></li>
    <li class="color-box tangerine"></li>
    <li class="color-box gold"></li>
    <li class="color-box sunshine"></li>
    <li class="color-box grass-green"></li>

jensgro

<ul class="theme theme--crisp">
  <li><span>#313340</span></li>
  <li><span>#f0f0e3</span></li>
  <li><span>#f9c27b</span></li>
  <li><span>#ef8531</span></li>
  <li><span>#f36519</span></li>
</ul>

<ul class="theme theme--funky">
  <li><span>#da0054</span></li>

jensgro

/**
 * Unter-Überschriften mit Flexbox in Dachzeilen verwandeln
 */

header {
  display: flex;
  flex-direction:column-reverse;
}

jensgro

/**
 * Slanted tabs with CSS 3D transforms
 * See http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/
 */

body { padding: 50px; }

nav {
	position: relative;
	z-index: 1;

jensgro

/**
 * @each basically lets us iterate over lists. What's a list?
 * Check it:
 *
 * Lists in SASS appear in two main formats, separated
 * by commas or spaces:
 *
 *  1. The sequence of values found in compound properties
 *  like border or background. For example: "1px solid black"
 *  is actually a list to SASS that can be looped over.

jensgro

by Dale Sande

Icon-fonts. They are pretty awesome, but much like managing Sprite files, there are issues that make them a real pain to manage. Sure there are full libraries out there that you can grab wholesale and rely on their documentation, but for optimization and performance reasons you do not want to load up a series of libraries just to use a few icons. Leveraging the power of HAML and Sass we can make this less painful and at the same time maintain a living style guide. Basically, winning all over the place.

[IcoMoon][IcoMoon] is a fantastic resource that allows users to select specific icons from various libraries, as well as upload custom SVG art and download a customized font library. In the download package there is an HTML document that illustrates the library you just created, but for most professional applications this isn't going to work. Mainly because you will probably not use IcoMoon's code verbatim. Customizing the HTML and CSS per your use is ve

jensgro

module.exports = {

  'A lot of screenshots': function (test) {
		var resolutions = [{width: 1280, height: 1024}, {width: 1024, height: 768}, {width: 800, height: 600}];
		var pages = ['http://facebook.com', 'http://twitter.com', 'http://dalekjs.com'];

		resolutions.forEach(function (res) {
			pages.forEach(function (page) {
				test.open(page)
					.resize(res)

jensgro

<button class="test">Super toller Button</button>

jensgro

/**
 * Lösung Adaptives Layout
 */
 
* { box-sizing: border-box; }
body { padding: 0 1%; font-family: Arial, sans-serif; line-height: 1.6; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav ul a { display: block; float: left; width:12.5%; font-weight: bold; }
#main, footer { clear: both; padding: 1em 0; }
footer { border-top: 1px solid #999; }

jensgro

/**
 * Übung Adaptives Layout
 */
 
* { box-sizing: border-box; }
body { padding: 0 1%; font-family: Arial, sans-serif; line-height: 1.6; }

nav ul { list-style: none; margin: 0; padding: 0; }
nav ul a { display: block; float: left; width:12.5%; font-weight: bold; }