Build Blocky Pixelated Web Designs With Minecraft.css

Category: CSS & CSS3 , Frameworks | September 16, 2024
0 Comment
Demo Download
Author:Jiyath5516F
Views Total:283 views
Official Page:Go to website
Last Update:September 16, 2024
License:MIT

Preview:

Build Blocky Pixelated Web Designs With Minecraft.css

Description:

Minecraft.css is a lightweight CSS framework that brings Minecraft’s iconic look to web design. It includes buttons, cards, forms, modals, and navigation components styled in the game’s blocky aesthetic. It’s ideal for creating websites or web applications with a playful, retro feel.

This framework lets web developers create websites with Minecraft’s visual style quickly. It’s useful for game-related websites, fan pages, or any project wanting a playful, retro, pixelated look.

How to use it:

1. Download the Minecraft.css package and include the main stylesheet minecraft-css-framework.css in your HTML document’s <head> section:

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

2. Add elements and UI components to your page using the provided classes. Here are a few examples:

<!-- Navigation Bar -->
<nav class="navbar">
  <div class="navbar-brand">Minecraft.CSS</div>
  <ul class="navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
<!-- Modal -->
<div id="example-modal" class="modal">
  <div class="modal-header">Modal Title</div>
  <div class="modal-body">This is a modal body.</div>
  <div class="modal-footer">
    <button class="button button-primary">Close</button>
  </div>
</div>
... more components here ...

3. Since Minecraft.css is built with pure CSS, modal functionality (opening and closing) requires a bit of JavaScript. You’ll need to toggle the modal-open class on the modal’s main container:

// open the modal
var element = document.getElementById("example-modal");
element.classList.add("modal-open");
// close the modal
var element = document.getElementById("example-modal");
element.classList.remove("modal-open");

4. You can customize the framework’s styles by modifying the source files in the /src directory. Alternatively, you can directly override the default CSS variables defined in the :root section. This allows you to adjust colors, fonts, and other aspects of the framework to better suit your project’s needs.

:root{
  --primary-color:#313233;
  --secondary-color:#48494a;
  --accent-color:#d0d1d4;
  --background-color:#48494a;
  --text-color:#fff;
  --text-dark-color:#000;
  --link-color:#007bff;
  --error-color:#dc3545;
  --success-color:#28a745;
  --warning-color:#ffc107;
  --info-color:#17a2b8;
  --selected-color:#48494a;
  --hr-top-color:#333334;
  --hr-bottom-color:#5a5b5c;
  --btn-primary-inner-color:#3c8527;
  --btn-primary-inner-hover-color:#2a641c;
  --btn-primary-inner-shadow-color:#1d4d13;
  --btn-primary-border-color:#1e1e1f;
  --btn-primary-inner-border-lt-color:#4f913cbf;
  --btn-primary-inner-border-br-color:#639d52;
  --btn-primary-text-color:#fff;
  --btn-secondary-inner-color:#7345e5;
  --btn-secondary-inner-hover-color:#5d2cc6;
  --btn-secondary-inner-shadow-color:#4a1cac;
  --btn-secondary-border-color:#1e1e1f;
  --btn-secondary-inner-border-lt-color:#a264f2bf;
  --btn-secondary-inner-border-br-color:#8e49eb;
  --btn-secondary-text-color:#fff;
  --btn-tertiary-inner-color:#d0d1d4;
  --btn-tertiary-inner-hover-color:#b1b2b5;
  --btn-tertiary-inner-shadow-color:#58585a;
  --btn-tertiary-border-color:#1e1e1f;
  --btn-tertiary-inner-border-lt-color:#ecedeebf;
  --btn-tertiary-inner-border-br-color:#e3e3e5;
  --btn-tertiary-text-color:#000;
  --btn-normal-inner-color:#c6c6c6;
  --btn-normal-border-color:#131313;
  --btn-normal-inner-border-lt-color:#f7f7f7bf;
  --btn-normal-inner-border-br-color:#656465;
  --btn-normal-text-color:#4c4c4c;
  --btn-normal-inner-hover-color:#218306;
  --btn-normal-border-hover-color:#fff;
  --btn-normal-inner-border-lt-hover-color:#17cd07bf;
  --btn-normal-inner-border-br-hover-color:#004e00;
  --btn-normal-text-hover-color:#fff;
}

See Also:

You Might Be Interested In:

Leave a Reply