Skip to content

Commit a8fd3e8

Browse files
author
Pascal Alferink
committed
breadcrumbs-documentation
1 parent 9b4b70b commit a8fd3e8

19 files changed

+408
-3
lines changed

‎dist/about.html

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@
8484

8585
</li>
8686

87+
<li><a href="/breadcrumbs.html" >Breadcrumbs</a>
88+
89+
</li>
90+
8791
<li><a href="/mixins.html" >Mixins</a>
8892

8993
</li>

‎dist/breadcrumbs.html

+249
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Breadcrumbs - CastleCSS</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />
7+
<link rel="stylesheet" href="css/styles.min.css" />
8+
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
10+
</head>
11+
12+
<body>
13+
14+
<!-- Google Tag Manager -->
15+
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-N85PTX"
16+
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
17+
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
18+
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
19+
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
20+
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
21+
})(window,document,'script','dataLayer','GTM-N85PTX');</script>
22+
23+
<div id="wrapper" class="wrapper ">
24+
25+
<div class="g full-height">
26+
27+
<!-- Side -->
28+
<div class="b0_12 b4_08 b5_06 b6_04">
29+
<!-- End Google Tag Manager -->
30+
<header id="header" class="nav-container">
31+
<div class="nav-label">menu</div>
32+
<a class="nav-logo p-b4-3x" href="index.html"><img src="img/logo-castlecss.png"></a>
33+
<div class="nav-wrap pl-3x pr-3x">
34+
35+
<ul class="doc-menu list-unstyled">
36+
37+
<li><a href="/about.html" >About CastleCSS</a>
38+
39+
</li>
40+
41+
<li><a href="/installation.html" >Installation</a>
42+
43+
</li>
44+
45+
<li><a href="/variables.html" >Variables</a>
46+
47+
</li>
48+
49+
<li><a href="/grid.html" >Breakpoints &amp; Grid</a>
50+
51+
<ul class="list-unstyled">
52+
53+
<li><a href="grid.html#basicexamples">The basics</a>
54+
55+
<li><a href="grid.html#breakpoints">Breakpoints</a>
56+
57+
<li><a href="grid.html#basicexamples">Basic grid examples</a>
58+
59+
<li><a href="grid.html#gutters">Gutters</a>
60+
61+
<li><a href="grid.html#directionalignment">Direction and alignment</a>
62+
63+
</ul>
64+
65+
</li>
66+
67+
<li><a href="/utility.html" >Utility classes</a>
68+
69+
</li>
70+
71+
<li><a href="/utility_spacers.html" >Utility spacers</a>
72+
73+
</li>
74+
75+
<li><a href="/icons.html" >Icons</a>
76+
77+
</li>
78+
79+
<li><a href="/buttons.html" >Buttons</a>
80+
81+
</li>
82+
83+
<li><a href="/notifications.html" >Notifications / alerts</a>
84+
85+
</li>
86+
87+
<li><a href="/breadcrumbs.html" class="active">Breadcrumbs</a>
88+
89+
</li>
90+
91+
<li><a href="/mixins.html" >Mixins</a>
92+
93+
</li>
94+
95+
</ul>
96+
</div>
97+
98+
99+
100+
</header>
101+
102+
</div>
103+
<!-- End side -->
104+
105+
106+
<!-- Main -->
107+
<div class="b0_12 b4_14 b4_push_01">
108+
<div class="p p-b3-3x">
109+
<div class="block">
110+
<h1>Breadcrumbs</h1>
111+
<p class="intro">Make sure your visitors never get lost</p>
112+
<p class="alert">
113+
Note: You need castlecss-breadcrumbs or the full package of CastleCSS for this.
114+
</p>
115+
<p>Feel free to use these breadcrumbs to get you started. Create your own breadcrumbs.scss to overwrite the standard breadcrumbs or edit your <a href="variables.html">variables document</a> for different colors/styles.</p>
116+
</div>
117+
118+
<div class="block p" style="background: #eee;">
119+
120+
<nav class="castlecss-breadcrumbs">
121+
<ol class="breadcrumbs-wrap" itemtype="http://schema.org/BreadcrumbList">
122+
<li class="breadcrumb breadcrumb-home" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
123+
<a href="/" itemprop="item"><span itemprop="name">Home</span></a>
124+
</li>
125+
<li class="breadcrumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
126+
<a href="/category/" itemprop="item"><span itemprop="name">Main category</span></a>
127+
</li>
128+
<li class="breadcrumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
129+
<a href="/category/sub-category" itemprop="item"><span itemprop="name">Sub category</span></a>
130+
</li>
131+
<li class="breadcrumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
132+
<a href="/category/sub-category/sub-category" itemprop="item"><span itemprop="name">Sub sub category</span></a>
133+
</li>
134+
<li class="breadcrumb breadcrumb-current" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
135+
<span itemprop="name">This page</span>
136+
</li>
137+
</ol>
138+
</nav>
139+
140+
</div>
141+
142+
<pre class="brush: xml;">
143+
<nav class="castlecss-breadcrumbs">
144+
<ol class="breadcrumbs-wrap" itemtype="http://schema.org/BreadcrumbList">
145+
<li class="breadcrumb breadcrumb-home" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
146+
<a href="/" itemprop="item"><span itemprop="name">Home</span></a>
147+
</li>
148+
<li class="breadcrumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
149+
<a href="/category/" itemprop="item"><span itemprop="name">Main category</span></a>
150+
</li>
151+
<li class="breadcrumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
152+
<a href="/category/sub-category" itemprop="item"><span itemprop="name">Sub category</span></a>
153+
</li>
154+
<li class="breadcrumb" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
155+
<a href="/category/sub-category/sub-category" itemprop="item"><span itemprop="name">Sub sub category</span></a>
156+
</li>
157+
<li class="breadcrumb breadcrumb-current" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
158+
<span itemprop="name">This page</span>
159+
</li>
160+
</ol>
161+
</nav></pre>
162+
163+
<div class="block">
164+
<h2>Options</h2>
165+
<h3>Changing the breadcrumb separator</h3>
166+
<p>
167+
The default separator between the breadcrumbs is the double arrow <code>&raquo;</code>. <br />
168+
If you want a different character as your separator for all crumbs, please overwrite the variable <code>$castlecss-breadcrumbs-separator</code>.
169+
</p>
170+
<p>
171+
If you want a different charactor for a specific separator, please add the attribute <code>data-castlecss-breadcrumbs-separator</code> and give it the vaule of your separator.
172+
</p>
173+
<p>
174+
<strong>Example:</strong> <code>data-castlecss-breadcrumbs-separator="/"</code> sets a / as separator
175+
</p>
176+
</div>
177+
178+
<div class="block p" style="background: #eee;">
179+
<nav class="castlecss-breadcrumbs">
180+
<ol class="breadcrumbs-wrap" itemtype="http://schema.org/BreadcrumbList">
181+
<li class="breadcrumb breadcrumb-home" data-castlecss-breadcrumbs-separator="/" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
182+
<a href="/" itemprop="item"><span itemprop="name">Home</span></a>
183+
</li>
184+
<li class="breadcrumb breadcrumb-current" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
185+
<span itemprop="name">This page</span>
186+
</li>
187+
</ol>
188+
</nav>
189+
190+
</div>
191+
<pre class="brush: xml;">
192+
<nav class="castlecss-breadcrumbs">
193+
<ol class="breadcrumbs-wrap" itemtype="http://schema.org/BreadcrumbList">
194+
<li class="breadcrumb breadcrumb-home" data-castlecss-breadcrumbs-separator="/" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
195+
<a href="/" itemprop="item"><span itemprop="name">Home</span></a>
196+
</li>
197+
<li class="breadcrumb breadcrumb-current" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
198+
<span itemprop="name">This page</span>
199+
</li>
200+
</ol>
201+
</nav></pre>
202+
</div>
203+
</div>
204+
<!-- End main -->
205+
206+
<!-- Scripts for documentation -->
207+
<footer id="footer">
208+
209+
</footer>
210+
<script>
211+
$(function () {
212+
navOpen();
213+
214+
window.onscroll = function(e) {
215+
offSetManager();
216+
}
217+
});
218+
219+
function offSetManager(){
220+
221+
var yOffset = 110;
222+
var currYOffSet = window.pageYOffset;
223+
var menuHeight = $('.doc-menu').height();
224+
var windowHeight = $(window).height();
225+
226+
if((yOffset < currYOffSet) && (menuHeight < windowHeight)) {
227+
$('.nav-wrap').addClass('fixed');
228+
} else if(yOffset > currYOffSet){
229+
$('.nav-wrap').removeClass('fixed');
230+
}
231+
}
232+
233+
function navOpen() {
234+
$('.nav-label, .open-documentation').on('click', function(e) {
235+
$('.nav-container').toggleClass('nav-container-active');
236+
e.preventDefault();
237+
});
238+
}
239+
240+
</script>
241+
242+
<script src="js/shCore.js"></script>
243+
<script src="js/shBrushXml.js"></script>
244+
<script src="js/shBrushSass.js"></script>
245+
<script src="js/shBrushJScript.js"></script>
246+
<script type="text/javascript">SyntaxHighlighter.all();</script>
247+
<script async defer src="https://buttons.github.io/buttons.js"></script>
248+
</body>
249+
</html>

‎dist/buttons.html

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@
8484

8585
</li>
8686

87+
<li><a href="/breadcrumbs.html" >Breadcrumbs</a>
88+
89+
</li>
90+
8791
<li><a href="/mixins.html" >Mixins</a>
8892

8993
</li>

‎dist/css/styles.min.css

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/styles.min.css.map

+3-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/grid.html

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@
8484

8585
</li>
8686

87+
<li><a href="/breadcrumbs.html" >Breadcrumbs</a>
88+
89+
</li>
90+
8791
<li><a href="/mixins.html" >Mixins</a>
8892

8993
</li>

‎dist/icons.html

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@
8484

8585
</li>
8686

87+
<li><a href="/breadcrumbs.html" >Breadcrumbs</a>
88+
89+
</li>
90+
8791
<li><a href="/mixins.html" >Mixins</a>
8892

8993
</li>

‎dist/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@
8484

8585
</li>
8686

87+
<li><a href="/breadcrumbs.html" >Breadcrumbs</a>
88+
89+
</li>
90+
8791
<li><a href="/mixins.html" >Mixins</a>
8892

8993
</li>

‎dist/installation.html

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@
8484

8585
</li>
8686

87+
<li><a href="/breadcrumbs.html" >Breadcrumbs</a>
88+
89+
</li>
90+
8791
<li><a href="/mixins.html" >Mixins</a>
8892

8993
</li>

‎dist/mixins.html

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@
8484

8585
</li>
8686

87+
<li><a href="/breadcrumbs.html" >Breadcrumbs</a>
88+
89+
</li>
90+
8791
<li><a href="/mixins.html" class="active">Mixins</a>
8892

8993
</li>

‎dist/notifications.html

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@
8484

8585
</li>
8686

87+
<li><a href="/breadcrumbs.html" >Breadcrumbs</a>
88+
89+
</li>
90+
8791
<li><a href="/mixins.html" >Mixins</a>
8892

8993
</li>

‎dist/utility.html

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@
8484

8585
</li>
8686

87+
<li><a href="/breadcrumbs.html" >Breadcrumbs</a>
88+
89+
</li>
90+
8791
<li><a href="/mixins.html" >Mixins</a>
8892

8993
</li>

‎dist/utility_spacers.html

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@
8484

8585
</li>
8686

87+
<li><a href="/breadcrumbs.html" >Breadcrumbs</a>
88+
89+
</li>
90+
8791
<li><a href="/mixins.html" >Mixins</a>
8892

8993
</li>

‎dist/variables.html

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@
8484

8585
</li>
8686

87+
<li><a href="/breadcrumbs.html" >Breadcrumbs</a>
88+
89+
</li>
90+
8791
<li><a href="/mixins.html" >Mixins</a>
8892

8993
</li>

‎dist/variables_1x.html

+4
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@
8484

8585
</li>
8686

87+
<li><a href="/breadcrumbs.html" >Breadcrumbs</a>
88+
89+
</li>
90+
8791
<li><a href="/mixins.html" >Mixins</a>
8892

8993
</li>

‎scss/main.scss

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import "node_modules/castlecss-buttons/sass/main";
99
@import "node_modules/castlecss-notifications/sass/main";
1010
@import "node_modules/castlecss-icons/sass/main";
11+
@import "node_modules/castlecss-breadcrumbs/sass/main";
1112

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

‎scss/variables.scss

+1
Original file line numberDiff line numberDiff line change
@@ -120,3 +120,4 @@ $font-size-default: 1.6rem;
120120
$line-height-default: 1.5;
121121

122122

123+
$castlecss-breadcrumbs-separator: '\00bb';

0 commit comments

Comments
 (0)