Wicked Blocks
Search…
Set up
How to use Wicked Blocks

Getting Started

About

We mainly use plain HTML with Tailwind classes to create the blocks, but sometimes if needed we use Alpine.js
  • Tailwind CSS as utility CSS framework
  • Alpine Your new, lightweight, JavaScript framework.

Configuration

You do not really ned to configure nothing to be able to use them, but in case you want to know some details here it goes.

Colors

On Wicked Blocks we are using our own colors, so when you copy-paste the blocks you will see the default palette unless you are also using custom colors and names as Tailwind does.
This are the colors we are using, this will rewrite Tailwind's custom colors because this color are name the same:
1
// Config file
2
blue: {
3
100: "#728cff",
4
200: "#4d6bff",
5
300: "#4354fe",
6
400: "#3546ee",
7
500: "#313ed1",
8
},
9
yellow: {
10
100: "#fffbea",
11
200: "#f9e7a4",
12
300: "#f7da76",
13
400: "#f4ce49",
14
500: "#f1c21b",
15
16
},
17
gray: {
18
19
50: "#f3f3f6",
20
100: "#bbbcc9",
21
200: "#a5a6b7",
22
300: "#8f90a6",
23
400: "#555770",
24
500: "#28293e",
25
},
26
27
black: "#555770",
28
Copied!

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.
The fonts is IBM Plex Sans.
Get more fonts here:
  • https://fonts.google.com/
1
2
fontFamily: {
3
mono: ['"IBM Plex Mono"', "ui-monospace"], // Ensure fonts with spaces have " " surrounding it.
4
sans: [
5
'"IBM Plex Sans"',
6
'system-ui',
7
'-apple-system',
8
'BlinkMacSystemFont',
9
'"Segoe UI"',
10
'Roboto',
11
'"Helvetica Neue"',
12
'Arial',
13
'"Noto Sans"',
14
'sans-serif',
15
'"Apple Color Emoji"',
16
'"Segoe UI Emoji"',
17
'"Segoe UI Symbol"',] // Ensure fonts with spaces have " " surrounding it.
18
},
19
20
Copied!

Icons

All of the icons we use in Wicked Blocks 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 Blocks

Images

We use images from Unsplash and Figma Community.
Last modified 24d ago