How it works

The ./public folder contains all of the themes assets including textures, fonts, CSS, etc.

The ./tailwind.config.cjs file uses the ./public folder to extend tailwinds classes into minecraft themed classes

The ./src folder contains the structure of your website. It comes with some examples on how to use the Minecraft theme to create your own pages, layouts, and components. All examples use HTML with classes, zero JS and CSS

Styles

In order to access classes and textures your page must include the following link tags on your page:

<link rel="stylesheet" href="/css/minecraft.css">

CSS variables

--block-size:

Default: 48px

The size of a block on your website, controls the sizing of all minecraft styling (UI, Blocks, Items, etc), every class is sized relative to this property to keep everything the same size. Its value should be a multiple of the 16px, the size of a block texture, to avoid image scaling issues

You can set the block size of an element using a class like: [--block-size:{number}]

--zoom:

This property allows you to zoom the UI classes in and out by increasing or decreasing the widths of border-images.

Use the class [--zoom:{number}] to easily ‘zoom’ UI textures in and out

--{number}-block:

Varients: 1/16 / 1/8 / 1/4 / 1/2 / 1-32

CSS variables for sizing properties relative to --block-size

EX: var(--1/2-block), var(--1-block), var(--32-block)

--fluid-(0-9):

Responsive font sizes used for markdown

Tailwindcss Classes

One of the main jobs of the tailwind config is to read all file names inside the ./public/imgs folder and assign each file a bg- class. This makes it easy to use the textures inside ./public/imgs by calling a class like bg-block-stone or bg-item-diamond

Note: Use the ./public folder to lookup filenames in order to use these classes

bg-{filename}:

All blocks in the ./public/imgs/block folder will create a block background class that look like: bg-block-{filename} Ex: bg-block-dirt bg-block-gold-block

bg-item-{filename}:

All items in the ./public/imgs/items folder will create a item background class that look like: bg-item-{filename} Ex: bg-item-cake bg-item-diamond

bg-painting-{filename}:

All paintings in the ./public/imgs/paintings folder will create a painting background class that look like: bg-painting-{filename}Ex: bg-painting-skull bg-painting-kebab

{number}-block:

1/16 / 1/8 / 1/4 / 1/2 / (1-99)-block

This theme extends tailwinds spacing property to add block based spacing/sizes Ex: w-1-block p-1/2-block h-9-block

Classes

Many of the minecraft styles and textures are hard to write as tailwindcss classes, these classes make it easy and simple to add minecraft styles to your elements without tailwindcss

link:

Styles links with the link color from minecrafts old website and adds underline on hover

text-shadow:

Varients: none / xs / sm / md / lg / xl

Applys the classic black text shadow from minecraft to text, use larger text shadows text-shadow-xl on larger text sizes for a better minecraft look

markdown:

Classless styling on all child elements, used to style html that is parsed from .md files, use on a parent that wraps your markdown html

bg-dark:

Varients: 75 / 50 / 25

Transparent black backgrounds, used to darken block backgrounds

scrollbar:

Zoom: 24 (scrollbar-thumb)

Minecraft styled scrollbar

button:

Zoom: 10

Minecraft styled menu/option button

raised-slot-button:

Zoom: 24

The raised slot UI element can be used an an interactable button

enchainting-slot-button:

Zoom: 24

The enchanting slot UI element can be used an an interactable button

transparent-panel:

Zoom: 10

UI panel with a transparent background

panel:

Zoom: 10

UI panels that look like the background of an inventory or chest

panel-dark:

Zoom: 10

UI panel but dark

transparent-achievement-panel:

Zoom: 10

UI achievement panel with a transparent background

achievement-panel:

Zoom: 10

UI panel that looks like an achievement notification

transparent-slot:

Zoom: 24

Inventory/Chest item slot border

slot:

Zoom: 24

Inventory/Chest item slot border with background

raised-slot:

Zoom: 24

The raised slot UI element with a transparent background

raised-slot:

Zoom: 24

The opposite of the slot UI element, looks like a raised area instead of a recessed one

raised-slot-hover:

Zoom: 24

The raised slot button when on hover

raised-slot-active:

Zoom: 24

The raised slot button when active or focused

enchanting-slot:

Zoom: 24

The slot UI element used in game when choosing an enchant

enchanting-slot-hover:

Zoom: 24

The enchanting slot button when on hover

enchanting-slot-active:

Zoom: 24

The enchanting slot button when active or focused

anvil-textbox:

Zoom: 16

The textbox used in anvils

anvil-textbox-active:

Zoom: 16

Active version of anvil textbox

table:

Styles table elements to look like in game inventories like chests

map:

Zoom: 4

Styles the borders and background of an element to look like a minecraft map

book:

Zoom: 4

Styles the borders and background of an element to look like a minecraft book

sign:

Styles the text and background of an element to look like a minecraft sign, mimics the way signs work by centering text and wrapping on new lines

Theme Structure

This is a theme structure/asset overview explaining where all assetes are located and how they interact with the theme

Tailwind Config

The tailwind configuration located at projects root ./tailwind.config.cjs reads texture files from the ./public/imgs folder and creates new bg- classes for every texture in the blocks, items, paintings, and icons folders. This allows you to easily add, remove, or modify textures and use them on your website with only a class. The config also generates block based spacings like 1-block and up to 99-block that can be used with other tailwind classes for sizing based on block size EX: p-1/16-block w-3-block h-5-block

Minecraft.css

minecraft.css located in ./public/css uses assets from ./public/fonts and ./public/imgs to create easy to use minecraft styled classes and is the central location for all minecraft styles that are not generated using tailwindcss

Textures

Blocks

Blocks textures are stored in the ./public/imgs/blocks folder. All textures from this folder are parsed into classes like bg-block-{filename}, to add blocks to the theme just add a texture to the block folder

Items

Items textures are stored in the ./public/imgs/items folder. All textures from this folder are parsed into classes like bg-item-{filename}, to add items to the theme just add a texture to the item folder

Paintings

Painting textures are stored in the ./public/imgs/paintings folder. All textures from this folder are parsed into classes like bg-painting-{filename}, to add paintings to the theme just add a texture to the painting folder

UI

UI textures are stored in the ./public/imgs/ui folder, these textures include buttons, scrollbar, panels, and more. Each of these textures have been assigned a class inside the ./public/css/minecraft.css file, a full list of all ui classes can be found here

Icons

Icon textures are stored in the ./public/imgs/icons folder. All textures from this folder are parsed into classes like bg-icon-{filename}, this makes adding icons to the theme as easy as adding a texture to the icons folder

Fonts

The theme comes preloaded with 5 different community made fonts located in ./public/fonts and are imported into the project using ./public/css/minecraft.css, if you want to add your own fonts add your font files to ./public/fonts and define a @fontface rule inside the minecraft.css file

Project Logo

The logo located at ./public/imgs/project-logo.png was generated using textstudio

This project used the following settings:

• Zoom: 36%
• Line Spacing: 10%
• Use default for character spacing and rotation
• Use the Minecrafter Regular font
• Navigate to the background tab and uncheck Background or Transparent to make background transparent
• Navigate to the download tab and select Medium quality with fitted aspect ratio
• Crop image after downloading

Favicon

The default favicon is a grass block, this can be replaced by converting a texture to a .ico file, renaming it to favicon.ico, then replacing the old favicon inside the ./public folder