Skip to content

Commit aff043a

Browse files
dariusrosendahldariusrosendahl
authored
Merge pull request #9 from CastleCSS/develop
Develop
2 parents 4e7a7ce + 9288090 commit aff043a

20 files changed

+6637
-201
lines changed

‎Gruntfile.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@ module.exports = function(grunt) {
2828
options: {
2929
// Rewrite and save sourcemap as seperate file
3030
map: {
31-
inline: false,
32-
annotation: 'dist/css/'
31+
inline: false
3332
},
3433
processors: [
3534
// Add fallbacks for rem units
@@ -45,6 +44,21 @@ module.exports = function(grunt) {
4544
]
4645
}
4746
},
47+
browserSync: {
48+
dev: {
49+
bsFiles: {
50+
src: [
51+
'./**/*.html',
52+
'./dist/**/*.css',
53+
]
54+
},
55+
options: {
56+
watchTask: true,
57+
server: './'
58+
}
59+
}
60+
61+
},
4862

4963
// Watches for changes in your .scss-files and triggers the tasks sass and postcss.
5064
watch: {
@@ -63,6 +77,7 @@ module.exports = function(grunt) {
6377
[
6478
'sass',
6579
'postcss',
80+
'browserSync',
6681
'watch'
6782
]
6883
);

‎README.md‎

Lines changed: 16 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,24 @@ Use this Boilerplate to get started with your project right away!
99
- Configuration for Grunt, to easily compile and minify your Sass files
1010
- [castlecss-core](https://github.com/CastleCSS/castlecss-core)
1111
- [castlecss-buttons](https://github.com/CastleCSS/castlecss-buttons)
12+
- [castlecss-forms](https://github.com/CastleCSS/castlecss-forms)
1213
- [castlecss-notifications](https://github.com/CastleCSS/castlecss-notifications)
14+
- [castlecss-breadcrumbs](https://github.com/CastleCSS/castlecss-breadcrumbs)
15+
- [castlecss-icons](https://github.com/CastleCSS/castlecss-icons)
1316

14-
## Get started
15-
1. Clone ```git clone https://github.com/CastleCSS/castlecss-boilerplate.git``` or [download](https://github.com/CastleCSS/castlecss-boilerplate/archive/master.zip) CastleCSS Boilerplate.
16-
2. Set up your project directory and a basic site structure.
17-
3. Make sure you have the latest version of [npm](https://www.npmjs.com/) installed. From your directory, open a commandline and download the required packages by typing ```npm install```.
18-
4. Run Grunt from your directory by typing ```Grunt``` in the commandline. If you haven't used Grunt before, be sure to check out the [Getting Started guide](http://gruntjs.com/getting-started).
19-
5. Add some content, do some styling and include functionality.
20-
6. Run your site locally and see how it all works out!
17+
## How to install
18+
- Download or clone this package
19+
- Install the project: ```npm install```
20+
21+
## Build and run automatically
22+
- Start the project with: ```npm run start```
23+
24+
This will automatically start a browserSync server.<br />
25+
The project will watch for changes in your scss and html files in your root and scss folder and automatically reload when you change something
26+
27+
## Build and run manually
28+
- Build the project: ```npm run create_all```
29+
- Only build CSS: ```npm run create_css```
2130

2231
## Basic structure
2332
The basis structure for your website should look similar like this:

‎about.html‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<!-- Basic Page Needs -->
5+
<meta charset="utf-8">
6+
<title>About - CastleCSS Boilerplate</title>
7+
<meta name="description" content="">
8+
<meta name="author" content="">
9+
10+
<!-- Mobile Specific Metas -->
11+
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />
12+
13+
<!-- Fonts -->
14+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
15+
16+
<!-- CSS -->
17+
<link rel="stylesheet" href="dist/css/styles.min.css" />
18+
19+
<!-- Favicon -->
20+
<link rel="icon" type="image/png" href="img/favicon.png">
21+
22+
<!-- Scripts -->
23+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
24+
<script src="js/menu.js" type="text/javascript"></script>
25+
</head>
26+
<body>
27+
<nav class="navbar navbar-inverted">
28+
<div class="container">
29+
<a class="menu-btn" data-menu-toggle>
30+
<i class="fa fa-bars"></i>
31+
</a>
32+
<a href="index.html" class="logo">
33+
<img src="img/logo.svg" alt="Company Name Logo" />
34+
</a>
35+
<ul class="nav">
36+
<li><a href="index.html">Home</a></li>
37+
<li><a href="products.html">Products</a></li>
38+
<li><a href="about.html">About</a></li>
39+
<li><a href="contact.html">Contact</a></li>
40+
<li><a href="clean.html">Clean page</a></li>
41+
<li><a href="http://www.castlecss.com" target="blank">Documentation</a></li>
42+
</ul>
43+
</div>
44+
</nav>
45+
46+
<!-- Hero banner to display your message and/or call-to-action -->
47+
<section class="hero p-block ta-center">
48+
<div class="g jc-center">
49+
<div class="b0_12 b3_14">
50+
<div class="container">
51+
<h1>About us</h1>
52+
<p>Nulla viverra, neque a blandit fermentum, magna sem dictum lacus, fringilla dignissim orci risus nec leo. Sed imperdiet
53+
lacinia efficitur.</p>
54+
<a href="#" class="btn-theme03">Read more</a>
55+
</div>
56+
</div>
57+
</div>
58+
</section>
59+
60+
61+
<div class="container">
62+
63+
<nav class="breadcrumbs p pl-2x pr-2x pl-b3-0 pr-b3-0">
64+
<ol class="breadcrumbs-wrap">
65+
<li class="breadcrumb breadcrumb-home">
66+
<a href="/">
67+
<span>Boilerplate</span>
68+
</a>
69+
</li>
70+
<li class="breadcrumb breadcrumb-current">
71+
<a href="/category/sub-category/this-page/">About us</a>
72+
</li>
73+
</ol>
74+
</nav>
75+
</div>
76+
77+
78+
<section class="container">
79+
<div class="p-2x p-b3-0 pt-block pb-block">
80+
<div class="g">
81+
<div class="b0_12 b3_14">
82+
<div class="alert-positive mb"><i class="fa fa-check"></i>&nbsp;&nbsp;Positive alert</div>
83+
<h3>Lorem ipsum</h2>
84+
<p>
85+
Ut quis <span class="notify-positive">Positive notification </span> aliquip eiusmod aliqua excepteur sunt id consectetur eiusmod magna in magna anim. Eu irure do laboris non
86+
commodo ad enim aute commodo eiusmod laboris excepteur officia. Occaecat velit do dolore ad. Dolor est labore aliquip
87+
Lorem eiusmod quis ad tempor cillum enim exercitation adipisicing nisi. Sunt Lorem cupidatat ad laboris consequat tempor.
88+
Irure sunt amet ea excepteur. Laboris voluptate sit nulla mollit sint et Lorem aliquip.
89+
</p>
90+
<div class="g mb-3x">
91+
<div class="b0_12 b3_12">
92+
<h4>Dolor sit amet</h3>
93+
<p>
94+
Non in consectetur irure ea aliquip dolor ipsum et ex. Aliqua aliqua nulla quis magna. Consectetur ea aliquip labore quis. Adipisicing in in officia pariatur ut id. Incididunt enim non velit cillum labore nisi do qui do culpa sit ipsum deserunt
95+
enim.
96+
Incididunt enim non velit cillum labore nisi do qui do culpa sit ipsum deserunt enim. Anim minim laborum eiusmod aliqua
97+
veniam veniam proident mollit excepteur excepteur amet. Anim consequat reprehenderit proident Lorem non pariatur sunt Lorem
98+
minim culpa incididunt fugiat id dolore.
99+
</p>
100+
</div>
101+
<div class="b0_12 b3_12">
102+
<h4>Incididunt non velit</h4>
103+
<p>
104+
Non mollit mollit anim nulla sint sunt nulla exercitation minim cillum velit. In officia in tempor qui laboris. Culpa non
105+
ullamco ipsum qui laborum veniam esse ut cillum amet irure nostrud non irure. Laborum sint ut ad nisi commodo laborum deserunt
106+
cupidatat. Adipisicing in in officia pariatur ut id. Incididunt enim non velit cillum labore nisi do qui do culpa sit ipsum deserunt enim. In officia in tempor qui laboris. Culpa non ullamco ipsum qui laborum veniam
107+
</p>
108+
</div>
109+
</div>
110+
</div>
111+
<div class="b0_12 b3_10">
112+
<img class="radius" src="http://via.placeholder.com/570x450">
113+
</div>
114+
</div>
115+
<div class="g jc-center">
116+
<div class="b0_12 b3_14">
117+
<h3>Lorem ipsum</h2>
118+
119+
<p>
120+
Ut quis aliquip aliquip eiusmod aliqua excepteur sunt id consectetur eiusmod magna in magna anim. Eu irure do laboris non
121+
commodo ad enim aute commodo eiusmod excepteur officia. Occaecat velit do dolore ad. Dolor est labore aliquip
122+
Lorem eiusmod quis ad tempor cillum enim exercitation adipisicing nisi. Sunt Lorem cupidatat ad laboris consequat tempor.
123+
Irure sunt amet ea excepteur. Laboris voluptate sit nulla mollit sint et Lorem aliquip.
124+
</p>
125+
<h4>Dolor sit amet</h3>
126+
<p>
127+
Non in consectetur irure ea aliquip dolor ipsum et ex. Aliqua aliqua nulla quis magna. Consectetur ea aliquip labore quis.
128+
Incididunt enim non velit cillum labore nisi do qui do culpa sit ipsum deserunt enim. Anim minim laborum eiusmod aliqua
129+
veniam veniam proident mollit excepteur excepteur amet. Anim consequat reprehenderit proident Lorem non pariatur sunt
130+
Lorem minim culpa incididunt fugiat id dolore.
131+
</p>
132+
<h4>Incididunt non velit</h4>
133+
<p>
134+
Non mollit mollit anim nulla sint sunt nulla exercitation minim cillum velit. In officia in tempor qui laboris. Culpa non
135+
ullamco ipsum qui laborum veniam esse ut cillum amet irure nostrud non irure. Laborum sint ut ad nisi commodo laborum
136+
deserunt cupidatat. Adipisicing in in officia pariatur ut id.
137+
</p>
138+
</div>
139+
</div>
140+
</div>
141+
</section>
142+
143+
<!-- Footer -->
144+
<footer>
145+
<div class="container">
146+
<div class="p pl-b3-0 pr-b3-0 pt-b3-2x pb-b3-2x">
147+
<div class="g">
148+
<div class="b0_12 b3_12">
149+
<div class="ta-center">
150+
<ul class="list-unstyled cf mb mb-b3-0">
151+
<li><a href="#1">Link1</a></li>
152+
<li><a href="#2">Link2</a></li>
153+
<li><a href="#3">Link3</a></li>
154+
<li><a href="#4">Link4</a></li>
155+
<li><a href="#5">Link5</a></li>
156+
</ul>
157+
</div>
158+
</div>
159+
<div class="b0_12 b3_12">
160+
<div class="ta-center ta-right-b3">
161+
&copy;&nbsp;2016 Your Company Name
162+
</div>
163+
</div>
164+
</div>
165+
</div>
166+
</div>
167+
</footer>
168+
</div>
169+
</body>
170+
</html>

‎clean.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />
1212

1313
<!-- Fonts -->
14-
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
14+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
1515

1616
<!-- CSS -->
1717
<link rel="stylesheet" href="dist/css/styles.min.css" />
@@ -27,7 +27,7 @@
2727
<div class="container">
2828
<div class="g">
2929
<div class="b0_12">
30-
<h1>Basic Page</h1>
30+
<h1>Clean Page</h1>
3131
<p>
3232
This clean.html page is a placeholder with the CSS, font and favicon. Let's add some content!
3333
</p>

0 commit comments

Comments
 (0)