HTML templates Read.me
HTML and Tailwind CSS Templates documentation
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.
or via Yarn
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:
or via Yarn
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 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 and @g_perales.
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/
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.
Last updated