# HTML templates Read.me

## &#x20;Getting Started <a href="#getting-started" id="getting-started"></a>

### &#x20;About

&#x20;We mainly use plain HTML with Tailwind classes to create stunning eye-catching templates for landing pages marketing pages.

&#x20;This scaffolding uses [gulp](https://gulpjs.com/) to create workflows to make esier the development. These are other of the dependencies and technologies we use:

* [Tailwind CSS](https://tailwindcss.com/) as utility CSS framework
* [Handlebars](https://handlebarsjs.com/) as template engine to join our layouts, partials into pages.
* [Imagemin](https://github.com/imagemin/imagemin) to minify images and optimice them for web.

### &#x20;Installation <a href="#installation" id="installation"></a>

&#x20;First of all we need to have nodejs installed in our system. Then, we can execute npm install to install this repo's dependencies.

or via Yarn

### &#x20;Requirements <a href="#requirements" id="requirements"></a>

&#x20;**All our templates are designed for Tailwind CSS v2.0.** To make sure that you are on the latest version of Tailwind, update via npm:

```
                          
  npm install tailwindcss@latest
                          
```

or via Yarn

```
                          
  yarn add tailwindcss@latest
                          
```

### &#x20;Source scaffolding structure <a href="#structure" id="structure"></a>

&#x20;The source code is located in the directory src. Inside it there are the following folders:

* **css:** Here is just one file named app.css and inside we are just importing Tailwind. If you want to any custom CSS rule you add it to that file.
* **layouts:** here we can store our different layouts for our different websites. These are the structures with common parts between different pages, including things links to **externals assets** like **fonts**, or **components** like **navigation** or **footer**.
* **partials:** here we will store snippets of HTML like UI components. Things like **buttons**, **cards**, **navbars**, or any other UI component.
* **js:** here you can store your js files. They will be minified with uglify if NODE\_ENV === 'prod' and copied to dist/js.

In the root of src we will store full pages importing our layouts, and partials. In our example there is just on file namedindex.html but you can create others and add links to them in your navigation.

If you have any doubt about how to use this code, you can reach use in twitter like [@Mike\_Andreuzza](https://twitter.com/Mike_Andreuzza) and [@g\_perales](https://twitter.com/g_perales).

```
                          
  ├── template-name/
  | | ├── dist/...
  | | ├── src/...
  | | | | | ├── CSS/...
  | | | | | ├── js/...
  | | | | | ├── layouts/...
  | | | | | | | | | ├── default
  | | | | | ├── partials/...
  | | | | | | | | | ├── components
  | | | | | ├── index.html
  | | ├── .posthtmlrc
  | | ├── READ.ME
  | | ├── gulpfile.js
  | | ├── imagemin.config.js
  | | ├── license
  | | ├── package-lock.json
  | | ├── package.json
  | | ├── postcss.config.js
  | | ├── tailwind.config.min.js
                          
```

### &#x20;Deploying to production

&#x20;To deploy your website you just have to execute npm run build and upload the result in the /dist folder to your server.

&#x20;If you are going to use a git repo, we highly recommend to use [Netlify](https://www.netlify.com/) as it's free and pretty easy to use.

## &#x20;Resources and Assets <a href="#resources" id="resources"></a>

### &#x20;Fonts <a href="#fonts" id="fonts"></a>

&#x20;We are using Google Fonts on our templates so you do not have to download nothing and this ones are linked on the head of every template and therefore the talwind.config.js is also custom.

&#x20;Get more fonts here:

* &#x20;<https://fonts.google.com/>

```
                          
fontFamily: {
        sans: [
          '"Inter"',
          'system-ui',
          '-apple-system',
          'BlinkMacSystemFont',
          '"Segoe UI"',
          'Roboto',
          '"Helvetica Neue"',
          'Arial',
          '"Noto Sans"',
          'sans-serif',
          '"Apple Color Emoji"',
          '"Segoe UI Emoji"',
          '"Segoe UI Symbol"',] // Ensure fonts with spaces have " " surrounding it.
},
                          
```

### &#x20;Icons <a href="#icons" id="icons"></a>

&#x20;All of the icons we use in Wicked Templates come from Heroicons, which is a free MIT-licensed.

&#x20;This is the collection:

* &#x20;[Heroicons](https://heroicons.com/)

### &#x20;Plugins <a href="#plugins" id="plugins"></a>

&#x20;When we build the templates we need to use some plugins, for the forms, typography, or aspect ratio.

You can get them here in case you want them in the future:

* &#x20;[Typography Plugin](https://github.com/tailwindlabs/tailwindcss-typography#readme)
* &#x20;[Aspect Ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio#readme)
* &#x20;[Forms](https://github.com/tailwindlabs/tailwindcss-forms#readme)

### &#x20;Colors <a href="#colors" id="colors"></a>

&#x20;Most of our templates have custom color palette where we get from a project that we made before starting Wicked Templates

* &#x20;[Colors & Fonts](https://colorsandfonts.com/)

### &#x20;Images <a href="#images" id="images"></a>

&#x20;We use images from Unsplash and Figma Community.

* [Unsplash](https://unsplash.com/)
* [Figma Community](https://unsplash.com/)