From 7e745ae3d4cc1b6bdd39e568a8b2bb01157347ba Mon Sep 17 00:00:00 2001 From: jorge-vitrubio Date: Mon, 19 Apr 2021 21:42:40 +0200 Subject: [PATCH] starting the html structure with partials --- README.md | 78 +++++++++++++++++++++++++++++++++++- readme.md | 70 -------------------------------- src/layouts/default.html | 6 ++- src/partials/footer.html | 26 ++++++++++++ src/partials/header.html | 11 +++++ src/partials/hero.html | 5 +++ src/styleguide/template.html | 2 +- 7 files changed, 124 insertions(+), 74 deletions(-) delete mode 100644 readme.md create mode 100644 src/partials/footer.html create mode 100644 src/partials/header.html create mode 100644 src/partials/hero.html diff --git a/README.md b/README.md index ee28775..70a101e 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,79 @@ # arcHIVE-HTML-template -The HTML/CSS implementation on top of Foundation, from the original design \ No newline at end of file +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 +``` diff --git a/readme.md b/readme.md deleted file mode 100644 index b8c3dfc..0000000 --- a/readme.md +++ /dev/null @@ -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`. diff --git a/src/layouts/default.html b/src/layouts/default.html index 01ee96d..d5130cb 100644 --- a/src/layouts/default.html +++ b/src/layouts/default.html @@ -6,14 +6,16 @@ - Foundation for Sites + arcHIVE html/css development {{!-- Pages you create in the src/pages/ folder are inserted here when the flattened page is created. --}} +{{> header}} +{{> hero}} {{> body}} - +{{> footer}} diff --git a/src/partials/footer.html b/src/partials/footer.html new file mode 100644 index 0000000..f29f5cf --- /dev/null +++ b/src/partials/footer.html @@ -0,0 +1,26 @@ + diff --git a/src/partials/header.html b/src/partials/header.html new file mode 100644 index 0000000..f168e1c --- /dev/null +++ b/src/partials/header.html @@ -0,0 +1,11 @@ +
+
arcHIVE
+
+ +
+
diff --git a/src/partials/hero.html b/src/partials/hero.html new file mode 100644 index 0000000..c962dd8 --- /dev/null +++ b/src/partials/hero.html @@ -0,0 +1,5 @@ +
+
+

big old hero

+
+
diff --git a/src/styleguide/template.html b/src/styleguide/template.html index 4ad210e..4814250 100644 --- a/src/styleguide/template.html +++ b/src/styleguide/template.html @@ -5,7 +5,7 @@ Style Guide - +