best 0.0.1 → 0.0.2

data/template/jade/--- from cybex as inspiration/keyvisuals.jade

@@ -0,0 +1,37 @@
+
+block vars
+	- var bodyClass="l-has-sidebar"
+	- var title = "Keyvisuals"
+
+extends layouts/layout-page
+
+include mixins/m-keyvisual
+include mixins/m-warning
+
+prepend head
+	title Keyvisuals
+
+block header
+	include layouts/layout-header
+
+block main
+	.l-primary
+		article.article
+			hgroup
+				h1 KEYVISUAL modules
+				h2 Just for showing off. Here are the four different variants:
+
+			// .m-keyvisual-header arguments(title, subtitle, subtitle2, img, href, linkText)
+			mixin m-keyvisual-futura('Cybex Sirona', 'Eine revolutionäre perspektive', 'Über 80% weniger Risiko beim Frontalaufprall<br>ece r-44/04, gr. 0+/I (0-18 kg)', 'Sicher rückwärts ab geburt bis 18 kg (ca. 4 jahre)', 'img/content/header-sirona.jpg', 'http://google.com', 'Jetzt erleben', 'left')
+			mixin m-keyvisual-header('Let me ride', 'Buggys und Kinderwagen von Cybex', 'Von geburt bis 25kg', 'img/content/header-blue.jpg', 'http://google.com', 'this is on my button', 'left')
+			mixin m-keyvisual-header('Let me ride', 'Buggys und Kinderwagen von Cybex', 'Von geburt bis 25kg', 'img/content/header-retro.jpg', 'http://google.com', 'this is on my button', 'center')
+			mixin m-keyvisual-header('Let me ride', 'Buggys und Kinderwagen von Cybex', 'Von geburt bis 25kg', 'img/content/header-bw.jpg', 'http://google.com', 'this is on my button', 'right')
+
+			// m-keyvisual-center arguments(title, subtitle, img)
+			mixin m-keyvisual-center('This is my title', 'and this is my subtitle', 'img/content/header-retro.jpg')
+	
+	.l-secondary
+		include includes/nav-secondary.jade
+
+block footer
+	

data/template/jade/--- from cybex as inspiration/m-carousel.jade

@@ -0,0 +1,37 @@
+.m-carousel.col-set 
+	.inner
+
+		#touchcarousel.slider.touchcarousel.minimal-light
+			ul.touchcarousel-container
+				- var item1 = { title: 'A matter of trust', url: '#', width: 1, img: 'img/content/a-matter-of-trust.jpg' }
+				- var item2 = { title: 'Security theme of the week', url: '#', text: 'lorem lorem lorem', width: 2, img: 'img/content/falling-guy.jpg' }
+				- var item3 = { title: 'Cybex video', url: 'http://www.youtube.com/embed/hFXiCzp7sqg?autoplay=1', type:'fancybox', text: 'lorem lorem lorem', width: 2, imgposition: 'right', img: 'img/content/laptop.jpg' }
+				- var item4 = { title: 'Cybex video', url: 'http://www.youtube.com/embed/hFXiCzp7sqg?autoplay=1', type:'fancybox', text: 'lorem lorem lorem', width: 2, img: 'img/content/laptop-left.jpg' }
+				- var item5 = { title: 'Something more', url: '#', width: 1, img: 'img/content/a-matter-of-trust.jpg' }
+				- var item6 = { title: 'Skyfall is more', url: '#', width: 1, img: 'img/content/a-matter-of-trust.jpg' }
+
+				- var items = [item1, item2, item3, item4, item5, item6]
+					each item in items
+						li(class="item width#{item.width} align-#{item.imgposition} touchcarousel-item")
+							- if (item.type == 'fancybox')
+								a(href="#{item.url}",class="fancybox fancybox.iframe")
+									.media
+										img(src="#{item.img}", alt="#{item.title}")
+									- if (item.width == 2)
+										.entry
+											h2= item.title
+											p= item.text
+							- else
+								a(href="#{item.url}")
+									.media
+										img(src="#{item.img}", alt="#{item.title}")
+									- if (item.width == 2)
+										.entry
+											h2= item.title
+											p= item.text
+
+		//- .controls
+		//- 	a(href="").prev-page Prev page
+		//- 	//- a(href="#").prev-slide Prev slide
+		//- 	//- a(href="#").next-slide Next slide
+		//- 	a(href="").next-page Next page

data/template/jade/--- from cybex as inspiration/m-faq.jade

@@ -0,0 +1,23 @@
+.m-faq
+	h2 FAQ
+	dl.accordion
+		dt.q: a(href="#") Darf ich Aton inklusive der Basisstation auch bei aktiviertem Seitenairbag verwenden?
+		dd.a: p This is the answer!
+		dt.q: a(href="#") Mein Fahrzeug verfügt über ein Staufach im Fußraum des Fahrzeuges. Darf ich die Aton Basisstation trotzdem verwenden?
+		dd.a: p This is the answer!
+		dt.q: a(href="#") Was mache ich, wenn der Kopf meines Babys während der Fahrt auf die Brust fällt, obwohl die Aton Babyschale der Markierung nach waagerecht im Fahrzeug steht?
+		dd.a: p This is the answer!
+		dt.q: a(href="#") Kann ich den Kindersitz auch im Flugzeug verwenden?
+		dd.a: p This is the answer!
+		dt.q: a(href="#") Wie verstelle ich das integrierte Cabrio-Sonnendach?
+		dd.a: p This is the answer!
+		dt.q: a(href="#") Darf ich die Schale auf dem Beifahrersitz anbringen?
+		dd.a: p This is the answer!
+		dt.q: a(href="#") Kann das Kind auch in Fahrtrichtung im Auto sitzen?
+		dd.a: p This is the answer!
+		dt.q: a(href="#") Darf mein Kind in der Schale z.B. auch im Haushalt schlafen?
+		dd.a: p This is the answer!
+		dt.q: a(href="#") Mit welchen Buggys oder Kinderwagen darf ich den Aton verwenden?
+		dd.a: p This is the answer!
+		dt.q: a(href="#") Kann ich den Sitz nach einem Unfall weiterverwenden?
+		dd.a: p This is the answer!

data/template/jade/--- from cybex as inspiration/m-keyvisual.jade

@@ -0,0 +1,55 @@
+mixin m-keyvisual-center(title, subtitle, img)
+	- title = title || 'Title'
+	- subtitle = subtitle || 'Subtitle'
+	- img = img || 'img/content/04-sicherheitscenter1.jpg'
+
+	.m-keyvisual.keyvisual--center
+		img(src="#{img}").rsImg
+		hgroup
+			.inner
+				h1.title #{title}
+				br
+				h2.subtitle #{subtitle}
+
+
+mixin m-keyvisual-header(title, subtitle, subtitle2, img, href, linkText, align)
+	- title = title || 'Title'
+	- subtitle = subtitle || 'Subtitle'
+	- subtitle2 = subtitle2 || 'Subtitle 2'
+	- img = img || 'img/content/header-bw.jpg'
+	- href = href || '#'
+	- linkText = linkText || 'Jetzt erfahren'
+	- align = align || 'left'
+
+	.m-keyvisual.keyvisual--header.keyvisual--textbg.keyvisual--textbg-serif(class="keyvisual--align-#{align}")
+		img(src="#{img}")
+		hgroup
+			.inner
+				h1.title #{title}
+				br
+				h2.subtitle #{subtitle}
+				br
+				h2.subtitle.subtitle2 #{subtitle2}
+				br
+				a.button.button-arrow.button-bigger(href="#{href}") #{linkText}
+
+
+mixin m-keyvisual-futura(title, subtitle, subtitle2, bubble, img, href, linkText, align)
+	- title = title || 'Title'
+	- subtitle = subtitle || 'Subtitle'
+	- subtitle2 = subtitle2 || 'Subtitle 2'
+	- bubble = bubble || 'This is in the bubble'
+	- img = img || 'img/content/header-sirona.jpg'
+	- href = href || '#'
+	- linkText = linkText || 'Jetzt erfahren'
+	- align = align || 'left'
+
+	.m-keyvisual.keyvisual--header.keyvisual--futura(class="keyvisual--align-#{align}")
+		img(src="#{img}")
+		hgroup
+			.inner
+				.bubble !{bubble}
+				h1.title #{title}
+				h2.subtitle #{subtitle}
+				h2.subtitle.subtitle2 !{subtitle2}
+				a.button.button-arrow.button-bigger(href="#{href}") #{linkText}

data/template/jade/--- from cybex as inspiration/m-search.jade

@@ -0,0 +1,3 @@
+form.m-search(action="search.html")
+	input(type="search", placeholder="Suchbegriff").search-text
+	input(type="submit", value="Suchen")

data/template/jade/--- from cybex as inspiration/m-slideshow.jade

@@ -0,0 +1,12 @@
+.m-slideshow.m-slideshow-productdetail.royalSlider.contentSlider.rsDefault
+	.slide
+		img(src="img/content/callisto-slide.png", alt="").rsImg
+	.slide
+		img(src="img/content/callisto-slide2.png", alt="").rsImg
+	.slide
+		img(src="img/content/callisto-slide2.png", alt="").rsImg
+.m-slideshow-navigation
+	p
+		strong Images
+		br
+		span.title 1/1

data/template/jade/--- from cybex as inspiration/m-social.jade

@@ -0,0 +1,10 @@
+nav.m-menu.m-menu-social
+  ul
+    li 
+      a(href="#").icon-facebook-white Facebook
+    li 
+      a(href="#").icon-pinterest-white Pinterest
+    li 
+      a(href="#").icon-google-white Google+
+    li 
+      a(href="#").icon-youtube-white Youtube

data/template/jade/breakpoints.jade

@@ -0,0 +1,26 @@
+
+block vars
+	- var title = "Breakpoints"
+	- var bodyClass = "page-" + title.toLowerCase()
+	
+extends layouts/layout-page
+
+prepend head
+	title #{title}
+
+block header
+	include layouts/layout-header
+
+block main
+	.l-primary
+		article.article
+			h1 #{title}
+			p Which breakpoints are we using and why?
+
+			.m-breakpoints
+				.breakpoint--small I'm the small breakpoint
+				.breakpoint--medium I'm the medium breakpoint
+				.breakpoint--large I'm the large breakpoint
+
+block footer
+	include layouts/layout-footer.jade

data/template/jade/colors.jade

@@ -0,0 +1,32 @@
+
+block vars
+	- var title = "Colors"
+	- var bodyClass = "page-" + title.toLowerCase()
+	
+extends layouts/layout-page
+
+prepend head
+	title #{title}
+
+block header
+	include layouts/layout-header
+
+block main
+	.l-primary
+		article.article
+			h1 #{title}
+			p Let's see the default color values:
+			.color.color--white $white
+			.color.color--lightgray $lightgray
+			.color.color--gray $gray
+			.color.color--darkgray $darkgray
+			.color.color--black $black
+			.color.color--anchor-color $anchor-color
+			.color.color--anchor-color-hover $anchor-color-hover
+			.color.color--anchor-color-active $anchor-color-active
+			
+	.l-secondary
+		include includes/nav-secondary.jade
+
+block footer
+	//include layouts/layout-footer.jade

data/template/jade/fancybox.jade

@@ -0,0 +1,34 @@
+
+block vars
+	- var title = "Fancybox"
+	- var bodyClass = "page-" + title.toLowerCase()
+
+extends layouts/layout-page
+
+prepend head
+	title #{title}
+
+block header
+	include layouts/layout-header
+
+block main
+	.l-primary
+		article.article
+			h1 #{title}
+			p In order to use the Fancybox plugin you have to:
+			ol
+				li Update the component using Bower
+				li consider if you need any of the extended fancybox helpers (thumbnails etc.)
+				li Import the relevant CSS file(s) in <code>style.scss</code>
+				li Import the relevant script file(s) in <code>footer.js</code>
+				li Initialize the plugin in <code>main.js</code>
+			p
+				a(href="#fancybox").fancybox-test Click me to test the Fancybox plugin
+			#fancybox
+				p This is inside the #fancybox element
+
+	.l-secondary
+		include includes/nav-secondary.jade
+
+block footer
+	//include layouts/layout-footer.jade

data/template/jade/forms.jade

@@ -0,0 +1,39 @@
+include mixins/form-helpers
+
+block vars
+	- var title = "Forms"
+	- var bodyClass = "page-" + title.toLowerCase()
+	
+extends layouts/layout-page
+
+prepend head
+	title #{title}
+
+block header
+	include layouts/layout-header
+
+block main
+	.l-primary
+		article.article
+			h1 #{title}
+			p Here we'll show default form styling and markup
+
+			form.m-test-form
+				.field.field-type-select
+					label
+					select
+						option(value="") Sie sind…
+						option(value="") option2
+						option(value="") option3
+
+				mixin field('text', 'name', 'Username')
+				mixin field('password', 'password', 'Password')
+				mixin field('textarea', 'message', 'Message')
+				mixin field('submit', 'submit', 'Submit')
+			
+	
+	.l-secondary
+		include includes/nav-secondary.jade
+
+block footer
+	//include layouts/layout-footer.jade

data/template/jade/grid.jade

@@ -0,0 +1,36 @@
+
+block vars
+	- var title = "Grid"
+	- var bodyClass = "page-" + title.toLowerCase()
+	
+extends layouts/layout-page
+
+prepend head
+	title #{title}
+
+block header
+	include layouts/layout-header
+
+block main
+	.l-primary
+		article.article
+			h1 #{title}
+			p Grid system explained.
+			p This is the <a href="http://oocss.org/grids_docs.html">AG test</a> build on a 10 column <a href="susy.oddbird.net">Susy</a> grid.
+
+		.m-gridtest
+			.ag1: p 2of10
+			.ag2: p 6of10
+				.ag4: p 3of6
+				.ag5: p 3of6 + omega
+				
+				.ag6: p 2of6
+				.ag7: p 4of6 + omega
+					.ag8: p 2of4
+					.ag9: p 2of4 + omega
+					.ag10: p 4of4 +omega
+			.ag3: p 2of10 + omega
+			.ag11: p clear
+
+block footer
+	include layouts/layout-footer.jade

data/template/jade/includes/module-development.jade

@@ -0,0 +1 @@
+h1 Development

data/template/jade/includes/nav-development.jade

@@ -0,0 +1,27 @@
+nav.m-nav-development
+	ul
+		li.category Base
+			ul
+				li: mixin menu-item('Colors', 'colors.html')
+				li: mixin menu-item('Typography', 'typography.html')
+				li: mixin menu-item('Forms', 'forms.html')
+		li.category Layout
+			ul
+				li: mixin menu-item('Grid', 'grid.html')
+				li: mixin menu-item('Breakpoints', 'breakpoints.html')
+		li.category Components
+			ul
+				li: mixin menu-item('Fancybox', 'fancybox.html')
+				li: mixin menu-item('Dropdown', 'components/dropdown/dropdown.html')
+
+
+		//li.expanded
+			a(href="#") Seite Level 1
+			ul
+				li
+					a(href="#") Seite Level 2
+				mixin menu-item('Seite Level 2', '#')
+				mixin menu-item('Seite Level 2', '#')
+				mixin menu-item('Seite Level 2', '#')
+				mixin menu-item('Seite Level 2', '#')
+				mixin menu-item('Seite Level 2', '#')

data/template/jade/includes/nav-meta.jade

@@ -0,0 +1,6 @@
+nav.m-menu.m-menu-meta
+	ul
+		mixin menu-item('Link', 'index.html')
+		mixin menu-item('Link', 'index.html')
+		mixin menu-item('Link', 'index.html')
+		mixin menu-item('Link', 'index.html')

data/template/jade/includes/nav-primary.jade

@@ -0,0 +1,5 @@
+nav.m-nav-primary
+	ul
+		li: a(href="index.html")#bestLink Best
+		//li: mixin menu-item('Best', 'index.html')
+		li.sidebarToggleContainer: a(href="#")#sidebarToggle Toggle sidebar

data/template/jade/includes/nav-secondary.jade

@@ -0,0 +1,18 @@
+nav.m-menu.m-menu-secondary
+	//ul
+		li.category Base
+			ul
+				li: mixin menu-item('Colors', 'colors.html')
+				li: mixin menu-item('Typography', 'typography.html')
+				li: mixin menu-item('Forms', 'forms.html')
+		li.category Layout
+			ul
+				li: mixin menu-item('Grid', 'grid.html')
+
+
+		li.expanded
+			a(href="#") Seite Level 1
+			ul
+				li
+					a(href="#") Seite Level 2
+				

data/template/jade/index.jade

@@ -0,0 +1,33 @@
+
+block vars
+	- var title = "Index"
+	- var bodyClass = "page-" + title.toLowerCase()
+
+extends layouts/layout-page
+
+prepend head
+	title #{title}
+
+block header
+	include layouts/layout-header
+
+block main
+	.l-primary
+		article.article
+			h1 #{title} of the Best
+			p Follow the white rabbit. This is a work-in-progress.
+			p: strong Todo:
+			ul
+				li Showcase typgraphy
+				li Responsive typo
+				li Test grid system
+				li Test different responsive navigation patterns
+				li Bulletproof Susy
+
+			p: img(src="http://placekitten.com/g/1000/160")
+
+	.l-secondary
+		include includes/nav-secondary.jade
+
+block footer
+	//include layouts/layout-footer.jade