Skip to content

Commit 64bd337

Browse files
hugosolarhugosolar
committed
CCGN redesign theme and frontend
1 parent 07c9516 commit 64bd337

File tree

136 files changed

+21588
-5
lines changed

Some content is hidden

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

136 files changed

+21588
-5
lines changed

‎frontend-redesign/.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.DS_Store
2+
bower_components
3+
node_modules
4+
npm-debug.log
5+
css
6+
yarn.lock
7+
package-lock.json

‎frontend-redesign/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-redesign/README.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# Foundation for Sites Template
2+
3+
**Please open all issues with this template on the main [Foundation for Sites](https://github.com/zurb/foundation-sites/issues) repo.**
4+
5+
This is the basic starter project for [Foundation for Sites 6](http://foundation.zurb.com/sites). It includes a Sass compiler and a starter HTML file for you.
6+
7+
## Installation
8+
9+
To use this template, your computer needs:
10+
11+
- [NodeJS](https://nodejs.org/en/) (0.12 or greater)
12+
- [Git](https://git-scm.com/)
13+
14+
This template can be installed with the Foundation CLI, or downloaded and set up manually.
15+
16+
### Using the CLI
17+
18+
Install the Foundation CLI with this command:
19+
20+
```bash
21+
npm install foundation-cli --global
22+
```
23+
24+
Use this command to set up a blank Foundation for Sites project with this template:
25+
26+
```bash
27+
foundation new --framework sites --template basic
28+
```
29+
30+
The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name.
31+
32+
### Manual Setup
33+
34+
To manually set up the template, first download it with Git:
35+
36+
```bash
37+
git clone https://github.com/zurb/foundation-sites-template projectname
38+
```
39+
40+
Then open the folder in your command line, and install the needed dependencies:
41+
42+
```bash
43+
cd projectname
44+
npm install
45+
```
46+
47+
Finally, run `npm start` to run the Sass compiler. It will re-run every time you save a Sass file.

‎frontend-redesign/gulpfile.js

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

‎frontend-redesign/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-redesign/js/app.js

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

‎frontend-redesign/package.json

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "foundation-sites-template",
3+
"version": "1.0.0",
4+
"description": "Basic template for a new Foundation for Sites project.",
5+
"main": "gulpfile.js",
6+
"scripts": {
7+
"start": "gulp",
8+
"build": "gulp sass"
9+
},
10+
"author": "ZURB <foundation@zurb.com>",
11+
"license": "MIT",
12+
"bugs": {
13+
"url": "https://github.com/zurb/foundation-sites/issues",
14+
"email": "foundation@zurb.com"
15+
},
16+
"dependencies": {
17+
"foundation-sites": "^6.5.1",
18+
"jquery": ">=3.0.0",
19+
"motion-ui": "~2.0.0",
20+
"what-input": "^5.1.2"
21+
},
22+
"devDependencies": {
23+
"autoprefixer": "^9.5.1",
24+
"browser-sync": "^2.18.13",
25+
"gulp": "^4.0.0",
26+
"gulp-concat": "^2.6.1",
27+
"gulp-cssmin": "^0.2.0",
28+
"gulp-imagemin": "^5.0.3",
29+
"gulp-load-plugins": "^1.1.0",
30+
"gulp-postcss": "^8.0.0",
31+
"gulp-rename": "^1.4.0",
32+
"gulp-sass": "^4.0.1",
33+
"gulp-sourcemaps": "^2.6.5",
34+
"gulp-uglify": "^3.0.2",
35+
"gulp-util": "^3.0.8",
36+
"slick-carousel": "^1.8.1",
37+
"swipebox": "^1.4.6"
38+
},
39+
"repository": {
40+
"type": "git",
41+
"url": "https://github.com/zurb/foundation-sites-template.git"
42+
},
43+
"private": true
44+
}

0 commit comments

Comments
 (0)