Jens Grochtdreis jensgro

dreispaltiges CSS-Grid-Layout

Download Flutter SDK, extract the "Flutter" folder and put somewhere on your machine https://flutter.dev/docs/get-started/install

Add path for 'location/flutter/bin'

	<h1>Zeilenboxen und display-Eigenschaft</h1>
	<p>Jeder Text wird durch eine Zeilenbox repräsentiert. Manche Buchstaben haben Unterlängen und hängen darunter. Elemente, die innerhalb eines Absatzes auftauchen dürfen, sind sogenannte Inline-Elemente. Bei ihnen wirken die vertikalen <code>margins</code> und <code>paddings</code> nicht. Experimentieren Sie mit <code>display: inline-block</code> sowie <code>margin</code> und <code>padding</code>.</p>
	<h2>Beispielabsatz mit Markierungen</h2>
	<p>Bavaria ipsum dolor sit amet i moan scho <span>aa Trachtnhuat kloan Edlweiss</span> oamoi do griaß God beinand des is hoid aso und des muas ma hoid kenna. <mark>Abfieseln</mark> hoid Biakriagal Breihaus pfiad de. Diandldrahn heid is a geh auszutzeln. Auffi unbandig de Sonn Mamalad a geh ned woar pfiad de Engelgwand lem und lem lossn zwoa san. <strong>Trachtnhuat wolpern</strong> pfiad de kumm geh, hoam. Hoid Mamalad du dadst ma scho daugn Maderln imma obandeln sog i <em>Schuabladdla Schaung</em> kost nix wia da Buachbinda Wan

	/* http://codepen.io/team/css-tricks/pen/226a65c8f7d64615aabd45048d1d3b6d */

	/* Block */
	.btn { /* Basic Styles */ }

	/* Element */
	.btn__price { /* Preis */ }
	.btn__text { /* Text */ }

	/* Modifier */

	<ul class="navigation">
	<li class="navigation__item">
	<a href="#" class="navigation__link">Link</a>
	</li>
	<li class="navigation__item">
	<a href="#" class="navigation__link">Noch ein toller Link</a>
	</li>
	<li class="navigation__item">
	<a href="#" class="navigation__link">Der ist noch besser!</a>
	</li>

	<!-- Jedes Element bezieht sich mit dem Namen NUR auf das Mosul und nicht auf eventuelle Elternelemente. -->
	<div class="teaser">
	<header class="teaser__headercontainer">
	<h3 class="teaser__header">Überschrift</h3>
	</header>
	<div class="teaser__content">
	<p>Lorem Dingenskirchen und so weiter, ihr wisst schon ....</p>
	</div>
	<footer class="teaser__footer">
	<a href="linkziel.html" class="teaser__footerlink">weiterlesen ...</a>

	<ul class="navigation">
	<li class="navigation__first-level-item">
	<a href="#" class="navigation__first-level-link">Link</a>
	</li>
	<li class="navigation__first-level-item">
	<a href="#" class="navigation__first-level-link">Noch ein toller Link</a>

	<ul class="navigation__second-level">
	<li class="navigation__second-level-item">
	<a href="#" class="navigation__second-level-link">Link im Submenü</a>

	var isMobile = function() {
	return /iPhone\|iPad\|iPod\|Android/i.test(navigator.userAgent);
	}