Skip to content

Commit 7cb315c

Browse files
gerwinbeumergerwinbeumer
committed
Icons added into docs. Initial version
1 parent 8790a8e commit 7cb315c

File tree

4 files changed

+260
-1
lines changed

4 files changed

+260
-1
lines changed

‎scss/layout/icons_layout.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
.icon {
2+
display: inline-block;
3+
margin-bottom: $margin-default;
4+
width: 7.5rem; height: 7.5rem;
5+
font-size: 2.4rem;
6+
line-height: 7.5rem;
7+
background: $color03;
8+
}
9+
10+
.icon-social {
11+
display: inline-block;
12+
margin-bottom: $margin-default;
13+
width: 5.5rem; height: 5.5rem;
14+
border-radius: 50%; border: 1px solid $theme02;
15+
font-size: 2.4rem; line-height: 4.5rem;
16+
color: $theme02;
17+
background: $color01;
18+
transition: all .2s ease-out;
19+
20+
> * {
21+
vertical-align: middle;
22+
}
23+
24+
&:hover {
25+
border: 1px solid $theme01;
26+
color: $theme01;
27+
}
28+
}

‎scss/main.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,24 @@
77
@import "node_modules/castlecss-core/sass/main";
88
@import "node_modules/castlecss-buttons/sass/main";
99
@import "node_modules/castlecss-notifications/sass/main";
10+
@import "node_modules/castlecss-icons/sass/main";
1011

1112
/* Your own variables */
1213
@import "base/defaults";
1314

1415
/* Docs styling */
15-
@import "plugins/font-awesome";
16+
//@import "plugins/font-awesome";
1617

1718
@import "layout/docs_layout";
1819
@import "layout/docs_code";
1920
@import "layout/docs_menu";
2021
@import "layout/docs_mainvisual";
2122

23+
/* Icons styling */
24+
@import "layout/icons_layout";
25+
2226
/* Include your own files below this line
2327
--------------------------------------
2428
*/
2529
@import "base/fonts";
30+

‎views/icons.html‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Icons - CastleCSS</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />
7+
8+
<link rel="stylesheet" href="css/styles.min.css" />
9+
10+
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
11+
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
13+
14+
</head>
15+
16+
<body>
17+
{% include "inc/analytics.html" %}
18+
<div id="wrapper" class="wrapper">
19+
20+
<div class="g full-height">
21+
22+
<!-- Side -->
23+
<div class="b0_12 b4_08 b5_06 b6_04">
24+
{% include "inc/menu.html" %}
25+
</div>
26+
<!-- End side -->
27+
28+
<!-- Main -->
29+
<div class="b0_12 b4_14 b4_push_01">
30+
31+
<div class="p-3x">
32+
33+
<div class="block">
34+
<h1>Icons</h1>
35+
<p class="intro">Get awesome icons in your website</p>
36+
<p class="alert">
37+
Note: You need castlecss-icons or the full package of CastleCSS for this.
38+
</p>
39+
<p>Feel free to use these icons to get you started. These icons are powerd by <a href="http://fontawesome.io/" target="_blank"><i class="fa fa-font-awesome" aria-hidden="true"></i> Font Awesome</a> version (4.7.0). Use the <a href="http://fontawesome.io/icons/" target="_blank">Font Awesome page</a> to get almost every icon you need.</p>
40+
</div>
41+
<h2>Icons</h2>
42+
<div class="g gutter-small ta-center">
43+
<div class="b0_01"><div class="icon"><i class="fa fa-address-book" aria-hidden="true"></i></div></div>
44+
<div class="b0_01"><div class="icon"><i class="fa fa-address-book-o" aria-hidden="true"></i></div></div>
45+
<div class="b0_01"><div class="icon"><i class="fa fa-address-card" aria-hidden="true"></i></div></div>
46+
<div class="b0_01"><div class="icon"><i class="fa fa-address-card-o" aria-hidden="true"></i></div></div>
47+
<div class="b0_01"><div class="icon"><i class="fa fa-bandcamp" aria-hidden="true"></i></div></div>
48+
<div class="b0_01"><div class="icon"><i class="fa fa-bath" aria-hidden="true"></i></div></div>
49+
<div class="b0_01"><div class="icon"><i class="fa fa-bathtub" aria-hidden="true"></i></div></div>
50+
<div class="b0_01"><div class="icon"><i class="fa fa-drivers-license" aria-hidden="true"></i></div></div>
51+
<div class="b0_01"><div class="icon"><i class="fa fa-drivers-license-o" aria-hidden="true"></i></div></div>
52+
<div class="b0_01"><div class="icon"><i class="fa fa-eercast" aria-hidden="true"></i></div></div>
53+
<div class="b0_01"><div class="icon"><i class="fa fa-envelope-open" aria-hidden="true"></i></div></div>
54+
<div class="b0_01"><div class="icon"><i class="fa fa-envelope-open-o" aria-hidden="true"></i></div></div>
55+
<div class="b0_01"><div class="icon"><i class="fa fa-etsy" aria-hidden="true"></i></div></div>
56+
<div class="b0_01"><div class="icon"><i class="fa fa-free-code-camp" aria-hidden="true"></i></div></div>
57+
<div class="b0_01"><div class="icon"><i class="fa fa-grav" aria-hidden="true"></i></div></div>
58+
<div class="b0_01"><div class="icon"><i class="fa fa-handshake-o" aria-hidden="true"></i></div></div>
59+
<div class="b0_01"><div class="icon"><i class="fa fa-id-badge" aria-hidden="true"></i></div></div>
60+
<div class="b0_01"><div class="icon"><i class="fa fa-id-card" aria-hidden="true"></i></div></div>
61+
<div class="b0_01"><div class="icon"><i class="fa fa-id-card-o" aria-hidden="true"></i></div></div>
62+
<div class="b0_01"><div class="icon"><i class="fa fa-imdb" aria-hidden="true"></i></div></div>
63+
<div class="b0_01"><div class="icon"><i class="fa fa-linode" aria-hidden="true"></i></div></div>
64+
<div class="b0_01"><div class="icon"><i class="fa fa-meetup" aria-hidden="true"></i></div></div>
65+
<div class="b0_01"><div class="icon"><i class="fa fa-microchip" aria-hidden="true"></i></div></div>
66+
<div class="b0_01"><div class="icon"><i class="fa fa-podcast" aria-hidden="true"></i></div></div>
67+
<div class="b0_01"><div class="icon"><i class="fa fa-quora" aria-hidden="true"></i></div></div>
68+
<div class="b0_01"><div class="icon"><i class="fa fa-ravelry" aria-hidden="true"></i></div></div>
69+
<div class="b0_01"><div class="icon"><i class="fa fa-s15" aria-hidden="true"></i></div></div>
70+
<div class="b0_01"><div class="icon"><i class="fa fa-shower" aria-hidden="true"></i></div></div>
71+
<div class="b0_01"><div class="icon"><i class="fa fa-snowflake-o" aria-hidden="true"></i></div></div>
72+
<div class="b0_01"><div class="icon"><i class="fa fa-superpowers" aria-hidden="true"></i></div></div>
73+
<div class="b0_01"><div class="icon"><i class="fa fa-telegram" aria-hidden="true"></i></div></div>
74+
<div class="b0_01"><div class="icon"><i class="fa fa-thermometer" aria-hidden="true"></i></div></div>
75+
<div class="b0_01"><div class="icon"><i class="fa fa-thermometer-0" aria-hidden="true"></i></div></div>
76+
<div class="b0_01"><div class="icon"><i class="fa fa-thermometer-1" aria-hidden="true"></i></div></div>
77+
<div class="b0_01"><div class="icon"><i class="fa fa-thermometer-2" aria-hidden="true"></i></div></div>
78+
<div class="b0_01"><div class="icon"><i class="fa fa-thermometer-3" aria-hidden="true"></i></div></div>
79+
<div class="b0_01"><div class="icon"><i class="fa fa-thermometer-4" aria-hidden="true"></i></div></div>
80+
<div class="b0_01"><div class="icon"><i class="fa fa-thermometer-empty" aria-hidden="true"></i></div></div>
81+
<div class="b0_01"><div class="icon"><i class="fa fa-thermometer-full" aria-hidden="true"></i></div></div>
82+
<div class="b0_01"><div class="icon"><i class="fa fa-thermometer-half" aria-hidden="true"></i></div></div>
83+
<div class="b0_01"><div class="icon"><i class="fa fa-thermometer-quarter" aria-hidden="true"></i></div></div>
84+
<div class="b0_01"><div class="icon"><i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i></div></div>
85+
<div class="b0_01"><div class="icon"><i class="fa fa-times-rectangle" aria-hidden="true"></i></div></div>
86+
<div class="b0_01"><div class="icon"><i class="fa fa-times-rectangle-o" aria-hidden="true"></i></div></div>
87+
<div class="b0_01"><div class="icon"><i class="fa fa-user-circle" aria-hidden="true"></i></div></div>
88+
<div class="b0_01"><div class="icon"><i class="fa fa-user-circle-o" aria-hidden="true"></i></div></div>
89+
<div class="b0_01"><div class="icon"><i class="fa fa-user-o" aria-hidden="true"></i></div></div>
90+
<div class="b0_01"><div class="icon"><i class="fa fa-vcard" aria-hidden="true"></i></div></div>
91+
<div class="b0_01"><div class="icon"><i class="fa fa-vcard-o" aria-hidden="true"></i></div></div>
92+
<div class="b0_01"><div class="icon"><i class="fa fa-window-close" aria-hidden="true"></i></div></div>
93+
<div class="b0_01"><div class="icon"><i class="fa fa-window-close-o" aria-hidden="true"></i></div></div>
94+
<div class="b0_01"><div class="icon"><i class="fa fa-window-maximize" aria-hidden="true"></i></div></div>
95+
<div class="b0_01"><div class="icon"><i class="fa fa-window-minimize" aria-hidden="true"></i></div></div>
96+
<div class="b0_01"><div class="icon"><i class="fa fa-window-restore" aria-hidden="true"></i></div></div>
97+
<div class="b0_01"><div class="icon"><i class="fa fa-wpexplorer" aria-hidden="true"></i></div></div>
98+
<div class="b0_01"><div class="icon"><i class="fa fa-adjust" aria-hidden="true"></i></div></div>
99+
<div class="b0_01"><div class="icon"><i class="fa fa-arrows" aria-hidden="true"></i></div></div>
100+
<div class="b0_01"><div class="icon"><i class="fa fa-battery-2" aria-hidden="true"></i></div></div>
101+
<div class="b0_01"><div class="icon"><i class="fa fa-bus" aria-hidden="true"></i></div></div>
102+
<div class="b0_01"><div class="icon"><i class="fa fa-cloud" aria-hidden="true"></i></div></div>
103+
</div>
104+
<div class="block p pt-2x" style="background: #eee;">
105+
106+
<pre class="brush: xml;">
107+
<div class="icon"><i class="fa fa-address-book" aria-hidden="true"></i></div>
108+
<div class="icon"><i class="fa fa-address-book-o" aria-hidden="true"></i></div>
109+
<div class="icon"><i class="fa fa-address-card" aria-hidden="true"></i></div>
110+
<div class="icon"><i class="fa fa-address-card-o" aria-hidden="true"></i></div>
111+
<div class="icon"><i class="fa fa-bandcamp" aria-hidden="true"></i></div>
112+
<div class="icon"><i class="fa fa-bath" aria-hidden="true"></i></div>
113+
<div class="icon"><i class="fa fa-bathtub" aria-hidden="true"></i></div>
114+
<div class="icon"><i class="fa fa-drivers-license" aria-hidden="true"></i></div>
115+
<div class="icon"><i class="fa fa-drivers-license-o" aria-hidden="true"></i></div>
116+
<div class="icon"><i class="fa fa-eercast" aria-hidden="true"></i></div>
117+
<div class="icon"><i class="fa fa-envelope-open" aria-hidden="true"></i></div>
118+
<div class="icon"><i class="fa fa-envelope-open-o" aria-hidden="true"></i></div>
119+
<div class="icon"><i class="fa fa-etsy" aria-hidden="true"></i></div>
120+
<div class="icon"><i class="fa fa-free-code-camp" aria-hidden="true"></i></div>
121+
<div class="icon"><i class="fa fa-grav" aria-hidden="true"></i></div>
122+
<div class="icon"><i class="fa fa-handshake-o" aria-hidden="true"></i></div>
123+
<div class="icon"><i class="fa fa-id-badge" aria-hidden="true"></i></div>
124+
<div class="icon"><i class="fa fa-id-card" aria-hidden="true"></i></div>
125+
<div class="icon"><i class="fa fa-id-card-o" aria-hidden="true"></i></div>
126+
<div class="icon"><i class="fa fa-imdb" aria-hidden="true"></i></div>
127+
<div class="icon"><i class="fa fa-linode" aria-hidden="true"></i></div>
128+
<div class="icon"><i class="fa fa-meetup" aria-hidden="true"></i></div>
129+
<div class="icon"><i class="fa fa-microchip" aria-hidden="true"></i></div>
130+
<div class="icon"><i class="fa fa-podcast" aria-hidden="true"></i></div>
131+
<div class="icon"><i class="fa fa-quora" aria-hidden="true"></i></div>
132+
<div class="icon"><i class="fa fa-ravelry" aria-hidden="true"></i></div>
133+
<div class="icon"><i class="fa fa-s15" aria-hidden="true"></i></div>
134+
<div class="icon"><i class="fa fa-shower" aria-hidden="true"></i></div>
135+
<div class="icon"><i class="fa fa-snowflake-o" aria-hidden="true"></i></div>
136+
<div class="icon"><i class="fa fa-superpowers" aria-hidden="true"></i></div>
137+
<div class="icon"><i class="fa fa-telegram" aria-hidden="true"></i></div>
138+
<div class="icon"><i class="fa fa-thermometer" aria-hidden="true"></i></div>
139+
<div class="icon"><i class="fa fa-thermometer-0" aria-hidden="true"></i></div>
140+
<div class="icon"><i class="fa fa-thermometer-1" aria-hidden="true"></i></div>
141+
<div class="icon"><i class="fa fa-thermometer-2" aria-hidden="true"></i></div>
142+
<div class="icon"><i class="fa fa-thermometer-3" aria-hidden="true"></i></div>
143+
<div class="icon"><i class="fa fa-thermometer-4" aria-hidden="true"></i></div>
144+
<div class="icon"><i class="fa fa-thermometer-empty" aria-hidden="true"></i></div>
145+
<div class="icon"><i class="fa fa-thermometer-full" aria-hidden="true"></i></div>
146+
<div class="icon"><i class="fa fa-thermometer-half" aria-hidden="true"></i></div>
147+
<div class="icon"><i class="fa fa-thermometer-quarter" aria-hidden="true"></i></div>
148+
<div class="icon"><i class="fa fa-thermometer-three-quarters" aria-hidden="true"></i></div>
149+
<div class="icon"><i class="fa fa-times-rectangle" aria-hidden="true"></i></div>
150+
<div class="icon"><i class="fa fa-times-rectangle-o" aria-hidden="true"></i></div>
151+
<div class="icon"><i class="fa fa-user-circle" aria-hidden="true"></i></div>
152+
<div class="icon"><i class="fa fa-user-circle-o" aria-hidden="true"></i></div>
153+
<div class="icon"><i class="fa fa-user-o" aria-hidden="true"></i></div>
154+
<div class="icon"><i class="fa fa-vcard" aria-hidden="true"></i></div>
155+
<div class="icon"><i class="fa fa-vcard-o" aria-hidden="true"></i></div>
156+
<div class="icon"><i class="fa fa-window-close" aria-hidden="true"></i></div>
157+
<div class="icon"><i class="fa fa-window-close-o" aria-hidden="true"></i></div>
158+
<div class="icon"><i class="fa fa-window-maximize" aria-hidden="true"></i></div>
159+
<div class="icon"><i class="fa fa-window-minimize" aria-hidden="true"></i></div>
160+
<div class="icon"><i class="fa fa-window-restore" aria-hidden="true"></i></div>
161+
<div class="icon"><i class="fa fa-wpexplorer" aria-hidden="true"></i></div>
162+
<div class="icon"><i class="fa fa-adjust" aria-hidden="true"></i></div>
163+
<div class="icon"><i class="fa fa-arrows" aria-hidden="true"></i></div>
164+
<div class="icon"><i class="fa fa-battery-2" aria-hidden="true"></i></div>
165+
<div class="icon"><i class="fa fa-bus" aria-hidden="true"></i></div>
166+
<div class="icon"><i class="fa fa-cloud" aria-hidden="true"></i></div></pre>
167+
</div>
168+
169+
<h2>Social icons</h2>
170+
<div class="block p pt-2x" style="background: #eee;">
171+
<div class="g ta-center">
172+
<div class="b0_02"><a href="#" class="icon-social"><i class="fa fa-facebook"></i></a></div>
173+
<div class="b0_02"><a href="#" class="icon-social"><i class="fa fa-twitter"></i></a></div>
174+
<div class="b0_02"><a href="#" class="icon-social"><i class="fa fa-flickr"></i></a></div>
175+
<div class="b0_02"><a href="#" class="icon-social"><i class="fa fa-google-plus"></i></a></div>
176+
<div class="b0_02"><a href="#" class="icon-social"><i class="fa fa-snapchat"></i></a></div>
177+
<div class="b0_02"><a href="#" class="icon-social"><i class="fa fa-tumblr"></i></a></div>
178+
<div class="b0_02"><a href="#" class="icon-social"><i class="fa fa-youtube"></i></a></div>
179+
<div class="b0_02"><a href="#" class="icon-social"><i class="fa fa-vimeo"></i></a></div>
180+
<div class="b0_02"><a href="#" class="icon-social"><i class="fa fa-slack"></i></a></div>
181+
<div class="b0_02"><a href="#" class="icon-social"><i class="fa fa-pinterest"></i></a></div>
182+
<div class="b0_02"><a href="#" class="icon-social"><i class="fa fa-whatsapp"></i></a></div>
183+
<div class="b0_02"><a href="#" class="icon-social"><i class="fa fa-pinterest"></i></a></div>
184+
</div>
185+
<pre class="brush: xml;">
186+
<a href="#" class="icon-social"><i class="fa fa-facebook"></i></a>
187+
<a href="#" class="icon-social"><i class="fa fa-twitter"></i></a>
188+
<a href="#" class="icon-social"><i class="fa fa-flickr"></i></a>
189+
<a href="#" class="icon-social"><i class="fa fa-google-plus"></i></a>
190+
<a href="#" class="icon-social"><i class="fa fa-snapchat"></i></a>
191+
<a href="#" class="icon-social"><i class="fa fa-tumblr"></i></a>
192+
<a href="#" class="icon-social"><i class="fa fa-youtube"></i></a>
193+
<a href="#" class="icon-social"><i class="fa fa-vimeo"></i></a>
194+
<a href="#" class="icon-social"><i class="fa fa-slack"></i></a>
195+
<a href="#" class="icon-social"><i class="fa fa-pinterest"></i></a>
196+
<a href="#" class="icon-social"><i class="fa fa-whatsapp"></i></a>
197+
<a href="#" class="icon-social"><i class="fa fa-pinterest"></i></a></pre>
198+
</div>
199+
200+
<h2>Buttons with icon</h2>
201+
<div class="block p pt-2x" style="background: #eee;">
202+
<div class="g mb-2x">
203+
<div class="b0_02"><a href="#" class="btn btn-full"><i class="fa fa-angle-right"></i> Read more</a></div>
204+
<div class="b0_02"><a href="#" class="btn-theme01 btn-full"><i class="fa fa-edit"></i> Edit</a></div>
205+
<div class="b0_02"><a href="#" class="btn-theme02 btn-full"><i class="fa fa-cloud"></i> Cloud</a></div>
206+
<div class="b0_02"><a href="#" class="btn-theme03 btn-full"><i class="fa fa-globe"></i> Globe</a></div>
207+
<div class="b0_02"><a href="#" class="btn-theme04 btn-full"><i class="fa fa-spinner fa-spin"></i> Spin</a></div>
208+
<div class="b0_02"><a href="#" class="btn-theme05 btn-full"><i class="fa fa-list"></i> List</a></div>
209+
</div>
210+
<pre class="brush: xml;">
211+
<a href="#" class="btn btn-full"><i class="fa fa-angle-right"></i></a>
212+
<a href="#" class="btn-theme01 btn-full"><i class="fa fa-edit"></i></a>
213+
<a href="#" class="btn-theme02 btn-full"><i class="fa fa-cloud"></i> </a>
214+
<a href="#" class="btn-theme03 btn-full"><i class="fa fa-globe"></i> </a>
215+
<a href="#" class="btn-theme04 btn-full"><i class="fa fa-spinner fa-spin"></i></a>
216+
<a href="#" class="btn-theme05 btn-full"><i class="fa fa-list"></i></a></pre>
217+
</div>
218+
219+
220+
<!-- Scripts for footer -->
221+
{% include "inc/footer.html" %}
222+
223+
</body>
224+
225+
</html>

‎views/inc/menu.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
</li>
3131
<li><a href="utility.html">Utility classes</a></li>
3232
<li><a href="utility_spacers.html">Utility spacers</a></li>
33+
<li><a href="icons.html">Icons</a></li>
3334
<li><a href="buttons.html">Buttons</a></li>
3435
<li><a href="notifications.html">Notifications / alerts</a></li>
3536
<li><a href="mixins.html">Mixins</a></li>

0 commit comments

Comments
 (0)