starting the html structure with partials

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
+```

readme.md

@@ -1,70 +0,0 @@
-# ZURB Template
-
-[![devDependency Status](https://david-dm.org/zurb/foundation-zurb-template/dev-status.svg)](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`.

src/layouts/default.html

@@ -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>

src/partials/footer.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>

src/partials/header.html

@@ -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>

src/partials/hero.html

@@ -0,0 +1,5 @@
+<div class="grid-x">
+  <div class="cell small-12 ">
+	<h1> big old hero</h1>
+  </div>
+</div>

src/styleguide/template.html

@@ -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>