Skip to content

Commit 9ab31b3

Browse files
sageworksstudiosageworksstudio
committed
replaced most components
1 parent 170c970 commit 9ab31b3

25 files changed

+7345
-232
lines changed

‎README.md‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,43 @@
11
# StreamBuilder
22

3-
##What it is
4-
StreamBuilder is an automated build environment well suited for HTML, CSS and JavaScript prototyping. It runs on the (streaming) build system [Gulp.js](https://gulpjs.com/) and comes with goodies like [SASS](https://sass-lang.com/) and [Nunjucks](https://mozilla.github.io/nunjucks/).
3+
## What it is
4+
StreamBuilder is an automated build environment well suited for HTML, CSS and JavaScript prototyping. It runs on the (streaming) build system [Gulp](https://gulpjs.com/) and comes with goodies like the [SASS](https://sass-lang.com/) CSS extension language and the [Nunjucks](https://mozilla.github.io/nunjucks/) template language.
55

6-
*__StreamBuilder focuses on four tasks to make your job easier.__*
6+
## What it does
77

8-
1. Compile SCSS into CSS and outpu to the destination folder.
9-
2. Output JavaScript to the destination folder.
10-
3. Compile Nunjuck templates into HTML pages and output them to the pages folder. Keepin' it DRY!
11-
4. In your browser, inject the changed CSS into the HTML and update your view.
8+
By working in the `/src` directory all of your changes are piped and rendered to the `/dest` folder.
129

13-
*__StreamBuilder's workflow__*
10+
- `/src/scss` -> `/dest/css`
11+
- `/src/js` -> `/dest/js`
12+
- `/src/pages` -> `/dest/`
13+
- `/src/img` -> `/dest/img`
14+
- It even refreshes your browser on every change!
1415

15-
You work from the /src directory and everytime you save a file; be it SCSS, JavaScript or Nunjuck template, StreamBuilder compiles SCSS into CSS, and places compiled JavaScripts and HTML files in the /dist directory.
16+
## Requirements
1617

17-
##Requirements
1818
Requires [Nodejs](https://nodejs.org/)
1919

20-
Note: if you run GNU/Linux you can now get the most recent version of Node with your [package manager](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager).
21-
22-
##Getting Started
23-
1. Download this repo to your development environment.
24-
2. Install the node modules listed in the package.json file globally. I.e., `sudo npm install -g <node_module>`
25-
3. From a terminal `cd path/to/streambuilder`
26-
4. `npm update` This will create a new directory "node_modules" where NPM will install all the required node modules.
27-
5. Edit the config.json file to reflect your destination URL.
28-
6. Run `gulp`
20+
## Getting Started
21+
- Download this repo to your development environment.
22+
- Install the node modules listed in the package.json file globally. I.e., `sudo npm install -g <node_module>`
23+
- From a terminal `cd path/to/streambuilder`
24+
- Run `npm install` This will create a new directory "node_modules" where NPM will install all the required node modules.
25+
- Edit the paths variable in the `gulpfile.js` file to reflect your `src` and `dest` paths as well as your application URL.
26+
- Run `gulp`
2927

3028
## Advanced configuration
31-
You can change anything and everything about StreamBuilder by editing the gulpfile.js. By default StreamBuilder compiles everything to the /dist folder. You can chage this behavior (as well as the URL of the project) by editing the `conf_xyz_dest` vars in the top of gulpfile.js.
29+
You can change anything and everything about StreamBuilder by editing the gulpfile.js. By default StreamBuilder compiles everything to the /dest folder. You can chage this behavior (as well as the URL of the project) by editing the `paths` vars in the top of gulpfile.js.
30+
31+
StreamBuilder comes bundled with SASS and Nunjucks support. You can change this by removing the gulp-scss modules and installing the css pre-processor and template language of your choice then editing the tasks in gulpfile.js. You can find additional modules at [NPM](https://www.npmjs.com/).
3232

33-
StreamBuilder comes bundles with SCSS and Nunjucks support. You can change this by removing the gulp-scss modules and installing the css pre-processor and template language of your choice then editing the tasks in gulpfile.js. You can find additional modules at [NPM](https://www.npmjs.com/).
33+
### Goodies
34+
- Out of the box StreamBuilder will create a single page website. Not a very pretty one, but a simple one to get you started.
35+
- Some handy SASS mixins
36+
- simple-grid() creates a very simple css grid.
37+
- simple-flex() for vertical/horizontal placement of block elements.
38+
- remCalc() to control font sizes based on the default rem.
3439

35-
##Goodies
36-
Out of the box StreamBuilder will create a single page website.
40+
Instructions for the mixins are in the `/src/scss/components/_mixins.scss` file. And examples are included in the `src/scss/app.scss` and `/src/pages/index.njk` files.
3741

38-
##Getting Help
42+
#### Getting Help
3943
If you find a bug or want to see a feature, file it in the [issues section](https://github.com/digi-brains/StreamBuilder/issues).

‎dest/css/app.css‎

Lines changed: 110 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dest/css/app.css.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dest/img/logo.gif‎

1.2 KB
Loading

‎dest/index.html‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!doctype html>
2+
<html lang="en" class="home">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="x-ua-compatible" content="ie=edge">
6+
<title>StreamBuilder</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="css/app.css">
9+
</head>
10+
<body>
11+
12+
13+
14+
<header class="header" id="header">
15+
<div>
16+
<a href="/">
17+
<img src="img/logo.gif" alt="Logo">
18+
</a>
19+
</div>
20+
<nav>
21+
<ul>
22+
<li>
23+
<a href="#">Page 1</a>
24+
</li>
25+
<li>
26+
<a href="#">Page 2</a>
27+
</li>
28+
<li>
29+
<a href="#">Page 3</a>
30+
</li>
31+
</ul>
32+
</nav>
33+
</header>
34+
<main id="main" data-controller="Page" data-action="">
35+
36+
<h1>
37+
H1 Heading
38+
</h1>
39+
<section>
40+
<div>
41+
<div>
42+
<h2>H2 Heading</h2>
43+
<p>
44+
Vestibulum ante ipsum primis .
45+
</p>
46+
<h3>
47+
H3 Heading
48+
</h3>
49+
<p>
50+
Donec velit neque, auctor sit.
51+
</p>
52+
<h4>
53+
H4 Heading
54+
</h4>
55+
<p>
56+
Vivamus magna justo, lacinia.
57+
</p>
58+
</div>
59+
</div>
60+
<div>
61+
<div>
62+
<h2>H2 Heading</h2>
63+
<p>
64+
Vestibulum ante ipsum primis .
65+
</p>
66+
<h3>
67+
H3 Heading
68+
</h3>
69+
<p>
70+
Donec velit neque, auctor sit.
71+
</p>
72+
<h4>
73+
H4 Heading
74+
</h4>
75+
<p>
76+
Vivamus magna justo, lacinia.
77+
</p>
78+
</div>
79+
</div>
80+
<div>
81+
<div>
82+
<h2>H2 Heading</h2>
83+
<p>
84+
Vestibulum ante ipsum primis .
85+
</p>
86+
<h3>
87+
H3 Heading
88+
</h3>
89+
<p>
90+
Donec velit neque, auctor sit.
91+
</p>
92+
<h4>
93+
H4 Heading
94+
</h4>
95+
<p>
96+
Vivamus magna justo, lacinia.
97+
</p>
98+
</div>
99+
</div>
100+
</section>
101+
102+
</main>
103+
104+
<footer>
105+
<p>Copyright &copy;2019 My Company. All rights reserved.</p>
106+
</footer>
107+
108+
109+
110+
111+
<script src="js/app.js"></script>
112+
</body>
113+
</html>

‎dest/js/app.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
// Custom functions
2+
(function() {
3+
"use strict";
4+
5+
// Page specific actions
6+
var MYSITE = {
7+
common: { // sitewide code
8+
init: function() {
9+
10+
// Do common stuff here
11+
12+
}
13+
},
14+
15+
Page: {
16+
init: function() {// controller-wide code
17+
18+
// Do Page specific stuff here
19+
20+
}
21+
}
22+
23+
24+
};
25+
26+
27+
var UTIL = {
28+
exec: function(controller, action) {
29+
var ns = MYSITE,
30+
action = (action === undefined) ? 'init' : action;
31+
if (controller !== '' && ns[controller] && typeof ns[controller][action] == 'function' ) {
32+
ns[controller][action]();
33+
}
34+
},
35+
36+
init: function() {
37+
var main = document.getElementById('main'),
38+
controller = main.getAttribute( 'data-controller' ),
39+
action = main.getAttribute( 'data-action' );
40+
UTIL.exec( 'common' );
41+
UTIL.exec( controller );
42+
UTIL.exec( controller, action );
43+
}
44+
};
45+
46+
window.onload = UTIL.init;
47+
48+
})();

0 commit comments

Comments
 (0)