Commit 27e281f2 authored by Luc Parret's avatar Luc Parret
Browse files

Initial commit

parents
.DS_Store
bower_components
node_modules
npm-debug.log
css
# Changelog
## Version 1.0 (November 19, 2015)
Initial release.
# Foundation for Sites Template
**Please open all issues with this template on the main [Foundation for Sites](https://github.com/zurb/foundation-sites/issues) repo.**
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.
## Installation
To use this template, your computer needs:
- [NodeJS](https://nodejs.org/en/) (0.12 or greater)
- [Git](https://git-scm.com/)
This template can be installed with the Foundation CLI, or downloaded and set up manually.
### Using the CLI
Install the Foundation CLI with this command:
```bash
npm install foundation-cli --global
```
Use this command to set up a blank Foundation for Sites project with this template:
```bash
foundation new --framework sites --template basic
```
The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name.
### Manual Setup
To manually set up the template, first download it with Git:
```bash
git clone https://github.com/zurb/foundation-sites-template projectname
```
Then open the folder in your command line, and install the needed dependencies:
```bash
cd projectname
npm install
```
Finally, run `npm start` to run the Sass compiler. It will re-run every time you save a Sass file.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var $ = require('gulp-load-plugins')();
var autoprefixer = require('autoprefixer');
var sassPaths = [
'node_modules/foundation-sites/scss',
'node_modules/motion-ui/src'
];
function sass() {
return gulp.src('scss/app.scss')
.pipe($.sass({
includePaths: sassPaths,
outputStyle: 'compressed' // if css compressed **file size**
})
.on('error', $.sass.logError))
.pipe($.postcss([
autoprefixer({ browsers: ['last 2 versions', 'ie >= 9'] })
]))
.pipe(gulp.dest('css'))
.pipe(browserSync.stream());
};
function serve() {
browserSync.init({
server: "./"
});
gulp.watch("scss/*.scss", sass);
gulp.watch("*.html").on('change', browserSync.reload);
}
gulp.task('sass', sass);
gulp.task('serve', gulp.series('sass', serve));
gulp.task('default', gulp.series('sass', serve));
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-padding-x top_blue">
<div class="large-12 cell">
<ul class="menu align-right">
<li><a href="#">Francais</a></li>
<li><a href="#">Deutsch</a></li>
<li><a href="#">English</a></li>
</ul>
<h1 class="text-center">Agency</h1>
<ul class="menu align-center">
<li><a href="#">Homepage</a></li>
<li><a href="#">about</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Client</a></li>
</ul>
</div>
</div>
</div>
<div class="grid-container ">
<div class="grid-x grid-padding-x top_red">
<div class="large-offset-2 medium-offset-1 large-8 medium-10 cell ">
<h2>Our amazing work for awesome client</h2>
</div>
</div>
<div class="text-center">
</div>
<div class="grid-x grid-padding-x">
<div class="small-6 large-4 cell">
<div class="callout">
<img class="thumbnail" src="https://picsum.photos/340/250" alt="Photo of Uranus.">
<h3 class="text-center">Nike</h3>
</div>
</div>
<div class="small-6 large-4 cell">
<div class="callout">
<img class="thumbnail" src="https://picsum.photos/340/270" alt="Photo of Uranus.">
<h3 class="text-center">Adidas</h3>
</div>
</div>
<div class="small-6 large-4 cell">
<div class="callout">
<img class="thumbnail" src="https://picsum.photos/340/240" alt="Photo of Uranus.">
<h3 class="text-center">Lacost</h3>
</div>
</div>
</div>
<div class="grid-x grid-padding-x">
<div class="small-6 large-4 cell">
<div class="callout">
<img class="thumbnail" src="https://picsum.photos/340/280" alt="Photo of Uranus.">
<h3 class="text-center">Rebook</h3>
</div>
</div>
<div class="small-6 large-4 cell">
<div class="callout">
<img class="thumbnail" src="https://picsum.photos/340/260" alt="Photo of Uranus.">
<h3 class="text-center">Le coq sportif</h3>
</div>
</div>
<div class="small-6 large-4 cell">
<div class="callout">
<img class="thumbnail" src="https://picsum.photos/340/270" alt="Photo of Uranus.">
<h3 class="text-center">Champion</h3>
</div>
</div>
</div>
</div>
</div>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/what-input/dist/what-input.js"></script>
<script src="node_modules/foundation-sites/dist/js/foundation.js"></script>
<script src="js/app.js"></script>
</body>
<footer>
<div class="grid-container black_footer">
<div class="grid-x grid-margin-x align-center">
<h1>contact us !</h1>
<p>+41 78770709</p>
</div>
</div>
</footer>
</html>
$(document).foundation();
This diff is collapsed.
{
"name": "foundation-sites-template",
"version": "1.0.0",
"description": "Basic template for a new Foundation for Sites project.",
"main": "gulpfile.js",
"scripts": {
"start": "gulp",
"build": "gulp sass"
},
"author": "ZURB <foundation@zurb.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/zurb/foundation-sites/issues",
"email": "foundation@zurb.com"
},
"dependencies": {
"foundation-sites": "^6.6.0",
"jquery": ">=3.0.0",
"motion-ui": "~2.0.0",
"what-input": "^5.1.2"
},
"devDependencies": {
"autoprefixer": "^9.1.5",
"browser-sync": "^2.18.13",
"gulp": "^4.0.0",
"gulp-load-plugins": "^1.1.0",
"gulp-postcss": "^8.0.0",
"gulp-sass": "^4.0.1"
},
"repository": {
"type": "git",
"url": "https://github.com/zurb/foundation-sites-template.git"
},
"private": true
}
This diff is collapsed.
@charset 'utf-8';
@import 'settings';
@import 'foundation';
@import 'motion-ui';
// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;
// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;
// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;
// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;
// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;
// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;
// Helpers
@include foundation-float-classes;
@include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;
// Motion UI
@include motion-ui-transitions;
@include motion-ui-animations;
//module
@import 'module/_footer.scss';
@import 'module/_topPage';
.black_footer{
background-color: black;
color: aliceblue;
height: 150px;
padding-top: 50px;
}
.top_blue{
background-color: rgba(29, 170, 252, 0.767) ;
color: white;
}
li a{
color : white ;
}
.top_red{
background-color: rgb(197, 79, 79);
height: 200px;
padding-left: -20px;
padding-right: -20px;
text-align: center;
padding-top: 50px;
}
This diff is collapsed.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment