Skip to content

Commit 85b5353

Browse files
author
DNZ\darius
committed
Installation page, icons page text
1 parent 29c27f4 commit 85b5353

File tree

4 files changed

+260
-198
lines changed

4 files changed

+260
-198
lines changed

‎dist/icons.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ <h1>Icons</h1>
111111
<p>Below are a few examples. Please look at the <a href="http://fontawesome.io/icons/" target="_blank">Font Awesome icons examples</a> to look at the codes for every icon you need.</p>
112112
</div>
113113
<div class="mb-3x">
114-
<h2 class="ta-center ta-left-b3">Example social icons</h2>
114+
<h2 class="ta-center ta-left-b3">Example icons</h2>
115115
<div class="g gutter-small ta-center">
116116
<div class="b0_04 b2_03 b3_04 b5_03"><div class="icon"><i class="fa fa-close" aria-hidden="true"></i></div></div>
117117
<div class="b0_04 b2_03 b3_04 b5_03"><div class="icon"><i class="fa fa-calendar" aria-hidden="true"></i></div></div>

‎dist/installation.html‎

Lines changed: 127 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -101,15 +101,15 @@
101101
<!-- End side -->
102102

103103

104-
105-
<!-- Main -->
106-
<div class="b0_12 b4_14 b4_push_01">
107-
<div class="p-3x">
108-
<div class="block">
109-
<h1>Installation</h1>
110-
<p class="intro">A modular, updatable, easy to use SCSS Framework</p>
111-
<p>CastleCSS is built with easy updating in mind.<br />
112-
You can do anything as long as you don't edit the dependencies (core, buttons, notifications, etc).</p>
104+
105+
<!-- Main -->
106+
<div class="b0_12 b4_14 b4_push_01">
107+
<div class="p-3x">
108+
<div class="block">
109+
<h1>Installation</h1>
110+
<p class="intro">A modular, updatable, easy to use SCSS Framework</p>
111+
<p>CastleCSS is built with easy updating in mind.<br />
112+
You can do anything as long as you don't edit the dependencies (core, buttons, notifications, etc).</p>
113113
<p>When you do adjust the dependencies, you will lose all adjustments with an update.</p>
114114
</div>
115115
<div class="block block-invert p-3x pt-2x">
@@ -123,11 +123,12 @@ <h2>Boilerplate</h2>
123123
</p>
124124
<h3>What's included?</h3>
125125
<ul>
126-
<li>A simple and mobile-friendly HTML5 template to kickstart your website</li>
126+
<li>A simple and mobile-first HTML5 template to kickstart your website</li>
127127
<li>Configuration for Grunt, to easily compile and minify your Sass files</li>
128128
<li><a href="https://github.com/CastleCSS/castlecss-core" target="_blank">castlecss-core</a></li>
129129
<li><a href="https://github.com/CastleCSS/castlecss-buttons" target="_blank">castlecss-buttons</a></li>
130130
<li><a href="https://github.com/CastleCSS/castlecss-notifications" target="_blank">castlecss-notifications</a></li>
131+
<li><a href="https://github.com/CastleCSS/castlecss-icons" target="_blank">castlecss-icons</a></li>
131132
</ul>
132133
<h3>
133134
Installation
@@ -137,7 +138,7 @@ <h3>
137138
</div>
138139

139140
</div>
140-
<div class="block">
141+
<div class="block mb-3x">
141142
<h2>Structure</h2>
142143
<p>The basis structure for your website should look similar like this (included in the boilerplate):<br />
143144
</p>
@@ -162,7 +163,8 @@ <h2>Structure</h2>
162163
|-- Gruntfile.js<br />
163164
|-- package.json<br />
164165
</code>
165-
<br />
166+
</div>
167+
<div class="block mb-3x">
166168
<h2>Main.scss</h2>
167169
<p>Your main.scss should have a setup similair to this (included in the boilerplate):</p>
168170
<pre class="brush: sass;">
@@ -176,110 +178,139 @@ <h2>Main.scss</h2>
176178
@import "node_modules/castlecss-core/sass/main";
177179
@import "node_modules/castlecss-buttons/sass/main";
178180
@import "node_modules/castlecss-notifications/sass/main";
181+
@import "node_modules/castlecss-icons/sass/main";
179182

180183
/* Include your own files below this line
181-
-------------------------------------- */
184+
-------------------------------------- */
182185

183186

184187

185188
/* --------------------------------------
186-
Include your own files above this line */
189+
Include your own files above this line */
187190

188191
@import "node_modules/castlecss-core/sass/base/utility";
189-
@import "node_modules/castlecss-core/sass/base/utility_spacers";
190-
</pre>
191-
192+
@import "node_modules/castlecss-core/sass/base/utility_spacers";</pre>
193+
</div>
194+
<div class="block mb-3x">
195+
<h2>Install packages seperately</h2>
196+
<p>Already have a CastleCSS project and want to add a module or just want to add 1 part of CastleCSS? Just include the core and any addon you want.</p>
197+
<div class="g">
192198

193-
<div id="core" class="b0_12">
194-
<div class="block block-invert p-3x pt-2x">
195-
<h2>Core only</h2>
196-
<p>
197-
<div>
198-
<a href="https://github.com/castlecss/castlecss-core" class="btn-theme02" aria-label="Watch castlecss/castlecss-core on GitHub" target="_blank"><i class="fa fa-github"></i> Watch on github</a>&nbsp;<a href="https://github.com/castlecss/castlecss-core/archive/master.zip" class="btn" aria-label="Download castlecss/castlecss-core on GitHub"><i class="fa fa-cloud-download"></i> Download core</a>
199-
</div>
200-
</p>
201-
<h3>Installation</h3>
199+
<div id="core" class="b0_12 b4_12">
200+
<div class="block block-invert p-3x pt-2x">
201+
<h2>Core</h2>
202+
<p>
203+
<div>
204+
<a href="https://github.com/castlecss/castlecss-core" class="btn-theme02" aria-label="Watch castlecss/castlecss-core on GitHub" target="_blank"><i class="fa fa-github"></i> Watch on github</a>&nbsp;<a href="https://github.com/castlecss/castlecss-core/archive/master.zip" class="btn" aria-label="Download castlecss/castlecss-core on GitHub"><i class="fa fa-cloud-download"></i> Download core</a>
205+
</div>
206+
</p>
207+
<h3>Installation</h3>
202208

203-
<p>
204-
Via npm: <code>npm install castlecss-core -S</code>
209+
<p>
210+
Via npm: <code>npm install castlecss-core -S</code>
205211

206-
</p>
207-
<h3>Updating</h3>
208-
<p>
209-
<code>npm update castlecss-core</code><br />
210-
</p>
212+
</p>
213+
<h3>Updating</h3>
214+
<p>
215+
<code>npm update castlecss-core</code><br />
216+
</p>
211217

212-
<h3>What's included?</h3>
213-
<p>
214-
<ul>
215-
<li><strong>Main:</strong> include all your other SCSS files</li>
216-
<li><strong>Reset:</strong> Set browser defaults to zero/none so nothing weird happends in different browsers</li>
217-
<li><strong><a href="variables.html">Variables</a>:</strong> Variables for the grid, fonts, utility, etc</li>
218-
<li><strong>defaults:</strong> Set default web settings</li>
219-
<li><strong><a href="mixins.html">Mixins</a>:</strong> Small but handy collection of mixins to use</li>
220-
<li><strong><a href="utility.html">Utility</a>:</strong> Genereral utility classes</li>
221-
<li><strong><a href="utility_spacers.html">Utility spacers</a>:</strong> Margin and padding utility classes</li>
222-
<li><strong><a href="grid.html">Grid</a>:</strong> Flexbox scss grid with floating fallback</li>
223-
<li><strong>Static files:</strong> Classes that are static throughout the site</li>
224-
</ul>
225-
</p>
226-
</div>
227-
</div>
228-
<div id="buttons" class="b0_12">
229-
<div class="block block-invert p-3x pt-2x">
230-
<h2>Buttons only</h2>
231-
<p>
232-
<div>
233-
<a href="https://github.com/castlecss/castlecss-buttons" class="btn-theme02" aria-label="Watch castlecss/castlecss-buttons on GitHub" target="_blank"><i class="fa fa-github"></i> Watch on github</a>&nbsp;<a href="https://github.com/castlecss/castlecss-buttons/archive/master.zip" class="btn" aria-label="Download castlecss/castlecss-buttons on GitHub"><i class="fa fa-cloud-download"></i> Download buttons</a>
218+
<h3>What's included?</h3>
219+
<p>
220+
<ul>
221+
<li><strong>Main:</strong> include all your other SCSS files</li>
222+
<li><strong>Reset:</strong> Set browser defaults to zero/none so nothing weird happends in different browsers</li>
223+
<li><strong><a href="variables.html">Variables</a>:</strong> Variables for the grid, fonts, utility, etc</li>
224+
<li><strong>defaults:</strong> Set default web settings</li>
225+
<li><strong><a href="mixins.html">Mixins</a>:</strong> Small but handy collection of mixins to use</li>
226+
<li><strong><a href="utility.html">Utility</a>:</strong> Genereral utility classes</li>
227+
<li><strong><a href="utility_spacers.html">Utility spacers</a>:</strong> Margin and padding utility classes</li>
228+
<li><strong><a href="grid.html">Grid</a>:</strong> Flexbox scss grid with floating fallback</li>
229+
<li><strong>Static files:</strong> Classes that are static throughout the site</li>
230+
</ul>
231+
</p>
234232
</div>
235-
</p>
236-
<h3>Installation</h3>
233+
</div>
234+
<div id="buttons" class="b0_12 b4_12">
235+
<div class="block block-invert p-3x pt-2x">
236+
<h2>Buttons</h2>
237+
<p>
238+
<div>
239+
<a href="https://github.com/castlecss/castlecss-buttons" class="btn-theme02" aria-label="Watch castlecss/castlecss-buttons on GitHub" target="_blank"><i class="fa fa-github"></i> Watch on github</a>&nbsp;<a href="https://github.com/castlecss/castlecss-buttons/archive/master.zip" class="btn" aria-label="Download castlecss/castlecss-buttons on GitHub"><i class="fa fa-cloud-download"></i> Download buttons</a>
240+
</div>
241+
</p>
242+
<h3>Installation</h3>
237243

238-
<p>
239-
<code>npm install castlecss-buttons</code>
240-
</p>
241-
<h3>Updating</h3>
242-
<p>
243-
<code>npm update castlecss-buttons</code><br />
244-
</p>
245-
<h3>What's included?</h3>
246-
<p>
247-
<ul>
248-
<li><strong>Buttons.scss</strong> Basic buttons for your site</li>
249-
</ul>
250-
</p>
251-
</div>
252-
</div>
253-
<div id="buttons" class="b0_12">
254-
<div class="block block-invert p-3x pt-2x">
255-
<h2>Notifications only</h2>
256-
<p>
257-
<div>
258-
<a href="https://github.com/castlecss/castlecss-notifications" class="btn-theme02" aria-label="Watch castlecss/castlecss-notifications on GitHub" target="_blank"><i class="fa fa-github"></i> Watch on github</a>&nbsp;<a href="https://github.com/castlecss/castlecss-notifications/archive/master.zip" class="btn" aria-label="Download castlecss/castlecss-notifications on GitHub"><i class="fa fa-cloud-download"></i> Download notifications</a>
244+
<p>
245+
Via npm: <code>npm install castlecss-buttons -S</code>
246+
</p>
247+
<h3>Updating</h3>
248+
<p>
249+
<code>npm update castlecss-buttons</code><br />
250+
</p>
251+
<h3>What's included?</h3>
252+
<p>
253+
<ul>
254+
<li><strong>Buttons</strong> Basic buttons for your site</li>
255+
</ul>
256+
</p>
257+
</div>
258+
</div>
259+
<div id="notifications" class="b0_12 b4_12">
260+
<div class="block block-invert p-3x pt-2x">
261+
<h2>Notifications</h2>
262+
<p>
263+
<div>
264+
<a href="https://github.com/castlecss/castlecss-notifications" class="btn-theme02" aria-label="Watch castlecss/castlecss-notifications on GitHub" target="_blank"><i class="fa fa-github"></i> Watch on github</a>&nbsp;<a href="https://github.com/castlecss/castlecss-notifications/archive/master.zip" class="btn" aria-label="Download castlecss/castlecss-notifications on GitHub"><i class="fa fa-cloud-download"></i> Download notifications</a>
265+
</div>
266+
</p>
267+
<h3>Installation</h3>
268+
<p>
269+
Via npm: <code>npm install castlecss-notifications -S</code>
270+
</p>
271+
<h3>Updating</h3>
272+
<p>
273+
<code>npm update castlecss-notifications</code><br />
274+
</p>
275+
<h3>What's included?</h3>
276+
<p>
277+
<ul>
278+
<li><strong>Notifications</strong> Notifications and alerts</li>
279+
</ul>
280+
</p>
281+
</div>
282+
</div>
283+
<div id="icons" class="b0_12 b4_12">
284+
<div class="block block-invert p-3x pt-2x">
285+
<h2>Icons</h2>
286+
<p>
287+
<div>
288+
<a href="https://github.com/castlecss/castlecss-icons" class="btn-theme02" aria-label="Watch castlecss/castlecss-icons on GitHub" target="_blank"><i class="fa fa-github"></i> Watch on github</a>&nbsp;<a href="https://github.com/castlecss/castlecss-icons/archive/master.zip" class="btn" aria-label="Download castlecss/castlecss-icons on GitHub"><i class="fa fa-cloud-download"></i> Download icons</a>
289+
</div>
290+
</p>
291+
<h3>Installation</h3>
292+
<p>
293+
Via npm: <code>npm install castlecss-icons -S</code>
294+
</p>
295+
<h3>Updating</h3>
296+
<p>
297+
<code>npm update castlecss-icons</code><br />
298+
</p>
299+
<h3>What's included?</h3>
300+
<p>
301+
<ul>
302+
<li><strong>675 Font Awesome Icons</strong> Hosted via Cloudflare</li>
303+
</ul>
304+
</p>
259305
</div>
260-
</p>
261-
<h3>Installation</h3>
262-
<p>
263-
<code>npm install castlecss-notifications</code>
264-
</p>
265-
<h3>Updating</h3>
266-
<p>
267-
<code>npm update castlecss-notifications</code><br />
268-
</p>
269-
<h3>What's included?</h3>
270-
<p>
271-
<ul>
272-
<li><strong>notifications.scss</strong> Notifications and alerts</li>
273-
</ul>
274-
</p>
306+
</div>
275307
</div>
276308
</div>
277309
</div>
278310
</div>
279-
</div>
280-
<!-- End main -->
311+
<!-- End main -->
281312

282-
<!-- Scripts for documentation -->
313+
<!-- Scripts for documentation -->
283314
<footer id="footer">
284315

285316
</footer>

‎views/icons.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ <h1>Icons</h1>
1313
<p>Below are a few examples. Please look at the <a href="http://fontawesome.io/icons/" target="_blank">Font Awesome icons examples</a> to look at the codes for every icon you need.</p>
1414
</div>
1515
<div class="mb-3x">
16-
<h2 class="ta-center ta-left-b3">Example social icons</h2>
16+
<h2 class="ta-center ta-left-b3">Example icons</h2>
1717
<div class="g gutter-small ta-center">
1818
<div class="b0_04 b2_03 b3_04 b5_03"><div class="icon"><i class="fa fa-close" aria-hidden="true"></i></div></div>
1919
<div class="b0_04 b2_03 b3_04 b5_03"><div class="icon"><i class="fa fa-calendar" aria-hidden="true"></i></div></div>

0 commit comments

Comments
 (0)