starting the html structure with partials
This commit is contained in:
jorge-vitrubio
parent
3e55359ff6
commit
7e745ae3d4
78
README.md
78
README.md
|
|
@ -1,3 +1,79 @@
|
|||
# arcHIVE-HTML-template
|
||||
|
||||
The HTML/CSS implementation on top of Foundation, from the original design
|
||||
The HTML/CSS implementation on top of [Foundation](https://get.foundation), from the original design made by [Oficina de Diseny](http://oficinadedisseny.net/) for [arcHIVE project](https://arc-hive.zone)
|
||||
|
||||
|
||||
Build on top of [Foundation for Sites](http://foundation.zurb.com/sites). It has a Gulp-powered build system with these features:
|
||||
|
||||
- Handlebars HTML templates with Panini
|
||||
- Sass compilation and prefixing
|
||||
- JavaScript module bundling with webpack
|
||||
- Built-in BrowserSync server
|
||||
- For production builds:
|
||||
- CSS compression
|
||||
- JavaScript module bundling with webpack
|
||||
- Image compression
|
||||
|
||||
## Installation
|
||||
|
||||
To use this template, your computer needs:
|
||||
|
||||
- [NodeJS](https://nodejs.org/en/) (Version 6 or greater recommended, tested with 6.11.4 and 8.12.0)
|
||||
- [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
|
||||
```
|
||||
|
||||
The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name.
|
||||
|
||||
Now `cd` to your project name and to start your project run
|
||||
|
||||
```bash
|
||||
foundation watch
|
||||
```
|
||||
|
||||
|
||||
A new static site will be created inside the `dist` directory and will be accessible at
|
||||
|
||||
```
|
||||
http://localhost:8000
|
||||
```
|
||||
|
||||
To create compressed, production-ready assets, run
|
||||
```bash
|
||||
foundation build
|
||||
```
|
||||
or the `npm` command
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
which will be saved into `dist`.
|
||||
|
||||
if you only want to build an specific Asset that will compile into `dist/assets/`
|
||||
|
||||
```bash
|
||||
npm run styles
|
||||
```
|
||||
```bash
|
||||
npm run scripts
|
||||
```
|
||||
```bash
|
||||
npm run images
|
||||
```
|
||||
To get help for the `cli` just
|
||||
```bash
|
||||
foundation help
|
||||
```
|
||||
|
|
|
|||
70
readme.md
70
readme.md
|
|
@ -1,70 +0,0 @@
|
|||
# ZURB Template
|
||||
|
||||
[](https://david-dm.org/zurb/foundation-zurb-template#info=devDependencies)
|
||||
|
||||
**Please open all issues with this template on the main [Foundation for Sites](https://github.com/zurb/foundation-sites/issues) repo.**
|
||||
|
||||
This is the official ZURB Template for use with [Foundation for Sites](http://foundation.zurb.com/sites). We use this template at ZURB to deliver static code to our clients. It has a Gulp-powered build system with these features:
|
||||
|
||||
- Handlebars HTML templates with Panini
|
||||
- Sass compilation and prefixing
|
||||
- JavaScript module bundling with webpack
|
||||
- Built-in BrowserSync server
|
||||
- For production builds:
|
||||
- CSS compression
|
||||
- JavaScript module bundling with webpack
|
||||
- Image compression
|
||||
|
||||
## Installation
|
||||
|
||||
To use this template, your computer needs:
|
||||
|
||||
- [NodeJS](https://nodejs.org/en/) (Version 6 or greater recommended, tested with 6.11.4 and 8.12.0)
|
||||
- [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 zurb
|
||||
```
|
||||
|
||||
The CLI will prompt you to give your project a name. The template will be downloaded into a folder with this name.
|
||||
|
||||
Now `cd` to your project name and to start your project run
|
||||
|
||||
```bash
|
||||
foundation watch
|
||||
```
|
||||
|
||||
### Manual Setup
|
||||
|
||||
To manually set up the template, first download it with Git:
|
||||
|
||||
```bash
|
||||
git clone https://github.com/zurb/foundation-zurb-template projectname
|
||||
```
|
||||
|
||||
Then open the folder in your command line, and install the needed dependencies:
|
||||
|
||||
```bash
|
||||
cd projectname
|
||||
yarn
|
||||
```
|
||||
|
||||
Finally, run `yarn start` to run Gulp. Your finished site will be created in a folder called `dist`, viewable at this URL:
|
||||
|
||||
```
|
||||
http://localhost:8000
|
||||
```
|
||||
|
||||
To create compressed, production-ready assets, run `yarn run build`.
|
||||
|
|
@ -6,14 +6,16 @@
|
|||
<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>
|
||||
<title>arcHIVE html/css development</title>
|
||||
<link rel="stylesheet" href="{{root}}assets/css/app.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}}
|
||||
{{> header}}
|
||||
{{> hero}}
|
||||
{{> body}}
|
||||
|
||||
{{> footer}}
|
||||
<script src="{{root}}assets/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
<footer class="grid-x">
|
||||
<div class="cell small-4">
|
||||
<ul class="menu">
|
||||
<li><a href="#">One</a></li>
|
||||
<li><a href="#">Two</a></li>
|
||||
<li><a href="#">Three</a></li>
|
||||
<li><a href="#">Four</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cell small-4">
|
||||
<ul class="menu">
|
||||
<li><a href="#">One</a></li>
|
||||
<li><a href="#">Two</a></li>
|
||||
<li><a href="#">Three</a></li>
|
||||
<li><a href="#">Four</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="cell small-4">
|
||||
<ul class="menu">
|
||||
<li><a href="#">One</a></li>
|
||||
<li><a href="#">Two</a></li>
|
||||
<li><a href="#">Three</a></li>
|
||||
<li><a href="#">Four</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<div class="grid-x">
|
||||
<div class="cell small-12 medium-4">arcHIVE</div>
|
||||
<div class="cell hide-for-small medium-8">
|
||||
<ul class="menu">
|
||||
<li><a href="#">One</a></li>
|
||||
<li><a href="#">Two</a></li>
|
||||
<li><a href="#">Three</a></li>
|
||||
<li><a href="#">Four</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<div class="grid-x">
|
||||
<div class="cell small-12 ">
|
||||
<h1> big old hero</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Style Guide</title>
|
||||
<link rel="stylesheet" href="assets/css/app.css">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css">
|
||||
<!--link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.9.1/styles/github.min.css"-->
|
||||
|
||||
<!-- Style guide-specific CSS goes here. -->
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue