Skip to content

Commit 3e7f0c4

Browse files
hugosolarhugosolar
authored
Merge pull request creativecommons#319 from creativecommons/frontend-restructure
Frontend restructure
2 parents 9498e46 + 8fe26cd commit 3e7f0c4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

60 files changed

+25281
-2699
lines changed

‎frontend-build/.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DS_Store
2+
bower_components
3+
node_modules
4+
npm-debug.log
5+
css

‎frontend-build/CHANGELOG.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Changelog
2+
3+
## Version 1.0 (November 19, 2015)
4+
5+
Initial release.

‎frontend-build/README.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# Frontend Build for cc-commoners theme
2+
3+
This is the frontend build environment for cc-commoners theme. It works with [Foundation for Sites 6](http://foundation.zurb.com/sites). Also includes a Sass compiler and another tasks in gulp for building dependencies files and minify images
4+
5+
## Installation
6+
7+
To use this template, your computer needs:
8+
9+
- [NodeJS](https://nodejs.org/en/) (0.12 or greater)
10+
- [Git](https://git-scm.com/)
11+
12+
This template can be installed with the Foundation CLI, or downloaded and set up manually.
13+
14+
### Using the CLI
15+
16+
Install the Foundation CLI with this command:
17+
18+
```bash
19+
npm install foundation-cli --global
20+
```
21+
22+
23+
### Setup
24+
25+
To install all the needed dependencies:
26+
27+
```bash
28+
npm install
29+
```
30+
31+
Finally, run `gulp watch` to run the Sass compiler watch. It will re-run every time you save a Sass file.

‎frontend-build/gulpfile.js

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
var gulp = require('gulp');
2+
var browserSync = require('browser-sync').create();
3+
var $ = require('gulp-load-plugins')();
4+
var autoprefixer = require('autoprefixer');
5+
var rename = require('gulp-rename');
6+
var uglify = require('gulp-uglify');
7+
var concat = require('gulp-concat');
8+
var imagemin = require('gulp-imagemin');
9+
var cssmin = require('gulp-cssmin');
10+
var sourcemaps = require('gulp-sourcemaps');
11+
12+
var template_name = 'cc-commoners';
13+
var sassPaths = [
14+
'node_modules/foundation-sites/scss',
15+
'node_modules/motion-ui/src'
16+
];
17+
18+
var js = {
19+
//JS Dependencies
20+
fileList: [
21+
'node_modules/foundation-sites/dist/js/plugins/foundation.core.js',
22+
'node_modules/foundation-sites/dist/js/plugins/foundation.util.mediaQuery.js',
23+
'node_modules/foundation-sites/dist/js/plugins/foundation.util.keyboard.js',
24+
'node_modules/foundation-sites/dist/js/plugins/foundation.util.triggers.js',
25+
'node_modules/foundation-sites/dist/js/plugins/foundation.util.timerAndImageLoader.js',
26+
'node_modules/foundation-sites/dist/js/plugins/foundation.util.box.js',
27+
'node_modules/foundation-sites/dist/js/plugins/foundation.util.motion.js',
28+
'node_modules/foundation-sites/dist/js/plugins/foundation.util.nest.js',
29+
'node_modules/foundation-sites/dist/js/plugins/foundation.sticky.js',
30+
'node_modules/foundation-sites/dist/js/plugins/foundation.tabs.js',
31+
'node_modules/foundation-sites/dist/js/plugins/foundation.equalizer.js',
32+
'node_modules/foundation-sites/dist/js/plugins/foundation.tooltip.js',
33+
//'node_modules/swipebox/src/js/jquery.swipebox.js',
34+
//'node_modules/slick-carousel/slick/slick.js',
35+
],
36+
//CSS Dependencies
37+
styles: [
38+
'node_modules/swipebox/src/css/swipebox.css',
39+
'node_modules/slick-carousel/slick/slick.css',
40+
'node_modules/slick-carousel/slick/slick-theme.css',
41+
]
42+
};
43+
/* Build single JS dependencies file */
44+
gulp.task('build-js', function () {
45+
return gulp.src(js.fileList)
46+
.pipe(sourcemaps.init())
47+
.pipe(concat('dependencies.js'))
48+
.pipe(uglify().on('error', gutil.log))
49+
//.pipe( sourcemaps.write( '/' ) )
50+
.pipe(gulp.dest('../themes/' + template_name + '/assets/js'));
51+
});
52+
/* Theme Image optimization */
53+
gulp.task('imgmin', function () {
54+
gulp.src('../themes/' + template_name + '/img/*')
55+
.pipe(imagemin())
56+
.pipe(gulp.dest('../themes/' + template_name + '/assets/images/'))
57+
});
58+
/* Build single CSS dependencies file */
59+
gulp.task('build-css', function () {
60+
return gulp.src(js.styles)
61+
.pipe(sourcemaps.init())
62+
.pipe(concat('dependencies.css'))
63+
.pipe(cssmin())
64+
//.pipe( sourcemaps.write( '/' ) )
65+
.pipe(gulp.dest('../themes/' + template_name + '/assets/css'));
66+
});
67+
function sass() {
68+
return gulp.src('scss/app.scss')
69+
.pipe($.sass({
70+
includePaths: sassPaths,
71+
//outputStyle: 'compressed' // if css compressed **file size**
72+
})
73+
.on('error', $.sass.logError))
74+
.pipe($.postcss([
75+
autoprefixer({ browsers: ['last 2 versions', 'ie >= 9'] })
76+
]))
77+
//.pipe(gulp.dest('css'))
78+
//.pipe(browserSync.stream());
79+
.pipe(rename('style.css'))
80+
.pipe(gulp.dest('../themes/' + template_name +'/assets/css'))
81+
.pipe(gulp.dest('./css'));
82+
};
83+
84+
function serve() {
85+
browserSync.init({
86+
server: "./"
87+
});
88+
89+
gulp.watch("scss/*.scss", sass);
90+
gulp.watch("*.html").on('change', browserSync.reload);
91+
}
92+
function watch() {
93+
gulp.watch("scss/*.scss", sass)
94+
}
95+
gulp.task('sass', sass);
96+
gulp.task('watch', watch);
97+
gulp.task('serve', gulp.series('sass', serve));
98+
gulp.task('default', gulp.series('sass', serve));

‎frontend-build/index.html

+170
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
<!doctype html>
2+
<html class="no-js" lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="x-ua-compatible" content="ie=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Foundation for Sites</title>
8+
<link rel="stylesheet" href="css/app.css">
9+
</head>
10+
<body>
11+
<div class="grid-container">
12+
<div class="grid-x grid-padding-x">
13+
<div class="large-12 cell">
14+
<h1>Welcome to Foundation</h1>
15+
</div>
16+
</div>
17+
18+
<div class="grid-x grid-padding-x">
19+
<div class="large-12 cell">
20+
<div class="callout">
21+
<h3>We&rsquo;re stoked you want to try Foundation! </h3>
22+
<p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
23+
<p>Once you've exhausted the fun in this document, you should check out:</p>
24+
<div class="grid-x grid-padding-x">
25+
<div class="large-4 medium-4 cell">
26+
<p><a href="http://foundation.zurb.com/docs">Foundation Documentation</a><br />Everything you need to know about using the framework.</p>
27+
</div>
28+
<div class="large-4 medium-4 cell">
29+
<p><a href="http://zurb.com/university/code-skills">Foundation Code Skills</a><br />These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.</p>
30+
</div>
31+
<div class="large-4 medium-4 cell">
32+
<p><a href="http://foundation.zurb.com/forum">Foundation Forum</a><br />Join the Foundation community to ask a question or show off your knowlege.</p>
33+
</div>
34+
</div>
35+
<div class="grid-x grid-padding-x">
36+
<div class="large-4 medium-4 medium-push-2 cell">
37+
<p><a href="http://github.com/zurb/foundation">Foundation on Github</a><br />Latest code, issue reports, feature requests and more.</p>
38+
</div>
39+
<div class="large-4 medium-4 medium-pull-2 cell">
40+
<p><a href="https://twitter.com/ZURBfoundation">@zurbfoundation</a><br />Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).</p>
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
47+
<div class="grid-x grid-padding-x">
48+
<div class="large-8 medium-8 cell">
49+
<h5>Here&rsquo;s your basic grid:</h5>
50+
<!-- Grid Example -->
51+
52+
<div class="grid-x grid-padding-x">
53+
<div class="large-12 cell">
54+
<div class="primary callout">
55+
<p><strong>This is a twelve cell section in a grid-x.</strong> Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.</p>
56+
</div>
57+
</div>
58+
</div>
59+
<div class="grid-x grid-padding-x">
60+
<div class="large-6 medium-6 cell">
61+
<div class="primary callout">
62+
<p>Six cell</p>
63+
</div>
64+
</div>
65+
<div class="large-6 medium-6 cell">
66+
<div class="primary callout">
67+
<p>Six cell</p>
68+
</div>
69+
</div>
70+
</div>
71+
<div class="grid-x grid-padding-x">
72+
<div class="large-4 medium-4 small-4 cell">
73+
<div class="primary callout">
74+
<p>Four cell</p>
75+
</div>
76+
</div>
77+
<div class="large-4 medium-4 small-4 cell">
78+
<div class="primary callout">
79+
<p>Four cell</p>
80+
</div>
81+
</div>
82+
<div class="large-4 medium-4 small-4 cell">
83+
<div class="primary callout">
84+
<p>Four cell</p>
85+
</div>
86+
</div>
87+
</div>
88+
89+
<hr />
90+
91+
<h5>We bet you&rsquo;ll need a form somewhere:</h5>
92+
<form>
93+
<div class="grid-x grid-padding-x">
94+
<div class="large-12 cell">
95+
<label>Input Label</label>
96+
<input type="text" placeholder="large-12.cell" />
97+
</div>
98+
</div>
99+
<div class="grid-x grid-padding-x">
100+
<div class="large-4 medium-4 cell">
101+
<label>Input Label</label>
102+
<input type="text" placeholder="large-4.cell" />
103+
</div>
104+
<div class="large-4 medium-4 cell">
105+
<label>Input Label</label>
106+
<input type="text" placeholder="large-4.cell" />
107+
</div>
108+
<div class="large-4 medium-4 cell">
109+
<div class="grid-x">
110+
<label>Input Label</label>
111+
<div class="input-group">
112+
<input type="text" placeholder="small-9.cell" class="input-group-field" />
113+
<span class="input-group-label">.com</span>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
<div class="grid-x grid-padding-x">
119+
<div class="large-12 cell">
120+
<label>Select Box</label>
121+
<select>
122+
<option value="husker">Husker</option>
123+
<option value="starbuck">Starbuck</option>
124+
<option value="hotdog">Hot Dog</option>
125+
<option value="apollo">Apollo</option>
126+
</select>
127+
</div>
128+
</div>
129+
<div class="grid-x grid-padding-x">
130+
<div class="large-6 medium-6 cell">
131+
<label>Choose Your Favorite</label>
132+
<input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
133+
<input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
134+
</div>
135+
<div class="large-6 medium-6 cell">
136+
<label>Check these out</label>
137+
<input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
138+
<input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
139+
</div>
140+
</div>
141+
<div class="grid-x grid-padding-x">
142+
<div class="large-12 cell">
143+
<label>Textarea Label</label>
144+
<textarea placeholder="small-12.cell"></textarea>
145+
</div>
146+
</div>
147+
</form>
148+
</div>
149+
150+
<div class="large-4 medium-4 cell">
151+
<h5>Try one of these buttons:</h5>
152+
<p><a href="#" class="button">Simple Button</a><br/>
153+
<a href="#" class="success button">Success Btn</a><br/>
154+
<a href="#" class="alert button">Alert Btn</a><br/>
155+
<a href="#" class="secondary button">Secondary Btn</a></p>
156+
<div class="callout">
157+
<h5>So many components, girl!</h5>
158+
<p>A whole kitchen sink of goodies comes with Foundation. Check out the docs to see them all, along with details on making them your own.</p>
159+
<a href="http://foundation.zurb.com/sites/docs/" class="small button">Go to Foundation Docs</a>
160+
</div>
161+
</div>
162+
</div>
163+
</div>
164+
165+
<script src="node_modules/jquery/dist/jquery.js"></script>
166+
<script src="node_modules/what-input/dist/what-input.js"></script>
167+
<script src="node_modules/foundation-sites/dist/js/foundation.js"></script>
168+
<script src="js/app.js"></script>
169+
</body>
170+
</html>

‎frontend-build/js/app.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
$(document).foundation();

0 commit comments

Comments
 (0)