drupal_styletiles/index.html at master · abelb/drupal_styletiles · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
	<meta charset="utf-8" />

	<!-- Set the viewport width to device width for mobile -->
	<meta name="viewport" content="width=device-width" />

	<title>Welcome to Foundation</title>

	<!-- Included CSS Files -->
	<link rel="stylesheet" href="base/stylesheets/app.css">

	<script src="javascripts/foundation/modernizr.foundation.js"></script>

	<!-- IE Fix for HTML5 Tags -->
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

</head>
<body>
	<div class="row">
		<div class="twelve columns">
			<h2>Building Drupal Style Tiles using Foundation and SCSS</h2>
			<h4 class="subheader">presented by Andrea Burton</h4>
			<h5 class="subheader">I am the User Experience Lead at <a href="http://www.funnymonkey.com">FunnyMonkey</a></h5>
			<h5 class="subheader">Twitter: <a href="http://www.twitter.com/andreaburton">@andreaburton</a></h5>
			<h5 class="subheader">Drupal.org: <a href="http://drupal.org/user/489442">abelb</a></h5>
			<h5 class="subheader">Github: <a href="http://www.github.com/abelb">abelb</a></h5>
		</div>
	</div>

	<div class="row">
		<div class="twelve columns">

			<div class="panel">
			  <h3>Style Tiles</h3>
			  	<ul>
				  <li><a href="base">Base Style Tile - Default Foundation Styles</a></li>
				  <li><a href="example">Example Style Tile - Default w/o Foundation classes with overrides.scss example</a></li>
				</ul>
			</div>


			<div class="panel">
			  <h3>Links and resources</h3>

				<h5 class="subheader">Style Tiles</h5>
				<ul>
				  <li><a href="http://styletil.es/">Style Tiles - Samantha Warren</a></li>
				  <li><a href="http://www.alistapart.com/articles/style-tiles-and-how-they-work/">Style Tiles and How They Work by Samantha Warren</a></li>
				  <li><a href="http://www.alistapart.com/articles/style-tiles-and-how-they-work/">Style Tile Tutorial - <em>Style Tiles: An Alternative to Full Design Comps</em></a></li>
				<ul>

				<h5 class="subheader">Foundation Links</h5>
				<ul>
					<li><a href="http://foundation.zurb.com/">Foundation 3</a></li>
				  	<li><a href="https://github.com/liamr/Zurb-Foundation-Textmate-Bundle">Zurb-Foundation-Textmate-Bundle</a></li>
				  	<li><a href="https://github.com/gerrytucker/Sublime-Text-2-Zurb-Foundation">Sublime-Text-2-Zurb-Foundation</a></li>
				</ul>

				<h5 class="subheader">Compass Mixins</h5>
				<ul>
					<li><a href="https://github.com/heygrady/compass-photoshop-drop-shadow">Compass mixin for using the dropshadow values that Photoshop uses.</a></li>
					<li><a href="https://gist.github.com/3299505">Drupal Pager SCSS mixin</a></li>
					<li><a href="http://jaredhardy.com/sassy-buttons/">Sassy Buttons</a></li>
				</ul>

				<h5 class="subheader">Applications, Aritcles and Other Resources Mentioned</h5>
				<ul>
				  <li><a href="http://css-tricks.com/sass-vs-less/">Sass vs. LESS by Chris Coyier - CSSTricks.com</a></li>
				  <li><a href="http://csshat.com/">CSS Hat</a></li>
				  <li><a href="http://beta.typecastapp.com/">Typecast App</a></li>
  				  <li><a href="http://www.theleagueofmoveabletype.com/">League of Movable Type - Open Source Typography</a></li>
				</ul>

				 <h5 class="subheader">Drupal Modules</h5>
				 <ul>
				 	<li><a href="http://drupal.org/project/styleguide">Styleguide Module</a></li>
				 </ul>

			</div>
		</div>
	</div>

	<!-- Included JS Files (Uncompressed) -->
	<script src="javascripts/foundation/jquery.js"></script>

	<script src="javascripts/foundation/jquery.foundation.accordion.js"></script>

	<script src="javascripts/foundation/jquery.foundation.alerts.js"></script>

	<script src="javascripts/foundation/jquery.foundation.buttons.js"></script>

	<script src="javascripts/foundation/jquery.foundation.forms.js"></script>

	<script src="javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>

	<script src="javascripts/foundation/jquery.foundation.navigation.js"></script>

	<script src="javascripts/foundation/jquery.foundation.orbit.js"></script>

	<script src="javascripts/foundation/jquery.foundation.reveal.js"></script>

	<script src="javascripts/foundation/jquery.foundation.tabs.js"></script>

	<script src="javascripts/foundation/jquery.foundation.tooltips.js"></script>

	<script src="javascripts/foundation/jquery.foundation.topbar.js"></script>

	<script src="javascripts/foundation/jquery.placeholder.js"></script>


  <!-- Application Javascript, safe to override -->
  <script src="javascripts/foundation/app.js"></script>
</body>
</html>