Skip to content

Commit 857e285

Browse files
DogfaloDogfalo
committed
v0.94.1 Release
1 parent d3d6834 commit 857e285

File tree

3 files changed

+299
-0
lines changed

3 files changed

+299
-0
lines changed

‎Gruntfile.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,7 @@ module.exports = function(grunt) {
219219
files: {
220220
"index.html": "jade/index.jade",
221221
"about.html": "jade/about.jade",
222+
"sass.html": "jade/sass.jade",
222223
"getting-started.html": "jade/getting-started.jade",
223224
"mobile.html": "jade/mobile.jade",
224225
"showcase.html": "jade/showcase.jade",

‎jade/sass.jade‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
- var no_nav = false
2+
- var page = "Sass"
3+
4+
doctype html
5+
html
6+
head
7+
include _head.jade
8+
body
9+
include _navbar.jade
10+
main
11+
include page-contents/sass_content.html
12+
include _footer.html
13+
include _scripts.html

‎sass.html‎

Lines changed: 285 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,285 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
6+
<meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
7+
<title>Sass - Materialize</title>
8+
<!-- Favicons -->
9+
<link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
10+
<meta name="msapplication-TileColor" content="#FFFFFF">
11+
<meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
12+
<link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
13+
<!-- Android 5 Chrome Color -->
14+
<meta name="theme-color" content="#EE6E73">
15+
<!-- CSS -->
16+
<link href="css/prism.css" rel="stylesheet">
17+
<link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
18+
<link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
19+
<script>
20+
window.liveSettings = {
21+
api_key: "a0b49b34b93844c38eaee15690d86413",
22+
picker: "bottom-right",
23+
detectlang: true,
24+
dynamic: true,
25+
autocollect: true
26+
};
27+
</script>
28+
<script src="//cdn.transifex.com/live.js"> </script>
29+
</head>
30+
<body>
31+
<header>
32+
<nav class="top-nav">
33+
<div class="container">
34+
<div class="nav-wrapper"><a class="page-title">Sass</a></div>
35+
</div>
36+
</nav>
37+
<div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full"><i class="mdi-navigation-menu"></i></a></div>
38+
<ul id="nav-mobile" class="side-nav fixed">
39+
<li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
40+
<object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
41+
<li class="bold"><a href="about.html">About</a></li>
42+
<li class="bold"><a href="getting-started.html">Getting Started</a></li>
43+
<li class="no-padding">
44+
<ul class="collapsible collapsible-accordion">
45+
<li class="bold"><a class="collapsible-header active">CSS</a>
46+
<div class="collapsible-body">
47+
<ul>
48+
<li class="active"><a href="sass.html">Sass</a></li>
49+
<li><a href="typography.html">Typography</a></li>
50+
<li><a href="color.html">Color</a></li>
51+
<li><a href="shadow.html">Shadow</a></li>
52+
<li><a href="grid.html">Grid</a></li>
53+
<li><a href="media-css.html">Media</a></li>
54+
<li><a href="table.html">Table</a></li>
55+
<li><a href="helpers.html">Helpers</a></li>
56+
</ul>
57+
</div>
58+
</li>
59+
<li class="bold"><a class="collapsible-header">Components</a>
60+
<div class="collapsible-body">
61+
<ul>
62+
<li><a href="forms.html">Forms</a></li>
63+
<li><a href="buttons.html">Buttons</a></li>
64+
<li><a href="navbar.html">Navbar</a></li>
65+
<li><a href="cards.html">Cards</a></li>
66+
<li><a href="preloader.html">Preloader</a></li>
67+
<li><a href="collections.html">Collections</a></li>
68+
<li><a href="badges.html">Badges</a></li>
69+
<li><a href="footer.html">Footer</a></li>
70+
</ul>
71+
</div>
72+
</li>
73+
<li class="bold"><a class="collapsible-header">JavaScript</a>
74+
<div class="collapsible-body">
75+
<ul>
76+
<li><a href="dialogs.html">Dialogs</a></li>
77+
<li><a href="modals.html">Modals</a></li>
78+
<li><a href="dropdown.html">Dropdown</a></li>
79+
<li><a href="tabs.html">Tabs</a></li>
80+
<li><a href="side-nav.html">SideNav</a></li>
81+
<li><a href="pushpin.html">Pushpin</a></li>
82+
<li><a href="waves.html">Waves</a></li>
83+
<li><a href="media.html">Media</a></li>
84+
<li><a href="parallax.html">Parallax</a></li>
85+
<li><a href="collapsible.html">Collapsible</a></li>
86+
</ul>
87+
</div>
88+
</li>
89+
</ul>
90+
</li>
91+
<li class="bold"><a href="http://materializecss.com/mobile.html">Mobile</a></li>
92+
</ul>
93+
</header>
94+
<main><div class="container bsa">
95+
<div class="buysellads hide-on-small-only">
96+
<!-- CarbonAds Zone Code -->
97+
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
98+
</div>
99+
100+
<div class="row">
101+
102+
<div class="col s12 m9 l10">
103+
<!-- Media Queries Section-->
104+
<div id="variables" class="section scrollspy">
105+
<h2 class="header">Media Queries</h2>
106+
<p class="caption">
107+
We have 3 media queries for the 3 standard screen sizes you can use in your custom Sass files. This also includes media query variables that will define the range.
108+
</p>
109+
<p>
110+
Small screens are defined as having a max-width of 600px
111+
<br>
112+
Medium screens are defined as having a max-width of 992px
113+
<br>
114+
Large screen are defined as having a min-width of 992px
115+
</p>
116+
117+
<h4>CSS</h4>
118+
<pre><code class="language-css col s12">
119+
// These classes can be added to HTML Elements to affect visibility on certain displays
120+
// They apply display:none;
121+
.hide-on-small-only
122+
.hide-on-small-and-down
123+
.hide-on-med-and-down
124+
.hide-on-med-and-up
125+
.hide-on-med-only
126+
.hide-on-large-only
127+
</code></pre>
128+
129+
<h4>Sass</h4>
130+
<pre><code class="language-css col s12">
131+
@media #{$small-and-down} {
132+
// styles for small screens and down
133+
}
134+
@media #{$medium-and-up} {
135+
// styles for medium screens and larger
136+
}
137+
@media #{$medium-and-down} {
138+
// styles for medium screens and down
139+
}
140+
@media #{$large-and-up} {
141+
// styles for large screens and up
142+
}
143+
</code></pre>
144+
</div>
145+
146+
<!-- Prefixer Section-->
147+
<div id="mixins" class="section scrollspy">
148+
<h2 class="header">Prefixer</h2>
149+
<p class="caption">
150+
One major goal of this framework is to be as adaptable as possible which includes cross browser compatibility. We have adapted a prefixer script to Sass which will automatically add all browser prefixes for certain CSS properties.
151+
</p>
152+
153+
154+
For Example: Using this Sass mixin
155+
<pre><code class="language-scss">
156+
@include transition(.3s);
157+
</code></pre>
158+
Will Output This
159+
<pre><code class="language-css">
160+
-webkit-transition: 0.3s;
161+
-moz-transition: 0.3s;
162+
-o-transition: 0.3s;
163+
-ms-transition: 0.3s;
164+
transition: 0.3s;
165+
</code></pre>
166+
Here is the full list of mixins
167+
<pre><code class="language-css">
168+
animation($args)
169+
animation-delay($delay)
170+
animation-direction($direction)
171+
animation-duration($duration)
172+
animation-fill-mode($mode)
173+
animation-iteration-count($count)
174+
animation-name($name)
175+
animation-play-state($state)
176+
animation-timing-function($function)
177+
background-size($args)
178+
border-radius($args)
179+
box-shadow($args)
180+
inner-shadow($args)
181+
box-sizing($args)
182+
border-box()
183+
content-box()
184+
columns($args)
185+
column-count($count)
186+
column-gap($gap)
187+
column-rule($args)
188+
column-width($width)
189+
gradient($default,$start,$stop)
190+
linear-gradient-top($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])
191+
linear-gradient-left($default,$color1,$stop1,$color2,$stop2,[$color3,$stop3,$color4,$stop4])
192+
opacity($factor)
193+
transform($args)
194+
transform-origin($args)
195+
transform-style($style)
196+
rotate($deg)
197+
scale($factor)
198+
translate($x,$y)
199+
translate3d($x,$y,$z)
200+
translateHardware($x,$y)
201+
text-shadow($args)
202+
transition($args)
203+
transition-delay($delay)
204+
transition-duration($duration)
205+
transition-property($property)
206+
transition-timing-function($function)
207+
</code></pre>
208+
</div>
209+
</div>
210+
<div class="col hide-on-small-only m3 l2">
211+
<div style="height: 1px;">
212+
<ul class="section table-of-contents">
213+
<li><a href="#variables">Variables</a></li>
214+
<li><a href="#mixins">Mixins</a></li>
215+
</ul>
216+
</div>
217+
</div>
218+
219+
</div> <!-- end row -->
220+
221+
</div>
222+
</main> <footer>
223+
<div class="container">
224+
<div class="row">
225+
<div class="col l4 s12">
226+
<h5 class="white-text">Help Materialize Grow</h5>
227+
<p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
228+
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
229+
<input type="hidden" name="cmd" value="_s-xclick">
230+
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
231+
">
232+
<button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
233+
</button>
234+
</form>
235+
236+
</div>
237+
<div class="col l4 s12">
238+
<h5 class="white-text">Join the Discussion</h5>
239+
<p class="grey-text text-lighten-4">We have a gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
240+
<a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
241+
</div>
242+
<div class="col l4 s12" style="overflow: hidden;">
243+
<h5 class="white-text">Connect</h5>
244+
<iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
245+
<br>
246+
<a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
247+
<br>
248+
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
249+
</div>
250+
</div>
251+
</div>
252+
<div class="footer-copyright">
253+
<div class="container">
254+
© 2014 Materialize, All rights reserved.
255+
<a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
256+
</div>
257+
</div>
258+
</footer>
259+
<!-- Scripts-->
260+
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
261+
<script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
262+
</script>
263+
<script src="js/jquery.timeago.min.js"></script>
264+
<script src="js/prism.js"></script>
265+
<script src="bin/materialize.js"></script>
266+
<script src="js/init.js"></script>
267+
<!-- Twitter Button -->
268+
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
269+
270+
<!-- Google Plus Button-->
271+
<script src="https://apis.google.com/js/platform.js" async defer></script>
272+
273+
<!-- Google Analytics -->
274+
<script>
275+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
276+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
277+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
278+
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
279+
280+
ga('create', 'UA-56218128-1', 'auto');
281+
ga('require', 'displayfeatures');
282+
ga('send', 'pageview');
283+
</script>
284+
</body>
285+
</html>

0 commit comments

Comments
 (0)