Table of contents

What is Neoblaze

Neoblaze is a modern css framework that helps you build beautiful interfaces with blazing speed. Neoblaze is a pure css framework with prebuilt components and different utilities that make it extremly modular and easy to customize.

Why Neoblaze?

Neoblaze makes it easy to build a modern grid based layout. It has support for different types of layout utilities and grid layout. With best in class documentaion, semantic classes it makes designing interfaces more intuitive and fun.

Getting Started

We will be building a minimalist portfolio with neoblaze. Let's get started by importing latest version Neoblaze from a cdn.

 https://cdn.jsdelivr.net/npm/[email protected]/dist/css/neoblaze.min.css
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Portfolio</title>
        <link rel="stylesheet" href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/neoblaze.min.css'>
    </head>
    <body>
        <div class="min-height-screen bg-gray--light">
        </div>
    </body>
</html>

bg-gray--light to set background color with colors utility.

Navigation

<nav class="container mx-auto px-6">
    <ul class="d-flex flex-justify-around p-6">
        <li><a href="#">Jessica Don</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#contact">Let's Chat</a></li>
    </ul>
</nav>

The top navbar is built with flex utilities and container to center it.

Header Section

Neoblaze also has its own grid based layout to quickly build responsive layouts. The header section consists of commonly used two column layout.

In neoblaze layout class is used to define a grid container along with a layout type in this case layout--spacious-50-50 that divide a 12 column grid into 2 equal size columns. The layout columns are labeled as layout-main and layout-aside.

Header

<section class="container mx-auto px-6 py-10">
    <div class="layout layout--spacious-50-50">
      <div class="layout-aside place-self-center">
        <h1 class="heading-lg font-light leading-base">Hi, Iā€™m Jessica.</h1>
        <p class="body-lg mt-4">I am Jessica Don, a skilled digital designer and web developer working with brands across the globe.</p>
      </div>
      <div class="layout-main">
        <img class="img-full" src="https://images.unsplash.com/photo-1560087637-bf797bc7796a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&h=1040&q=80" alt="profile" title="Unsplash" />
      </div>
    </div>
</section>

Grid Section

The project section is a grid with repetitive 2 columns. A layout class is used to define a grid container along with a layout type in this case layout-2-col .

Projects Grid

<section class="container mx-auto px-6 py-10" id="work">
    <h2 class="title-sm mb-2 border-t bd-gray py-4">PROJECTS</h2>
    <div class="layout layout-2-col gap-6">
        <div>
            <div class="img-full">
                <img src="https://images.unsplash.com/photo-1674726253061-baba094ad8c7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="">
            </div>
            <div class="d-flex flex-justify-between title-sm py-4">
                <p>Btanio</p>
                <p>Design</p>
            </div>
        </div>
        <div>
            <div class="img-full">
                <img src="https://images.unsplash.com/photo-1675453987972-48f9d721281b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="">
            </div>
            <div class="d-flex flex-justify-between title-sm py-4">
                <p>Acconi</p>
                <p>Development</p>
            </div>
        </div>
        <div>
            <div class="img-full">
                <img src="https://images.unsplash.com/photo-1663094979869-008cff9ee311?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="">
            </div>
            <div class="d-flex flex-justify-between title-sm py-4">
                <p>Hanser</p>
                <p>Design & Development</p>
            </div>
        </div>
        <div>
            <div class="img-full">
                <img src="https://images.unsplash.com/photo-1676223796799-3c6a82b22d1e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="">
            </div>
            <div class="d-flex flex-justify-between title-sm py-4">
                <p>Ratioplt</p>
                <p>Design & Development</p>
            </div>
        </div>
    </div>
</section>

Footer

<section class="container mx-auto px-6 py-10" id="contact">
    <div class="text-center">
        <p class="title">Feel free to say hi.</p>
        <button class="btn btn-black rounded-full mt-2 px-8 py-4">GET IN TOUCH</button>
    </div>
<section>

Conclusion

Congrats!! šŸ„³šŸ„³ you just built your first site with Neoblaze. You can find the complete source code on codepen. Build amazing projects with Neoblaze and share it on twitter #madewithneoblaze. Thanks for reading.