TULIP HTML Template

Thank you for using Tulip HTML Template, here is the guidance for you for getting started

A guide for expanding this template with Eleventy static site generator into your project website implementing a wide range of performance best practices.

Key Points

1. We will customize the template
2. Learn more with our generator tool, Eleventy
3. Styling with SASS and CUBE Methodology

Getting Started

What you have to require

1. Visual Studio Code or Terminal
2. Node.js installed
3. NPM installed
4. Web Browser (Firefox, Chrome)

1. Download the template from your item purchased

2. Navigate to the template directory

Open your Terminal or open template project folder with Visual Studio Code and write following the command inside Terminal.

3. Install dependencies

npm install

4. Develop and tested the template

npm run dev

Then open http://localhost:8080 in your web browser of choice to see your tulip template website.

If you are changing the contents inside the folder src, it will emulate the changes and refresh the browser live.

5. For Building

npm run build

---

Project Structure

tulip-template
└── gulp-tasks
└── src
    ├── fonts
    ├── images
    ├── lib
    ├── scss
    ├── site
└── .eleventy.js
└── .eslintrc.js
└── package.json

hijau-template folder configured with eleventy template languages and sass styles:

1. gulp-tasks: Gulp tasks in one folder
2. src: source folder for development files
3. fonts: Imported font files with woff2, woff format optimized web
4. images: Local images assets for template
5. lib: Our javascript library, including web components experiments
6. scss: Our CSS styling with pre-processed SCSS
7. site: Our contents and pages with Eleventy
8. .eleventy.js: Eleventy file configuration
9. .eslintrc.js: `Configuration file for ESLint
10. package.json: Packages project file
11. rollup.config.js: Rollup bundler config for compiles our commands from scss, assets and eleventy into one. rollup