https://github.com/maifeeulasad/new-wickedblocks
https://github.com/maifeeulasad/new-wickedblocks
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/maifeeulasad/new-wickedblocks
- Owner: maifeeulasad
- License: other
- Created: 2021-05-30T13:52:52.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-06-03T14:01:09.000Z (about 5 years ago)
- Last Synced: 2025-02-13T21:37:53.360Z (over 1 year ago)
- Language: HTML
- Size: 10 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# Wicked HTML Starter
This repo is the scaffolding we use at [Wicked Templates](https://wickedtemplates.com) to create new
Tailwind based HTML templates.
We mainly use plain HTML with Tailwind classes to create stunning eye-catching templates for landing pages
marketing pages.
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.
## Getting started
First of all we need to have [nodejs](https://nodejs.org/) installed in our system. Then, we can execute
`npm install` to install this repo's dependencies.
Later on, we can execute `npm start` to compile our Handlebars templates into plain HTML. A development
server will be launch and you will be able to see the result webpage in the URL [http://localhost:4000](http://localhost:4000/).
## 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.
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](https://twitter.com/Mike_Andreuzza)
and [@g_perales](https://twitter.com/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](https://www.netlify.com/) as it's free
and pretty easy to use.
# new-wickedblocks