-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
188 lines (177 loc) · 8.69 KB
/
index.html
File metadata and controls
188 lines (177 loc) · 8.69 KB
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Neutron - A Sass framework that empowers you to create flexible, clear, and semantic website layouts</title>
<link rel="stylesheet" href="/assets/built/normalize.css">
<link rel="stylesheet" href="/assets/built/prism-default.css">
<link rel="stylesheet" href="/assets/built/stylish.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300|Dosis:300,400,600|Fira+Mono' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
<link rel="shortcut icon" href="/assets/img/pinned.svg" type="image/x-icon" />
<link rel="mask-icon" href="/assets/img/pinned.svg" color="#29383A">
<meta name="theme-color" content="#29383A">
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="description" content="Neutron is a Sass framework that empowers you to create flexible, clear, and semantic website layouts. Using Neutron you can create layouts that are fast and easy to iterate with, powerful to use, all while remaining simple to understand.">
<meta name="keywords" content="neutron,neutroncss,css,Sass,SCSS,framework,web,design,html,development,bootstrap,foundation,susy">
<meta property="og:site_name" content="Neutron">
<meta property="og:title" content="Overview" />
<meta property="og:image" content="/opengraph.png">
<meta property="og:description" content="Neutron is a Sass framework that empowers you to create flexible, clear, and semantic website layouts. Using Neutron you can create layouts that are fast and easy to iterate with, powerful to use, all while remaining simple to understand.">
<meta property="og:url" content="http://neutroncss.com/" />
<meta property="og:type" content="website" />
<link rel="canonical" href="http://neutroncss.com/" />
</head>
<body class="landing-page">
<script>
dataLayer = [{
'pageCategory': 'overview'
}];
</script>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-NSZGQZ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NSZGQZ');</script>
<!-- End Google Tag Manager -->
<header>
<section id="intro">
<img src="assets/img/logo.svg" id="introLogo" />
<p class="copyIntro">A Sass framework that empowers you to create flexible, clear, and semantic website layouts.</p>
<a href="https://github.com/NeutronCSS/neutroncss/archive/master.zip" data-anal-downloaded="intro" class="btn">Download Version 0.9.1</a>
<br />
<a data-anal-docs="intro" href="/docs" class="docsLink">or read the documentation</a>
</section>
<div class="pattern"></div>
</header>
<section class="infoBlock flexible">
<h2>Flexible layouts, done your way</h2>
<p>Neutron does more than just let you build your layout quickly, it lets you maintain your work or change direction entirely with much less effort than other frameworks require. This flexibility lets you iterate faster and easier, your code can now keep up with the design changes that happen through the life of a project.</p>
<p class="indent0">
@include columns(<input type="text" pattern="\d{1,2}" id="column-input" data-default="5" value="5">);
<span class="comment">// Try changing the column layout yourself!</span>
</p>
<div id="flexibility">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</section>
<section id="compare" class="infoBlock">
<h2>Clear, clean, and semantic</h2>
<p>Neutron removes the need to litter your HTML with messy and confusing classes, leaving you with clear and clean code. Want to change the number of columns? No need to change classes scattered throughout your HTML, the number of columns is determined in your CSS right where it belongs.</p>
<span class="codeblock" id="otherFrameworks">
<h3 data-tabs="frameworks.tab.bootstrap.active">Bootstrap</h3>
<h3 data-tabs="frameworks.tab.skeleton">Skeleton</h3>
<h3 data-tabs="frameworks.tab.foundation">Foundation</h3>
<hr class="hrtabs" />
<div data-tabs="frameworks.page.bootstrap">
<p class="indent0"><div <i>class="container"</i>></p>
<p class="indent1"><div <i>class="row"</i>></p>
<p class="indent2"><div <i>class="col-xs-12 col-md-6"</i>></p>
<p class="indent3"><h1>Hello</h1></p>
<p class="indent2"></div></p>
<p class="indent2"><div <i>class="col-xs-12 col-md-6"</i>></p>
<p class="indent3"><h1>World</h1></p>
<p class="indent2"></div></p>
<p class="indent1"></div></p>
<p class="indent0"></div></p>
</div>
<div data-tabs="frameworks.page.skeleton">
<p class="indent0"><div <i>class="container"</i>></p>
<p class="indent1"><div <i>class="row"</i>></p>
<p class="indent2"><div <i>class="two columns"</i>></p>
<p class="indent3"><h1>Hello</h1></p>
<p class="indent2"></div></p>
<p class="indent2"><div <i>class="two columns"</i>></p>
<p class="indent3"><h1>World</h1></p>
<p class="indent2"></div></p>
<p class="indent1"></div></p>
<p class="indent0"></div></p>
</div>
<div data-tabs="frameworks.page.foundation">
<p class="indent0"><div <i>class="row"</i>></p>
<p class="indent1"><div <i>class="small-12 large-6 columns"</i>></p>
<p class="indent2"><h1>Hello</h1></p>
<p class="indent1"></div></p>
<p class="indent1"><div <i>class="small-12 large-6 columns"</i>></p>
<p class="indent2"><h1>World</h1></p>
<p class="indent1"></div></p>
<p class="indent0"></div></p>
</div>
</span>
<span class="codeblock">
<h3 data-tabs="neutron.tab.html.active">Neutron</h3>
<h3 data-tabs="neutron.tab.styles">Sass</h3>
<hr class="hrtabs" />
<div data-tabs="neutron.page.html">
<p class="indent0"><section></p>
<p class="indent1"><div></p>
<p class="indent2"><h1>Hello</h1></p>
<p class="indent1"></div></p>
<p class="indent1"><div></p>
<p class="indent2"><h1>World</h1></p>
<p class="indent1"></div></p>
<p class="indent0"></section></p>
</div>
<div data-tabs="neutron.page.styles">
<p class="indent0">section {</p>
<p class="indent1">columns(<i>1</i>)</p>
<p class="indent1">@include breakpoint(<i>from-tablet</i>) {</p>
<p class="indent2">columns(<i>2</i>)</p>
<p class="indent1">}</p>
<p class="indent0">}</p>
</div>
</span>
</section>
<section id="powerful" class="infoBlock">
<h2>Powerful features, simple syntax</h2>
<p>Rethinking Neutron to work the way you think helped us make Neutron more powerful, not just easier to use. Instead of pushing or pulling elements to fit into your design, you can simply use <code>order()</code> and make your design match the way you imagined it. Because Neutron makes no unnecessary assumptions about how you work, we were able to add essential features like real flush margins that other frameworks have to fake or simulate or not support at all.</p>
<h3>HTML as it sits in the DOM</h3>
<div class="example1">
<span><p>1</p></span>
<span><p>2</p></span>
<span><p>3</p></span>
<span><p>4</p></span>
<span><p>5</p></span>
</div>
<p class="indent0">@include columns(<i>5</i>);</p>
<h3>With <code>order()</code> applied</h3>
<div class="example2">
<span><p>1</p></span>
<span><p>2</p></span>
<span><p>3</p></span>
<span><p>4</p></span>
<span><p>5</p></span>
</div>
<p class="indent0">@include columns(<i>5</i>, $order:(<i>5,4,1,3,2</i>));</p>
</section>
<footer>
<ul>
<li><a data-anal-downloaded="footer" href="https://github.com/NeutronCSS/neutroncss/archive/master.zip">Download</a>
<li><a href="https://github.com/NeutronCSS/neutroncss">Github</a>
<li><a href="/docs/">Docs</a>
<li><a href="/faq/">FAQ</a>
<li><a href="/about/">About</a>
<li><a href="https://twitter.com/NeutronCSS">Twitter</a>
</ul>
</footer>
<script src="/assets/built/app.js"></script>
<script>
neutron.tab.init("frameworks");
neutron.tab.init("neutron");
neutron.column.init();
</script>
</body>
</html>