How It Works?

Blueprint is a reusable component library that helps contributors build UIs faster. The goal is to make building durable UIs more productive and satisfying:

FreeBootstrap.net image placeholder
1
Get Blueprint

Download the library files from the source or Git repository.
Grab the complete package, including HTML templates, SCSS theme folders, and reusable components. You can also clone the repository directly into your project.

FreeBootstrap.net image placeholder
2
Pick a Theme

Use a built-in theme or create your own.
Choose from pre-styled themes, or configure a custom one using SCSS variables for colors, fonts, and spacing—all in one place.

FreeBootstrap.net image placeholder
3
Plug It In

Integrate into your CMS, backend, or static site.
Blueprint works with WordPress, Contentful, Laravel, Django, or plain HTML—no JavaScript frameworks required. Drop in the components and styles, and you're ready to go.

4
Customize Easily

Extend and style it to match your project needs.
Use Blueprint's modular SCSS structure to override styles, adjust layouts, or add accessibility tweaks—without touching the core code.

27+ Flexible UI Components

A modern and accessible UI kit crafted for brand-driven digital platforms. Blueprint's components are responsive, themeable, and built to deliver consistent design across enterprise, education, and public-facing websites.

Sample Form 

                                                    <form class="form-signin">
    <h2>Please login</h2>
    <input type="text" name="username" placeholder="Email Address" required="" class="form--text--input">
    <input type="text" name="password" placeholder="Password" required="" class="form--text--input">
    <div class="form-check-label-row">
        <label class="form-check-label form-label-sm" for="remember-me">
            <input type="checkbox" id="remember-me" class="form-check-input" aria-label="Checkbox" /><span
                class="form-check-label__text">Remember me</span>
        </label>
    </div>
    <button type="button" class="btn btn--mid btn--primary" aria-label="Mid Button">Login</button>
</form>

Alert

                                                    <div class="bp--alert para--four display--flex alert-success">
   <span class="blueprint-icon icon-success icon-1x"></span>
   <div class="bp--alert--text text-black">This is an Success alert!
   </div>
   <div class="bp--alert--close"> <button class="btn btn--regular" aria-label="Close"> <span
      class="blueprint-icon icon-bp_1_close icon-1x"></span> </button> </div>
</div>
<div class="bp--alert para--four display--flex alert-failure">
   <span class="blueprint-icon icon-warning icon-1x"></span>
   <div class="bp--alert--text text-black">This is an Failure alert!
   </div>
   <div class="bp--alert--close"> <button class="btn btn--regular" aria-label="Close"> <span
      class="blueprint-icon icon-bp_1_close icon-1x"></span> </button> </div>
</div>
<div class="bp--alert para--four display--flex alert-warning">
   <span class="blueprint-icon icon-warning icon-1x"></span>
   <div class="bp--alert--text text-black">This is an Warning alert!
   </div>
   <div class="bp--alert--close"> <button class="btn btn--regular" aria-label="Close"> <span
      class="blueprint-icon icon-bp_1_close icon-1x"></span> </button> </div>
</div>
This is an Success alert!
This is an Failure alert!
This is an Warning alert!

Chip

                                                    <a class="chip display--inline-block position--relative variant-1" href="#">
<span class="chip__icon--before blueprint-icon icon-success"></span>
<span class="chip__value display--inline-block">Chip!</span>
</a>
<a class="chip display--inline-block position--relative variant-1 status-active" href="#">
<span class="chip__icon--before blueprint-icon icon-duration"></span>
<span class="chip__value display--inline-block">Chip!</span>
</a>
<a class="chip display--inline-block position--relative variant-1 status-locked" href="#">
<span class="chip__icon--before blueprint-icon icon-locked"></span>
<span class="chip__value display--inline-block">Chip!</span>
</a>
<a class="chip display--inline-block position--relative variant-1 status-incomplete" href="#">
<span class="chip__icon--before blueprint-icon icon-info"></span>
<span class="chip__value display--inline-block">Chip!</span>
</a>
Chip! Chip! Chip! Chip!

Button

                                                    <button type="button" id="button" class="btn btn--large btn--primary btn--icon-left" aria-label="Learn More"><span
   class="material-symbols-outlined">upload</span>Learn More</button>
<button type="button" id="button" class="btn btn--large btn--secondary btn--icon-left" aria-label="Upload Resume"><span
   class="material-symbols-outlined">upload</span>Upload Resume</button>
<button type="button" id="button" class="btn btn--large btn--reverse btn--icon-left" aria-label="Upload Resume"><span
   class="material-symbols-outlined">upload</span>Upload Resume</button>
<button type="button" id="button" class="btn btn--large btn--reverse-border btn--icon-left"
   aria-label="Upload Resume"><span class="material-symbols-outlined">upload</span>Upload Resume</button>
<button type="button" id="button" class="btn btn--large btn--wide btn--secondary">Wide Button</button>

Blueprint Icons & Visual Identity

Iconography refers to the use of symbols or icons to represent actions, objects, or ideas in a user interface. Icons enhance usability, improve navigation, and make interfaces more visually appealing.

Visual Identity

  • Customize your experience with Blueprint's semantic icon system. Built on Bootstrap Icons, our components remain visually consistent and scalable across branding themes..
  • Blueprint supports icon-rich components like forms, alerts, navigation menus, and content cards, ensuring they remain accessible and WCAG-compliant across your design system.
Blueprint Icon Set - Semantic Icon Collection

Customizable Templates For Every Need

A curated library of responsive, themeable templates built with the Blueprint UI system. Each template is crafted for performance, accessibility, and fast time-to-launch.

post-thumb post-thumb post-thumb post-thumb

What Makes Us Different Form Other?

Blueprint is designed with a clear focus on institutions, executive education, and enterprises that demand high standards of branding, layout control, and accessibility.

Framework Agnostic

Fully functional with any HTML/CSS setup. Blueprint doesn't rely on JavaScript frameworks like React, Angular, or Vue, ensuring compatibility with legacy systems and modern platforms alike.

SCSS Modular

Built with SCSS, Blueprint allows developers to import only what they need. This modular structure helps in optimizing bundle sizes and custom builds.

CMS Compatible

Works seamlessly with popular CMSs like WordPress, Drupal, and Contentful. Its clean HTML/CSS foundation makes it easy to integrate into templating systems and headless CMS workflows.

Multi-Brand Theming

Institutions or agencies can define and switch between multiple themes using SCSS variables. Perfect for white-labeling, branding at scale, or multilingual/multi-campus sites.

Accessible by Default

Semantic HTML and ay best practices are baked in, so there's minimal retrofitting required to meet WCAG and institutional compliance standards.

CDN & Local Hosting

Blueprint can be hosted via CDN for fast prototyping, or locally for production-grade control over versioning and builds.

move_up