yamlcss 1.0.0

data/yaml/demos/css/flexible-columns.css

@@ -0,0 +1,26 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * central stylesheet - layout example "flexible-columns"
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ */
+
+/* Google Font API */
+@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Droid+Sans:700);
+
+/* import core styles | Basis-Stylesheets einbinden */
+@import url(../../yaml/core/base.css);
+
+/* import screen layout | Screen-Layout einbinden */
+@import url(../../yaml/navigation/hlist.css);
+@import url(../../yaml/forms/gray-theme.css);
+
+@import url(../../yaml/screen/typography.css);
+@import url(../../yaml/screen/screen-PAGE-layout.css);
+
+/* import print layout | Druck-Layout einbinden */
+@import url(../../yaml/print/print.css);

data/yaml/demos/css/flexible-grids.css

@@ -0,0 +1,26 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * central stylesheet - layout example "flexible-grids"
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ */
+
+/* Google Font API */
+@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Droid+Sans:700);
+
+/* import core styles | Basis-Stylesheets einbinden */
+@import url(../../yaml/core/base.css);
+
+/* import screen layout | Screen-Layout einbinden */
+@import url(../../yaml/navigation/hlist.css);
+@import url(../../yaml/forms/gray-theme.css);
+
+@import url(../../yaml/screen/typography.css);
+@import url(../../yaml/screen/screen-FULLPAGE-layout.css);
+
+/* import print layout | Druck-Layout einbinden */
+@import url(../../yaml/print/print.css);

data/yaml/demos/css/rtl-support.css

@@ -0,0 +1,31 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * central stylesheet - layout example "rtl-support"
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ */
+
+/* Google Font API */
+@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700|Droid+Sans:700);
+
+/* import core styles | Basis-Stylesheets einbinden */
+@import url(../../yaml/core/base.css);
+@import url(../../yaml/add-ons/rtl-support/core/base-rtl.css);
+
+/* import screen layout | Screen-Layout einbinden */
+@import url(../../yaml/navigation/hlist.css);
+@import url(../../yaml/add-ons/rtl-support/navigation/hlist-rtl.css);
+@import url(../../yaml/forms/gray-theme.css);
+@import url(../../yaml/add-ons/rtl-support/forms/gray-theme-rtl.css);
+
+@import url(../../yaml/screen/typography.css);
+@import url(../../yaml/add-ons/rtl-support/screen/typography-rtl.css);
+
+@import url(screen/screen-rtl-support.css);
+
+/* import print layout | Druck-Layout einbinden */
+@import url(../../yaml/print/print.css);

data/yaml/demos/css/screen/screen-custom-grids.css

@@ -0,0 +1,41 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * screen stylesheet - layout example "custom grids"
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ */
+
+@media screen {
+
+	/* Basic Element Styling */
+	div.ym-gbox {
+		margin-bottom: 21px;	/* 1.5em - px value to reduce rounding errors in IE */
+		line-height: 19px;  /* 1.3571em - px value to reduce rounding errors in IE */
+		background: rgb(240,220,220);
+		background: rgba(128,0,0,.1);
+		border: 1px #800 solid;
+		text-align: center;
+	}
+
+}
+
+@media screen and ( max-width: 759px )  {
+
+    .ym-wrapper {
+		width: auto;
+    }
+
+	.ym-gl,
+	.ym-gr {
+		margin:0;
+		float: none;
+		width: auto !important;
+		position:static;
+	}
+
+	.ym-gbox { padding: 0; }
+}

data/yaml/demos/css/screen/screen-rtl-support.css

@@ -0,0 +1,182 @@
+/**
+ * "Yet Another Multicolumn Layout" - YAML CSS Framework
+ *
+ * screen stylesheet - layout example "rtl-support"
+ *
+ * @copyright       Copyright 2005-2012, Dirk Jesse
+ * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
+ *                  YAML-CDL (http://www.yaml.de/license.html)
+ * @link            http://www.yaml.de
+ */
+
+@media screen {
+
+	/* force vertical scrollbar */
+	body {
+		overflow-y: scroll;
+	}
+
+	/* Layout Module Configuration */
+	.ym-wrapper {
+		min-width: 760px;
+		max-width: 80em;
+		margin: 0 auto;
+	}
+
+	.ym-wbox { padding: 10px; }
+
+	/* Basic Element Styling */
+	header {
+		background: #444;
+		color: #ccc;
+		padding: 1.5em;
+	}
+
+	header h1 {
+		background: transparent;
+		color: #fff;
+	}
+
+	nav {
+		background: #222222;
+	}
+
+	main {
+		padding: 1.5em 0 0 0;
+	}
+
+	footer {
+		background: #eee;
+		color: #444;
+		padding: 1.5em;
+	}
+
+	footer p {
+		margin: 0;
+	}
+
+	/* Column-Set Configuration: 1-3 (sidebar left) */
+	/* content */
+	.ym-col1 {
+		width: 75%;
+	}
+	/* sidebar */
+	.ym-col3 {
+		margin-left:75%;
+		margin-right:0;
+	}
+
+	.ym-col1 .ym-cbox { padding: 0 0 0 1.5em; }
+	.ym-col3 .ym-cbox { padding: 0 1.5em 0 0; }
+	.ym-gbox { padding: 0 0 0 1.5em; }
+
+	.ym-skiplinks a.ym-skip:focus,
+	.ym-skiplinks a.ym-skip:active {
+		color:#fff;
+		background:#333;
+		border-bottom:1px #000 solid;
+		padding:10px 0;
+		text-align: center;
+		text-decoration:none;
+	}
+}
+
+/* reset fallback values in modern browsers */
+@media screen and ( min-width: 0px ) {
+    .ym-wrapper {
+		min-width: 0px;
+    }
+}
+
+@media screen and ( max-width: 740px )  {
+
+	/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-1 */
+	.linearize-level-1,
+	.linearize-level-1 > [class*="ym-g"],
+	.linearize-level-1 > [class*="ym-col"] {
+		display: block;
+		float: none;
+		padding: 0;
+		margin: 0;
+		width: 100% !important;
+	}
+
+	.linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"],
+	.linearize-level-1 > [class*="ym-col"] > [class*="ym-cbox"] {
+		overflow: hidden; /* optional for containing floats */
+		padding: 0;
+		margin: 0;
+	}
+
+	nav .ym-hlist ul {
+		padding-right: 10px;
+	}
+
+	.ym-searchform {
+		display:block;
+		float: none;
+		width: auto;
+		padding-right: 10px;
+		text-align: right;
+	}
+
+	.ym-searchform input[type="search"] {
+		width: 14%;
+	}
+}
+
+@media screen and ( max-width: 480px)  {
+
+	.ym-wbox {
+		padding: 0;
+	}
+
+	header {
+		padding: 0.75em 10px;
+	}
+
+	footer,
+	main,
+	nav .ym-hlist ul,
+	.ym-searchform {
+		padding-left: 10px;
+		padding-right: 10px;
+	}
+
+	header h1 {
+		font-size: 1.5em;
+		line-height: 1em;
+		margin: 0;
+	}
+
+	/* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-2 */
+	.linearize-level-2,
+	.linearize-level-2 > [class*="ym-g"],
+	.linearize-level-2 > [class*="ym-col"] {
+		display: block;
+		float: none;
+		padding: 0;
+		margin: 0;
+		width: 100% !important;
+	}
+
+	.linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"],
+	.linearize-level-2 > [class*="ym-col"] > [class*="ym-cbox"] {
+		overflow: hidden; /* optional for containing floats */
+		padding: 0;
+		margin: 0;
+	}
+
+	.ym-searchform,
+	nav .ym-hlist ul,
+	nav .ym-hlist li {
+		display:block;
+		float: none;
+		width: auto;
+		text-align: right;
+	}
+
+	.ym-searchform input[type="search"] {
+		width: 75%;
+	}
+}

data/yaml/demos/custom-grid.html

@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8"/>
+	<title>Demo: Custom Grid Layout &ndash; YAML CSS Framework</title>
+
+	<!-- Mobile viewport optimisation -->
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<!-- (en) Add your meta data here -->
+	<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
+
+	<link href="./css/custom-grids.css" rel="stylesheet" type="text/css"/>
+	<!--[if lte IE 7]>
+	<link href="../yaml/core/iehacks.css" rel="stylesheet" type="text/css" />
+	<![endif]-->
+
+	<!--[if lt IE 9]>
+	<script src="../lib/html5shiv/html5shiv.js"></script>
+	<![endif]-->
+	<script src="../lib/jquery-1.10.1.min.js"></script>
+	<script src="../docs/assets/js/jquery.gridbuilder.js"></script>
+	<script type="text/javascript">
+		$(document).ready(function(){
+
+			$("main .ym-wrapper").gridBuilder({
+				color: '#eee', // color of the primary gridlines
+				secondaryColor: '#f9f9f9', // color of the secondary gridlines
+				vertical: 21, // height of the vertical rhythm
+				horizontal: 60, // width of horizontal strokes
+				gutter: 20, // width of the gutter between strokes
+			});
+		});
+	</script>
+</head>
+<body>
+
+<main>
+	<div class="ym-wrapper">
+		<h1 class="ym-gbox">YAML 4 &ndash; Custom Grids</h1>
+		<p class="ym-gbox">YAML 4 provides several custom grid configurations, eg. a port of the  960 Grid System. This example is responsive
+			too and linearizes its content on screen widths lower than 760 Pixels. Of course, you should adjust this to your individual needs.</p>
+		<p class="ym-gbox">To define your own individual grid configurations, use the grid-generator-mixin that is provided in YAML's Sass port.</p>
+		<h2 class="ym-gbox">12 Column Grid</h2>
+		<div class="ym-gbox">940</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-gl"><div class="ym-gbox">60</div></div>
+			<div class="ym-g960-11 ym-gl"><div class="ym-gbox">860</div></div>
+			<div class="ym-g960-2 ym-gl"><div class="ym-gbox">140</div></div>
+			<div class="ym-g960-10 ym-gl"><div class="ym-gbox">780</div></div>
+			<div class="ym-g960-3 ym-gl"><div class="ym-gbox">220</div></div>
+			<div class="ym-g960-9 ym-gl"><div class="ym-gbox">700</div></div>
+			<div class="ym-g960-4 ym-gl"><div class="ym-gbox">300</div></div>
+			<div class="ym-g960-8 ym-gl"><div class="ym-gbox">620</div></div>
+			<div class="ym-g960-5 ym-gl"><div class="ym-gbox">380</div></div>
+			<div class="ym-g960-7 ym-gl"><div class="ym-gbox">540</div></div>
+			<div class="ym-g960-6 ym-gl"><div class="ym-gbox">460</div></div>
+			<div class="ym-g960-6 ym-gl"><div class="ym-gbox">460</div></div>
+		</div>
+
+		<h3 class="ym-gbox">Push &amp; Pull Classes Available</h3>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-gl"><div class="ym-gbox">60</div></div>
+		</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-push-1 ym-gl"><div class="ym-gbox">60</div></div>
+		</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-push-2 ym-gl"><div class="ym-gbox">60</div></div>
+		</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-push-3 ym-gl"><div class="ym-gbox">60</div></div>
+		</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-push-4 ym-gl"><div class="ym-gbox">60</div></div>
+		</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-push-5 ym-gl"><div class="ym-gbox">60</div></div>
+		</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-push-6 ym-gl"><div class="ym-gbox">60</div></div>
+		</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-push-7 ym-gl"><div class="ym-gbox">60</div></div>
+		</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-push-8 ym-gl"><div class="ym-gbox">60</div></div>
+		</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-push-9 ym-gl"><div class="ym-gbox">60</div></div>
+		</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-push-10 ym-gl"><div class="ym-gbox">60</div></div>
+		</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-push-11 ym-gl"><div class="ym-gbox">60</div></div>
+		</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-3 ym-gl">
+				<div class="ym-gbox">220</div>
+			</div>
+			<div class="ym-g960-3 ym-gl">
+				<div class="ym-gbox">220</div>
+			</div>
+			<div class="ym-g960-1 ym-gl">
+				<div class="ym-gbox">60</div>
+			</div>
+			<div class="ym-g960-5 ym-gl">
+				<div class="ym-gbox">380</div>
+			</div>
+		</div>
+		<div class="ym-grid linearize-level-1">
+			<div class="ym-g960-1 ym-gl">
+				<div class="ym-gbox">60</div>
+			</div>
+			<div class="ym-g960-5 ym-gl">
+				<div class="ym-gbox">380</div>
+			</div>
+			<div class="ym-g960-3 ym-gl">
+				<div class="ym-gbox">220</div>
+			</div>
+			<div class="ym-g960-3 ym-gl">
+				<div class="ym-gbox">220</div>
+			</div>
+		</div>
+	</div>
+</main>
+</body>
+</html>

data/yaml/demos/flexible-columns.html

@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8"/>
+	<title>Demo: Flexible Column Layout &ndash; YAML CSS Framework</title>
+
+	<!-- Mobile viewport optimisation -->
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<!-- (en) Add your meta data here -->
+	<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
+
+	<link href="./css/flexible-columns.css" rel="stylesheet" type="text/css"/>
+	<!--[if lte IE 7]>
+	<link href="../yaml/core/iehacks.css" rel="stylesheet" type="text/css" />
+	<![endif]-->
+
+	<!--[if lt IE 9]>
+	<script src="../lib/html5shiv/html5shiv.js"></script>
+	<![endif]-->
+</head>
+<body>
+<ul class="ym-skiplinks">
+	<li><a class="ym-skip" href="#nav">Skip to navigation (Press Enter)</a></li>
+	<li><a class="ym-skip" href="#main">Skip to main content (Press Enter)</a></li>
+</ul>
+
+<div class="ym-wrapper">
+	<div class="ym-wbox">
+		<header>
+			<h1>Project Name</h1>
+		</header>
+		<nav id="nav">
+			<div class="ym-hlist" >
+				<ul>
+					<li class="active"><strong>Active</strong></li>
+					<li><a href="#">Link</a></li>
+					<li><a href="#">Link</a></li>
+					<li><a href="#">Link</a></li>
+					<li><a href="#">Link</a></li>
+				</ul>
+				<form class="ym-searchform">
+					<input class="ym-searchfield" type="search" placeholder="Search..." />
+					<input class="ym-searchbutton" type="submit" value="Search" />
+				</form>
+			</div>
+		</nav>
+		<main>
+			<div class="ym-column linearize-level-1">
+				<div class="ym-col1">
+					<div class="ym-cbox">
+						<section class="box info">
+							<h2>Main Content</h2>
+							<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+							<a class="ym-button ym-next" href="#">Read More</a>
+						</section>
+						<section class="ym-grid linearize-level-2">
+							<article class="ym-g50 ym-gl">
+								<div class="ym-gbox">
+									<!-- content -->
+									<h3>Heading</h3>
+									<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+								</div>
+							</article>
+							<article class="ym-g50 ym-gr">
+								<div class="ym-gbox">
+									<!-- content -->
+									<h3>Heading</h3>
+									<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+								</div>
+							</article>
+						</section>
+						<section class="ym-grid linearize-level-2">
+							<article class="ym-g50 ym-gl">
+								<div class="ym-gbox">
+									<!-- content -->
+									<h3>Heading</h3>
+									<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+								</div>
+							</article>
+							<article class="ym-g50 ym-gr">
+								<div class="ym-gbox">
+									<!-- content -->
+									<h3>Heading</h3>
+									<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
+								</div>
+							</article>
+						</section>
+					</div>
+				</div>
+				<aside class="ym-col3">
+					<div class="ym-cbox">
+						<h2>Sidebar</h2>
+						<h4>Advertisement</h4>
+						<div class="ym-contain-dt">
+							<img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="float-left bordered"/>
+							<img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="float-left bordered"/>
+							<img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="float-left bordered"/>
+							<img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="float-left bordered"/>
+							<img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="float-left bordered"/>
+							<img src="http://dummyimage.com/128x128/cccccc/fff.png" alt="ads" class="float-left bordered"/>
+						</div>
+						<h4>Widget</h4>
+						<ul>
+							<li>Item 1</li>
+							<li>Item 2</li>
+							<li>Item 3</li>
+							<li>Item 4</li>
+							<li>Item 5</li>
+						</ul>
+					</div>
+				</aside>
+			</div>
+		</main>
+		<footer>
+			<p>© Company 2012 &ndash; Layout based on <a href="http://www.yaml.de">YAML</a></p>
+		</footer>
+	</div>
+</div>
+
+<!-- full skip link functionality in webkit browsers -->
+<script src="../yaml/core/js/yaml-focusfix.js"></script>
+</body>
+</html>