DOCSEARCHbyAlgolia
Submit Docs

Neoblaze Documentation

website·Indexed 30 days ago

https://neoblaze.vercel.app/

A component library and utility framework for building responsive websites. Neoblaze provides pre-built components such as buttons, cards, accordions, and navigation, alongside a comprehensive set of utilities for typography, colors, flexbox, grid, and layout management.

Tokens
19K
Snippets
140
Records
155
Agent score
75%

What's inside Neoblaze

  2. Overview of Neoblaze UI Library

    Neoblaze is a UI component library designed to accelerate website development. It provides pre-built components for rapid deployment, responsive grid layouts for multi-device compatibility, and supports extension via SASS and built-in utilities for custom styling.

  3. Understand the Neoblaze CSS design philosophy

    Neoblaze CSS is built on the principle that design should be judged by its visual impact and ability to evoke emotion rather than rigid rules. The framework combines data-driven research to ensure broad visual appeal with a focus on the 'designer's eye,' resulting in a responsive and customizable set of styles intended to make web design effortless.

  4. Use Neoblaze utility classes for rapid styling

    Neoblaze provides a comprehensive set of utility classes designed to style text, colors, and layouts without writing custom CSS rules. These classes serve as building blocks for complex components and layouts, enabling developers to apply consistent styles across multiple elements efficiently and implement responsive design for various device sizes.

  5. Include Neoblaze via CDN

    Quickly add Neoblaze to your project by including the minified CSS file from jsDelivr in your HTML <head>.
    <link href='https://cdn.jsdelivr.net/npm/neoblaze@0.1.3/dist/css/neoblaze.min.css' rel="stylesheet" crossorigin="anonymous">

  6. Apply margin using spacing utilities

    Use the .m-{side}-{size} pattern to apply margin. Available sides include t (top), r (right), b (bottom), l (left), x (horizontal), and y (vertical). Use .m-{size} for margin on all sides. The auto size can be used (e.g., .mx-auto) to center elements.
    <div class="m-4">All sides</div>
<div class="mt-4">Top</div>
<div class="mr-4">Right</div>
<div class="mb-4">Bottom</div>
<div class="ml-4">Left</div>
<div class="mx-auto">Horizontal Auto</div>
<div class="mx-6">Horizontal</div>

  7. Use responsive spacing utilities

    Apply responsive padding, margin, or gaps by inserting the breakpoint into the utility class: {p|m}-{side}-{breakpoint}-{size} or gap-{x|y}-{breakpoint}-{size}.
    <!-- Padding 8 by default, padding 4 on small screens and up -->
<div class="p-8 p-sm-4">Responsive Padding</div>

<!-- Margin medium breakpoint -->
<div class="m-md-4">Responsive Margin</div>

<!-- Gap medium breakpoint -->
<div class="gap-md-4">Responsive Gap</div>

  9. Apply responsive display utilities

    NeoBlaze display utilities support responsive breakpoints using the format d-{breakpoint}-{value}. To implement responsive designs, apply multiple classes to an element to change its display behavior at different screen sizes.
    <!-- Hidden on extra small (xs) screens, block on all others -->
<div class="d-block d-xs-none">...</div>

<!-- Inline-block by default, but flex on medium (md) screens and up -->
<div class="d-inline-block d-md-flex">...</div>

<!-- Block on medium (md) screens, inline-block on others -->
<div class="d-md-block d-inline-block">...</div>

  10. Apply responsive flexbox utilities

    Flexbox utilities can be made responsive by inserting the breakpoint name between the utility prefix and the property. The format is flex-{breakpoint}-{property} (e.g., flex-md-column or flex-sm-grow-1).
    <!-- Flex container that switches to column layout on small screens and above -->
<div class="d-flex flex-sm-column">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

  11. Extend the color palette in SCSS

    To add new brand colors, extend the $theme-colors map in your SCSS files. Neoblaze will automatically generate the necessary utility classes (e.g., bg-{your-color}, fg-{your-color}) based on the keys added to the map.
    // src/scss/helpers/variables/_theme_colors.scss

$theme-colors: (
  "brand-color": #ff5733,
  "brand-color--light": #ffb3a1,
  // ... other shades
);

  12. Stack columns at specific breakpoints

    To stack columns vertically at a specific breakpoint, combine responsive column classes with the flex-{breakpoint}-column utility to change the flex direction of the container.
    <div class="d-flex flex-sm-column gap-4">
	<div class="col-8 col-md-6 col-sm-12 p-2">col-8 col-md-6 col-sm-12</div>
	<div class="col-4 col-md-6 col-sm-12 p-2">col-8 col-md-6 col-sm-12</div>
</div>