Skip to content

Commit

Permalink
Merge pull request #9 from CastleCSS/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@dariusrosendahl
dariusrosendahl committed Oct 12, 2017
2 parents 4e7a7ce + 9288090 commit aff043a
Show file tree
Hide file tree
Showing 20 changed files with 6,637 additions and 201 deletions.
19 changes: 17 additions & 2 deletions Gruntfile.js
View file
Expand Up @@ -28,8 +28,7 @@ module.exports = function(grunt) {
options: {
// Rewrite and save sourcemap as seperate file
map: {
inline: false,
annotation: 'dist/css/'
inline: false
},
processors: [
// Add fallbacks for rem units
Expand All @@ -45,6 +44,21 @@ module.exports = function(grunt) {
]
}
},
browserSync: {
dev: {
bsFiles: {
src: [
'./**/*.html',
'./dist/**/*.css',
]
},
options: {
watchTask: true,
server: './'
}
}

},

// Watches for changes in your .scss-files and triggers the tasks sass and postcss.
watch: {
Expand All @@ -63,6 +77,7 @@ module.exports = function(grunt) {
[
'sass',
'postcss',
'browserSync',
'watch'
]
);
Expand Down
23 changes: 16 additions & 7 deletions README.md
View file
Expand Up @@ -9,15 +9,24 @@ Use this Boilerplate to get started with your project right away!
- Configuration for Grunt, to easily compile and minify your Sass files
- [castlecss-core](https://github.com/CastleCSS/castlecss-core)
- [castlecss-buttons](https://github.com/CastleCSS/castlecss-buttons)
- [castlecss-forms](https://github.com/CastleCSS/castlecss-forms)
- [castlecss-notifications](https://github.com/CastleCSS/castlecss-notifications)
- [castlecss-breadcrumbs](https://github.com/CastleCSS/castlecss-breadcrumbs)
- [castlecss-icons](https://github.com/CastleCSS/castlecss-icons)

## Get started
1. Clone ```git clone https://github.com/CastleCSS/castlecss-boilerplate.git``` or [download](https://github.com/CastleCSS/castlecss-boilerplate/archive/master.zip) CastleCSS Boilerplate.
2. Set up your project directory and a basic site structure.
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```.
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).
5. Add some content, do some styling and include functionality.
6. Run your site locally and see how it all works out!
## How to install
- Download or clone this package
- Install the project: ```npm install```

## Build and run automatically
- Start the project with: ```npm run start```

This will automatically start a browserSync server.<br />
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

## Build and run manually
- Build the project: ```npm run create_all```
- Only build CSS: ```npm run create_css```

## Basic structure
The basis structure for your website should look similar like this:
Expand Down
170 changes: 170 additions & 0 deletions about.html
View file
@@ -0,0 +1,170 @@
<!DOCTYPE html>
<html>
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<title>About - CastleCSS Boilerplate</title>
<meta name="description" content="">
<meta name="author" content="">

<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />

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

<!-- CSS -->
<link rel="stylesheet" href="dist/css/styles.min.css" />

<!-- Favicon -->
<link rel="icon" type="image/png" href="img/favicon.png">

<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-inverted">
<div class="container">
<a class="menu-btn" data-menu-toggle>
<i class="fa fa-bars"></i>
</a>
<a href="index.html" class="logo">
<img src="img/logo.svg" alt="Company Name Logo" />
</a>
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="clean.html">Clean page</a></li>
<li><a href="http://www.castlecss.com" target="blank">Documentation</a></li>
</ul>
</div>
</nav>

<!-- Hero banner to display your message and/or call-to-action -->
<section class="hero p-block ta-center">
<div class="g jc-center">
<div class="b0_12 b3_14">
<div class="container">
<h1>About us</h1>
<p>Nulla viverra, neque a blandit fermentum, magna sem dictum lacus, fringilla dignissim orci risus nec leo. Sed imperdiet
lacinia efficitur.</p>
<a href="#" class="btn-theme03">Read more</a>
</div>
</div>
</div>
</section>


<div class="container">

<nav class="breadcrumbs p pl-2x pr-2x pl-b3-0 pr-b3-0">
<ol class="breadcrumbs-wrap">
<li class="breadcrumb breadcrumb-home">
<a href="/">
<span>Boilerplate</span>
</a>
</li>
<li class="breadcrumb breadcrumb-current">
<a href="/category/sub-category/this-page/">About us</a>
</li>
</ol>
</nav>
</div>


<section class="container">
<div class="p-2x p-b3-0 pt-block pb-block">
<div class="g">
<div class="b0_12 b3_14">
<div class="alert-positive mb"><i class="fa fa-check"></i>&nbsp;&nbsp;Positive alert</div>
<h3>Lorem ipsum</h2>
<p>
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
commodo ad enim aute commodo eiusmod laboris excepteur officia. Occaecat velit do dolore ad. Dolor est labore aliquip
Lorem eiusmod quis ad tempor cillum enim exercitation adipisicing nisi. Sunt Lorem cupidatat ad laboris consequat tempor.
Irure sunt amet ea excepteur. Laboris voluptate sit nulla mollit sint et Lorem aliquip.
</p>
<div class="g mb-3x">
<div class="b0_12 b3_12">
<h4>Dolor sit amet</h3>
<p>
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
enim.
Incididunt enim non velit cillum labore nisi do qui do culpa sit ipsum deserunt enim. Anim minim laborum eiusmod aliqua
veniam veniam proident mollit excepteur excepteur amet. Anim consequat reprehenderit proident Lorem non pariatur sunt Lorem
minim culpa incididunt fugiat id dolore.
</p>
</div>
<div class="b0_12 b3_12">
<h4>Incididunt non velit</h4>
<p>
Non mollit mollit anim nulla sint sunt nulla exercitation minim cillum velit. In officia in tempor qui laboris. Culpa non
ullamco ipsum qui laborum veniam esse ut cillum amet irure nostrud non irure. Laborum sint ut ad nisi commodo laborum deserunt
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
</p>
</div>
</div>
</div>
<div class="b0_12 b3_10">
<img class="radius" src="http://via.placeholder.com/570x450">
</div>
</div>
<div class="g jc-center">
<div class="b0_12 b3_14">
<h3>Lorem ipsum</h2>

<p>
Ut quis aliquip aliquip eiusmod aliqua excepteur sunt id consectetur eiusmod magna in magna anim. Eu irure do laboris non
commodo ad enim aute commodo eiusmod excepteur officia. Occaecat velit do dolore ad. Dolor est labore aliquip
Lorem eiusmod quis ad tempor cillum enim exercitation adipisicing nisi. Sunt Lorem cupidatat ad laboris consequat tempor.
Irure sunt amet ea excepteur. Laboris voluptate sit nulla mollit sint et Lorem aliquip.
</p>
<h4>Dolor sit amet</h3>
<p>
Non in consectetur irure ea aliquip dolor ipsum et ex. Aliqua aliqua nulla quis magna. Consectetur ea aliquip labore quis.
Incididunt enim non velit cillum labore nisi do qui do culpa sit ipsum deserunt enim. Anim minim laborum eiusmod aliqua
veniam veniam proident mollit excepteur excepteur amet. Anim consequat reprehenderit proident Lorem non pariatur sunt
Lorem minim culpa incididunt fugiat id dolore.
</p>
<h4>Incididunt non velit</h4>
<p>
Non mollit mollit anim nulla sint sunt nulla exercitation minim cillum velit. In officia in tempor qui laboris. Culpa non
ullamco ipsum qui laborum veniam esse ut cillum amet irure nostrud non irure. Laborum sint ut ad nisi commodo laborum
deserunt cupidatat. Adipisicing in in officia pariatur ut id.
</p>
</div>
</div>
</div>
</section>

<!-- Footer -->
<footer>
<div class="container">
<div class="p pl-b3-0 pr-b3-0 pt-b3-2x pb-b3-2x">
<div class="g">
<div class="b0_12 b3_12">
<div class="ta-center">
<ul class="list-unstyled cf mb mb-b3-0">
<li><a href="#1">Link1</a></li>
<li><a href="#2">Link2</a></li>
<li><a href="#3">Link3</a></li>
<li><a href="#4">Link4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>
</div>
<div class="b0_12 b3_12">
<div class="ta-center ta-right-b3">
&copy;&nbsp;2016 Your Company Name
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
4 changes: 2 additions & 2 deletions clean.html
View file
Expand Up @@ -11,7 +11,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1" />

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

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

0 comments on commit aff043a

Please sign in to comment.