title | layout |
---|---|
Assets |
../../layouts/Docs.astro |
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
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">
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}]
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
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)
Responsive font sizes used for markdown
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
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
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
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
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
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
Styles links with the link color from minecrafts old website and adds underline on hover
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
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
Varients: 75 / 50 / 25
Transparent black backgrounds, used to darken block backgrounds
Zoom: 24
(scrollbar-thumb)
Minecraft styled scrollbar
Zoom: 10
Minecraft styled menu/option button
Zoom: 24
The raised slot UI element can be used an an interactable button
Zoom: 24
The enchanting slot UI element can be used an an interactable button
Zoom: 10
UI panel with a transparent background
Zoom: 10
UI panels that look like the background of an inventory or chest
Zoom: 10
UI panel but dark
Zoom: 10
UI achievement panel with a transparent background
Zoom: 10
UI panel that looks like an achievement notification
Zoom: 24
Inventory/Chest item slot border
Zoom: 24
Inventory/Chest item slot border with background
Zoom: 24
The raised slot UI element with a transparent background
Zoom: 24
The opposite of the slot UI element, looks like a raised area instead of a recessed one
Zoom: 24
The raised slot button when on hover
Zoom: 24
The raised slot button when active or focused
Zoom: 24
The slot UI element used in game when choosing an enchant
Zoom: 24
The enchanting slot button when on hover
Zoom: 24
The enchanting slot button when active or focused
Zoom: 16
The textbox used in anvils
Zoom: 16
Active version of anvil textbox
ID | Name | Description |
---|---|---|
265 | Iron Ingot | A ingot of iron, used for crafting |
266 | Gold Ingot | A ingot of gold, used for crafting |
264 | Diamond | A diamond, used for crafting |
Styles table elements to look like in game inventories like chests
Zoom: 4
Styles the borders and background of an element to look like a minecraft map
Zoom: 4
Styles the borders and background of an element to look like a minecraft book
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
This is a theme structure/asset overview explaining where all assetes are located and how they interact with the theme
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
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
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 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
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 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
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
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
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 withfitted
aspect ratio - Crop image after downloading
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