DOCSEARCHbyAlgolia
Submit Docs

Minecraft CSS Framework

website·Indexed 30 days ago

https://legend077.github.io/framework-docs

A responsive CSS framework that changes the appearance of a website to match the Minecraft Bedrock and Java UI. Version 1.2.0 introduces additional features and allows users to apply styles by adding classes to elements.

Tokens
1K
Snippets
8
Records
10
Agent score
25%

What's inside Minecraft CSS Framework

  1. Overview of the Minecraft UI CSS Framework

    This CSS framework allows developers to change the appearance of a website to match the Minecraft Bedrock UI (with support for Java UI). The framework is responsive and supports all devices.

  2. Get started with the Simple framework

    The Simple framework is a Minecraft-inspired UI library (based on Bedrock and Java Editions). To use it, apply the framework's predefined classes directly to your HTML elements.

  3. Install Minecraft CSS framework via CDN

    To use the Minecraft CSS framework, include the stylesheet in the <head> section and the JavaScript asset at the end of the <body> section of your HTML file. It is recommended to use the latest version (v1.1.9).
    <!-- In <head> -->
<link rel="stylesheet" href="https://unpkg.com/minecraft-framework-css@1.1.9/css/main.css">

<!-- At the bottom of <body> -->
<script src="https://unpkg.com/minecraft-framework-css@1.1.9/css/assets/script.js"></script>

  4. Add Minecraft button click sounds

    To trigger the Minecraft random.click sound when a button is pressed, add the onclick="soundOn()" attribute to the button element. This requires the framework's JavaScript file to be linked.
    <button class="button" onclick="soundOn()">Click Me</button>

  5. Use Minecraft layout and UI components

    The framework provides several structural components to mimic the Minecraft UI.
    <!-- Centered Text -->
<div class="text-center">I'm Centered</div>

<!-- Header (Centered text) -->
<div class="header">Hello!</div>

<!-- Title (Large text) -->
<div class="title">Minecraft</div>

<!-- Container (Adds margin, padding, and background) -->
<div class="container">Content here</div>

<!-- Dialogue Box (Minecraft style borders) -->
<div class="dialogue-box">Dialogue text</div>

<!-- Image Border -->
<img class="img" src="image.png">

  6. Apply Minecraft background and text colors

    Use the following utility classes to change the background or text color of an element.
    <!-- Background Colors -->
<div class="bg-white">White Background</div>
<div class="bg-primary">Bluish Background</div>
<div class="bg-dark">Dark Background</div>
<div class="bg-warning">Warning Background</div>
<div class="bg-danger">Red/Danger Background</div>

<!-- Text Colors -->
<div class="text-white">White Text</div>
<div class="text-primary">Bluish Text</div>
<div class="text-dark">Dark Text</div>
<div class="text-warning">Warning Text</div>
<div class="text-danger">Red/Danger Text</div>

  7. Create Minecraft styled buttons

    The framework provides several button styles based on Minecraft editions. Note that these classes are intended for <button> elements and do not work with <a> links unless handled via JavaScript.
    <!-- Bedrock Edition: Normal -->
<button class="button">Click Me</button>

<!-- Bedrock Edition: Dark -->
<button class="button-dark">Click Me</button>

<!-- Java Edition: New -->
<button class="button-java">Click Me</button>

<!-- Java Edition: Old -->
<button class="button-java-old">Click Me</button>

<!-- Java Edition: Full Width (New and Old) -->
<button class="button-java-w">Click Me</button>
<button class="button-java-w-old">Click Me</button>

  8. Create Minecraft server-style forms

    Server forms mimic the UI found in servers like Hive. These classes provide the base structure, but additional custom CSS/HTML may be needed for full layout control.
    <!-- Simple Server Form -->
<form class="server-form">
    <label>Choose the Options!</label>
    <button class="button full-width">Click Me</button>
</form>

<!-- Server Form with Title -->
<form class="server-form-with-title">
    <div class="form-title">Choose the Options</div>
    <button class="button full-width">Click Me</button>
</form>

  9. Implement Minecraft custom cursors

    Custom cursors can be applied to specific elements or the <body> tag using the cursor attribute.
    <div cursor="arrow">Minecraft Arrow Cursor</div>
<div cursor="pointer">Console/PS4 Pointer Cursor</div>
<div cursor="default">Default Cursor</div>

  10. Style Minecraft form inputs

    The framework provides specific classes and types for Minecraft Bedrock Edition (MCBE) style inputs.
    <!-- Text Input -->
<input type="text" class="input-text">

<!-- Checkbox/Toggle (Standard and New) -->
<input type="checkbox">
<input type="checkbox" class="new">

<!-- Slider -->
<input type="range">

<!-- Dropdown -->
<select name="dropdown" id="dropdown">
      <option value="1">Option 1</option>
</select>