DEV Community: ThemeWagon

Best Open-Source UI Libraries: Create Intuitive SaaS Dashboards Effortlessly

ThemeWagon — Mon, 13 Apr 2026 08:56:47 +0000

TL;DR:
Many UI libraries offer a comprehensive modular architecture that improves automation, design consistency, and overall performance for SaaS dashboards. Several excellent options are available, including Flowbite, DaisyUI, HeroUI, Material UI, Chakra UI, and others, each with its strengths and ideal use cases.

Enhanced speed with minimal setup: Flowbite, Daisy UI

Enterprise-grade support with strong community: Material UI, Chakra UI, HeroUI

Advanced forms, tables, and filters: Ant Design, PrimeReact

Enhanced business features with SaaS patterns: SaaS UI v3, Hummingbird

While most open-source UI libraries offer advanced components for modern SaaS projects, some still struggle with issues such as generic dashboard designs, maintenance complexity, or handling mobile responsiveness. Moreover, not all component libraries meet the design standards of modern dashboard interfaces.

With these challenges in mind, we evaluated the leading options, comparing their performance, credibility & usability to pinpoint effective solutions. Based on these criteria, here are the best UI libraries you can rely on for modern SaaS dashboards in 2025:

Hummingbird

Hummingbird is the latest Tailwind component library with pre-built, production-ready components, built by ThemeWagon. It’s designed around Tailwind’s utility model that blends semantic class names with utility-first styling for cleaner markup. This creates a structured, maintainable architecture without compromising flexibility, making it easier to build scalable and consistent interfaces.

GitHub User Metrics

Users	Fork	Contributors	Watch	Star
01	09	06	01	42

Key Features

Reusable Tailwind UI components
TypeScript support, zero dependencies
Semantic classes for cleaner HTML
Works with any modern JS Framework

Ideal for SaaS apps, dashboards, and scalable web interfaces.

Flowbite

FlowBite is a robust UI library based on the Tailwind CSS approach that fills the gap between Tailwind’s utility classes and full component libraries. Its components are designed with accessibility in mind, ensuring quicker web application development in 2025. It also includes a pro version with a comprehensive set of advanced components that offer features for seamless user experiences.

GitHub User Metrics

Users	Fork	Contributors	Watch	Star
165K+	840+	92	47	9.1K

Key Features

Native support for dark mode
Works as a Tailwind plugin
Figma design system support
Flexible community support

Great for CRUD apps, admin panels, user management dashboards, etc.

Daisy UI

Built on Tailwind CSS, Daisy UI provides easy-to-use component classes that minimize repetitive utility code without sacrificing flexibility and quality. This makes Daisy UI a must-have for any developer. Likewise, it helps build beautiful, functional SaaS dashboards faster with excellent community support, ensuring page consistency.

GitHub User Metrics

Users	Fork	Contributors	Watch	Star
429K	1.6K	300	162	39.9K

Key Features

Smallest bundle size**
**Pure CSS library, zero JavaScript
Faster integration with React, Vue
30+ pre-built themes with dark mode

Perfect for rapid prototyping and small teams with short deadlines.

HeroUI

Hero UI (Formerly Next UI) is an advanced open-source UI library with strong production adoption, trusted by 72k+ users. All the components are built on React Aria, inheriting Adobe’s accessibility logic. It’s an SSR-optimized library that works seamlessly with the Next.js App Router. Moreover, the library enables a performance-focused design with mobile-first optimization, enhancing data-driven admin interfaces.

GitHub User Metrics

Users	Fork	Contributors	Watch	Star
73.3K	2K	279	90	27.9k

Key Features

Built on React Aria
Custom Tailwind plugins
Server-side rendering optimized
Modern, polished aesthetics by default

Suitable for marketing sites with interactive UIs, CRMs, and data-heavy dashboards.

Material UI

Material UI is the enterprise standard, offering a comprehensive UI library built on React. While deep customization can feel like fighting Material Design guidelines, it’s still one of the best solutions for projects prioritizing stability, accessibility, and new features. If you want support for rapid development and framework compatibility to benefit SaaS product development, Material UI is an ideal choice.

GitHub User Metrics

Users	Fork	Contributors	Watch	Star
2M+	32.8K	3070	1307	97.6K

Key Features

Native support for dark mode
Works as a Tailwind plugin
Figma design system support
Flexible community support

Ideal for building scalable, responsive, and visually appealing SaaS dashboards.

Kick-start your next project — explore 2025’s intuitive WebApp & Admin Templates now!

Chakra UI

This is another React component library with a strong developer community. It is popular for creating simple dashboards that emphasize developers’ productivity. If you need a wide range of accessible, themeable components, Chakra UI has you covered. Additionally, it provides rapid community support, ensuring seamless integration with modern development workflows.

GitHub User Metrics

Users	Fork	Contributors	Watch	Star
387K+	3.6K	782	201	40.1K

Key Features

Direct styling via prop-based API
WAI-ARIA compliant by default
Design token system for theming
Built-in accessibility features

Perfect for building simple, flexible, and accessible SaaS dashboards with minimal effort.

Ant Design

Another widely used enterprise-level UI library is Ant Design, built on React. Like MUI, it provides high-quality components that ensure design consistency and powerful form handling. Additionally, the layout utilities and internationalization support make it ideal for global SaaS platforms, while its rich component library ensures scalable performance for data-heavy applications.

GitHub User Metrics

Users	Fork	Contributors	Watch	Star
747K	54.4K	2352	239	97.2K

Key Features

Enterprise-ready data tables
Built-in internationalization (i18n)
Most comprehensive form systems
Built-in design language for consistent UI

Works well for projects requiring analytics platforms and extensive data management.

Mantine

Mantine addresses significant limitations of MUI and Chakra, such as opinionated design, larger bundle size for small projects, and heavy styling overrides. It improves the workflow with simple, predictable theming, production-ready components, a reusable hook system, and a lighter architecture. These strengths make it well-suited for SaaS product dashboards.

GitHub User Metrics

Users	Fork	Contributors	Watch	Star
92K+	2.2K	651	98	30.4K

Key Features

TypeScript-first design
Powerful and reusable hook system
Highly customizable with simple APIs
Server-side rendering friendly

Ideal for projects requiring flexible layouts, rich interactions, and fast iteration.

SaaS UI v3

SaaS UI is an advanced open-source UI library built based on Chakra UI, inheriting Chakra’s accessibility and theming. It is explicitly built to launch and scale SaaS products. It accelerates the development of beautiful B2B websites and dashboard-styled apps. The library also supports popular tools like Next.js, Chakra UI, and React Hook Form. Additionally, it offers both an open-source and a Pro version, with advanced, enterprise-ready features.

GitHub User Metrics

Users	Fork	Contributors	Watch	Star
14	168	38	14	1.6K

Key Features

Focuses on business features
Pre-built SaaS patterns
Works with Auth0, Supabase, Clerk
Opinionated structure

Suitable for fast-paced startups and solo founders, and production-level apps.

Radix UI

Radix UI is a headless React component library used by many design-forward companies like Vercel, Linear, WorkOS. It provides building blocks such as Popovers, Dialogs, Tabs, and Menus, providing developers full control over the UIs. Radix treats components as primitives and handles class names and styles correctly. So, you don’t run into a usual UI library problem while customizing. Also, primitives provide you with a blank slate to create a completely custom component.

GitHub User Metrics

Users	Fork	Contributors	Watch	Star
19	303	21	21	8K

Key Features

Headless components
Complete design freedom
Individual component installation
Composition-focused components

Ideal for design-driven, custom-brand SaaS apps requiring high-quality accessibility.

PrimeReact

PrimeReact is the “power tool” library, offering the most feature-complete DataTable in any React library. The library covers everything from effective charts to complex forms, with 100+ highly functional components that make it a requirement in building exclusive admin panels. It also offers a premium template library and Figma UI kits. Though it may not necessarily be a ‘perfect’ fit for every SaaS application, its advanced enterprise support can speed up any front-end design and development.

GitHub User Metrics

Users	Fork	Contributors	Watch	Star
52K	1.2K	349	77	8.2K

Key Features

Advanced data table
Built-in chart components
Easily integrable components
Built-in accessibility & responsive design

Works well for feature-heavy business apps with complex UI.

Quick Tip: Pick The Right UI for SaaS

There is always an ideal library for whatever you are working on. However, using an open-source UI library is only the initial step.

Want built-in SaaS features like billing and layouts: Saas UI v3
Need a structured design with strong component coverage: MUI or Ant Design
Prefer simplicity and great developer experience: Chakra UI and Mantine
Require complete design control: Radix UI

When it comes to performance, accessibility, and versatility, open-source UI libraries are unmatched. Choosing the correct UI library helps you improve SaaS dashboard development and scale efficiently.

Whether you’re aiming for robust component architecture or enterprise-grade applications, the libraries we’ve covered can provide a strong foundation to bring your vision to life. Besides, don’t hesitate to contribute back to the communities that power your product. Happy creating!

Frequently Asked Questions

• How important is TypeScript support in a UI library for SaaS development?

Very important. Strong TypeScript support enables higher-quality code maintenance and easier development, helping to ensure fewer bugs and faster scaling.

• What is the difference between Ant Design and Material UI?

Material UI is a React component library that follows Google’s Material Design Guidelines for modern, clean, and adaptable designs. Ant Design is a React component library focused on creating polished, enterprise-grade applications that follow business-oriented design principles.

• Is Radix Themes different from Radix UI?

Yes. Radix UI includes low-level, unstyled components for building accessible UIs. Radix Themes provides the same element with a pre-styled, complete design system. In short, Radix Themes are the styled version of Radix UI components.

• Can I use multiple UI libraries in one SaaS project?

Technically, possible, but not recommended due to styling conflicts and bundle size issues. It also increases the risk of trouble for future updates.

Need assistance meeting your project deadline?

settings and support icon With 12+ years of experience in website templates, we deliver custom solutions for the utmost customer satisfaction. Our team specializes in front-end development (React/Vue/MUI/Tailwind CSS), back-end development (Laravel/Node.js), UX/UI design, and SEO.

Let’s chat about your custom design.

From Go-To to Outgrown: Why Bootstrap Isn’t the First Choice for Devs in 2025

ThemeWagon — Sun, 17 Aug 2025 09:22:01 +0000

Bootstrap’s popularity is declining due to its limitations and lack of flexibility. Its drawbacks range from bloated CSS files, over-dependency on the Grid, generic design, dependency on JavaScript, to advanced customization difficulties. While CSS Grid and CSS Custom Properties replace Bootstrap’s grid system, additional CSS frameworks speed up development for current developers. As a result, Bootstrap is being outdated in the long run.

In today’s fast-evolving web development landscape, Bootstrap is experiencing a noticeable decline in popularity. Once a performance king with a massive community and plug-and-play components, it’s now making developers to look elsewhere for its default look and limited flexibility.

As developers grow more experienced and design priorities continue to shift, Bootstrap’s limitations are becoming harder to ignore.

In this blog, we’ll explore the drawbacks of Bootstrap and uncover the key reasons why it’s losing momentum in modern frontend development.
**
Design intuitive & fully responsive layouts! Learn how to use the symmetric design system of MUI Grid!**

Bootstrap’s Limitations: Why It’s Falling Behind

Although Bootstrap has set trends over the years, it comes with some limitations. The framework’s component styles and utility classes enforce a specific design approach, leading to an opinionated design system. This limits customization and slows down the adoption of modern development practices.

Some of these limitations are key reasons behind Bootstrap’s declining popularity:

Drawback	Developer Struggle
Bloated CSS	Imports the entire library, including unused components, resulting in oversized CSS bundles.
Rigid Grid System	The fixed 12-column grid feels outdated and limits layout flexibility.
Generic Look	Without heavy customization, Bootstrap sites often look alike and lack originality.
JS-Heavy Components	Many core features rely too much on JavaScript, hurting performance and accessibility.
Customization Pain	Deep customization requires digging into Sass variables or writing complex overrides.

Bootstrap’s Popularity: What’s Driving the Decline

Today’s web development is all about design freedom, easy framework integration, and smooth developer experiences. Bootstrap has faced difficulties to keep up with these new priorities for its imperative styling model. Which is why, developers have gradually moved away, and the framework has seen a steady decline in popularity.

Bootstrap’s declining popularity is caused by several key factors that reflect the evolving landscape of modern web development. Let’s check them out:

Emphasis on Custom Styles

Bootstrap sites often look identical, unless heavily customized. Deep customization requires heavy overriding of the default styles and modifying the SaaS variables. So, the effort it takes to ‘un-Bootstrap’ a design often becomes tiring. Therefore, it doesn’t help enough to create websites for distinctive brand identities.

Businesses like Spotify, Stripe, and Airbnb have already stopped using framework-based design. Industries are more focused on branding with unfamiliar or unique visual languages that set them apart from their rivals.

Besides, while efficient with the component-heavy approaches, Bootstrap makes it challenging to achieve truly custom web designs without significant overrides.

Take control of your front-end — customize everything! Start at $59.

Compatibility with Other Frameworks

Bootstrap’s core interactive components like modals, dropdowns, tooltips, carousels, offcanvas menus, and collapsible sections rely heavily on JavaScript to function. It creates –

Framework Conflicts: When working with modern JavaScript frameworks like React, Vue, or Angular, Bootstrap’s native JavaScript (written in vanilla JS or jQuery in earlier versions) can conflict with component lifecycles or reactivity.
Extra Payload: Even in Bootstrap 5 (which removed jQuery), many components still require you to include Bootstrap’s own JavaScript bundle. That adds more bytes to the final build.

React Bootstrap, ng-bootstrap, and Vue-Bootstrap exist to bridge the gap, but they add complexity and don’t always provide seamless integration that native solutions offer. You can’t just use one part without importing the whole library.

Moreover, many developers prefer framework-specific declarative UI logics and responsiveness across the frameworks, while Bootstrap still uses imperative APIs that trigger actions in JavaScript manually.

Evolution of CSS Layout Modules

Bootstrap’s popularity risen because it solved one of the biggest problems – layout, thanks to its powerful Grid system. But now, CSS layout modules ensure more flexibility and layout control than Bootstrap’s pre-defined Grid.

The native CSS features like – Flexbox, CSS grid, or Box Model simplifies creating complex layouts with less CSS overrides. They adapt automatically without specifying any breakpoints and provides more sophisticated responsive design.

Additionally, modern CSS features like container queries and responsive units such as clamp(), min(), and max() provide developers full design control without extra tools, while Bootstrap chose to stick with Flexbox for its core grid system.

Slow Adaption with New Design Trends

As web development evolves rapidly, projects are getting more complex. In this situation, developers require faster and stable updates or releases of their favorite frameworks. Unfortunately, Bootstrap seems to have struggled to deal with the new dev expectations.

Despite new updates such as improved utility classes or the removal of jQuery dependencies, Bootstrap is increasingly seen as outdated in modern web development standards.

While frameworks like Tailwind CSS release frequent updates with new utilities and improvements, Bootstrap’s major releases are less frequent and sometimes lag behind modern CSS features and design trends.

Explore the best Free & Premium Admin & Dashboard Templates to use in 2025!

Now, you might be thinking, “Many projects still run just fine using Bootstrap’s utility classes, so isn’t it still popular?”
Even if there are many challenges, Bootstrap is used by nearly 27% of websites according to recent statistics, indicating its ongoing popularity in specific use cases.

However, there are some Bootstrap sites that will still need rapid maintenance for the next 10 years. Hence, it’s true that the framework is aging. Also, if it doesn’t reinvent radically, there is a chance that this powerful CSS framework may be considered as an outdated practice in web development.

MUI Icons: How to Install & Customize for Consistent Design

ThemeWagon — Mon, 20 Jan 2025 12:20:14 +0000

Material UI has a massive UI component library, inspired by Google’s Material Design system, to empower React developers. These multi-type components have built-in designs, which assist developers in creating extraordinary designs. MUI icon is one of them. These icons help the design represent the tone of the author’s or company’s in a more effective way.

This blog post will discuss how to make the most of the MUI icons in your project, discussing step-by-step integration styling.

Getting Started with MUI Icons

Material UI library contains 2100+ material icons converted into SvgIcon components available under the “@mui/icons-material” package. These icons use the Material UI SvgIcon component to render the SVG path for each icon. Let’s begin installing the MUI icons.

Material UI Library Installation

Installing Material UI library with a React-based project is generally easier. To utilize Material UI icons in your project, you need to install the Material UI library as the “@mui/icons-material” depends on the “@mui/material” package. However, before installing the Material UI library, you must install the following dependencies:

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},

When you have these peerDependencies installed, it’s time to download and install the MUI icon packages. It is very useful, especially when importing several icons simultaneously. For installation of this package in your directory, use the code below:

// with npm
npm install @mui/icons-material

// with yarn
yarn add @mui/icons-material

Installing MUI SVG Icon API

If you want to use MUI SVG icons, you can use the SvgIcon wrapper. This package provides the Google Material Icons converted to SvgIcon components. It comes with built-in accessibility.

For installation use:

import SvgIcon from '@mui/material/SvgIcon';
// or
import { SvgIcon } from '@mui/material';

Besides, MUI allows you to use custom SVG icons using the MUI SvgIcon wrapper. It will be covered in the following sections.

Importing Material UI Icons

After installing the “@mui/icons-material” package, you have full access to the entire Material UI icon set. To import the icons in your project, add an import statement at the top of your project file, following these 2 options:

Option 1

import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';

import ThreeDRotation from '@mui/icons-material/ThreeDRotation';

Option 2

import { AccessAlarm, ThreeDRotation } from '@mui/icons-material';

If you want to import the icons by reducing bundle size, option 1 is the safest way. But some developers also choose option 2. After that, simply use the icon as a component in your JSX code, like this: <AccessAlarmIcon />.

For example:

Each Material UI icon includes 5 built-in themes. They are: filled (default), Outlined, Rounded, Two-tone, and Sharp. While importing these components, you can add these theme names to the icon name and get a default shape for the icons. For example, @mui/icons-material/MenuRounded gives a hamburger icon with a rounded theme.

See the following examples:

Customizing Material UI Icons

Like the most popular frameworks, Material UI icons have a built-in design and don’t require much modification. Yet, it’s better to change the color and size slightly to help it fit well with your design. Now, we will look at customizing the color and size of the MUI icons.

How to Change Material UI Icon Color

MUI icons by default inherit the original text color. However, you can customize icon color using the theme color properties (primary, secondary, action, error, and disabled) or using color codes.

Here, we get 5 home icons where the 1st icon color is the default original text color, the 2nd to 4th icon has the color according to the color properties, and the last one is pink as it was customized with color code.

How to Change Material UI Icon Size

The default size of the MUI icons is 24px. But you can modify it using the style property to add custom CSS font-size values such as “small,” “medium,” “large,” “inherit,” and “default.” You can also set a fixed size by using a specific number value.

From this code example, we get 3 home icons with different sizes. Since there was no customized color set, it took the original text color, and the 1st one has the default size. The other 2 icons are large, and customized fixed value size: 50 accordingly.

Additionally, you can also adjust the size using the fontSize property of the IconButton component. It allows specifying the size of the icon within the button itself.

How to use SVG Icons in Material UI

Material UI lets you create customized icons according to your branding style. The MUI icon set has createSVGIcon utility component that allows you to create custom MUI SVG icons for your project. Take a look at the following example:

Here, the createSvgIcon utility component wraps the element and the SVG path. The MUI SvgIcon component then inherits it as a child.

Using Material UI `Icon` Component

React allows the Icon component to add icons within Material UI. It displays any icon font that supports ligatures. The Icon also inherits the current text color, but you can also set it differently, like other MUI icons. To use the Icon component, simply wrap the icon name (font ligature) with it.


import Icon from '@mui/material/Icon';
<Icon>star</Icon>;

NB: When using the Icon font, it is important to include the Material Icons font as a prerequisite in your project.

This is an example of a font Icon.

How to Use Font Material Icons

The Icon component sets the correct base class name for Material Icons with the ‘filled’ variant. You just need to load the font you want to use, for example, Google Web Fonts. You can load the font using this:

<link
rel="stylesheet
href="https://fonts.googleapis.com/icon?family=Material+Icons
/>

To use other fonts, you can use custom fonts. For this, customize the baseline class using the baseClassName prop.

For example, if you want to use two-tone icons using the Icon component, load the font like this:

import Icon from '@mui/material/Icon';

<link
rel="stylesheet
href="https://fonts.googleapis.com/css?family=Material+Icons+Two+Tone
/>

It will import the two-tone Material Design variant.

You can also declare the baseClassName prop globally. It will let you use fonts directly and prevent you from constantly changing the prop, which will help you perform better.

const theme = createTheme({
  components: {
    MuiIcon: {
      defaultProps: {
        // Replace the `material-icons` default value.
        baseClassName: 'material-icons-two-tone',
      },
    },
  },
});

<Icon>add_circle</Icon>

This code snippet displays two-tone icons with Material Design and lets you design the font directly.

How to get the best out of a MUI Icon Set

Customizing MUI icons is necessary to match your branding or design approach. But there arises some misuse of the MUI icon set too. So we should follow some tips to get the best out of it:

Understanding Requirements: Gather your design requirements and goals. It will help you proceed with the suitable icons you need.
Importing Icons Individually: Importing icons individually helps optimize bundle size. So import only the icons you need. Example:

    import HomeIcon from '@mui/icons-material/Home';
    import SearchIcon from '@mui/icons-material/Search'

Using Correct Version: MUI icons also have different versions to work seamlessly with the corresponding MUI version. So, you must ensure your MUI icon set’s version matches your core version.
Accessibility: When necessary, use the {aria-label} or {title} attributes to make icons easier to read and use with screen readers.
Follow Design Consistency: Maintain consistency in using the icons throughout the application to ensure a cohesive design.

In conclusion, we’ve gone from understanding the fundamentals of Material UI icons to delving deep into the world of SVG icons to how these small design elements can change things. Although the world of icons may appear big and challenging to understand, it’s a fun place with lots of options if you know what you’re doing and have the right tools. Material UI provides versatile customization with its components and tools, so it becomes fun with MUI icons as well.

If you’re trying to explore Material UI for your next project, a better approach could be to find pre-built templates for a simpler access into the framework. Moreover, for a better insight into the framework and to find answers to the frequently asked questions about Material UI, explore our article on Material UI FAQs.

Material UI Grid System: MUI Grid v2 for Responsive Design

ThemeWagon — Thu, 28 Nov 2024 06:57:26 +0000

In web design, a grid system is the ideal way to establish any web application’s aesthetic value and user experience. To meet the accelerating demand for mobile-first web designs among businesses and stakeholders, popular web design frameworks, including Material UI (MUI) are working to develop responsive design systems.

This article will emphasize the latest version of MUI grid- Material UI Grid v2. The new MUI Grid is more developer-friendly and offers smoother customization options. Additionally, we will cover everything from ways to migrate from the older versions to the latest, to the basic customization concepts of the MUI grid system, exemplifying with a simple responsive card design with it.

In this blog, we will uncover the Material UI Grid System to help you create visually consistent layouts without blemishing the flexibility of the web pages. It will further help you enhance and optimize the performance of your websites.

What is Material UI Grid System?

The large component library of Material UI avails a distinct Grid component to facilitate your MUI project. You can establish an MUI Grid System, incorporating the Grid component in your project.

Additionally, MUI Grid v2 uses the CSS Flexbox for better flexibility. So, a basic understanding of the way CSS Flexbox works may provide additional insight into the MUI grid system.

Previously, the MUI Grid system had two properties: containers and items. The grid container was the parent or wrapper that organized child components (grid items) in a flex box-like layout. It used to contain one or more grid items with spacing, alignment, styling, or other properties. Grid items referred to the child elements that availed a certain amount of grid layout and specified a particular element’s behavior on the viewport.

To make coding more efficient, the updated version MUI Grid v2 has introduced a grid that functions simultaneously as an item and a container. We will discuss it elaborately in the following sections.

:: Remember that, the MUI Data Grid and the Material UI Grid component are two completely different things. MUI Data Grid displays tabular data from a dataset, while MUI Grid component is actually a layout grid for creating responsive layouts.

Starting with the Installation of MUI Grid v2

Before using the MUI Grid v2, you need to add the “@mui/material” package to your project.

npm install @mui/material @emotion/react @emotion/styled // or, yarn add @mui/material @emotion/react @emotion/styled

After adding the package, import the grid component using the following:

import Grid2 from '@mui/material/Grid2'; // or import { Grid2 } from '@mui/material';

Material UI Grid v2 Container prop for Responsive Design

As mentioned above, Grid is now an item in MUI Grid v2. The grid will act both as a container and an item, like a flex item, always in the latest MUI Grid. Grid items refer to the child elements that take a certain amount of grid layout and specify a particular element’s behavior on the viewport. Instead of the item prop, you can use the container prop and implement the necessary customization.

Follow the example below:

import React from 'react';
import { Grid2 } from '@mui/material';

function MyComponent() {
  return (
    <Grid container>
      <Grid {sizing or spacing values here}>
        {Content goes here}
      </Grid>
    </Grid>
  );
}

Migrating to Material UI Grid v2

The older version of MUI Grid is deprecated, and it’s recommended that you migrate to Grid v2 for smoother use with intuitive layouts for your project. If you’re curious about why you should use the updated version and migrate, check the following paragraph. Or else, you might want to to skip it.

Why You Should Migrate to Material UI Grid v2

The latest Grid v2 offers several changes, ease of customization, and fixes difficulties of previous versions. The key considerations are listed below:

In the MUI Grid v1, there were some limitations with negative margins, spacing issues with full-width items or layout shifting, not creating proper gutter in v5, etc. These problems are fixed in Material UI Grid v2.
The Grid component has been completely rewritten with calc() and CSS variables in Grid v2. As a result, the negative margin spreads equally on all sides by default.
In MUI Grid v2, Grid is an item itself, which works similarly to the Flexbox in CSS. This new Grid2 automatically handles the size of long texts for its container. So, the item and zeroMinWidth props are removed, and you can define breakpoints, spacing, or customization values for your layout with less code.

-<Grid item zeroMinWidth xs={6}> +<Grid xs={6}>

The latest version also fixed the limitation on nested grids and added the offset prop, which refers to adding space or gaps before a grid item. This ensures the item is positioned further along the row without content directly adjacent to it.
A new prop called disableEqualOverflow is introduced, which solves the issue of unwanted scrollbars appearing on small viewports. It also lets you use the negative margins as the Grid v1 if needed.

Now that you know about the latest version of MUI Grid, it’s time to start the migration part. Remember that, there are different MUI versions available, and the migration steps and APIs vary for each.

Migration for Material UI v4 and v5

The MUI Grid v2 was introduced in MUI v5. So, if you are a Material UI v4 user, you need to migrate Material UI v4 to Material UI v5 to use the MUI Grid v2. Let’s see how to do that:

First, upgrade the React.js and Typescript versions. Your React version should be updated to at least v17.0.0; if you’re using TypeScript, update it to at least v3.5. Also, update the packages below if your project is using them: “react-scripts,” “@types/react,” and “@types/react-dom”.

npm install @material-ui/core@^4.11.2 react@^17.0.0 or, yarn upgrade @material-ui/core@^4.11.2 react@^17.0.0

:: Use at least the Material UI v4.11.2 package and make sure all applications are running correctly before starting all the steps.

Second, set up the ThemeProvider at the root of your app. Third, install the packages of MUI v5 using the following:

npm install @mui/material @mui/styles or, yarn add @mui/material @mui/styles

Install the new packages of @material-ui/lab or @material-ui/icons, if you’re using them.

For @material-ui/lab:

npm install @mui/lab or, yarn add @mui/lab

For @material-ui/icons:

npm install @mui/icons-material or, yarn add @mui/icons-material

Add Emotion packages for the new peer dependencies in MUI v5.

npm install @emotion/react @emotion/styled or, yarn add @emotion/react @emotion/style

Once the installation is done and still your app is running without bugs or errors, run or to remove the old @material-ui/* packages.

When you are done migrating, you can import the following to get the updated Grid v2 –

import Grid from '@mui/material/Unstable_Grid2';-

Migration for Material UI v6

If you are not a Material UI v6 user, it is recommended to migrate to Material UI v6 from Material UI v5 first. It doesn’t take much time, and it is more fun to work with Material UI v6. When you’re a Material UI v6 user, you can follow the guidelines below:

The Grid component has been stabilized and is marked as stable in Material UI v6, so the unstable prefix for the Grid is removed in MUI v6. You can use the following:

import Grid from '@mui/material/Grid2';
//or
import { Grid2 } from '@mui/material';

Besides the stabilization, MUI v6 has also been improved with Grid v2 properties. The size and offset properties for corresponding breakpoints have been renamed. Hence, writing code has become easier with MUI v6, enhancing the development experience.

<Grid size={{ xs: 12, sm: 6 }} offset={{ xs: 2, sm: 3 }}>

You can also use custom breakpoints using the following

<Grid size={{ mobile: 12, desktop: 6 }} offset={{ mobile: 2, desktop: 4 }}>
It will ensure the viewports for mobile and desktop screens are occupied according to given breakpoint values.

Moreover, v6 removes the need for the disableEqualOverflow prop for the Grid component, as the child Grid, correctly contains its parents’ padding.

If you need more details about migration to MUI Grid v2, please check the migration guide.
Limitation

Despite fixing some major issues of the previous version of MUI Grid, the size and offset props are not supported within the containers using direction="column” and direction="column-reverse.” So, the column and column-reversing issues remain.

The size and offset props define the number of columns a component uses for a given breakpoint and control the width using flex-basis in row containers. However, they impact the height of the column containers and may unexpectedly affect the height of the grid item elements.

Incorporate Material UI Breakpoints in Grid v2 for Intuitive Layout

MUI grids are an excellent tool for precisely and uniformly spacing items on web pages. Each grid width is a specific percentage of the grid’s 12-column layout. Additionally, MUI has breakpoints used internally in the components to create responsive layouts. They ensure the column widths adapt to various devices without breaking the orientation. You can control the layouts of your application through the Grid component. The default breakpoints for different screens and the available props for utilizing those are listed below.

Default Breakpoints:

xs, for extra-small screens: 0-599 px
sm, for small screens: 600-899 px
md, for medium screens: 900 px
lg, for large screens: 1200 px
xl, for extra-large screens: 1536 px

Available Props:

size
columns
columnSpacing
direction
rowSpacing
spacing
offset

Look into the example of Grid customization with the breakpoints.

import React from 'react';
import { Grid2 } from '@mui/material';

function MyComponent() {
  return (
      <Grid container size={{ xs: 4, sm: 8, md: 12 }}>
               {/* your content here*/}
      </Grid>
  );
}

In this example, we created a simple grid container for extra-small, small, and medium screens that take width according to the values given. The grid container occupies approximately 34% {xs:4} of the smaller or extra-small screen’s viewport, where it occupies approximately 67% {sm:8} for a small screen and 100% {md:12} for a medium screen’s available viewport.

Details on the Features of MUI Grid v2

MUI Grid v2 includes the same features as MUI Grid, such as the fluid grid, spacing, auto-layout, and nested grid. Let’s get a grasp on the MUI Grid v2 features.

Fluid Grid

The fluid grid in Material UI is a layout that dynamically scales the contents of your webpage. It utilizes the breakpoints to determine the requirements for the layout modifications. A fluid grid expands the layouts based on available spaces by adjusting proportionally to different screen widths. For example, occupies 100% of the available viewport of the small screens (xs) like mobile, as it is defined xs:12, (12 out of 12 columns = full width), and for the screens like tabs (sm), which is bigger than a mobile (xs), the component occupies half of the total viewport.
Check the example below, where we’ve created two grid items that change the layout at the defined breakpoints:

import * as React from 'react';
import Grid from '@mui/material/Grid2';

export default function BasicGrid() {
  return (
   <Grid container>
        <Grid  size={{ xs: 6, sm: 2, md: 8, lg=12, xl=3 }}>
          Hooray something is here!
        </Grid>
        <Grid size={{ xs: 6, sm: 10, md: 4, lg=12, xl=9 }}>
          Hooray something is too!
       </Grid>
      </Grid>
  );
}

Spacing

Spacing controls the space or gutter between the grid items. It adds padding inside the container and ensures the items don’t stick together. You can utilize this feature using the spacing prop. And if you want to convert it into CSS property, use the theme.spacing() helper.
See the following example for a better understanding:

import * as React from 'react';
import Grid from '@mui/material/Grid2';

export default function GridSpacing() {
  return (
    <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
      <Grid>
        Hooray something is here!
     </Grid>
      <Grid >
        Hooray something is too!
    </Grid>
    </Grid>
  );
}

Here, the vertical space between the grid items will be 8px (as the spacing is 8px by default) and the horizontal space will be 8px for the extra-small screens, 16px (2*8) for the small screens, and 24px (3*8) for the medium screens.

Auto-Layout

The grid items can automatically resize and fill the available space using the auto-layout feature. It eliminates the need to specify an item’s width. If the width of one of the items is set to a fixed value, the remaining child items will automatically resize and share the available space for them.

For instance:

import * as React from 'react';
import Grid from '@mui/material/Grid2';

export default function AutoGrid() {
  return (
      <Grid container spacing={3}>
        <Grid>
          <Item>A</Item>
        </Grid>
        <Grid size={7}>
          <Item>B</Item>
        </Grid>
        <Grid>
          <Item>C</Item>
        </Grid>
      </Grid>
  );
}

In this example, there are three child items, and the size for the second one is defined. The remaining two children will automatically occupy the available space to align with the viewport.

Nested Grid

The nested grid feature of the Material UI Grid System is generally used for complex structures or designs. A nested grid container must be the direct child of a root or parent grid container. Otherwise, if any items are defined between them, the second grid container will act as the new root container.

See the example below:

<Grid container>
  <Grid container> // A nested grid container that inherits columns and spacing from above.
    <div>
      <Grid container> // A new root grid container with its own variable scope.

The nested grid container inherits the columns and spacing props. If these props are not specified for the instances, the child grid inherits the row spacing and columns from its parent.

Customizing Material UI Grid Column Number

MUI allows you to customize column numbers when implementing designs that do not use the default 12-column grid. You can use the columns prop to change the number of columns. It helps you get more flexibility.
See the following example to see how it’s done:

export default function ColumnsGrid() {
  return (
      <Grid container columns={15}>
        <Grid size={7}>
          <Item>A</Item>
        </Grid>
        <Grid size={8}>
          <Item>B</Item>
        </Grid> 
      </Grid>
  );
}

This code snippet will create 15 columns with items A and B, where A takes around 47% and B takes around 53% of the screen width.

Making a Simple Responsive Card with Material UI Grid v2

Since we have learned quite a lot about MUI grid systems and grid v2, let’s explore making a real-life example like a responsive card.

import React from 'react';
import { Card, CardMedia } from '@mui/material';
import Grid  from '@mui/material/Grid2';

function ImageGallery() {
  return (
    <Grid container spacing={2}>
      {[1, 2, 3, 4, 5, 6].map((item) => (
        <Grid size={{ xs: 12, sm:6, md:4 }} key={item}>
          <Card>
            <CardMedia
              component="img"
              alt={`Image ${item}`}
              height="140"
              image={`https://placehold.co/600x400`}
            />
          </Card>
        </Grid>
      ))}
    </Grid>
  );
}

export default ImageGallery;

This example creates an image gallery with 6 cards and provides a responsive layout for different viewports.

As Johann Wolfgang von Goethe said, “In the end, we retain from our studies only that which we practically apply.” This blog has enlightened you on the basic usability of the powerful grid system of your favorite Material UI and how to utilize it in your project without getting confused about the core concepts.

So, it’s time to put your knowledge to testing and deployment and transform your developer experience from beginner to master. Start with the prebuilt Material UI dashboard templates and enjoy hassle-free development process along with complete customizability.

Material UI Grid v2: FAQs Answered

Does Material UI Grid use CSS Grid?

The Material UI Grid uses CSS flexbox rather than the CSS grid. But the latest versions of MUI grid don’t support row spanning. So, to span the children elements in multiple rows, MUI grid uses a CSS grid. The MUI grid also uses CSS grid when needing an auto-placement of children element.

Is MUI Grid is a component?

Yes, the MUI Grid is a React component provided by the Material-UI (MUI) library. It is part of the MUI system for building responsive layouts using CSS flexbox under the hood. Grid is a system to build responsive layouts, and it is implemented using the grid component.

Can Grid be both a container and an item?

Yes, in the case of nested grids, the MUI grid can act as the container and item. The outer grid acts as a container, the inner grid acts as both an item (inside the outer container) and a container (for nested items).

20+ Most Frequently Asked Questions Answered: Material UI

ThemeWagon — Tue, 12 Nov 2024 14:31:37 +0000

“The master key of knowledge is, indeed, a persistent and frequent questioning.”

Peter Abelard

Material UI is the latest addition to popular web design frameworks. Besides, developers often get confused while working with or introducing this framework into projects. Since the best way to learn something new is to seek answers to common questions and confusion, there must be a good resource to answer those questions. So, we’ve researched and gathered some of the top material UI FAQs explorers have been asking for and explored the answers in one place to ease your development process.

We tried to cover almost everything to relieve your confusion and smoothen your MUI development projects. Let’s get into it!

Enrich Your Concept with Material UI FAQs

Below is a list of some common FAQs and answers addressing core concepts, solutions, and valuable tips to help you with better insights into the Material UI framework.

01. Is Material UI open source?

Yes, Material UI is an open-source React component library that provides a comprehensive collection of pre-built user interfaces.

02. What is Material UI used for?

Material UI is used to create modern and visually appealing web applications with rapid prototyping. It also helps in web app development with consistent design.

03. Is Material UI a framework?

Material UI is a CSS framework that provides pre-styled components that implement Google’s Material Design.

04. Are Material UI and MUI Core the same?

Material UI and Material UI Core or MUI Core refer to the same library, but there is a slight difference in the npm package names of the versions. Material UI v1, v3, and v4 were available with the npm package under @material-ui/core. However, Material UI v4 isn’t used in active development, so this package is now deprecated.
The Material UI v5 and above versions are available on the npm package under @mui/material.
In other words, MUI core is the foundational product line of Material UI.

05. Who maintains Material UI?

MUI is maintained by a group of contributors, with massive support and involvement from the community. It has a core team guiding the project’s development and ecosystem and some community members who enriched it. Lastly, there is also a community emeritus that consists of former active core members who provide advice from time to time to improve the framework.

06. What is MUI Data Grid?

The MUI Data Grid is a feature-rich MUI X component built using React and Typescript. It is fast and extendable, and the components offer a powerhouse of data tables, providing a smooth UX for manipulating unlimited datasets.

07. Is the MUI Data Grid free?

MUI Data Grid has two versions available: MIT license and Commercial licenses. Between these two, the MIT-licensed version is free.
The MIT-licensed version is called the community version and is a strong alternative to plain data tables. To import this free version, use the code below:
import { DataGrid } from '@mui/x-data-grid'

08. What is the MUI Data Grid commercial version?

The MUI Data Grid commercial version includes two plans: Pro and Premium.
The Pro plan supports more complex use cases, such as adding features like advanced filtering, virtualization to handle bigger datasets, column, and row reordering, and support for free data.
import { DataGridPro } from '@mui/x-data-grid-pro';
The Premium plan has more advanced features than the Pro plan. It can group rows with functions like sum and average, and export to Excel files.
import { DataGridPremium } from '@mui/x-data-grid-premium';

09. Is Material UI SEO-friendly?

Material UI is an SEO-friendly library. There is not too much to worry about regarding the search engine compatibility of Material UI, especially if you are working on a highly dynamic single-page app with different requests like fetching data, code splitting, etc. In addition, if you need to maximize the SEO value of your markup, one of the best ways is to ensure the proper hierarchy of the code lines.

10. What is MDBootstrap?

MDBootstrap is a library that contains all the features of Bootstrap. It provides many extra advantages over Bootstrap, including better design, wider customization, theming and optimization options, integration with Material Design and Typescript, etc. It also allows you to integrate Bootstrap with Material UI.

11. Is MUI Core open source?

MUI core is an open-source React component library that implements Google’s Material Design.

12. What is ‘Stack’ in Material UI?

A Stack is like a flex container in the Material UI for arranging the elements vertically and horizontally. It manages the layout of its immediate children along the vertical and horizontal axis, using the prop to control the space between children, the prop to position items horizontally in a row, and the prop to insert an element between each child.

13. What is the difference between Box and Stack in MUI?

The ‘Box’ component is a wrapper for most CSS utility needs. By default, it renders a

element and accepts the sx prop, which makes it easy to style. It also supports all the CSS properties as props.

const MyComponent = () => ( <Box width={300} height={300} bgcolor="primary.main" sx={{ '&:hover': { backgroundColor: 'primary.dark', opacity: [0.9, 0.8, 0.7], }, }} > // ... </Box> );

A stack is a flexible container component for arranging elements horizontally and vertically. It is ideal for one-dimensional layouts, so you can use it to arrange elements in a column or a row.

import { Stack } from '@mui/material'; const Items = () => ( <Stack spacing={2}> <Item>Item 1</Item> <Item>Item 2</Item> <Item>Item 3</Item> </Stack> );

14. Why use Material UI?

Material UI features packages with default-styled components that facilitate design consistency across different apps, websites, and platforms. It also includes extensive documentation, developer support for Typescript, performance improvements, and integration that improves mobile-first design and developer experiences.

15. What are the advantages of Material UI?

Material UI has an extensive component library. It incorporates great theming, accessibility, design resources, design consistency, and responsiveness.

16. Where is Material UI used?

Material UI is used in admin panels and dashboards, e-commerce sites, mobile web apps, content management tools, finance and analytical tools, educational sites, healthcare applications, and different web applications.

17. Is Material UI easy to customize?

Developers can easily customize them to fit their specific needs. The components follow the guidelines of Material Design, which are intended to make app development easier, more intuitive, and more consistent.

18. Can I use MUI commercially?

Material UI is an easily customizable component library that empowers React developers to use Google’s Material Design guidelines. Developers can customize it to meet their unique requirements, which makes app development simpler, more logical, and more reliable.

19. Does Material UI use CSS?

Material UI is built on a CSS-in-JS approach. By default, it uses JSS (JavaScript Source) Files for styling. It also uses plain CSS, CSS modules, styled-components, global CSS, tailwind CSS, etc.

20. Is Material UI for React only?

Material UI is a comprehensive React component library invented to empower React developers to use Google’s Material Design to build exclusive UIs. So, React is a must when utilizing Material UI.

21. Can I use Tailwind CSS with Material UI?

Material UI offers to combine it with the utility approach of Tailwind CSS by combining Tailwind CSS’s utility-first approach with Material UI’s rich component library. It helps developers leverage the strengths of both frameworks to create visually stunning, highly customizable, and functional web applications.

22. Is Material UI good for big projects?

Material UI is a well-suited component library for large-scale applications. It provides a consistent design language and robust performance. This approach, combined with its strong community support, helps build large-scale enterprise-level websites and makes web app development hassle-free.

23. What are the disadvantages of Material UI?

Material UI has a large bundle size, larger than some other libraries due to the comprehensive nature of its component collection. Additionally, Material UI imposes certain design constraints that some developers may find unaligned with their design system sometimes.

24. Does Google own material UI?

Google does not own Material UI (MUI). It is an open-source project created by community developers and maintained by Material UI Inc.

8+ In-house MUI Admin Themes to Ace Your Business

ThemeWagon — Sat, 07 Sep 2024 05:30:57 +0000

MUI admin themes are becoming popular among potential developers due to their scalable and extraordinary performance in data management systems. They secure productivity and code maintainability with built-in, rich, customizable components. They offer a component-based approach to creating responsive and user-friendly admin panels, ensuring efficiency in your business. Moreover, MUI dashboard themes help you manage and maintain administration efficiently with all the necessary tools at your fingertips.

ThemeWagon has created free Material UI admin dashboard templates to help you keep up with the growing popularity of MUI themes and expedite your development process. These templates facilitate easier data management and uphold sustainable data visualization across different parts of the admin panel with similar-looking user interfaces.

Furthermore, these free templates are responsive flawlessly and remain cross-browser compatible in your admin panel. Let’s explore these free templates!
Free React MUI Admin Template.

Free React MUI Admin Template

MUI themes offer a powerful combination of modern design and ease of efficiency, leveraging the strengths of both MUI and React. The latest in-house MUI-React admin dashboard templates are presented below, which can be readily customized to align with your branding at any time.

Elegent

Elegent is a free admin dashboard template built with Material UI and React. Its light color palette helps with soothing eye navigation. To visualize data, the mobile-first design has several responsive UIs, including charts, graphs, tables, etc. The multipage template is suitable for e-commerce and other online data management projects.

Live Preview

Features

Material UI
ReactsJS
Cross-browser Compatibility
5+ Pre-Built Pages
Multilingual Design
Dropdown Menu Bar
Fully Responsive
Multipage Design

Motiv.

Another in-house MUI admin dashboard template is Motiv., which also fits online data management projects for data visualization. This free template includes progress bars, checkbox UIs, two authentication pages, different sign-in options, a password recovery feature, and many more. It is also a mobile-first design and provides scalable data management for your admin interfaces.

Live Preview

Features

Material UI
ReactJS
3+ Pre-Built Pages
Different Sign-up Options
Progress Bar
Dropdown Menu Bar
Fully Responsive
Multipage Design

Modernize

Modernize has a simple but effective layout. The template’s white background ensures a sleek user experience with accessible task management features. This free template is designed to be lightweight and efficient and can scale up the data management process, providing cross-browser compatibility and responsiveness.

Live Preview

Features

Material UI
Multipage Design
4 Authentication Pages
Different Sign-up Options
Cross-Browser-Compatible
Multilingual
Blog Section
Progress Bar
Pagination UI
Clean Codebase

DashDarkX

This MUI-React admin dashboard template has a gorgeous outlook and a dark color palette. DashDarkX’s dark background emphasizes the efficiency of dark mode in this free template. The responsive design ensures the dashboard works well on various devices and screen sizes. This free and responsive template also has a well-documented codebase, providing easy customization for your design goals.

Live Preview

Features

Material UI
ReactJS
3+ Pre-Built Pages
Different Sign-Up Options
Pagination UI
Progress Bar
Drop-down Menu Bar
Fully Responsive

Get Better Insights into MUI and Admin Dashboard Templates:

Dabang

Dabang is an MUI theme that boasts multilingual efficacy. The simple interface is designed with the analytics of real-time insights and reports on the website’s or mobile app’s performance and user behavior. Furthermore, the mobile-first design enhances usability with a well-thought-out interface, simplifying complex tasks.

Live Preview

Features

Material UI
ReactJS
Google Font
3+ Pre-Built Pages
Pages Speed Optimized
Mobile-First Design
Multipage Design
Multilingual Design
Cross-Browser-Compatible
Different Sign-in & Sign-up Options

BankDash

BankDash, another multilingual dashboard theme, ensures a consistent look across the admin dashboard interfaces. This responsive free MUI-React template has several efficient features to speed development, such as different sign-in and sign-up pages and other data visualization features. Moreover, this multipurpose template is helpful for data management for banks, corporations, and other institutions.

Live Preview

Features

Material UI
ReactJS
Google Font
Favicon
4+ Pre-Built Pages
Fully Responsive
Multipage Design
Side-Navigation Bar
Cross-Browser-Compatible
Different Sign-in & Sign-up Options

DNX

DNX is another ideal template for your e-commerce or corporate business, providing better data visualization. The multipage design has many responsive UIs, like different sign-in and sign-up options, a calendar, a pagination UI, a dropdown menu bar, two authentication pages, a side navigation bar, and many more. This cross-browser-compatible design has fewer bugs and is accessible across all available browsers.

Live Preview

Features

Material UI
ReactJS
Google Font
3+ Pre-Built Pages
2 Authentication Pages
Multipage Design
Multilingual Design
Page-Speed Optimized
Fully Responsive
Different Sign-in & Sign-up Options

Nickelfox

This in-house MUI admin dashboard template is designed with features to track sales management or other data activities. The design is well-decorated, with a clean codebase and easy customization. It enhances user engagement by providing faster loading times and reducing bounce rates. Additionally, the dark outlook of this flexible theme enhances the eye-soothing and easy navigation across the pages.

Live Preview

Features

Material UI
React Js
Google Font
3+ Pre-Built Pages
Progress Bar
Toggle Switch
SEO-Friendly
Fully Responsive
Multipage Design
Different Sign-in & Sign-up Options

Venus

This is an MUI dashboard template with a simple design for enhanced data visualization. This is also a multilingual theme and the theme is rich with several responsive UIs like progress bars, charts, pagination UI, different sign-in and sign-up options, etc. The responsive design offers faster loading time with reduced bounce rates. Moreover, it is ideal to help you rank higher in the search engine with e better user engagement.

Live Preview

Features

Fully Responsive
Multipage Design
Multilingual Design
Page-Speed Optimized
Different Sign-in & Sign-up Options
Material UI
React Js
Google Font
3+ Pre-Built Pages
Well-Documented Codebase

These homebrewed templates by ThemeWagon can significantly streamline the setup of your admin panel. They offer complete optimization to ensure higher search engine ranking. MUI admin dashboard templates allow easy override of the styles to fit the specific needs of the developers and customers. They let your business focus more on functionality and less on design and structure. So, it is a smooth way to create websites using MUI themes and enhance your branding.

Happy developing with free React-MUI admin dashboard templates!

Introducing Material UI: Exploring 5+ MUI Dashboard Templates

ThemeWagon — Sun, 30 Jun 2024 05:22:55 +0000

Material UI is a design system based on Google’s Material Design language, introduced in 2014, and works with various JavaScript frameworks apart from React, such as Angular.js, Next.js, and Vue.js. Material UI, later rebranded as MUI, is a design system that helps ensure consistent visual language throughout your websites and web apps. Necessarily, MUI dashboard templates are a collection of fully built, out-of-the-box React components for your application that have been developed to ensure quality. They provide many pre-designed built-in UIs, designed following Google’s guidelines and principles to build components.

We’ll try to explore the basic and advanced features of MUI briefly with the 5 most popular MUI dashboard templates. These pre-built MUI website templates help maintain a consistent visual language throughout your website or application with a modern and user-friendly look, simultaneously ensuring flawless response and intuitive user interaction across pages.

Let’s get into the details!

A Short Glimpse at Material UI

Material UI, an open-source framework, was introduced in 2014 to empower React developers with more engaging and fascinating user interfaces. It was developed implementing Google’s Material Design Guidelines. To reduce confusion regarding the brand identity, the framework was rebranded into MUI, which is shorter, familiar, resembles the organization’s focus, and works properly.

MUI is not directly linked to material design. It is more than material UI and covers a broader area. Material is the foundation or base of MUI. MUI’s component architecture and API design prioritize React-specific patterns and best practices, following this Material Design by Google. MUI also integrates a different design philosophy that evolves around new web technologies and trends, ensuring compatibility with modern React practices and optimizing performance for real-world applications. MUI templates make it easy for developers, designers, and clients to achieve this.

Basic Features of MUI Website Templates

MUI was introduced to enhance the user interface(UI) to empower React developers, but later, the focus shifted to intensify the design and developer experience (DX). Additionally, MUI templates made it more accessible to the mass community so that they could utilize its useful features. Some of the basic features that MUI templates offer are:

Component Library: The MUI system provides a set of CSS utilities with prebuilt components and unique feature lists. It also offers a set of flexible generic wrapper components, like Box or Container, that let you design directly without wasting much time in coding.
Theming & Customization: MUI templates offer powerful theming capabilities and customization options to reflect your brand. With the versatile customization of the pre-built components, MUI allows you to create a custom theme. By defining a custom theme and using it consistently across your application, you can also reduce redundancy and optimize the CSS output in the bundle.
Accessibility: MUI templates are ARIA-compliant with their pre-built and ready-to-use components, which include an out-of-the-box keyboard. The components allow users to navigate in a simple but easy way, so developers can effortlessly make the site accessible to more people.
Design System: The root or foundation of the MUI template is the Material Design system created by Google. MUI empowered React developers to build effective Material Design, implementing Google’s Material Design guidelines to build customer-facing applications, internal tools, and mobile-hybrid apps. But now, it is responsible for a whole suite of products they can design themselves. The in-house styling solutions allow designers to create a design, maintain its consistency with the codebase, and make the website flawless.

Advanced Features of MUI Website Templates

MUI was introduced to match the growing necessities of the Material UI Design community, but now it offers far beyond that. It offers an advanced set of tools that provides fast delivery of new features. Let’s get into the details:

Responsiveness: MUI templates use grids that make layout creation flexible and straightforward, and enable the creation of complex layouts with ease. On the other hand, it integrates form APIs like React Hook Form, validation libraries such as ZOD, Formik, Yup, many authentication functions, typescripts, etc. that help to collaborate designers with backend developers without barriers and provide an extensive developer experience.
Server-Side Rendering (SSR): Server-side rendering (SSR) of Material UI involves rendering Material UI components on the server side before sending the HTML to the client. It offers many benefits, such as improved performance, SEO optimization, and better initial loading times for users, etc. MUI templates integrate well with Server-Side Rendering (SSR) frameworks. For example, Next.js for React, Nuxt.js for Vue.js, Angular Universal for Angular, etc. This framework support of MUI helps to implement material UI components on the server naturally, maintaining flexibility and complexity.
Integration: MUI works with other JavaScript frameworks such as – Angular.js, Next.js, jQuery, Vite.js, and Vue.js, enabling developers to leverage its components and styling capabilities across different tech stacks. Some key aspects of advanced integration are:

Styling: MUI uses a CSS-in-JS approach (via JSS – JavaScript Style Sheets) for styling, which offers scoped styles and dynamic theming capabilities. It also uses the ** **component to apply custom themes across your entire application or specific parts.
Interaction: MUI utilizes advanced routing techniques with frameworks like React Router or Next.js for seamless navigation within your Material UI application. Furthermore, MUI offers a responsive grid system ( Component) for complex layouts that adapt to different screen sizes.
Internationalization: MUI supports internationalization and localization through libraries like <@mui/material/locale> and integration with i18n libraries such as react-intl or i18next.

4.Ecosystem & Extensions: MUI was introduced to match the growing necessities of the Material UI Design community, but now it offers far beyond that. They offer an advanced set of tools that quickly ship new features. The service is divided into 2 product lines. They are MUI Core, the foundational Material Design, and MUI X, which offers advanced components such as data grids, date and time pickers, tree view, charts, etc. These components feature advanced functionality for data-rich applications and other use cases. Moreover, MUI X works seamlessly with MUI Core and extends the functionality of its UIs while standing on their own.

5.Performance: MUI templates offer intuitive performance by reducing bundle size. The strategies MUI applies are:

Tree-shaking: Tree-shaking is one of the significant strategies for reducing bundle size. MUI uses ES6 module syntax that is compatible with tree shaking and allows unused code to be eliminated during the bundling process. But, for that, the bundle should support tree shaking.
Component Importing: MUI imports only the components needed for a particular design rather than the entire library, which reduces bundle size by excluding unused components. A sample code is given below:

import Button from '@mui/material/Button'; import TextField from '@mui/material/TextField';

In addition, using a bundle analyzer, optimizing production builds, and compressing JavaScript and CSS files effectively reduces the bundle size in MUI and enhances performance.

Check Out Our Latest Free MUI Dashboard Templates Here:

Motiv., designed by Rushit Dhameliya for the Figma Design Community, is a free MUI dashboard template built using the Material UI framework.
Dashdark X, designed by Malik Ali for the Figma Design Community, is an admin dashboard template built using the Material-UI framework.
Modernize is an admin dashboard template designed by Seju for the Figma Design Community. It is built using the Material-UI framework.
Elegent is an admin dashboard template designed by Malik Ali for the Figma Design Community. It is built using the Material-UI framework by ThemeWagon.

Ideal Usages of MUI Website Templates

MUI provides a massive UI component library for open-source projects. Let’s dive into the versatile usability and contributions to efficient UI design and development provided by MUI:

Enterprise Applications

Enterprise applications require complex and scalable UIs and custom styling and theming to match the corporate branding. MUI offers a highly customizable and easy-to-integrate component library. Its modular and scalable architecture supports the development of complex UIs for large-scale applications and provides layout utilities, error handling, validation support, etc. These theming styles and consistent design approaches make it well-suited for enterprise applications.

eCommerce Platforms

MUI has an exclusive ability to boost engagement and empower users, which is highly beneficial for e-commerce platforms. Its grid, card, form validation libraries, and other components can be used to make an intuitive display of products, shopping carts, checkouts, product search, and order options. Moreover, MUI’s grid system ensures great responsiveness and a better website outlook regardless of screen size. Additionally, these interactive features ensure better product marketing.

Prototyping and Design Consistency

App prototyping is a crucial point and the first step before development. Sticking to a clear design plan is important to maintain consistency and a similar outlook in the prototype. One of the significant popularity of MUI is design consistency, which resonates well with prototyping tactics for the developer. Since MUI maintains a consistent design with standard elements throughout the web pages, it makes product updates and design changes simple while maintaining the same approach for developers.

In-depth Look into 5+ Official MUI Dashboard Templates

Let’s explore the features and functionalities of Material UI discussed above using the 5 most efficient and official MUI Dashboard Templates:

Minimal

Minimal, client, and admin dashboard is a fully functional MUI template with 1000+ features. This is a premium MUI template powered by Material UI. The template has rich code quality, and the intuitive design ensures a sleek user experience with modern technical proficiency. It covers the following categories you may consider before implementing minimal to your project.

Features	Quality	Libraries
Live Customization Enabled	Standard Codebase	React Hook Form
RTL & LTR Support	Clean & Complete Design
Different Layouts	Impressive Customization	ESLint JavaScript linting utility
5 Authentication systems	Continuous Upgrade	Prettier Integrated

Remarks

Minimal effortlessly accomplishes the needs of developers and users. The meticulous design and intuitive features are made to streamline the workflow of any business. It will effortlessly accommodate your needs with intuitive features that simplify the workflow.

Devias Kit

DeviasKit, client, and admin dashboard is another fully functional MUI template by Material UI. It is also a premium template with rich code quality. This is a professional Next.js and Vite.js template with 85 individual components, including a toaster, 5 authentication systems, animation, a text editor, and many more. This MUI template’s flexibility and feature availability help developers find the best one according to different requirements.

Features	Quality	Libraries
Live Customization Enabled	Standard Codebase	React Hook API
RTL & LTR Support	Clean & Complete Design
Different Layout Styles	Impressive Customization	React Context API
5 Authentication systems with 2 different styling	Rich Feature Availability	Framer Motion

Remarks

DeviasKit has a very clean and organized codebase with great examples. It keeps updating design trends to Next.js and other libraries. Its easy customization seamlessly integrates with your business, so you can focus on your business coding.

Mantis

Mantis is another MUI dashboard template with continuous updates. The React Material UI template has great customizability and design quality. This is also a premium template with a rich code quality. This is a professional Next.js and Vite.js template with 80 individual component packages, 5 conceptual Apps like E-commerce, Chat, User Management, Social Profile and Calendar, and many more. The responsive template offers a retina-ready display regardless of screen size.

Features	Quality	Libraries
Live Customization Enabled	Standard Codebase	React Hook API
RTL & LTR Support	Clean & Complete Design
Different Layout Styles	Impressive Customization	4 Authentication Systems
4 Authentication systems	Rich Feature Availability	SWR & React Context API

Remarks

Mantis is easy for newbies to start, and the design looks very clean. It is a well-suited template for enterprise applications with great responsiveness. It is compatible with Chrome, Mozilla, Edge, Safari (macOS), and Opera browsers.

Berry

Berry is a beautiful React Admin Template with many ready-to-use blended Material UI components. The template helps you create your backend application even faster than before. The React v18 supported template is suitable for building the User Management app, Chat app, Customer-centric app, SaaS-based interface, and many more with high-performance code & fully responsive designs.

Features	Quality	Libraries
Live Customization Enabled	Standard Codebase	React Hook Form
RTL & LTR Support	Clean & Complete Design
Different Layout Styles	Impressive Customization	Form Wizards
4 Authentication systems	Rich Feature Availability	4 Authentication Methods

Remarks

Berry is a page-speed-optimized template using Google Page Speed and GTMetrix tools. Additionally, it is compatible with browsers such as – Chrome, Mozilla, Edge, Safari (macOS), and Opera. The template effortlessly accomplishes the needs of developers and users.

Mira Pro

Mira Pro is another professional React Dashboard Template with plenty of ready-to-use Material UI components and features. The template has SaaS-based interfaces that provide the best outcome for E-Commerce and analytics application websites. Moreover, the clean codebase and extensive design quality help your team move faster and save on development costs.

Features	Quality	Libraries
Live Customization Enabled	Standard Codebase	React Hook Form
RTL & LTR Support	Continuous Upgrade
Multilanguage Support	Impressive Customization	Prettier Integrated
4 Authentication systems	Rich Feature Availability	Formik & YUP validation

Remarks

The quality of the Mira Pro template’s codebase is top-tier. End product quality is also top-tier. Documentation is quality.

Honorary Mention

In addition to the templates explored above, we have Uifort, a MUI dashboard template that’s popular among most MUI users. Hence, we’re adding it to the existing list of official store templates as an honorary mention.

Uifort

Uifort is a simple but exclusive React Dashboard template for the admin and client of your website. The intuitive design empowers developers and designers, simplifying their jobs. This professional template was built with modern technologies and tailored for Next.js and Vite.js.

Features	Quality	Libraries
Live Customization Enabled	Standard Codebase	React Hook Form
RTL & LTR Support	Continuous Upgrade
Multilanguage Support	Impressive Customization	Supabase Authentication

Remarks

The template’s simple design offers great flexibility and easy customization. It is suitable for enterprise-level user interfaces.

Pros & Cons of Using MUI Dashboard Templates

As we can see, MUI offers many benefits, such as large community support, extensive documentation, theming, backend development support, and so on. But it also has some drawbacks. The benefits and drawbacks of using MUI are discussed below:

Benefits of Using MUI Dashboard Template

Many developers are switching to MUI because of the large component library. It also offers many proficiencies, such as:

MUI templates ensure a consistent and polished outlook across the website.
They offer plenty of pre-built components, saving development time and effort.
Generally, MUI templates are built to be responsive out of the box.
Material UI has a large community of developers, so getting community support with necessary resources, tutorials, and community-generated components to enhance your project is much easier.
MUI offers cross-team collaboration that streamlines the workflow and boosts consistency between designers and developers.
The codes are easier to maintain, and debugging is easier.

Drawbacks of Using MUI Dashboard Template

MUI provides a powerful component library for creating amazing user interfaces, although it may not facilitate all projects. Some factors to consider while working with MUI are as follows:

Most of the MUI templates now have licensing restrictions. Before using them in commercial projects, you must check the licensing terms.
MUI templates save time in customizing, but understanding effective customization and integrating them into your specific project may require some learning, especially for developers new to Material UI.
Depending on the implementation, there could be performance implications, and customizations overloaded with unnecessary components or styles could impact loading times.
MUI templates are often built with specific frameworks like React, Angular, etc. If you’re not using one of these frameworks, integration might require additional effort or

Trusted by thousands of organizations, MUI maintains a cohesive visual style and facilitates rapid prototyping and iteration. MUI templates save you time and money and make your brand look better. They are built to simplify your workflow and boost consistency between designers and developers.

By leveraging the aforementioned official MUI dashboard templates and customizing them according to your brand’s personality, you can create an extraordinary design for your branding that resonates with your audience.

Enjoy creating!

Phoenix 101: Exploring the Admin & WebApp Template

ThemeWagon — Wed, 11 Oct 2023 10:36:55 +0000

Get ready to dive into the world of Phoenix, the kick-ass admin & webapp template powered by Bootstrap 5. In this talk, we’ll dig deeply into Phoenix Admin & WebApp Template and show you how you can take advantage of its power in your own development.

Whether you’re a coding newbie craving a solid foundation or a seasoned pro seeking insider tips on this killer template, this session will provide you with a comprehensive overview of the topic. We’ll uncover the juiciest features, mind-blowing functionalities, and mind-boggling optimization options that the Admin & WebApp Template brings to the table.

We’ll uncover the key features, functionalities, and benefits of the Admin & WebApp Template, equipping you with the knowledge to build robust and efficient web applications using Phoenix. Furthermore, we’re here to equip you with the knowledge and skills to wield this template like a true coding ninja. So, let’s unleash the full potential of the Admin & WebApp Template together, and let your developer dreams soar high!

A Bit About Phoenix

Phoenix Admin & WebApp Template is a premium template from ThemeWagon, the creators of Falcon admin & WebApp template. The template is built using all the latest frameworks like Bootstrap 5, HTML5 & CSS3. You can start your project with Phoenix, not only because it’ll make your site look good, but also it has a solid codebase that’s well-documented and performant with simple modifications.

Dig in Phoenix Admin & WebApp Template

Phoenix admin template is a feature-rich admin panel template. You can see the jest of the theme on the showcase page. The catch-features of the theme are as

Multiple Demos of Built-in Layouts: You’ll get to see multiple demos of the inclusive layouts that Phoenix offers, such as the default layout with a vertical sidenav, dark layout, Dark Navbar, Slim Topnav, topnav-only layout, horizontal slim layout, combo nav, and dual nav. Likewise, you can see the detailed layouts in those.
Card & Cardless Design: The theme layout is designed with card and cardless designs of advanced forms, and is coded for any screen size, so the admin panel offers more functionality among the most there
Important Apps: Phoenix avails important WebApp pages for assisting you with your necessary applications. Its inclusive apps contain a built-in email, a chat, a calendar, a and a kanban.
Necessary Pages: Phoenix has a wide range of built-in pages to help you create an efficient admin panel. The pages include- a profile page, a pricing page, an FAQ page, a notifications page, an authentication page, and an event page.
Figma Design File: Phoenix avails the Figma design file with the template in the box of the modern and highly customizable UI components.

Intro to the Apps

Phoenix Admin and WebApp template offers a wide range of user-friendly applications to help you grow as you want to and assist you in creating any WebApp that you might need for your project. Let’s dive into the built-in apps of Phoenix and see what awaits ahead.

Ecommerce

The Ecommerce Dashboard of Phoenix is a very user-friendly and completely responsive one. It comes with all necessary components you might need to create an all-inclusive data visualization for strong business operations. The app will help you with analytical data metrics and monitor KPIs such as conversion rates, customer acquisition expenses, revenue and many more. The app includes the following pages:

Admin
- Add Product
- Products
- Customers
- Customer Details
- Orders
- Order Details
- Refund
Customer
- Homepage
- Product Details
- Products Filter
- Cart
- Checkout
- Shipping Info
- Profile
- Favorite Stores
- Wishlist
- Order Tracking
- Invoice

CRM

The CRM module of Phoenix allows you to track and monitor necessary insights into your leads, customer needs, offers, conversions, and help you optimize your site to run campaigns and ads. Moreover, it’ll help you with task automation for your projects.

The inclusive CRM module comes with:

Analytics
Deals
Deal Details
Leads
Lead Details
Reports
Reports Details
Add Contact

Project Management

Phoenix’s project management tool includes many user-oriented UI components to help you keep your projects on tracks, foster better collaboration among teams, and better risk management.

The inclusive features the project management app that Phoenix Admin & WebApp Template offers are:

Create New
Project List View
Project Card View
Project Board View
To-do list
Project Details

Chat

Phoenix Admin and WebApp Template offers a polished and suave chat module that can make it easier for you to create any communication model for your organization, and its clean codebase makes the modification and customization simpler. The chat module will help you make your communication easier and simpler for your efficient task management.

Email

The email module of Phoenix Admin & WebApp template avails a number of features for easy email communication to make your business operation less time-consuming and more comfortable. The prebuilt pages inclusive to this module are as follows:

Inbox
Email Detail
Compose

Events

If you need to create, manage, and monitor an event, Phoenix’s all-inclusive event page can be of great help for you. The page will help you understand different data metrics and get you analytical insights all on the same page.

The inclusive pages of this module are as follows:

Create an Event
Event Details

Kanban

The kanban page of Phoenix Admin & WebAppp Template offers a wide and convenient board to assist you with easy team and project management. This page is user-friendly and can help you enhance your growth with different data regarding the ongoing projects under your management.

The prebuilt pages availed with this module are as follows:

Kanban
Boards
Create Board

Social

Phoenix includes a social web app part for its users. If you’re creating a website or a social app, you’ll have all the important features oriented meticulously on its layout, and all the components used to make this page are completely responsive and compatible with all major devices and browsers. This page also includes a multi-level dropdown for the following three pages:

Profile
Settings

Calendar

The pre-built calendar module includes a variety of functions, including the ability to schedule tasks and set reminders. This app page can be used as a responsive, all-inclusive calendar application that is completely functioning.

Check the complete live preview or purchase from here!

Customization of Phoenix

Phoenix Admin & WebApp Template is an easily customizable template that allows necessary modification with little knowledge and the least effort. It’s a time saver in creative projects. Let’s dive in!

Configuration of Phoenix

Phoenix Admin & WebApp template has a global configuration system and allows easy customization with a single global JavaScript object.

You can set the configuration using the gulp-based workflow or without Gulp. Let’s see how you can do it:

Without Gulp

If you aren’t using Gulp-based workflow, edit the public/assets/js/config.js file.

With Gulp-based Workflow

If you’re using the Gulp-based workflow to configure Phoenix, edit the src/js/config.js file.
In both cases, use the following configuration object:

const initialConfig = {
  phoenixIsNavbarVerticalCollapsed: false,
  phoenixTheme: 'light',
  phoenixNavbarTopStyle: 'default',
  phoenixNavbarVerticalStyle: 'default',
  phoenixNavbarPosition: 'vertical',
  phoenixNavbarTopShape: 'default',
  phoenixIsRTL: false,
  phoenixSupportChat: true
};

The available options that Phoenix offers, are:

Option	Defaults	Description
phoenixIsNavbarVerticalCollapsed	`false`	Set true to make the vertical navbar stay collapsed when the page loads.
phoenixTheme	`light`	This option is for setting up the default color mode (dark or light) for your project. Set dark to make the default color mode dark.
phoenixNavbarTopStyle	`default`	Set darker to make the top navbar darker when the page loads.
phoenixNavbarVerticalStyle	`default`	Set darker to make the vertical navbar darker when the page loads.
phoenixNavbarPosition	`vertical`	This option is for changing the navigation type. Available values: `vertical`, `horizontal`, `combo`
phoenixNavbarTopShape	`default`	Set slim to make the top navbar slim when the page loads.
phoenixIsRTL	`false`	Use true to make the whole layout RTL (Right to Left). Recommended for languages such as Arabic, Hebrew, or other RTL languages.
phoenixSupportChat	`true`	This option is for showing the chat widget. Set false to hide the chat widget when the page loads.

Styling

The Phoenix team recommends customizing the style sheet using the user.css file. You can change the theme style in both gulp-based and non-gulp workflow. The process is briefly described below:

Config for styling: Without Gulp-based workflow

To configure Phoenix without Gulp for styling, add your own CSS and override the theme style in the public/assets/css/user.css file.

Config for styling: With Gulp

If you’re configuring Phoenix with Gulp-based workflow, Please follow these steps:

Add your own SCSS and override the theme style in the src/scss/user.scss file.

user.scss

To make more distinctive and wider array of changes and customize the design of the theme, use src/scss/_user-variables.scss. Any variable from the node_modules/bootstrap/scss/variables or src/scss/theme/_variables.scss can be overridden with your own value.

_user-variables.scss

You can also remove the Bootstrap components and update the src/scss/_bootstrap.scss file.

_bootstrap.scss

Changing theme colors

If you want to customize the theme colors for your project, you can approach it in both gulp and non-gulp workflows. Let’s see how you can do it:

Change colors without gulp: Using CSS

As aforementioned, you can edit and override the theme style in public/assets/css/user.css file. You can change all colors, including the grays, using CSS variables. You’ll need to assign its corresponding RGB color to change any color. Likewise, you might sometimes need to update the component’s corresponding CSS variable.



/*-----------------------------------------------
|   Theme Styles
-----------------------------------------------*/
:root, :root.light, :root .light {
  --phoenix-primary:  #00d27a;
  --phoenix-primary-rgb: 0, 210, 122;
  ...
  ...
  ...
  /* grays */
  --phoenix-gray-100:  #f9fafd;
  --phoenix-gray-100-rgb: 249, 250, 253;
}
.dark{
  --phoenix-primary:  #e63757;
  --phoenix-primary-rgb: 230, 55, 87;

  .card{
    --phoenix-card-bg: #00d27a;
  }
}

Change colors with Gulp: Using SCSS

You can bring in your own preferred colors from src/scss/theme/_colors.scss and paste it into src/scss/_user-variables.scss. Remember to update the necessary variable. Our recommended approach is as follows:

_user-variables.scss

The default theme mode of Phoenix is light. If you customize Bootstrap components, it’ll take effect in the light mode. To update any color, find the corresponding variable for the colors and place them to _user-variables.scss file.

An example of the code should look like this:



//*-----------------------------------------------
//|   Theme Colors
//-----------------------------------------------*/

$primary: $blue !default; 
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-100 !default;
$dark: $gray-1100 !default;

Change ALL COLORS with Gulp

All the Phoenix color variables are available as Sass variables, as well as the Sass map in the src/scss/theme/_colors.scss file.

Dark Mode

You can see the configuration for setting Dark as the default mode in the configuration section of this blog, or in the configuration page of the theme’s documentation.

Phoenix avails 4 prebuilt toggle options to choose from to switch between dark and light modes:

Checkbox
Switch Input
Radio Button
Custom Icon

Without Gulp

You can easily customize the theme without using Gulp-based workflow. The customization is easy. Here’s how you do it:

Modify colors with CSS

In the /public/assets/css/theme.css file, look for the :root.dark class, and you’ll find all the variables to modify the colors for dark mode. Copy the variable you want to override to your /public/assets/css/user.css file and update as you want it.
An example of the code might look as follows:

/*-----------------------------------------------
  Theme Styles
-----------------------------------------------*/
:root, :root.light, :root .light {
  --phoenix-gray-100: #eff2f6;
  --phoenix-gray-100-rgb: 239, 242, 246;

  --phoenix-gray-200: #e3e6ed;
  --phoenix-gray-200-rgb: 227, 230, 237;

  --phoenix-gray-300: #cbd0dd;
  --phoenix-gray-300-rgb: 203, 208, 221;
}

.dark {
  --phoenix-gray-100: #222834;
  --phoenix-gray-100-rgb: 34, 40, 52;

  --phoenix-gray-200: #31374a;
  --phoenix-gray-200-rgb: 49, 55, 74;

  --phoenix-gray-300: #373e53;
  --phoenix-gray-300-rgb: 55, 62, 83;
}

Use dark CSS Classes in HTML

You can customize Phoenix by using custom CSS classes in HTML. Let’s see the thorough process:

.light – It will keep the color light even if the current mode is dark
.dark – It will keep the color dark even if the current mode is light Phoenix allows keeping a style constant regardless of the current theme mode. To do so, do these:

Override Background and Text color

Likewise, you can override the background and text color only for dark mode. You can follow these steps:

To use a different color for any element rather than the default dark theme colors, use the special “dark” classes:

dark__bg-*
dark__text-*

Emit JavaScript event on color scheme change

When transitioning between dark and light modes, or modifying any settings within the global theme configuration during runtime, Phoenix will trigger a custom event called ‘clickControl.’ Employing this event will toggle colors through JavaScript. For instance, this event is utilized to change the colors of charts. You can capture and utilize this event by employing the following code snippet:

const themeController = document.body;

themeController.addEventListener(
  "clickControl",
  ({ detail: { control, value } }) => {

    if (control === "phoenixTheme") {
      console.log(value) // value will be localStorage theme value (dark/light)
      // your code here

    }
  }
);

With Gulp

If you want to modify Phoenix theme colors with a Gulp-based workflow, you can modify all the colors using SCSS. Find all the variables to create the dark mode in the /src/scss/theme/root/_dark.scss file. Update the file as you see fit. Remember to ensure a running Gulp while you’re doing so.

Plugin

Phoenix offers a number of built-in plugins that you can install in two approaches – with or without using npm. Follow these for hassle-free installation:

Simple approach (without npm)

If you’re not using npm, place your new plugin in the public/vendors folder.

For example:
If you’re trying to add the flatpickr plugin download it, unzip the folder and place the faltpickr-master in the public/vendors folder.

Using npm

For example, suppose you’ve picked faltpickr plugin. Follow these three steps for installing:

Step 1

Firstly, run npm command to install the faltpickr plugin like this:

npm i faltpickr

Step 2

Go to vendors.json file and give the path directory from node modules as follows:



"flatpickr": {
    "src": ["dist/flatpickr.min.js", "dist/flatpickr.min.css"],
    "dest": "flatpickr"
}

Step 3

Run the following command:

gulp vendor:move

Inclusive Figma Design File

Phoenix Admin & WebApp Template avails its Design file created with Figma inclusively to the pack. The design file is getting updated with every release to be more user-oriented from before. You can add your own twitches to the template.
All you’ll need to do is:

Download Figma
Open the Figma link from the README.md
This file is "read-only". So, to customize the design on your own, you have to duplicate the Figma file and start the editing process on the copied file.

Optimizing Phoenix

You can optimize Phoenix admin & WebApp Template and keep just what you need. You can attempt it with both gulp and non-gulp workflow.

Without gulp

Let’s see how you can attempt minimizing and optimizing the theme with and without Gulp-based workflow, as described below:

Modify the Theme

If you’re using any non-gulp workflow, keep in mind that your changes will be confined to the HTML page you’re customizing and will be visible only when the HTML page is opened. Unwanted HTML should be removed from the public directory.

Stylesheet

It is best not to change the theme.css file. Instead, all changes should be made in the user.css file. You can use your own custom CSS in your project by adding it to the file.

Remove RTL

Phoenix Admin & WebApp Template avails a fully-functional and efficient RTL layout inclusively.

If you don’t need RTL for your project, remove the stylesheets, links, and scripts that are linked to RTL from the necessary HTML files and the related CSS files from the public/asset/css folder.

Disable Dark Mode

Simply delete all the relevant variables from :root in the public/assets/css/theme.css file to turn off Dark Mode for your project.

Reduce Unwanted JS

You can also reduce the unnecessary JavaScript files from public/assets/js/phoenix.js according to your need.

Remove Unwanted Plugins

If you want to remove any plugin that you might not need to install for your project, remove the corresponding folder from public/vendors.

With Gulp

You can customize Phoenix with any gulp-based workflow as well. The approach is easy to follow. Let’s see how to do it:

Modify the Theme

You can modify the theme SCSS used to create Phoenix Admin & WebApp Template. It’s easy to modify the file and minimize the CSS imports from src/scss/theme/_theme.scss and src/scss/_bootstrap.scss files.

Reduce Unwanted JS

You can also reduce the unnecessary JavaScript files from public/assets/js/phoenix.js according to your need.

Remove Unwanted Plugins

If you want to remove any plugin that you might not need to install for your project, remove the corresponding folder from public/vendors.

With Gulp

You can customize Phoenix with any gulp-based workflow as well. The approach is easy to follow. Let’s see how to do it:

Modify the Theme

Remove RTL

You can remove the inclusive RTL feature of the theme if you do not need to incorporate it into your project. Remove the related stylesheets links and scripts from the src/pug/layouts/LayoutTheme.pug pug.

Disable Dark Mode

To remove the dark mode from your project, remove the _dark.scss from src/scss/theme/root directory and remove the imports from the file from src/scss/theme/_root.scss.

Reduce Unwanted JS

Remove any unwanted JavaScript file from src/js/theme directory and the imports of those files from src/js/phoenix.js as you need.

Remove Unwanted Plugins

Phoenix avails a number of plugins with the template. If you need to remove any of them, just remove the unnecessary plugin and clear paths from vendor.json folder.

Throughout this exploration, we’ve discovered that, the Admin & WebApp template emerges as a true gem, providing developers with a friendly head start in creating secure, customizable, and visually appealing applications. With its intuitive UI design and flexible customization options, this template enhances the user experience and enables developers to align the application’s look and feel with specific branding or project requirements.

Wrapping up the exploration with hope that you can now confidently leverage Phoenix to efficiently create high-quality applications that meet the ever-evolving demands of the digital landscape.

Dive into the world of Phoenix and let your creativity soar!

Falcon 101: Exploring the Admin & WebApp Template

ThemeWagon — Sun, 28 May 2023 07:07:01 +0000

If you’re developing a web application that requires an administrative backend, you might be wondering how to design and build an effective user interface that allows administrators to manage and monitor their system. This is where Falcon Admin & WebApp template comes in handy.

Admin dashboard templates are pre-built user interfaces designed to provide a visual representation of the data and functionality available within an application’s administrative backend. Using these templates as a starting point for an admin panel’s user interface can significantly reduce development time and effort. Falcon Admin & WebApp Template is one among the most popular ones.

In this blog, we’ll explore Falcon admin & webapp template, discuss some key features that you’re going to get inclusively with it, and provide some tips and tricks regarding the customization and optimization of the theme. Whether you’re building an e-commerce platform, content management system, or project management tool, we hope this blog will help you do it right with Falcon.

Intro to Falcon Admin & WebApp Template

Falcon admin & webapp template is an in-house ready-made user interface of ThemeWagon, made with Bootstrap 5, to significantly reduce your hassle and assist you build an admin panel to efficiently visualize and monitor your backend operations with the least effort. It is a cross-browser compatible template with complete responsiveness to all devices and screen sizes. Furthermore, the template is SEO and page-speed optimized as well. This well-recognized and widely accepted template has another version if you’re using ReactJs. Find Falcon React here.

Let’s get into the details!

Intro to the Dashboards of Falcon

The 6 multipurpose prebuilt dashboards can help you get the analytical insights that you might need to operate your projects and manage your team efficiently. Let’s take a quick look into them:

Default Dashboard
The default dashboard of Falcon is the basic one to help you get an overview of all your projects at the same time. This detailed dashboard can help you decide on your next step of improvement by showing all necessary progress of a project with the inclusive features like the KPIs, charts, progress bars, and data tables.
Analytics
The analytics dashboard of Falcon allows you to examine your data and make informed decisions by tracking key performance indicators (KPIs) and will give you with real-time data and metrics in an easy-to-understand visual format.
CRM
Falcon’s CRM (Customer Relationship Management) dashboard enhances the pictorial representation of data and metrics & offers insight into the efficacy of your sales, marketing, and customer service activities & manage customer interactions, track sales performance, and analyze customer data.
Ecommerce
Falcon’s ecommerce dashboard will help you monitor your ecommerce performances while also tracking sales by managing inventory and analyze customer behavior. You’ll be able to manage everything from your payment & shipping to other customer service operations.
LMS
The prebuilt LMS dashboard of Falcon can help you create personalized learning experiences using data analytics and machine learning algorithms to analyze learner behaviors and preferences to recommend customized contents and activities based on each individual needs.
Management
Falcon’s management dashboards will allow real-time access to information, allowing performance monitoring and resolving arisen issues, and can be customized according to an organization’s needs to display the specific metrics and the most relevant data points.
SaaS
The developer-friendly SaaS dashboard of Falcon will assist you with real-time insights into application performance to identify and resolve arisen issues while also displaying application performance related data.
Support Desk
The inclusive support desk displays data sets and metrics related to customer support performance to help support team monitor performance and identify potential areas of improvement.

Moreover, as much as you’ll need versatility across an admin dashboard template, Falcon allows easy customization, and you can obviously tweak the template according to your organization’s specific needs and focus. Not only the prebuilt & inclusive dashboards are meticulously designed, the rich boards can be integrated into one another to add expected versatility.

Diving Deeper into the Apps of Falcon

Falcon admin dashboard provides pre-built pages to integrate into your own rapid app development. The pages are efficient in rapid app development. Let’s see a brief of what Falcon has to offer:

Calendar

The pre-built calendar module offers versatile applications such as creating reminders and scheduling tasks. This app page can be used as a fully functional calendar app that’ll be responsive and user-friendly for all. The page offers five different calendar views to customize as needed.

Chat

The inclusive chat module of Falcon admin dashboard offers a well-designed and cleanly coded chatroom that’s efficient and integrable with any website or app that you might need for your organization. The chat page will help you if you’re to develop and manage any website that needs a strong communication system in both ends.

Email

The email Module of Falcon has multi-level of categories and pages that can help create a strong communication system for strong & smooth business operation. It’s made to have multilevel dropdowns consisting of three prebuilt pages as inbox, email detail & compose.

Events

Falcon’s inclusive event module is created to help you deal your business events in a planned and organized way. The inclusive pages of this section will help you understand different event data metrics with these pages:

Create an Event
Event Details
Event List

E Commerce

The inclusive ecommerce module of Falcon is designed to help you maintain your online operations by helping you get necessary analytical insights from the data and metrics, track and monitor KPIs such as revenue, conversion rates, customer acquisition expenses and many more. The prebuilt pages to help you operate your business efficiently are as follows:

Product:
- Product List
- Product grid
- Product Details
Orders
- Order List
- Order Details
Customers
Customer Details
Shopping Cart
Checkout
Billing
Invoice

E-learning

The e-learning web-app module of Falcon admin dashboard template is detailed, meticulously designed with responsive and cross-browser compatible UI components for any online educational platform. The built-in pages will help you track relevant KPIs such as enrollment, completion rates, and student satisfaction. This example page also has multi-dropdown options for the enlisted pages below:

Course
- Course List
- Course Grid
- Course Details
- Create a Course
Student Overview
Trainer Profile

Kanban

Falcon admin dashboard template provides the users with an in-built kanban module as well, for easy and simple project and team management. This page can help you manage your workflow and campaigns that you need for your enhanced growth.

Social

Falcon Admin & WebApp Template provides a built-in social web app section for its users. If you’re building a site or social app, you’ll get your necessary amenities oriented thoughtfully on its layout and all the components that are used to create this page are totally responsive and compatible around all major devices and browsers. This page also has multi-level dropdown for these three pages:

Feed
Activity Log
Notifications
Followers

Support Desk

Falcon admin dashboard template is rich with built-in modules, among which one is a well-designed support module to show you all your resolved and open tickets. The multi-level option provides 7 pre-built pages for:

Table View
Card View
Contacts
Contact Details
Tickets Preview
Quick Links
Reports

Intro to the Modules

The premium admin dashboard used responsive modules to create compatible pages and modules efficient for building web apps and websites. Falcon admin dashboard template offers 9 components as the core components for your web apps and site.
Let’s take a look into what you’re going to get with the pack:

Forms
The form module of Falcon is consisted of five different types of forms that are used meticulously and thoughtfully on the dashboard’s layout. The five types are as follows:
- Basic: The basic form type is the form type with the least interactivity, and detailed documentation to customize them is attached with the menu. The basic form component is consisted of six elements as listed below:
  - Form Controls
  - Input Group
  - Select
  - Checks
  - Range
  - Layout
- Advance: Falcon provides advanced form layouts created with the lightweight & configurable select box/text input plugin Choices.js.
- Floating Labels: Falcon’s floating labels are integrated with those from Bootstrap’s. You can use the default ones or change and bring in other floating labels from Bootstrap.
- Wizard: The wizards are made with responsive card components, and you can use the prebuilt version or customize them as you want to.
- Validation: Falcon avails user-friendly prebuilt HTML pages for validation to provide validation, made with HTML5 form validation. You can customize the styles with help from the attached documentation.
Tables
Falcon admin dashboard template avails detailed documentation with examples for opt-in styling tables, as well integrated with the Tables on Bootstrap. It offers three pages as below:
- Basic Tables: Consists of three prebuilt, customizable table components.
- Advance Tables: Using List.Js, Falcon made its responsive advanced tables, with easy documentation on the data table components and List.Js.
- Bulk Select: Falcon’s bulk select component will allow you to check multiple checkboxes at once and toggling a UI to perform bulk actions for selected
Charts:
Falcon uses chart.js for simple chart creation and avails three HTML pages as below:
- Chart.Js
- D3Js
- ECharts
Icons:
Falcon has integrated four different icons and fonts library into the template with simple and user-oriented documentation, as listed below:
- Font Awesome
- Bootstrap Icons
- Feather
- Material Icons
Maps:

Falcon avails Google Maps and Leaflet Map into the template for easy and simple user-friendly orientation.
Components:

The rich components list of Falcon Admin Dashboard template includes:

Column 1	Column 2	Column3
Accordion	Collapse	Placeholder
Alerts	Cookie notice	Pagination
Anchor	Countup	Popovers
Animated icons	Draggable	Scrollspy
Background	Dropdowns	Search
Badges	Jquery	Spinners
Bottom bar	List group	Toasts
Breadcrumbs	Modals	Tooltips
Buttons	Navs & Tabs	Treeview
Calendar	Offcanvas	Typed text
Cards	Pictures	Videos
Carousel	Progress bar	Timeline

Utilities: Falcon’s utility list is rich with the following responsive components for a user-focused and compatible dashboard template.

Column 1	Column 2
Borders	Position
Clearfix	Spacing
Colors	Sizing
Colored Links	Stretched Link
Display	Text Truncation
Flex	Typography
Float	Vertical Align
Grid	Visibility
Overlay Scrollbar

Widgets
Falcon’s widgets come with simple number stats and charts for easy exhibit of your stats contents using these.
Multi Level:
Falcon admin dashboard template offers three built-in multilevel drop-down options that you can incorporate into your project.

Customizing Falcon

Falcon admin dashboard template is created with easily customizable and clean codebase for hassle-free customization. The template can be customized with or without gulp-based workflow. Let’s see how each of the two work:

Customization Without Gulp

Now, if you’re using Falcon admin dashboard template without Gulp, here’s your tips and easy, at hands tricks:

Styling

Add custom CSS and override the theme style in the public/assets/css/user.css file.

Changing theme colors

Override the theme style in the public/assets/css/user.css file. You can update all the colors with the CSS variables. Remember to assign the customized color to its corresponding RGB color. You might as well need to update the component’s CSS variables too.

Dark Mode

To see all the available variables, go to the /public/assets/css/theme.css file to find all the CSS variables you’ll need to create Dark Mode. You can copy any custom variable to your /public/assets/css/user.css file and update it to override any prebuilt variable.

Customization With Gulp

Falcon provides a precise documentation of how to modify the template with gulp-based workflow. The doc describes how the project you’re running with Falcon can be modified using Gulp.

Set Up Configuration

Falcon is built with a global configuration system and with a single global JavaScript is all you’ll need to change the theme. To set the configuration, you’ll need to edit the src/js/config.js file (for setting to create without Gulp, edit the public/assets/js/config.js file.).

This will avail different areas of modification, which are as follows:

isNavbarVerticalCollapsed: Setting it True will keep the vertical navbar collapsed when a new page loads.
Theme: To set the default color mode for your project, i.e., setting it dark will make the default color mode dark.
IsRTL: using true will make the whole layout right-to-left, recommended for languages like Hebrew, Arabic, or similar others.
isFluid: If set true, fluid mode will be enabled and the container will become full-width.
navbarStyle: This option allows change of the vertical navigation style with the given values: transparent, vibrant, inverted, & card.
navbarPosition: This option allows you to set the navbar position with the three given values like Top, vertical and combo.

Styling

Falcon admin dashboard has got easy style customization option, and the recommendation is to customize the theme using user style files. The steps you are to follow are as follows:

Add your own SCSS to override the theme style from the src/scss/user.scss file.
To make broader changes to the design of the theme, use src/scss/_user-variables.scss for changing the color scheme or font sizes. Any variable from node_modules/bootstrap/scss/variables or src/scss/theme/_variables.scss can be used to override the pre-built style.
You can update the src/scss/_bootstrap.scss to remove Bootstrap components.

Changing Color Scheme

If you use the gulp-based workflow to change the color schemes, you can do it in two different approaches:

Using SCSS Variables: This is the recommended approach of Falcon’s color customization. You can bring your needed color variables from src/scss/theme/_colors.scss and paste it into src/scss/_user-variables.scss and update the variables according to your necessity.
- Falcon uses light mode as the default theme style. Hence, updating any Bootstrap SCSS variable will take effect in the light mode. To update any color, you’ll just need to find the corresponding variables and place them to _user-variables.scss files.
- If you want to update the theme colors for dark mode, you’ll need to update $theme-dark-colors variable and update the $dark-grays variable to update the grays for dark mode.
Using CSS variable: Remember to update CSS variable for both the modes if you’re using this approach. This means that, if you’re changing any color of the theme, you’ll need to assign its corresponding RGB color as well, and sometimes you’ll need to update the corresponding component’s CSS variables too.

Dark Mode

Falcon allows easy switch between the two modes. The theme allows enabling dark mode by default, or create a light/dark switch. This dashboard has default toggle components for dark mode. You can toggle dark mode with checkbox, radio input, switch input and custom icon input.

Modify Dark colors using SCSS

After you find the variables used to create dark mode in the /src/scss/theme/root/_dark.scss file, copy the variable that you want to override in your /src/scss/theme/user.scss file and update as you see fit. Ensure a running gulp while doing so.

Pro Tip 1: You can keep a style constant regardless of current (light or dark) mode Using the Dark CSS classes in HTML

If you want to retain a component’s color regardless of the theme mode, you can use the following attributes:

Value	Result
data-bs-theme=”light”	It will keep the color light even if the current mode is dark
data-bs-theme=”dark”	It will keep the color dark even if the current mode is light

Pro Tip 2: Override Background and Text color only for dark mode

If you want to use any color other than the default ones of the dark theme elements, you can use special dark classes:

dark__bg-*
dark__text-*

Plugin

There are many built in plug-ins incorporated in Falcon admin dashboard. You can install them in two different ways:

Simple Approach (without npm)

You can place your new custom plugin in the public/vendors file. Then you’ll be able to simply link the plug-in files o your HTML and use them.

Using npm

In case of installing a new plug-in to the project using npm, you’ll need to:
npm i (your plugin name)
Go to the vendors.json file and give the path directory from node_modules as follows:
"your-plugin-name": { "src": ["dist/your-plugin-name.min.js", "dist/your-plugin-name.min.css"], "dest": "your-plugin-name"}

dest refers to public/vendors/ where gulp will copy the files from the plug-in and use the vendors folder to store necessary plug-ins and the name of the folder for all the plug-ins are given the same name as the dest value.

Just run the following command when you’re done with the earlier steps: gulp vendor: move

Figma design File

Falcon Admin & WebApp Template provides a Figma design file for the users, which is still under development as the template was initially built with direct codes and not all the designs are recreated with Figma.

To add your own tweaks into the design:

Download Figma
Open the Figma link from the README.md
Duplicate the “Read-only” file and go to your grid of documents in Figma and click on the ellipsis icon on Falcon (Distributed) and then duplicate to create an editable version of the theme.

Optimizing Falcon According to Users’ Needs

You can customize and modify the theme according to your users’ needs. Falcon avails easy and simple customization option for both Gulp-based and Non-gulp users. Let’s dive into the clean codebase, see how this works:

Optimizing Falcon Without Gulp

Falcon avails detailed guideline to follow for easy and simple customization. For optimizing the template without Gulp-based workflow, find your tips below:

Reducing HTML

If you’re not using a gulp-based workflow, remember that your changes will be limited to that specific HTML page that you’re customizing, and will only be visible when the HTML page is opened. Remove any unwanted HTML from the public directory.

Optimizing Falcon Stylesheet with Gulp

It’s recommended not to modify the theme.css file, and all the modification should be made in the user.css. You can add your own custom CSS in the file to incorporate that in your project.

Removing RTL

If you do not need RTL in your project, remove the RTL related stylesheets, links and scripts from necessary HTML files and related CSS files from public\assets\css

Disabling Dark Mode

To disable Dark Mode on your project, simply remove all the related variables from :root in public\assets\css\theme.css file, and you’ll be good to go!

Removing Plugins

Remove any unnecessary plugin from the corresponding folder of the public\vendors directory.

Optimizing Falcon with Gulp

With Falcon’s documentation on using gulp-based workflow to modify the theme, it’s easier to optimize and use the most minimal version without much hassle. If you’re using Gulp, find your tips below:

Reducing HTML

Falcon admin dashboard template offers easy and simple customization option for its users. You can remove the unwanted files from different directories and the mixins from pug files. The changes made this way are global, and you’ll find and see the changes in the preview.

Customizing Falcon Stylesheet with Gulp

You can also customize the theme as needed by customizing the stylesheet from the download file. This too can be done with or without gulp-based workflow. Let’s see the process:

Modify the Theme

SCSS is used in creating Falcon admin dashboard template, and it enables modifying or minimizing the SCSS imports from src/scss/theme/_theme.scss and src/scss/_bootstrap.scss files as you need. It’ll reduce the compiled CSS.

Remove RTL

You can remove the inclusive RTL feature if you do not need that for your project. You can remove the related stylesheets links and scripts from the src\pug\layouts\LayoutTheme.pug file.

Disable Dark Mode

From the clean codebase of Falcon, find the _dark.scss from src\scss\theme\root_dark.scss file and remove it.

Reduce Unwanted JS

Easily find and remove the JavaScriplt files to from the scr\js\theme.js and modify Falcon as you want to and maintain the style you want.

Removing Plugins

To remove unwanted plugins, remove the related paths from vendor.Js and you’ll be good to go.

As you can see, using Falcon Admin & WebApp Template can help you with your admin panel project with its responsive design and compatible efficiency. More to that, it’ll help you reduce extra effort and time and help you ace your project by ensuring higher search engine ranking and making your online presence stronger than ever.

Purchase Falcon now and watch your creative project fly higher with stronger wings!

Best Ways to Use Media Query Breakpoints with 3 Frameworks in 2023

ThemeWagon — Sun, 19 Mar 2023 10:55:23 +0000

Web design is responsive design. Responsive web design is web design, done right.
— Andy Clarke, creative director, product & website designer

Responsive web design has been around as a user interface (UI) design approach for a while now. More and more people are therefore looking for a responsive website or a responsive online presence to conduct their businesses. And with its growth, CSS Media Query Breakpoints have become a familiar name in programming and development.

The term “responsive design,” coined by Ethan Marcotte, describes using fluid grids, fluid images, and media queries to create responsive content. In fact, media query breakpoints let designers create adaptive and responsive designs that will automatically adapt to the browser space to ensure content consistency across devices. Media query introduced breakpoints for the sole purpose of this, and designers implement breakpoints in distinctive styles throughout the framework they’re working with.

In this article, we’ll try to walk you through the path of media query breakpoints that you might wanna be familiar with before opting for a new web dev project or if you are one of us who needs to know their websites or online presence thoroughly.

About Media Query

Media query is a CSS technique to design responsive content to be presentable on all devices and screens ranging from desktop to mobile. It essentially includes conditions, and the result will be responsive only if the conditions are met. Also, it lets you apply CSS styles depending on a device’s general type or other characteristics like screen resolution or browser viewport width.

Developers tailor Media-dependent style sheets for different media types ad it consists of a media type and zero or more expression that check for the conditions of particular media features such as, ‘width’, ‘height’, and ‘color’ to tailor presentations to a specific range of output devices without changing the content.

The simplest media query syntax looks like this:

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

And it consists of the following:

A media type telling the browser about the kind of media type the code is for
A media expression, that can be a rule or test to be passed for the contained CSS to be applied
A set of CSS rules is to be applied if the test passes and the media type is correct.
Also, the possible types of media to specify are all, print and screen. After specifying the type, you can target media features with a media rule. As media features describe the specific characteristics of a given user agent, output device, or environment, they are range features, meaning you can prefix them with ‘min-’ or ‘max-’ to express the minimum or the maximum condition constraints.

Brief on min-width and max-width

The feature detected most often to create responsive designs is viewport width. You can apply CSS if the viewport is above, below, or an exact width, using the min-width, max-width, and width media features.

You can use these features to create responsive layouts for different screen sizes. As aforementioned, the width and height media features can be used as ranges and be prefixed with min- or max- to indicate the measurement of values. Since it’s more useful to use min-width or max-width to create responsive designs, width, and height are rarely found to be used alone.

Min-width is the minimum width of a specific viewport, and the simplest code looks like this:

@media screen and (min-width: 600px) {
    p {
        font-size: 16px;
    }
}

The code is specified for when the minimum screen width is 600px or wider. In this case, it’ll resize the fonts to 16px. Any viewport with this screen width will display the paragraph text in the specified size.

Similarly, with max-width, the code looks like this:

@media screen and (max-width: 700px) {
  p {
    font-size: 25px;
  }
}

In this case, the above code states the alteration of the paragraph’s font size to 25px when the viewport width is 700px or less.

About Breakpoints

Breakpoints are the predefined points in the code, to which the designed contents respond to adapt to the new viewport size or the device type to display the accurate layout. Media query breakpoints are values for a designer to define in the CSS and are decided either based on the device type or the content type.

These breakpoints are referred to as media query breakpoints since they are implemented with a media query. With breakpoints in place, website contents will align themselves with screen size and display themselves in a way that facilitates visual consumption.

Framework-based Implementation

Deciding on an approach to add breakpoints can be tricky as there’s no rule or syntax that’s applicable to all frameworks. Each framework implements these breakpoints in different ways. No two do it the same way, and therefore, different ways to implement breakpoints in different frameworks are briefly described below:

Breakpoints in Bootstrap

As breakpoints are the building blocks of responsive design, Bootstrap has a very distinct and straightforward approach to implementing breakpoints. Its CSS aims to apply the bare minimum of styles to make the layout work better at the smallest breakpoints and then layers on styles to adjust the design for larger viewports.

Bootstrap includes six default breakpoints which are referred to as ‘grid tiers’ sometimes to build responsive designs. These breakpoints can be customized if you’re using the source Sass files. The default Bootstrap breakpoints are as such:

Breakpoint	Class infix	Dimensions
X-Small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

The breakpoints are customizable with Sass, which can be found in a Sass map in Bootstrap’s official** _variables.scss** stylesheet. You can use the breakpoints in your code as below:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Configuring Min-Width in Bootstrap

Bootstrap primarily uses the following breakpoints for layout, grid system, and components:

// Source mixins

// No media query necessary for xs breakpoint as it's effectively 
`@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

These Sass mixins use the values declared in the Sass variables to translate in the compiled CSS. for instance:

// X-Small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Configuring Max-width in Bootstrap

Sometimes media queries are used in Bootstrap to go in the other direction (the given screen size or smaller):

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Since browsers don’t support range context queries, Bootstrap works around the min- and max- prefixes, and viewports with fractional widths by using values with higher precision. These mixins above subtract .02px from the declared breakpoints and use them as the max-width values. For instance:

// X-Small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

Configuring for Single Breakpoint

If you need to target a single segment of screen sizes, you might want to use the predefined media queries and mixins by Bootstrap. Those are as follows:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
@include media-breakpoint-only(xxl) { ... }

And, for instance, if you use the** @include media-breakpoint-only(md) { … }**, it will result in:

Between Breakpoints

Moreover, media queries may span multiple breakpoint widths, like:

@include media-breakpoint-between(md, xl) { ... }

Which then results in:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

Pro Tip: Customize And Extend Bootstrap To Have More Break Points!

You can use Sass variables and mixins to add custom and modified breakpoints according to your needs if you’re using the source codes of Bootstrap. As you know, variables and maps determine the number of columns, the width of gutters, and the media query points. You can use them to generate custom mixins as described below:

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

These mixins allow you to customize the predefined classes in your code and customize them according to your needs. The use case syntax looks as follows:

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Implementing in Bootstrap:

Breakpoints in Tailwind CSS

Breakpoints target the most common screen sizes most people stick to the default one and the creators of Tailwind CSS put a lot of thought into the default breakpoints. We’re trying to explain and exemplify ways of modifying the default ones.

It’s to remember that the order of the breakpoints is crucial, as the framework reads the breakpoint’s order to create necessary media queries. Because of the nature of CSS, the last breakpoint has more specificity than the first breakpoint.

Let’s see the ways of implementing breakpoints in Tailwind CSS:

Configuring to Add a lower breakpoint

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    screens: {
      xs: "375px",
      ...defaultTheme.screens
    },
 }
}

To add an additional small breakpoint, you can use ‘extend’ as the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted in ascending order to work as expected with a min-width breakpoint system.

Configuring to Add A Bigger Breakpoint

In the extended section

You can easily add an additional breakpoint with the ‘extend’ key if you need to, and the code will look like this:

module.exports = {
  theme: {
    extend: {
      screens: {
        '3xl': '1600px',
      },
    },
  },
  plugins: [],
}

This will enable you to add your custom screen to the end of the default breakpoint list.

By overwriting the defaults

You can override the entire ‘screens’ by respecifying the default breakpoints:

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    screens: {
      'xs': '475px',
      ...defaultTheme.screens,
    },
  },
  plugins: [],
}

The default theme is exposed at ‘tailwindcss/defaultTheme’ so that you don’t have to maintain the list of default breakpoints.

Configuring Using Custom Screen Names

Max-width Breakpoints

You can specify your screens as objects with a ‘max’ key to work with max-width breakpoints. The syntax should look like this:

module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '1535px'},
      // => @media (max-width: 1535px) { ... }

      'xl': {'max': '1279px'},
      // => @media (max-width: 1279px) { ... }

      'lg': {'max': '1023px'},
      // => @media (max-width: 1023px) { ... }

      'md': {'max': '767px'},
      // => @media (max-width: 767px) { ... }

      'sm': {'max': '639px'},
      // => @media (max-width: 639px) { ... }
    }
  }
}

Remember to list max-width breakpoints in descending order for them to override each other as expected.

Fixed-range breakpoints

If you want to specify both a ‘min-width’ and ‘max-width’ in your breakpoints, you can use ‘min’ and ‘max’ keys together. The syntax will look like this:

module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      // => @media (min-width: 640px and max-width: 767px) { ... }

      'md': {'min': '768px', 'max': '1023px'},
      // => @media (min-width: 768px and max-width: 1023px) { ... }

      'lg': {'min': '1024px', 'max': '1279px'},
      // => @media (min-width: 1024px and max-width: 1279px) { ... }

      'xl': {'min': '1280px', 'max': '1535px'},
      // => @media (min-width: 1280px and max-width: 1535px) { ... }

      '2xl': {'min': '1536px'},
      // => @media (min-width: 1536px) { ... }
    },
  }
}

These irregular breakpoints will only be effective when the viewport size is explicitly within the defined range. The code will look like this:

<div class="md:text-center">
  This text will be centered on medium screens, but revert back
  to the default (left-aligned) at all other screen sizes.
</div>

Multi-range breakpoints

You can also have a single breakpoint definition to apply in multiple ranges. For instance, if you want your breakpoints to base on the content area, rather than the entire viewport, you’ll be able to simulate that by having one of your breakpoints fall back to a smaller breakpoint when the sidebar becomes visible and shrinks to the content area.

A simple example is given below for a better understanding:

module.exports = {
  theme: {
    screens: {
      'sm': '500px',
      'md': [
        // Sidebar appears at 768px, so revert to `sm:` styles between 768px
        // and 868px, after which the main content area is wide enough again to
        // apply the `md:` styles.
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
      'lg': '1100px',
      'xl': '1400px',
    }
  }
}

Custom media queries

Moreover, if you want to have full granted control over the generated media query, you might want to use the ‘raw’ key. The syntax will be as follows:

module.exports = {
  theme: {
    extend: {
      screens: {
        'tall': { 'raw': '(min-height: 800px)' },
        // => @media (min-height: 800px) { ... }
      }
    }
  }
}

Implementing Breakpoints in Tailwind CSS

Breakpoints in Foundation

Foundation has three core breakpoints for sites:

Small: any screen.
Medium: any screen 640 pixels or larger.
Large: any screen 1024 pixels or larger. You can modify the components at different screen sizes using special breakpoint classes, unlike Bootstrap or Tailwind CSS. See the code exemplified below:

<div class="grid-x grid-margin-x">
  <div class="cell small-6 medium-4"></div>
  <div class="cell small-6 medium-8"></div>
</div>

In the above code, the left-hand column is six columns wide on small screens, hence .small-6. On medium-sized screens, the class .medium-4 overrides the small style, changing the column to be four wide.

If you’re using the CSS version, you can use the following media queries to imitate the core three:

/* Small only */
@media screen and (max-width: 39.9375em) {}

/* Medium and up */
@media screen and (min-width: 40em) {}

/* Medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {}

/* Large and up */
@media screen and (min-width: 64em) {}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {}

Changing the Breakpoints

You can change the default breakpoints if you’re using the Sass files. The names of the breakpoints and their widths are enlisted in the official doc as such:


$breakpoints: (
  small: 0px,
  medium: 640px,
  large: 1024px,
  xlarge: 1200px,
  xxlarge: 1440px,
);

These values are converted to ems at the end for use in media queries though they’re listed above in pixels. Also, there are two extra breakpoints (xlarge & xxlarge) that are not used for any components and do not output any CSS classes that use them by default.

Remember to list the breakpoints in ascending order so that the keys like ‘down’ in the breakpoint function will work as expected.

You can also change it by modifying the $breakpoint-classes variables in your settings file and any change in the list will change the CSS class output. It will look like this:

$breakpoint-classes: (small medium large);

To add **xlarge **class in your CSS, you can just add it to the end of the list as such:

$breakpoint-classes: (small medium large xlarge);

Sass

The Breakpoint Mixin

According to their official doc, you can use the named breakpoints, or custom pixel, rem, or em values. You’ll have to call it with @include and include the CSS content you want inside 2nd brackets. It should look as follows:

.element {
  // Only affects medium screens and larger
  @include breakpoint(medium) {
    // All CSS in here goes inside the media query
  }
}

After separating the breakpoint value by space, adding keywords can change the media query behavior.

.element {
  // Only affects medium screens and smaller
  @include breakpoint(medium down) { }
  // Only affects medium screens, not small or large
  @include breakpoint(medium only) { }
}

You can also pass in custom values of your choice since all values are converted to em at the end.

Check the example below:

.element {
  // Converted to 20em
  @include breakpoint(320px) { }
  // Unitless values are assumed to be pixels
  @include breakpoint(320) { }
  // Converted to 40em
  @include breakpoint(40rem) { }
}

Lastly, there are three special media, portrait, landscape, and retina that are not width-based. Doing so, you’ll get the output of a media query for device orientation or pixel density rather than the screen width. The configuration should be as follows:

.element {
  @include breakpoint(landscape) {
    // CSS for landscape-oriented devices only
  }
  @include breakpoint(retina) {
    // CSS for high-resolution displays only
  }
}

Breakpoint Function

The functionality of the breakpoint() mixin comes from an internal function similarly named breakpoint(). While writing your own media query, you can use this function to directly access the logic of the mixin. See the example below:

@media screen and #{breakpoint(medium)} {
  // Medium and up styles
}

You can use this to combine media queries together like:

@media screen and #{breakpoint(medium)} and #{breakpoint(xlarge down)} {
  // Medium to extra large styles
}

JavaScript

Working with Media Queries

Foundation doc includes a set of helpful functionalities in their JavaScript. You can find them all on the Foundation.MediaQuery object.

As the MediaQuery utility uses the Sass breakpoint settings and requires the Foundation CSS to be imported, you’d better remember to include either foundation-everything() or foundation-global-styles().

You can get the name of the current breakpoint with MediaQuery.current.

Foundation.MediaQuery.current // => 'small', 'medium', etc.

Also, you can use MediaQuery.is() to check where the breakpoint of the screen is at, such as:

Foundation.MediaQuery.is('medium') // => True for "medium" or larger

You can use modifiers like up(default), down, and only in Sass or use the equivalent MediaQuery.atLeast(), MediaQuery.only() and MediaQuery.upTo() like:

// ↑ True for "medium" or larger (by default)
Foundation.MediaQuery.is('medium up');
Foundation.MediaQuery.atLeast('medium');

// → True for "medium" only
Foundation.MediaQuery.is('medium only');
Foundation.MediaQuery.only('medium');

// ↓ True for "medium" or smaller
Foundation.MediaQuery.is('medium down');
Foundation.MediaQuery.upTo('medium');

If you need to get the media query breakpoint, use MediaQuery.get like this:

Foundation.MediaQuery.get('medium') // => only screen and (min-width: 640px)

Implementing Breakpoints in Foundation

Adding CSS Breakpoints: Useful Tips!

You might want to consider the following approaches before deciding on the breakpoints you’re to apply in your design to create better output and responsiveness:

Using minified HTML, CSS, and JavaScript to optimize your code and reduce page load time (including deleting spaces, commas, and other redundant characters).
Setting the priorities right by starting from smaller viewports is more complicated to design for bigger screens or viewports than it is to do it for smaller viewports.
First addressing the mobile view while designing the output then tweaking it for the desktop view. Doing so, the block-level elements will automatically expand to 100% and most of the contents will be optimized for mobile view.
You should prioritize the features based on the type & form factor of the device.

Using media queries is a popular way to deliver a tailored style sheet into a website to set the conditions for the design to adapt to the size of the screen. Now that you are familiar with the implementation techniques of these breakpoints, hopefully, you’ll get into a better design approach. Though it’s ideal, it’s not always the best approach to do so. To create the best result, think about content at every size, and fix the littlest quirks there are with custom media queries; thus you’ll be investing in the future of your website and in the future of the web in general.

33+ Exclusive In-house Free Templates for 2023

ThemeWagon — Wed, 18 Jan 2023 08:46:59 +0000

Worldwide digitization has brought about the crucial trend of establishing one’s online presence as strongly as possible; which has now become a must for any sort of business growth. People are turning to web developers and designers for well-designed and responsive websites.

Therefore, with the rise of websites, web developers are turning to predesigned website templates that can speed up the creation and development process without compromising quality in any way. Nowadays, many template providers offer responsive and well-designed templates. One of them is ThemeWagon, which has been designing and distributing website templates for web developers.

ThemeWagon has been positioning itself as one of the most reliable template places for a long time. They distribute & design interactive and user-friendly templates for easy development. Though you can find them all here, we have arranged this list for a better insight into all the free in-house templates created with love by the ThemeWagon team.

Go through this list to get better ideas about web design and development with free in-house templates exclusively from ThemeWagon!

Boldo

Boldo is a free landing page template built with the latest frameworks like Bootstrap 5, HTML5, and CSS3. With its clean codebase, this template is made to be responsive across all available devices and screen sizes. Easy-to-customize codes help with building with Boldo with very little knowledge.
see Demo

Key Features

Bootstrap 5
Pug-based workflow
FontAwesome Icons & Fonts
Favicon Icons
Accordions
Carousel

Fotogency

Fotogency is one of the photography website templates made by ThemeWagon for professional or personal use. The template is made with the latest frameworks like Bootstrap 5, HTML5, and CSS3. The photography template features a minimalist design, and the well-chosen typography on its responsive layout gives the template a pleasant visual appeal.
see Demo

Key Features

Slider
Vertical Navigation Bar
Cross-browser Compatible
Tabbed Gallery Content
100% Responsive

Productly

Productly is built for interactive eCommerce websites using the latest frameworks like Bootstrap 5, HTML5, and CSS3. It’s a single-page landing page template that incorporates modern amenities like a pug and gulp-based workflows, call-to-action buttons, footer navigation, and many more. This is a fully responsive template with fewer cross-browser bugs.
see Demo

Key Features

Bootstrap 5
Pug and Gulp-based Workflow
On-hover Effects
Blog Section

Klinik

Klinik is a Bootstrap 4 template made for hospitality businesses using CSS3, HTML5, and JS. This template gives you complete control over the color schemes, UI components, and layout styles with its inclusive SASS files. Its developer-friendly codebase makes it easy to customize for any developer.
see Demo

Key Features

Bootstrap 4
Footer Navigation
Multi-page Template
Pricing Table
Testimonial Carousel

Gohub

Gohub is a minimalist Bootstrap template made using Bootstrap 5, perfect for any travel and tourism website. It provides several development options, like pug & SCSS or HTML & CSS. It’s a lightweight template that incorporates all modern and necessary amenities in its layout. Moreover, it’s a highly optimized template that helps you rank higher in search engine results.
see Demo

Key Features

Bootstrap 5
Business Cards
Single-page Layout
On-hover Effects
Sticky Navigation Bar

Ensurance

Ensurance is a dark-themed template made for insurance company websites. Built on top of Bootstrap 5, this template works perfectly on any web browser, device, or screen size. This template offers a very engaging experience with collapsible call-to-action buttons and a quotation form UI on its beautiful layout.
see Demo

Key Features

Dropdown Menu Bar
Single-page Template
Indicator
Different Navigation Options
100% Responsive

Eduprix

Eduprix is based on Bootstrap 5 and is perfect for any educational website. In its lucrative design, the template incorporates various UI components, such as a hero header with a slider, fun fact counters, testimonial carousels, a top courses section, footer navigation, and many more. This template has both Pug and SCSS files available, so it has added versatility to its design.
see Demo

Key Features

Bootstrap 5
SCSS & Pug files
Gulp-based Workflow
Courses Section
Fun Fact Counters

Livedoc

Livedoc is another in-house free template made with Bootstrap 5 for medical websites. This single-page template allows you to promote your business to a greater audience with a modern design. Its gulp-based workflow allows easy development for its users and engages more users. Cross-browser compatibility is one of the basics of modern websites, and this one has it. Livedoc is fully responsive to any web browser, device, or screen size.
see Demo

Key Feature

Bootstrap 5
Gulp-based Workflow
SCSS & Pug files
Appointment Form UI
Content Slider

Jadoo

If you’re looking for a high-quality travel and tourism company website template for your next project, consider Jadoo. This is a single-page Bootstrap 5 template. The template’s gulp-based workflow allows you to create quickly. This template helps you rank higher in search engine results and enhances your growth with a clean and well-documented codebase. Select this one for a content-driven, dynamic website.
see Demo

Key Features

Bootstrap 5
SCSS & Pug files
Gulp-based Workflow
Single-page Design
On-hover Effects

Quriarbox

Looking for a template to meet your needs for making a courier service website? Well, check Quriarbox out! It’s got a rich collection of user-friendly UI components like a modal video section, slide-down search options, footer navigation, and more. The development doesn’t require in-depth knowledge, so you’ll be able to tweak it to your needs. The template is also fully responsive to all available browsers and devices, including retina screens. Moreover, all the modern amenities make it more engaging for the users.
see Demo

Key Features

Bootstrap 5
Single-page Layout
Modal Video Section
Hero Header
Slide-down Search Option
Custom Illustration

Little Squirrel

Little Squirrel is an educational website template made with Bootstrap 5 and a gulp-based workflow that helps develop without putting in too much effort. It’s got a well-balanced color scheme and a beautiful design to work on. Modern UI components are spread across the layout to improve engagement and the user experience.
see Demo

Key Features

Bootstrap 5
Single-page Layout
Modal Video Section
Hero Header
Slide-down Search Option
Custom Illustration

Traffico

Traffico is a business consulting website template made using Bootstrap 5. The template ensures the best results with its gulp-based workflow. The single-page template meets all the needs with its well-chosen color scheme and simple design. Traffico, being highly responsive to all available browsers and devices, helps you strengthen your online presence.
see Demo

Key Features

Bootstrap 5
On-hover Effects
100% Responsive
Cross-browser Compatible
Testimonial Carousels
Single-page Template

Servion

Servion is a Bootstrap 5 website template for web hosting service providers. It’s a fully responsive template with a gulp-based workflow to make the development process easy and simple. Furthermore, it incorporates necessary modern UI components for improved page engagement. Servion’s bright and top-notch features will help you ace your project.
see Demo

Key Features

Bootstrap 5
Gulp-based Workflow
SCSS & Pug Files
Pricing Table
Minimal Design
100% Responsive

Space

Space, the free Bootstrap 5 theme is made for business websites. This template comes with a beautiful layout and a balanced UI orientation. The single-page template is developer-friendly and doesn’t require much effort to tweak. It’s also cross-browser compatible, SEO-friendly, and optimized for quicker page loading time.
see Demo

Key Features

Bootstrap 5
Gulp-based Workflow
Single-page Template
Split-header with Slider
Idea Section
Cross-browser Compatible

Foodwagon

If you’re searching for a website template that’s best for foodcourts and restaurants, you might want to see Foodwagon. This is a restaurant website template made with Bootstrap 5. It’s a fully responsive template with a minimalistic design. The one-page template has all the modern UI components in its lightweight layout. With a warm color scheme and top-notch UI components, this template will get you what you need.
see Demo

Key Features

Bootstrap 5
Single-page Template
Coupon Cards
Product Slider
Footer Navigation
Gulp-based Workflow

Collab

Collab is a simplistic Bootstrap 5 corporate and business website template. This sophisticated landing page template adapts well to all screen sizes and works with many different browsers. The single-page template has a clean codebase and a user-friendly orientation. Modern UI components make it more preferred among the most available ones. The well-documented codebase will help you rank higher in search engine results, which will enhance your growth.
see Demo

Key Features

Bootstrap 5
SCSS & pug files
Accordions
On-hover Effects
Hero Header with Animation
Customized Illustration

Clickr

Clickr is a free Bootstrap 5 theme for product photography websites. The promising layout for better audience engagement. It’s suitable for any digital photographic agency. Its layout includes responsive UI components to make it more user-friendly. You can customize this template and use it to flaunt your work seamlessly.
see Demo

Key Features

Bootstrap 5
Photo Gallery
Pricing Table
Testimonial Carousel
Product Slider
100% Responsive
Cross-browser Compatible

Watch

Watch free dark-themed template is built with all the latest technologies, like Bootstrap 5, HTML5, and CSS3, for online stores. The completely responsive template has necessary features like a hero header, navigation bar, testimonial carousels, email subscription form UI, and many more on its beautiful skin. Its clean and developer-friendly codebase makes tweaking it easier and simpler. Moreover, the functionality will help you engage more visitors to the page. Choose Watch to create your next project!
see Demo

Key Features

Bootstrap 5
Single-page Template
Gulp-based Workflow
Hero Header
Testimonial Carousels
Footer Navigation

Majestic

Majestic is a free template that is made with Bootstrap 5 for e-commerce websites. Majestic is a fully responsive template that doesn’t break down around any device or screen size including retina screens. Moreover, cross-browser compatibility helps this template have a better engagement rate on the site. The lucrative design gives this template a neat look and finish.
see Demo

Key Features

Bootstrap 5
Clean and Minimal Design
Single-page Layout
Product Carousel
Outlet Carousel
Gallery
Split Hero Header

Voyage

If you’re looking for a traveling website template, Voyage can be the one. It’s a top-notch website template built with Bootstrap 5 and other tech-savvy features. The single-page template includes responsive UI components on its layout, which make this one a user-friendly template. Cross-browser compatibility gives this template a stable finish across all available browsers. The template is fully responsive and optimized for page speed and SEO.
see Demo

Key Features

Bootstrap 5
On-hover Effect
Comparison Chart
Split Header
Flash Deals Carousel
Several Search Options

Safia

Safia is a free multi-purpose template made using Bootstrap 5. This dark-themed template comes with responsive UI components laid out in its minimalistic and well-crafted design. This is a fully responsive template that doesn’t break down across any device or screen size, including retina screens. Moreover, fewer cross-browser bugs make this template a very compatible one. Developer-friendly codebase helps tweak this template according to needs without much hassle.
see Demo

Key Features

Bootstrap 5
Fully Responsive
Gulp-based Workflow
Single-page Template
Pricing Table
On-hover Effects

Klean

Klean is a multi-purpose landing page template built with Bootstrap 5. The slick design is made completely responsive so that it won’t break down while running on different web browsers. Its clean and well-commented codebase makes it rank higher in search engine searches. While being page speed optimized, this template is also cross-browser compatible.
see Demo

Key Features

Bootstrap 5 (Beta-3)
Gulp-based Workflow
Fully Responsive
Clean Design
Gradient Style
Customized Illustration
Call-to-action Buttons

Executive

Executive free Bootstrap 5 template is made for academic websites. The template is easy to use and organized to be user-friendly. Among many others, UI components such as a hero header, on-hover effects, event carousels, and testimonial carousels are some that make this single-page template amazing. Also, a gradient-styled theme attracts more people.
see Demo

Key Features

Bootstrap 5
Clean Design
Single-page Template
Gradient Style
Event Carousel
Footer Navigation

Sevi

Sevi is a clean and contemporary Bootstrap 5 template made for any book-related website. The theme is made to be fully responsive, including the UI components on its layout. The template is page speed and SEO optimized. Its clean and well-documented codebase makes it rank higher in search engine searches. The inclusive gradient design helps this template stand out among many others there are.
see Demo

Key Features

Bootstrap 5
Clean and Minimal Design
Fully Responsive
Dropdown Navigation Bar
Accordions
Gradient Style
Single-page Template

Rhea

Rhea is a travel and tourism website template made with Bootstrap 5. It’s a powerful website template that’s also easy to manage and tweak. Users prefer it because of the developer-friendly and clean codes. Also, responsive UI components and cross-browser compatibility make this theme a high-ranking one, and it helps in better user engagement.
see Demo

Key Features

Bootstrap 5
Single-page Template
Gradient Style
Testimonial Carousel
Integrated Video Player
Booking Form UI

Open Enterprise

Open Enterprise is a minimalistic landing page template for business and corporate websites that helps establish a strong online presence. The feature-rich template incorporates user-friendly and responsive UI components such as a hero header, service section, testimonial carousel, and more. The fully responsive template is also cross-browser compatible, meaning you won’t have to worry about broken layouts while working with this template.
see Demo

Key Features

Bootstrap 5
Fully Responsive
SCSS & Pug Files
Gulp-based Workflow
Hero Header
Customized Illustration
Cross-browser Compatible

Zoufarm

Zoufarm is a template that can be used in many different ways and gives your web development projects more wings. This single-page template is fit for any agricultural or farming website. It is based on clean and well-documented codes to help it rank higher in search engine results. The template comes with page-speed optimization and cross-browser compatibility. You won’t have to wait for the page to load or worry about a broken layout while working with this.
see Demo

Key Features

Bootstrap 5
Gulp-based Workflow
Single-page Template
Gradient Style
Hero Header
100% Responsive

JoBest

JoBest is a responsive landing page template made with contemporary technologies and features that make it unique to use. Fewer cross-browser bugs and complete responsiveness make this template stand out in the crowd. UI components like pricing tables, gradient style, and accordions, along with many others make it user-friendly. Use this template to ace your development project!
see Demo

Key Features

Bootstrap 5
Fully Responsive
Single-page Template
Gup-based Workflow
Accordion
Pricing Table
Footer Navigation

AppLab

AppLab is another template that can help you ace your projects. It’s a multi-purpose landing page template that’s made using all the latest technologies like Bootstrap 5, CSS3, and HTML5. The template is highly responsive and responds to all available devices and screen sizes. Moreover, cross-browser compatibility gives this template high efficiency in any web browser.
see Demo

Key Features

Bootstrap 5
Fully Responsive
Gulp-based Workflow
Clean Design
Gradient Style
Accordions

Trafalgar

Trafalgar is a beautiful landing page template made for multi-purpose uses. The single-page design includes many important UI elements, such as a hero header, gradient style, blog section, on-hover effects, a fixed top-nav bar, and many more, to improve the user experience. The template is fully responsive and cross-browser-compatible.
see Demo

Key Features

Bootstrap 5
Fully Responsive
Gradient Style
Testimonial Carousel
On-hover Effects
Feature Section

DataWarehouse

DataWarehouse is a perfectly made multi-purpose landing page template made with Bootstrap 5. The template is 100% responsive and has fewer cross-browser bugs. It responds to all available devices and screen sizes, including retina screens. Moreover, it’s got modern UI components arranged in a user-friendly way. The beautiful layout with responsive UI components made it one of the most wanted templates.
see Demo

Key Features

Bootstrap 5
Single-page Template
Hero Header
Gradient Style
Customized Illustration

WooLanding

WooLanding is one of the finest Bootstrap 5 products from ThemeWagon. The template is built to be responsive across any web browser and device size. Moreover, it incorporates many UI components in its beautiful and responsive layout. The landing page template welcomes visitors with a well-thought-out design and engages better audiences.
see Demo

Key Features

Bootstrap 5
Single-page Template
Gulp-based Workflow
Fully Responsive
Gradient Style
On-hover Effects
Customized Illustration

LaslesVPN

LaslesVPN is a landing page template designed with Bootstrap 5. It’s a multi-purpose template with a minimalistic design and a well-thought color scheme. The landing page incorporates many UI components, like a hero header, gradient style, fun fact counters, and many more. LaslesVPN is user-friendly. It’s also fully responsive and cross-browser compatible, so you won’t have to worry about any broken layout while developing with this one.
see Demo

Key Features

Bootstrap 5
Single-page Template
Fully Responsive
Gradient Style
Hero Header
Customized Illustration
Fun Fact Counters

Landie

If you’re looking for a bug-free Bootstrap 5 landing page template for your next project, Landie should be it! This landing page template is 100% responsive and works very well on any device or screen size. Moreover, fewer cross-browser bugs make this template well-compatible with all web browsers. You can easily tweak it to your needs as it’s made with a well-commented and clean codebase.
see Demo

Key Features

Bootstrap 5
Clean Design
Hero Header
On-hover Effects
Gradient Style
Call-to-action Buttons

These templates are some of the most popular among the many available. Our significant interest is in user-friendly and bug-free development to help individuals in need grow. This comprehensive list should assist you in gaining objective and required insights into website construction, as you will be able to compare and contrast your demands and desires.

Save the resource for future usage and start developing without fear!

CSS Grid and Flexbox: A Brief Juxtaposition

ThemeWagon — Mon, 31 Oct 2022 05:46:23 +0000

CSS Grid and flexbox are two CSS layout modules with different implementation techniques and usages. Flexbox is primarily designed to avail space distribution between the items in an interface and stable alignment capabilities. On the contrary, CSS Grid excels in dividing a page into key zones or defining the size, position, and layer relationship between the parts of HTML rudimentary control. Because of the existing similarities, the question of better efficiency between these two has become quite prominent among web development circles because of the emerging approach to interactive web designs.

Hence, this article will shed some light on an overall comparison of how flexbox differs from CSS Grid and how the application changes as per the need.

Bringing Together CSS Grid & Flexbox

The introduction of CSS Grid and flexbox replaced age-old hacks to create page layouts, positions of items and alignment of components. Both of the modules have many similarities as they both are display modules. They started with the same target of defining the visual placement of elements with a different approach. Both of them pave the way for calculating the display measurements. They implement justification and alignment similarly, except that flexbox uses common properties for all items while CSS Grid avails individual properties for each item.

Although the roles they intend to play are similar, the best occasions to use each layout model in a website are different based on their approaches and characteristics. There are situations where either one can be used, and there are those where one becomes more suitable than the other. Although the use cases depend on the developer, it calls for a discussion of the differences between the two. There are things Grid is better at doing and things where none can compete with flexbox. Moreover, they can be used together, where grid items can be flex containers and flex items can be used as grid containers.

Some jobs can be done better using Grid. Some specific ones are:

Making whole page layouts considering the layout performance reasons
Making literal grids Requires fewer media query interventions with powerful functionality like auto layout, minmax(), repeat(), and auto-fill.

But, these alone do not make the Grid better than the flexbox. Let’s put the different approaches of the two forward, and hopefully, it’ll help you understand the display modules and their applications a bit better and make your task easier for you.

Dimension in CSS Grid & Flexbox

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for the layout of items in two dimensions – rows AND columns.
Rachel Andrew

The primary difference between flexbox and CSS Grid is that flexbox is one-dimensional. Flexbox lays out items along either the horizontal or vertical axis, where you are to decide if you want a row-based or a column-based layout.

Flexbox allows the elements to wrap, which results in the columns and rows of flex. There’s no way to directly decide or informatively control the exact position of the elements as they merely push the elements along a single axis.

On the other hand, CSS Grid can be considered two-dimensional as it allows the freedom to declare the sizing of both rows and columns and then explicitly place things into them.

Base in CSS Grid & Flexbox

In a flexbox layout, the size of a cell or the flex items is defined inside the flex item itself, while the size of a cell in a grid layout is defined inside the grid container.

See the example below to understand how the sizing is done for flex items and grid cells. The example shows two different ways to build the same layout for better understanding:

Creating the Same Layout with CSS Grid & flexbox

CSS for flexbox

<div class="row">
  <div><h2>a</h2></div>
 <div><h2>b</h2></div>
 <div><h2>c</h2></div>
 <div><h2>d</h2></div>
</div>

.row {
    margin: 25px auto;
    max-width: 350px; 
  text-color: white;

    display: flex;
}
.row > div {
    border: 3px solid #F57CB1;
    flex: 2 2 auto; /* Size of items defined inside items */

  text-align: center; 
    padding: 10px;
}

.row > div:nth-child(odd){
     background-color: #FE2175;
}

.row > div:nth-child(even){
     background-color: #C61EB9;
}
h2{
  color: white;
}

CSS for Grid

    <div class="row">
      <div><h2>a</h2></div>
      <div><h2>b</h2></div>
      <div><h2>c</h2></div>
      <div><h2>d</h2></div>
    </div>

            .row {
        margin: 25px auto;
        max-width: 350px;
        display: grid;
        grid-auto-flow: column;
      }
      .row > div {
        border: 3px solid #f57cb1;
        text-align: center;
        padding: 10px;
      }

      .row > div:nth-child(odd) {
        background-color: #fe2175;
      }

      .row > div:nth-child(even) {
        background-color: #c61eb9;
      }
      h2 {
        color: white;
      }

Gap

Gaps are spaces between content tracks that can be created directly using CSS Grid. It allows you to create a gutter between grid-items using grid-column-gap without much ado. Regarding the grid sizing, gaps act as regular grid tracks, although nothing can be placed into the gap. Also, the row-gap and the column-gap are not the only things that cause tracks to space out. Margins, padding, or the use of the space distribution properties in box alignment can contribute to the visible gap.

See the example below for how grid avails gap between the cells:

gap between flex items & grid cells

CSS for flex

<body>
  <div id="flexbox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div>

    #flexbox {
    display: flex;
    flex-wrap: wrap;
    height: 200px;
    gap: 20px 5px;
    }

    #flexbox > div {
    border: 2px solid purple;
    background-color: skyblue;
    flex: 1 1 32%;
    }
</body>

CSS for grid

<div id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
       #grid {
        display: grid;
        grid-template: repeat(3, 1fr) / repeat(3, 1fr);
        gap: 20px 5px;
      }

      #grid > div {
        border: 2px solid purple;
        background-color: skyblue;
        height: 50px;
      }

As you know, flex doesn’t have the gap property. So you need to take a twisted route to add gaps between items (as shown above). You need to use padding and nested containers, or you have to increase the width of the flex-container while using the justify-content property to spread the flex-items.

Wrap

If the total width of items inside the container is greater than the container’s width, both the layout modules have the option to wrap the items in a new row. The beauty of flexbox and Grid lies in the ability to stretch and squeeze. But each module does it differently. For instance, flex-wrap is used to wrap items into multiple lines, considering each line a container. When flex items are wrapped and pushed in a new row, the layout algorithm treats them as a part of a different flex container, and the pushed items lose their context. So the cells do not get to have the exact sizes as all the others. Look at the examples given below:

flex-wrap : wrap

<div class="outer-container">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
      .outer-container {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
      }
      .red {
        background: #F57CB1;
      }
      .green {
        background: #EC7070;
      }
      .blue {
        background: #9070EC;
      }
      .outer-container > div {
        box-sizing: border-box;
        font-size: 5vw;
        padding: 0.5em;
        color: white;
        text-align: center;
        width: 50%;
      }
      body {
        margin: 0;
      }

flex-wrap:nowrap

Web vitals
Sign in
. Don't have Ahrefs?
Subscribe now
or check our 
free SEO tools
.
<div class="container">
  <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>
  body {
      margin: 0;
      padding: 0;
    }

    .container {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: no-wrap;
    }

    .red {
      background: #F57CB1;
    }

    .green {
      background: #EC7070;
    }

    .blue {
      background: #9070EC;
    }

    .container>div {
      font-size: 5vw;
      padding: .5em;
      color: white;
      width: 60%;
    }

flex-wrap:wrap-reverse

<body>
  <div class="container">
    <div class="red">1</div>
    <div class="green">2</div>
    <div class="blue">3</div>
  </div>
</body>
    .container {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: wrap-reverse;
    }

    .red {
      background: #F57CB1;
    }

    .green {
      background: #EC7070;
    }

    .blue {
      background: #9070EC;
    }

    .container>div {

      font-size: 5vw;
      padding: .5em;
      color: white;
      width: 50%;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

From the example above, you can see the different outcomes for distinctive values. If you set the value of flex-wrap to wrap, the items will be allocated the same space. Also, any item that goes beyond the row will be set in a new row. If the value is set to nowrap, the items will not be wrapped into the same rows; instead, they’ll be hidden and not be shown within the flex container. Moreover, if you set the value to wrap-reverse, the items will be allocated in a reversed continuity.

On the contrary, Grid achieves this using a combination of min-max and auto-fill functions inside the grid-template-columns property. But in Grid, the cells retain the same size as all other cells in the Grid.

When there’s extra space available, the input element will grow twice compared to other input elements. In this case, flexbox outperforms Grid. So for this type of single-dimensional layout, flexbox is well-suited.

This is how CSS Grid works while wrapping items:

Default Placement with Grid

  <div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>  
  .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
div:not(.wrapper) {
  background: #07BCB7;
  padding: 30px 15px
}

Sizing rows in the implicit grid

  <div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
    <div>Five</div>
  </div>  
 .wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
div:not(.wrapper) {
  background: #07BCB7;
  padding: 30px 15px
}

Sizing rows using minmax()

  <div class="wrapper">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four
    <br>This cell
    <br>Has extra
    <br>content.
    <br>Max is auto
    <br>so the row expands.
    </div>
    <div>Five</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

.wrapper div {
  background: #07BCB7;
  padding: 30px 15px
} </style>
</head>

Auto-placement by column

<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
</div>
.wrapper {
    display: grid;
    grid-template-rows: repeat(3, 200px);
    gap: 10px;
    grid-auto-flow: column;
    grid-auto-columns: 300px 100px;
}

.wrapper div {
  background: #07BCB7;
  padding: 30px 15px
}

From the examples above, it is clear that you can use CSS Grid to distribute the items around any or both of the axes. The outputs will vary depending on the values you set.

Overlapping

For items to be overlapped in the flexbox, you need to look at traditional stuff like negative margins and transforms or absolute positioning to break out of the flex behavior. But, Grid is better at doing it. With Grid, you can place items on overlapping grid lines or even right within the same grid cells.

Margin

Flexbox has a feature to push everything as far as you can. It allows putting margin-right: auto on an element, and if there’s enough space available, that element will push everything as far as it can. This is a unique flexbox feature that is not available in Grid.

Space Employment

The way a flex item is sized gets complicated in some cases since it is defined with a combination of width, min-width, max-width, flex-basis, flex-grow, flex-shrink, white space and other properties. For this purpose, Grid has interesting space-occupying features like fractional units and the ability for content to break grids, even though you’re the one to set up grid lines and place the items within them to drop right into the place.

Nesting in CSS Grid & Flexbox

While using CSS Grid, only the direct children become grid items when the display of a grid container is set to grid. They can be placed on the grid created, and the children will display them in normal flow. You can ‘nest’ grids by turning a grid item into a grid container. Since these grids are independent of the parent grid and each other, they do not take their track sizing from the parent grid. This makes it challenging to line nested grid items up with the primary grid.

But, if you set the value subgrid on grid-template-columns, grid-template-rows or both, the nested grid uses the tracks defined on the parent. In this case, gaps are inherited or overridden with a different gap value. Also, line names can be passed from the parent into the subgrid, and the subgrid can also declare its own line names.

Nesting with Grid

    <div id="outer-grid">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div id="inner-grid">
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
            #outer-grid {
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        grid-gap: 8px;
      }
      #outer-grid > div {
        background-color: #40D6C8;
        color: white;
        font-size: 4vw;
        padding: 8px;
      }
      #inner-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 5px;
      }
      #inner-grid > div {
        background: #008A4D;
        padding: 8px;
      }

Nesting with Flex

  <div class="container">
    <div class="red">1
      <div class="green">1a</div>
      <div class="blue">1b</div>
    </div>
    <div class="green">2</div>
    <div class="blue">3</div>
  </div>
      .container {
      display: flex;
    }

    .red {
      background: rgb(0, 225, 255);
      display: flex;
      flex-direction: column;
    }

    .green {
      background: rgb(65, 144, 240);
    }

    .blue {
      background: rgb(251, 170, 120);
    }

    .container div {
      font-size: 5vw;
      padding: .5em;
      color: white;
      flex: 1;
    }

Subgrid

CSS Grid (level 2 layout specification) has a predefined subgrid value for the display property, which is still under the experimental stage. This unique value is a nested grid with display: grid.

Adding this value to a grid container turns the direct children into grid items. The items can then be placed in the grid created. The children are displayed in normal flow.

Setting the value subgrid on grid-template-columns, grid-template-rows or both, Grid uses the tracks defined on the parent instead of creating a new track listing the nested grid uses. For example, using grid-template-columns: subgrid, while the nested grid spans three column tracks of the parent, the nested grid will have three column tracks of the same size as the parent grid. In this case-

Gaps are inherited but can also be overridden with a different gap value.
Line names can be passed from the parent to the children, and the subgrid can also declare its own line names.
In short, the content of the subgrid affects the sizing of the parent grid while allowing content to align across both axes.

You can use the value subgrid on the grid columns, grid rows, or on both dimensions, as in the instance below:

Creating Subgrid with CSS Grid

  <div class="grid">
    <div class="item">
      <div class="subitem1"></div>
      <div class="subitem2"></div>
    </div>
  </div>
      .grid {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: repeat(4, minmax(100px, auto));
      background: #ff7b7b;
      border: 3px solid #32f1ff;
      border-radius: 5px;
    }

    .item {
      display: grid;
      grid-column: 2 / 7;
      grid-row: 2 / 4;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      border: 3px solid #e60877;
      border-radius: 6px;
    }

    .subitem1 {
      grid-column: 1 / 3;
      grid-row: 1 / 3;
      background: #aef9d2;
      border-radius: 5px 0px 0px 5px;
    }

    .subitem2 {
      grid-column: 3 / 6;
      grid-row: 1 / 3;
      background: #a3c5f8;
      border-radius: 0 5px 5px 0;
    }

You can make things like this using flexbox as well, although the procedure gets hefty and messy as the process depends on many media to show the expected output. You’ll need to add display: flex on a parent, creating independent children who will not inherit any parent properties. Moreover, to define their characteristics, you’ll need to define newer parent items each time you need to style any of the children. This results in a long repetitive process of adding more properties to each item.

Inheritance of Values in CSS Grid & Flexbox

In CSS Grid, your nested grid will not inherit the values from its parent grid. This enables changing the parent grid without accidentally affecting the nested grid. Also, you can override the children with a different value. Line names can be passed down from the parents to the children, and the subgrid can declare their own names.

On the contrary, while using the flexbox, the children will be independent and not carry the parents’ characteristics. Newer parent items must be defined before you have to style any children.

Focus on Content Placement: CSS Grid

According to the W3 school, CSS Grid allows users to precisely position and size the elements on their application into the grid areas. CSS Grid focuses on precise content placement where each item is a grid cell, lined up along both vertical and horizontal axes. Hence, CSS Grid is the module to control the positioning of items within a layout.

On the other hand, it’s tough to predict the behavior at certain viewports, which can create amazing results. Though you can set the widths and heights of flex items, it can hinder the process by being less flexible.

Creating Unusual Layouts

CSS Grid has properties like grid-template-rows and grid-template-columns and utilities like fraction units to let you calculate everything precisely. Also, it’s possible to create responsive layouts without using media queries. Grid makes creating unusual layouts like broken, asymmetrical or overlapping simpler and effortless. Moreover, by adding a simple Grid technique, you can make the grid cells wrap and adapt to any viewport size.

Creating unusual layouts with grid

 <div class="grid-container">
    <div class="item-1">1</div>
    <div class="item-2">2</div>
    <div class="item-3">3</div>
    <div class="item-4">4</div>
    <div class="item-5">5</div>
    <div class="item-6">6</div>
  </div>
      .grid-container {
      display: grid;
      grid-template: repeat(3, [row] minmax(120px, 1fr)) / repeat(4, [col] 1fr);
      grid-gap: 20px;
    }

    .item-1,
    .item-2,
    .item-3,
    .item-4,
    .item-5,
    .item-6 {
      align-items: center;
      justify-items: center;
      font-family: 'Overpass', sans-serif;
      font-size: 4em;
      line-height: 1;
      color: white;
    }

    .item-1 {
      grid-column: col 1 / span 4;
      grid-row: row 1;
      background: linear-gradient(to left, #bc97ff, #00aaff);
    }

    .item-2 {
      grid-column: col 4;
      grid-row: row 1 / span 3;
      background: linear-gradient(to right, #f23296, #fe5845);
      opacity: 0.8;
    }

    .item-3 {
      grid-column: col 1;
      grid-row: row 2 / span 2;
      background: linear-gradient(to top, #cc67ff, #9772f3);
      z-index: 1;
      opacity: 0.8;
    }

    .item-4 {
      grid-column: col 2 / span 2;
      grid-row: row 2;
      background: linear-gradient(to left, #26ac17, #63ff7b);
    }

    .item-5 {
      grid-column: col 1;
      grid-row: row 3;
      background: linear-gradient(to top, #1ed5d8, #17f2eb);
    }

    .item-6 {
      grid-column: col 2 / span 3;
      grid-row: row 3;
      background: linear-gradient(to right, #f4ac53, #4308f2);
    }

Despite the layout being wrapped based on the available space, it’s not content-aware like flexbox, as the contents inside the items do not flexibly stretch out.

Focus on Content Flow: Flexbox

Unlike Grid, flexbox focuses on content flow rather than focusing on content placement. (Define Content flow) The content of the item determines the widths or heights of flex items. Flex items grow and shrink according to their inner content and the available space.

Flexbox enables you to allocate space and align items flexibly. You can make fix-width flex items by using the width or flex-basis properties. But, doing that results in the loss of flexbox’s content awareness. Since flexbox treats each row independently, different rows align flex items differently based on the number of texts inside.

Deciding Content Behaviors

Flexbox allows you to decide the way your content should behave when there’s too much or not enough space on the screen. Flexbox sizing makes creating layouts fully adaptable to the screen possible. Using the flex-grow and flex-shrink properties, you can achieve a completely fluid layout that optimizes the allocation of flex items at every viewport size without relying on layouts and orientations or media queries to support them.

CSS Grid & flexbox: Example

There are many use case examples for both CSS Grid and flexbox on the web. We have chosen two examples of grid creation for a simple comparison between the two use cases.

Random grid created using flexbox

  <div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  * {
   box-sizing: border-box;
  }
.container { 
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100vh;
  flex-wrap: wrap;
  } 
.container > div {
  font-size: 5vw;
  padding: .5em;
  color: white;
  margin: 10px;
  border-radius: 3px;
  background: rgb(182, 191, 244);
  border: 5px solid rgb(139, 71, 255);
}
.container > div:nth-child(odd) {
  width: 10%;
  }
.container > div:nth-child(even) {
  width: 20%;
  }
.container > div:nth-child(2),
.container > div:nth-child(4),
.container > div:nth-child(9) {
  width: 60%;
  }  
body {
  margin: 0;
}

Creating random grids using CSS Grid

  <main class="grid">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </main>
  .grid {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
}
.box {
  color: white;
  font-size: 4vw;
  padding: 10px;
  background: rgb(237, 139, 181);
  text-align: center;
}
.box:nth-child(1) {
  grid-column: span 12;
  }
.box:nth-child(2), 
.box:nth-child(3) {
  grid-column: span 6;
  }
.box:nth-child(4),
.box:nth-child(5),
.box:nth-child(6) {
  grid-column: span 4;
  }
.box:nth-child(7),
.box:nth-child(8),
.box:nth-child(9),
.box:nth-child(10) {
  grid-column: span 3;
  }
.box:nth-child(11),
.box:nth-child(12),
.box:nth-child(13),
.box:nth-child(14),
.box:nth-child(15),
.box:nth-child(16) {
  grid-column: span 2;
  }

CSS Grid & flexbox: Use cases

Though the targets are the same as CSS Grid and flexbox, they are different from each other in their implementation process. In some cases, CSS Grid can not compare to flexbox; in others, Grid remains the best. The different use cases are pointed out below:

-Small Design: Flexbox is ideal if you’re working with a small layout to implement with fewer rows and columns.
Align Items: When you need to align items, all you have to do is create a container using display: flex and define the flex-direction of your need and get what you want in minutes.
Content-first Design: If you’re to create a website with a low idea of how your content will look, or if you just want to fit everything in a layout, flexbox will be the perfect one to work with.
-Align Items: When you need to align items, all you have to do is create a container using display: flex and define the flex-direction of your need and get what you want in minutes.
-Content-first Design: If you’re to create a website with a low idea of how your content will look, or if you just want to fit everything in a layout, flexbox will be the perfect one to work with.

To be true, you’ll be able to create almost all layouts you want with flexbox and get similar results as Grid. But to create a better CSS approach to have more maintainable applications in the long term, it’s better to use CSS Grid as it allows for creating a more concise layout. The exemplary implementations of CSS Grid are listed below:

- Complex Design: When you have a more complicated design to implement, it’s better to use CSS Grid. Its two-dimensional layout system helps you create more complex and maintainable web pages.
-Gap between Block Items: Grid has a more accessible gap property that isn’t available in flexbox. This property allows you to define the gap between the rows and columns without having to use the margin property that causes issues if you’re working with many breakpoints.
-Overlapping Elements: As mentioned before, Grid is better at overlapping elements. You can do it easily with grid-row and grid-column properties, while flexbox still needs to use some hacks like margins, transforms or absolute positioning to do so.
-Layout-First Design: If you have a designed layout structure, it’ll be easier to use CSS Grid as its two-dimensional layout system makes positioning items easier.

Choosing one to use between flexbox and CSS Grid can be perplexing as you have to know every nook and cranny of them. It’s helpful to learn the use cases first to get the best result. Learning the use cases best aids your decision and gets you an anxiety-free development all the way through. You can also check the official documents for more information and implications to make the best decision regarding any use. We cordially hope this post will walk you along the way and get you the best of web design.

DEV Community: ThemeWagon

Best Open-Source UI Libraries: Create Intuitive SaaS Dashboards Effortlessly

Hummingbird

GitHub User Metrics

Key Features

Flowbite

GitHub User Metrics

Key Features

Daisy UI

GitHub User Metrics

Key Features

HeroUI

GitHub User Metrics

Key Features

Material UI

GitHub User Metrics

Key Features

Chakra UI

GitHub User Metrics

Key Features

Ant Design

GitHub User Metrics

Key Features

Mantine

GitHub User Metrics

Key Features

SaaS UI v3

GitHub User Metrics

Key Features

Radix UI

GitHub User Metrics

Key Features

PrimeReact

GitHub User Metrics

Key Features

Quick Tip: Pick The Right UI for SaaS

Frequently Asked Questions

• How important is TypeScript support in a UI library for SaaS development?

• What is the difference between Ant Design and Material UI?

• Is Radix Themes different from Radix UI?

• Can I use multiple UI libraries in one SaaS project?

From Go-To to Outgrown: Why Bootstrap Isn’t the First Choice for Devs in 2025

Bootstrap’s Limitations: Why It’s Falling Behind

Bootstrap’s Popularity: What’s Driving the Decline

Emphasis on Custom Styles

Compatibility with Other Frameworks

Evolution of CSS Layout Modules

Slow Adaption with New Design Trends

MUI Icons: How to Install & Customize for Consistent Design

Getting Started with MUI Icons

Material UI Library Installation

Installing MUI SVG Icon API

Importing Material UI Icons

Customizing Material UI Icons

How to Change Material UI Icon Color

How to Change Material UI Icon Size

How to use SVG Icons in Material UI

Using Material UI Icon Component

How to Use Font Material Icons

How to get the best out of a MUI Icon Set

Material UI Grid System: MUI Grid v2 for Responsive Design

What is Material UI Grid System?

Starting with the Installation of MUI Grid v2

Material UI Grid v2 Container prop for Responsive Design

Migrating to Material UI Grid v2

Why You Should Migrate to Material UI Grid v2

Migration for Material UI v4 and v5

Migration for Material UI v6

Incorporate Material UI Breakpoints in Grid v2 for Intuitive Layout

Details on the Features of MUI Grid v2

Fluid Grid

Spacing

Auto-Layout

Nested Grid

Customizing Material UI Grid Column Number

Making a Simple Responsive Card with Material UI Grid v2

Material UI Grid v2: FAQs Answered

20+ Most Frequently Asked Questions Answered: Material UI

Enrich Your Concept with Material UI FAQs

01. Is Material UI open source?

Using Material UI `Icon` Component