Getting Started

About

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

This scaffolding uses gulp to create workflows to make esier the development. These are other of the dependencies and technologies we use:

  • Tailwind CSS as utility CSS framework
  • Handlebars as template engine to join our layouts, partials into pages.
  • Imagemin to minify images and optimice them for web.

Installation

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

                          
  npm install

or via Yarn

                          
  yarn install

Requirements

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

Source scaffolding structure

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 named index.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 and @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

Deploying to production

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

If you are going to use a git repo, we highly recommend to use Netlify as it's free and pretty easy to use.

Resources and Assets

Fonts

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.

Get more fonts here:

  • 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.
},

Icons

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

This is the collection:

Plugins

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:

Colors

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

Images

We use images from Unsplash and Figma Community.