DEV Community: Webpixels

Build your app 10x faster with Webpixels CSS and Bootstrap

Alexis Enache — Tue, 11 Oct 2022 11:55:59 +0000

Webpixels CSS is a relatively new project based on Bootstrap 5. I started this because I needed to improve the way I build web apps. The most time-consuming tasks are usually the ones related to the project setup: creating a new project, setting up the structure, integrating the styles and scripts, including some custom-made code boilerplates, and so on.

After hundreds of projects, I was able to spot the things that repeat in most projects and I included them in one repo that could be installed and re-used everywhere I need.

So, what is it?

Basically, Webpixels CSS is an extension to the base version of Bootstrap. It incorporates the default components and adds new ones on top of them, without messing with too much custom code. This allows me to update to a new version faster.

What's interesting about the way I build components is that I try as much as possible to avoid writing custom CSS. The way I do it: utility classes

Utility classes are not new. Bootstrap introduced them years ago. The concept was brought even further by projects like Tailwind CSS, Windi CSS, and the recently launched Uno CSS.

However, what I like about Bootstrap is the balance between these two concepts: components and utilities.

Finding the right balance

Components are great because they help us encapsulate some code, for a certain situation, and reuse it when we need it, for example, buttons, cards, avatars, and so on. Using Sass variables, you can customize the default look and feel of these and adapt them to your brand's identity.

But, what happens when you need more? Like changing some properties in a particular situation. Back in the day, it would require creating a custom CSS modifier class to add those styles.

Let's say you have a button with the .btn class:

.btn {
   background-color: red;
   border: 1px solid dark;
   padding: 1rem 2rem;
}

And you want to add some additional properties, like margin for example. Instead of creating a new class for it:

.btn-modifier {
   margin: 2rem;
}

Now, we have another way to do that. Using utility classes you can do the same thing right into your HTML. No more custom classes. It's cleaner, and faster, and it will help a lot in terms of performance and file size.

<a href="#" class="btn m-4">Button</a>

I find this a beautiful and elegant approach. And with the next versions of Bootstrap, I am pretty sure the team will come up with some pretty cool stuff.

How it works

With Webpixels CSS I took these two concepts and extended them to cover 80% of the use cases. I added some new components that are not existing yet in Bootstrap, and I create a comprehensive list of utility classes using the included API. You can see them all documented in our documentation.

With these two put in place I started creating a components library. The design code is: simplicity. I try to stick to it as much as possible.

Right now there are approximately 500 components and 40+ templates. I am working on new items every week. Hopefully, I will get enough support and customers to keep me going, but so far, the feedback has been great.

With a single npm install you get access to all of these, no extra steps required. Start copying the snippets you need and that's it. More time to focus on functionality, while keeping things pretty.

Final thoughts

I always wanted to write this, but never found the time. That code ain't gonna write itself 😂

Also, I updated @webpixels/css to the latest Bootstrap version. No significant changes happened, so the migration should go very smoothly. You need to update your package.json file with the new available versions.

If you want to support our work, give it a ⭐ on GitHub.

🙏

Meet Webpixels 2.0

Alexis Enache — Thu, 02 Jun 2022 09:09:18 +0000

The new Webpixels website is finally live, after 4 months of continuous development and improvements. This update is focused on how the component library works and the overall experience. The goal is to make it much easier to navigate through examples and preview and copy the stuff you need.

Here are some of the new stuff you can try starting today:

Visit the new Webpixels website

New component explorer

Instead of having categories and clicking each one of them, now you’ll be able to see them all in one place and filter out the ones you need. Also, there is a search bar to get the result you want quickly.

Browse components

Preview components in a new sexy modal

Once you find the component you need, click on it to preview the UI, but also the code. Everything happens now in one place, so we hope it will make the whole experience a much better one, with fewer clicks and time spent to get the things you need out of the library.

Live code editing

Find the component you need, and click on it to preview the UI, but also the code. In the latest version, you will be able to tweak it and see the changes before copying it into your project.

Organize components into collections

Since our components are part of an ever-growing library, collections will allow you to create smaller batches of elements based on the category or the project’s type.

New tab for listing templates

Instead of mixing components and templates in one place, we thought it would be much better to separate them in two separate sections. This way you can work closer to Atomic Principles.

**See all Templates**

Improved documentation

We still have many things to add to our docs, but we are pretty happy with the result, so far. We'll keep adding more examples and features, now that Bootstrap started its big move with the v5.2 update.

Here are some things you should expect in the near future:

Component CSS variables
New helpers and utilities
Groups of variables for root, components, and utilities
Improved theming capabilities
Dark mode support out of the box

We expect to release the next major update for @webpixels/css one month from now.

Thank you 🙏

It’s been one year since we officially launched the new Webpixels website. It is such a great feeling to build something that people find useful and brings value to their projects.

And now we are ready for the next milestone.

Hope you enjoyed it.

Free and open-source Bootstrap dashboard kit

Alexis Enache — Thu, 10 Feb 2022 15:36:22 +0000

I am super happy to finally release this open-source project that I have worked on for a long time. The final goal is to make it the ideal starting point for your next web app built with Bootstrap 5. A free and minimal starter kit to build fast and modern dashboards and applications.

If you like it, please support this project with a star on Github.

Features

Includes Eleventy static site generator for building the layouts and pages
Includes Bootstrap (currently using v5) source files via npm
Includes Webpixels CSS as our design system based on Bootstrap 5
Includes npm scripts for compiling and auto prefixing Sass, compiling JS, watching for changes, and starting a basic local server
HTML, CSS, and JS minification

Getting Started

For easier asset management we've chosen Parcel. If you want to see all the npm scripts included in this starter kit, open the package.json file.

Next, navigate to the root folder of the site and run:

npm install

To run a local server and watch for changes:

npm start

To build for production:

npm run build

Highlights

This dashboard kit is architected as an extension of Bootstrap, built for a specific set of problems. This means not only extending the base components of Bootstrap, but also adding completely new components, utilities, and plugins.

Also, our themes and starter kits are different for several reasons:

No custom CSS code

Instead of creating new custom CSS classes, we have used utilities to avoid duplicate code and keep the code very clean. Every time you need a custom style or behavior for your components, try using our extended set of utility classes generated with the Bootstrap API

<div class="card">
    <div class="card-body">
        <div class="row">
            <div class="col">
                <span class="h6 font-semibold text-muted text-sm d-block mb-2">Budget</span>
                <span class="h3 font-bold mb-0">$750.90</span>
            </div>
            <div class="col-auto">
                <div class="icon icon-shape bg-tertiary text-white text-lg rounded-circle">
                    <i class="bi bi-credit-card"></i>
                </div>
            </div>
        </div>
        <div class="mt-2 mb-0 text-sm">
            <span class="badge badge-pill bg-soft-success text-success me-2">
                <i class="bi bi-arrow-up me-1"></i>30%
            </span>
            <span class="text-nowrap text-xs text-muted">Since last month</span>
        </div>  
    </div>
</div>

Fully customizable via Sass variables

All the components are fully customizable via Sass variables and fully responsive to help you build your own dashboard designs with the most popular grid system included in Bootstrap 5. Learn more about how to build your own branded theme in minutes:

Documentation →

Extend it with our premium components and templates

Webpixels includes over 500 fully responsive Bootstrap components, carefully designed for specific use-cases, like marketing, application/dashboards, and more. All you need to do is to install Bootstrap and Webpixels CSS and start copying the ready-to-use bits of code.

That's it

I hope you'll find this resource valuable. In the following weeks I will take it a step further and prepare other features as well, such as:

dark mode support
chart examples
and some new components

Build JAMstack-ready sites with Bootstrap and Eleventy

Alexis Enache — Wed, 05 Jan 2022 17:22:05 +0000

Using a back-end or a front-end framework such as Laravel, React or Vue can become a tedious task, especially for those projects that don't need such complexity. Lately, I've been exploring some other options to build websites more simply.

Today we'll be talking about static site generators. More specifically, about Eleventy: a simpler static site generator written in JavaScript that helps transform a directory of templates into HTML.

Site generators are part of a larger architecture called Jamstack. Its core principles revolve around performance, security, maintainability, and scaling by using tools that support pre-rendering, and decoupling. It enables sites and applications to be delivered with greater confidence and resilience than ever before bringing together a few other ideas and technologies.

Requirements

Let's start by creating a simple website structure. For this post we'll be using:

Eleventy as our site generator
Nunjucks as our templating system
Bootstrap 5 as our CSS framework
Webpixels CSS as our design system
Parcel as our build tool for JS and Sass
Autoprefixer
Post CSS

Installation

I won't go into detail and write about the requirements and steps you need to take before installing Eleventy or Bootstrap. This information already exists in the official documentation.

I prepared a Github repo with the full code example. You can download it and copy its contents to your project's folder, or simply press the Use this template button which can be found on the repository's page.

To see what dependencies are needed open the package.json file.

Now, if you're ready, let's dive in. In your terminal, navigate to the project's directory and run the command:

npm install

This will install Eleventy, Bootstrap 5, Webpixels CSS, and Parcel.

Parcel is a zero-configuration build tool that will help us to compile the Sass and JavaScript files. I decided to drop Gulp or Webpack because the complexity and the maintenance were a big-time consumer.

Eleventy Configuration

Eleventy is zero-config by default but has flexible configuration options. It can also work with your project’s existing directory structure if needed.

What I love about this site generator, in particular, is that it works with multiple template languages, such as HTML, Markdown, JavaScript, Liquid, Nunjucks, Handlebars, Mustache, EJS, Haml, Pug, and JavaScript template literals.

I chose Nunjucks since it is very familiar to me and it has an easy-to-learn syntax. You can replace it if you'd like to use a different template engine.

Customizing Eleventy is easy and optional. All the configuration options are stored in the .eleventy.js file located in the root directory.

It might look like this:

module.exports = function(eleventyConfig) {
   // Return your Object options:
   return {
      dir: {
         input: "src",
         output: "dist",
         includes: "includes",
         data: "data",
      },
      templateFormats: ["html", "njk", "md", "11ty.js"],
      htmlTemplateEngine: "njk",
      markdownTemplateEngine: "njk",
   }
};

As you can see, we are telling 11ty that we will be using Nunjucks as our templating system and we are also letting it know what folder structure we'll be having.

For this starter kit we have used passthrough file copy, and layout aliasing. However, there are many configuration options you can add. Please, head to the 11ty documentation to learn more about these.

function eleventyConfig(config) {
   // Passthroughs
   config.addPassthroughCopy("src/img");

   // Layout aliases
   config.addLayoutAlias("base", "layouts/base.njk");
}

Passthrough File Copy

If we want to copy additional files that are not Eleventy templates, we use a feature called Passthrough File Copy to tell Eleventy to copy things to our output folder for us.

Say you need to copy a new folder with your SVG files. Simply add this line:

config.addPassthroughCopy("src/svg");

Layout Aliasing

Use config.addLayoutAlias(from, to) to add layout aliases. If you have a bunch of existing content using the base layout and you don’t want to rewrite the full path includes/layouts/base, map post to a new file like this:

function eleventyConfig(config) {
   config.addLayoutAlias("base", "layouts/base.njk");
}

Now you can use it in your templates (e.g: index.njk) like this:

---
layout: base
---

Add the CSS styles

As I previously mentioned, we'll be using Webpixels CSS to style our site. It is a utility and component-centric design system based on Bootstrap for fast, responsive UI development. It will help us to build a modern website much faster.

You can also make use of the components and templates existing on the Webpixels website. All you have to do is to copy the HTML markup and paste it into your page.

Open the src/scss/main.scss file and add the following lines:

@import "@webpixels/css/base";
@import "@webpixels/css/forms";
@import "@webpixels/css/components";
@import "@webpixels/css/utilities";

Webpixels CSS will automatically load the latest version of Bootstrap 5. To learn more about how to customize it read the documentation.

Include Bootstrap JavaScript plugins

Bootstrap plugins can be included individually (using Bootstrap’s individual js/dist/*.js), or all at once using bootstrap.js or the minified bootstrap.min.js (don’t include both).

For keeping things simple we will import all the plugins in the src/js/main.js file.

var bootstrap = require('bootstrap');

Now you will be able to use the modal, the dropdown, and the offcanvas, plus a bunch more Bootstrap components. Learn about each plugin, our data and programmatic API options, and more in the official documentation

Building the Templates

To optimize the process we will be using layouts and partials to store the repeating pieces of code in one place.

Create the layout

Eleventy Layouts are special templates that can be used to wrap other content. They are located in the includes/layouts folder.

We will create a base.njk file inside includes/layouts. It can contain any type of text, but here we’re using HTML:

<html lang="{{ site.lang}}">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
        <title>{{ title }} | {{ site.name }}</title>

        <!-- Bootstrap Icons -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ '/css/main.css' | url }}">
    </head>
    <body>
        <div id="app">

            <!-- Header -->
            {% include "partials/header.njk" %}

            <!-- Main container -->
            <div id="main-container" role="document">
                <main role="main">
                    {{ content | safe }}
                </main>
            </div>

            <!-- Footer -->
            {% include "partials/footer.njk" %}
        </div>

        <script src="{{ '/js/main.js' | url }}"></script>
    </body>
</html>

Here we've included our CSS and JS files. Besides, we've added Bootstrap Icons by default. You can replace it with another library if this one isn't the one you need.

Including partials

The tag {% include %} is how a code partial is added to a page. By default, Eleventy looks for partials in the includesfolder.

We created two partials for the header and footer since these are the elements we will be using in most of our pages.

Using the layout

To denote that a piece of content should be wrapped in a template, use the layout key in your front matter. Since we are using layout aliasing, you only need to write the name of the layout without specifying the path or the extension, like so:

---
layout: base
title: Life is Good
---
# {{ title }}

Using data

Frontmatter and Markdown are ways to provide data and content for Eleventy to process into web pages, but to better organize the data being used in a website, Eleventy can use global data files.

These are files located in a central location that can be used across all templates. These data files can be either JSON or JavaScript.

Our starter kit stores all the data into the data folder. You can find a site.json which was created to keep all the information needed about our current project.

{
    "name": "Bootstrap Starter Kit",
    "description": "Minimal starter template for websites using Bootstrap 5 and Webpixels CSS next to the Eleventy static site generator.",
    "url": "",
    "lang": "en",
    "github": {
        "url": "https://github.com/webpixels/bootstrap-starter-kit"
    },
    "author": {
        "name": "Your Name",
        "handle": "@twitterhandle",
        "email": "email@example.com"
    },
    "date": 2021,
    "copyright": "2022"
}

Later, in your pages you can use this data like this:

<h1>{{ site.name }}</h1>

Learn more about how to use data in your templates in the official documentation.

Compile Sass and JavaScript

This Bootstrap starter kit comes with a few npm scripts included to make the development and building process much easier. For this, I chose Parcel. It is very easy to install and configure, and it comes with all the features you need out of the box.

In our case, we need to compile Sass to CSS, and to optimize our JavaScript.

Working locally

Here are the commands you can use in your terminal to start working with this starter kit.

npm start

This will transform Eleventy templates to HTML, compile Sass and JS, start a local server, and watch for changes made to your files.

If you want to run the tasks separately here are the commands:

npm run serve:eleventy

npm run watch:css

npm run watch:js

Building for production

When going live you need to optimize your files. Use the following command to bundle up and minify all the CSS and Javascript.

npm run build

Going Live

You can use Netlify to quickly upload your site on the web. Create a new account or log in to, and then, simply drag and drop our dist folder onto the web browser window to upload the contents live to the web.

Another way is to connect your Github account to automatically take the source code and deploy it. Netlify will run the npm run build code for which will generate the dist folder.

Up Next

This is the first part of this series. To keep it clean and simple, I will dedicate one article for each major step towards our project completion.

In the following parts, we will take it a step further and prepare your site for more complex pages and features, like:

creating a blog
connecting Eleventy to a headless CMS like Strapi
creating a simple e-commerce site

Follow me and subscribe to the newsletter to be the first to find out when I release them.

Extending Bootstrap components using utility classes only, just like Tailwind

Alexis Enache — Thu, 09 Dec 2021 10:06:34 +0000

In this post, I will talk about the utility classes concept to demonstrate how you can use Bootstrap in a way that allows you to build faster, better, and with no duplicate code or custom CSS classes.

Using the utility API included in the framework, you can create classes like mx-auto or shadow-5 to change the default style of an element, just like Tailwind does. This is a great approach that allows us to remain consistent, by having pre-built patterns (buttons, cards, etc.) and these classes to tweak the components quickly without messing with CSS.

To make things easier in my development process, I created a Bootstrap 5 extension to add new components that are not included in the core of the framework (e.g. avatars), new colors and typography, and an extended set of utility classes to allow you to customize your components directly into you HTML. It is open-source. Here is the demo and the GitHub repo.

Customizing Bootstrap components

How can you customize and extend a Bootstrap component? There are two approaches I recommend:

Using the Sass variables

I highly recommend using Sass when you want to change the default style provided by Bootstrap. Change the padding, color, border using variables. Bootstrap did a great job documenting each component and its variables.

Say you want to change the appearance of the alert component. Head to the documentation and scroll to the Sass variables section. You will find something like this:

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Replace the values with your own and compile it to see the changes using Gulp, Webpack, Laravel Mix, or your current setup.

Using utility classes

Instead of creating new custom CSS classes, you can use utilities. These allow you to avoid duplicate code and help you keep things very clean. Every time you need a custom style or behavior for your components, try using utility classes.

Say you want a pill button. Instead of going to your CSS and create a new class:

.btn-pill {
   border-radius: $border-radius-pill
}

It would look something like this:

<button type="button" class="btn btn-primary rounded-pill">Button</button>

So simple right? And this is just the easiest example. Things get much more interesting when you need more complex stuff.

Check out how I used the transform utilities to change the orientation or rotation of an element.

<div class="d-flex">
    <div class="transform translate-x-n1/2 translate-y-n1/2">
    <div class="transform rotate-12"></div>
    <div class="transform skew-x-12"></div>
    <div class="transform scale-50"></div>
</div>

Check out the documentation to see all the utility classes included in Webpixels CSS using the Bootstrap utility API.

Using the responsive breakpoints

Use the .transform-none to remove this behaviour on any breakpoint.

<div class="transform translate-x-32 transform-md-none">
    ...
</div>

Final thoughts

This was just a short introduction to the Bootstrap utility API and how you can use Webpixels CSS to extend the framework's default look and feel.

What do you think about this approach? Is this how you build UIs too, or do you prefer a different method? 🤔

5+ Bootstrap chat templates for building modern messaging user interfaces

Alexis Enache — Thu, 30 Sep 2021 13:07:13 +0000

Instead of wasting time building from the ground up why not use pre-built modules and already tested bits of code?

No matter how complex your project is, you can streamline the development process by saving dozens of hours of work.

In this week's update, we've included some pretty cool templates and components for building messaging and chat user interfaces, plus a bunch of other elements to help your craft some amazing apps.

Here's a sneak peek into some of the best Bootstrap templates available on our website.

Messaging and Chat Screens

Development is much more fun when you don't need to worry about design. With this collection of high-quality, simple, fresh, and modern Bootstrap templates, you will be able to create chat and discussion platforms in no time.

Browse all Chat Screens

Offcanvas Components

Because many of you asked about these, we've included in our library a variety of offcanvas components to help you build hidden sidebars into your project for navigation, shopping carts, and much more.

Browse all Offcanvas Components

Build amazing Bootstrap websites today!

So there you have it, our newest roundup of amazing Bootstrap website templates. What did you think of our list? I hope you’ve found one that’s going to help make your next website project a great one.

Build modern landing pages that convert with the best ready-made Bootstrap templates

Alexis Enache — Mon, 06 Sep 2021 12:22:18 +0000

🦁 I am happy to announce that today is the day we start releasing some cool updates on Webpixels, including new Bootstrap components, site features, and functionalities meant to make your life as a developer easier and more fun.

In this week's update we've added new categories for Landing Pages, Inner Pages, and Pricing Sections, and also added a bunch of new ideas for Hero, Feature, Blog, and Contact sections, all crafted with Bootstrap 5.

Landing pages

Development is much more fun when you don't need to worry about design. We've included a few amazingly designed and coded Bootstrap landing templates and inner pages that are supported by rock-solid design principles. Start using them right away.

Browse all Landing Pages

Get your new web design project started with these amazing templates, or copy and paste elements into your existing projects to give them a creative boost.

Pricing Sections and Components

Also, we've updated our collection of Bootstrap pricing components and sections. You will find plenty of ideas to start from. Browse them as single components or as fully assembled sections.

Coming up

As previously mentioned, this is just the beginning. From now on we will bring new components and templates periodically. So make sure to stay subscribed to our newsletter and check out our website for new stuff.

Some of the things we are working on right now are:

new application components
overlay components: modals, and off-canvas
detail view pages for dashboards and applications
pricing pages
contact pages
and much more ...

Webpixels Components includes over 400 fully responsive HTML components, carefully designed for specific use-cases, like marketing, application/dashboards, and more. All you need to do is to install Bootstrap + Webpixels CSS and start copying the ready-to-use bits of code.

Quickly get a project started with any of our layouts and page examples ranging from using parts of the framework to custom components and layouts. We have plenty of ideas, and in the following weeks, we will release many new components and page categories, like landing, contact, pricing pages, and more.

Get access to Webpixels Components →

Build modern authentication screens with Laravel 8 and Bootstrap 5

Alexis Enache — Sun, 23 May 2021 15:58:03 +0000

I am Laravel and Bootstrap fan since the beginning. Even though recently Laravel switch to Tailwind CSS as its primary way of building interfaces, I still prefer Bootstrap for several reasons.

I like my HTML and CSS separated
Building or maintaining components and pages is much easier
Basic customization is made using Sass which makes global customization less time consuming
You can always use Bootstrap utilities to extend components directly into your HTML or add new ones just like Tailwind

In this tutorial, I will show you how to get started fast with Laravel 8 and Bootstrap 5. These are the things we'll cover:

Installation
Laravel Mix setup
Authentication scaffolding
Login, Register, and Recover design
User management

Also, I am going to use a pretty cool design system built with Bootstrap 5 to extend the default look and feel and add new components and utility classes for allowing me to build more complex architectures.

If you want your application's UI to look like the one in the article's image, then you should give Webpixels CSS a try.

Installation

I won't go into detail and write about the requirements and steps you need to take before installing Laravel. This information already exists in the official documentation

Now, if you're ready, let's dive in.

Create a new folder called laravel-starter-kit and install Laravel using your preferred method from the docs.

Next, we will install everything we need for our app.

Authentication Scaffolding

Laravel provides a basic starting point using Bootstrap, React, and/or Vue that will be helpful for many applications.

By default, Laravel uses NPM to install both of these frontend packages.

composer require laravel/ui

Generate basic scaffolding...

php artisan ui bootstrap

Generate login / registration scaffolding...

php artisan ui bootstrap --auth

After installing the laravel/ui Composer package and generating the frontend scaffolding, the package.json file will include the Bootstrap and Webpixels CSS packages to help you get started prototyping your application's frontend without worrying about the design.

Before compiling CSS, open package.json and replace devDependencies like in the example below. This way you'll make sure to use the latest Bootstrap version.

"devDependencies": {
   "@popperjs/core": "^2.6.0",
   "@webpixels/css": "^1.0.1",
   "axios": "^0.21",
   "bootstrap": "^5.0.1",
   "laravel-mix": "^6.0.6",
   "lodash": "^4.17.19",
   "postcss": "^8.2.2",
   "sass": "^1.32.11",
   "sass-loader": "^11.0.1"
}

Next, install your project's frontend dependencies using the Node package manager (NPM):

npm install

Configure Laravel Mix

Laravel Mix provides a clean, expressive API over compiling SASS, which are extensions of plain CSS that add variables, mixins, and other powerful features that make working with CSS much more enjoyable.

To configure Laravel Mix use the webpack.mix.js file. It comes with a default initial setup, but we'll make some improvements here:

let mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css',  {
      sassOptions: {
         includePaths: ['node_modules'],
      },
   });

mix.browserSync({
   proxy: 'localhost:8000',
   notify: true
});

if (mix.inProduction()) {
   mix.version();
   mix.sourceMaps();
}

To run your Mix tasks you only need to execute one of the NPM scripts that are included in the default Laravel package.json file. When you run the dev or production scripts, all of your application's CSS and JavaScript assets will be compiled and placed in your application's public directory. We will use these later, but just to be aware, here are the commands:

// Run all Mix tasks...
npm run dev

// Run all Mix tasks and minify output...
npm run prod

The frontend scaffolding is now ready. In the following steps, we will set up the database connection and run the migrations which will allow us to create some beautiful authentication screens.

Add the CSS styles

As I previously mentioned, we'll use Webpixels CSS to style our dashboard. It is a utility and component-centric Design System based on Bootstrap for fast, responsive UI development.

Open the resource/sass/app.scss file and replace its content with the following lines:

@import "@webpixels/css/base";
@import "@webpixels/css/forms";
@import "@webpixels/css/components";
@import "@webpixels/css/utilities";

Webpixels CSS will automatically load the latest version of Bootstrap 5. To learn more about how to customize it read the documentation.

Add Bootstrap to your app's JS

Open the resource/js/app.js file and replace its content with the following lines:

require('bootstrap');

Since now we are using Bootstrap 5, you can remove the bootstrap.js file located in the same folder. That one is added when laravel/ui is installed to include jQuery and Popper, which is not the case anymore.

Great! On the front end side, we're all set. Next, we will focus on setting up the database and build our app's backend.

Database setup

When you create a new Laravel project, the installation process automatically creates a .env file for configuration and credentials. Depending on your setup, you’ll need to modify the following block of settings to match your database configuration:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

With your connection set up, let's run the migrations using the dedicated artisan command:

php artisan migrate

Let's build our app

These are the final steps before starting our app:

Generate the app's key

Since this is your first time starting this project, you must set the key configuration option in your config/app.php configuration file:

php artisan key:generate

Run database migrations

Before running the migrations, you may need to manually configure the default string length generated by migrations in order for MySQL to create indexes for them. You may configure the default string length by calling the Schema::defaultStringLength method within the boot method of your App\Providers\AppServiceProvider class:

use Illuminate\Support\Facades\Schema;

/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    Schema::defaultStringLength(191);
}

To run all of your outstanding migrations, execute the migrate Artisan command:

php artisan migrate

Start the app

After the application has been created, you may start Laravel's local development server using the Artisan CLI's serve command:

php artisan serve

The database is all set so we will take care now of the user interface.

Set up the routes

By default, Laravel comes with a couple of implemented routes used for displaying the Home and Welcome pages of the website. It also creates the authentication routes automatically when you install Laravel UI.

Next, we'll make some minor changes for displaying the Home page. Copy this in your routes/web.php file.

Auth::routes();

Route::get('/', [App\Http\Controllers\HomeController::class, 'index']);
Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

Create the layout

For creating the authentication pages and forms we will use Laravel's class-based components. Let's create a new guest layout using the make:component command which will place it in the App\View\Components directory:

php artisan make:component GuestLayout

The make:component command will also create a view template for the component. The view will be placed in the resources/views/components directory.

Once the layout component has been defined, place this content inside it:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Inter" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
    <div id="app">
        <main class="py-4">
            {{ $slot }}
        </main>
    </div>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

</body>
</html>

As you can see, we are doing a few things here:

added the Inter font
linked the CSS styles
added the $slot variable within our layout component used for injecting the content from other pages
linked the app's scripts

Now we are ready to build the authentication pages :)

Create the authentication screens

For this part, I will use one of the free and beautiful pre-made authentication screens from the UI components library provided by Webpixels. They're all crafted with the latest version of Bootstrap (currently v5) and you can use the HTML code to create all the pages you need.

In the following example, I took the HTML from Webpixels and replaced its elements with the ones needed by Laravel to become fully functional.

The login page

Copy and paste the code below in your login page located in the resources/views/auth/login.blade.php:

<x-guest-layout>
    <div class="px-5 py-5 p-lg-0 bg-surface-secondary">
        <div class="d-flex justify-content-center">
            <div class="col-lg-5 col-xl-4 p-12 p-xl-20 position-fixed start-0 top-0 h-screen overflow-y-hidden bg-primary d-none d-lg-flex flex-column">
                <!-- Logo -->
                <a class="d-block" href="#">
                    <img src="https://preview.webpixels.io/web/img/logos/clever-light.svg" class="h-10" alt="...">
                </a>
                <!-- Title -->
                <div class="mt-32 mb-20">
                    <h1 class="ls-tight font-bolder display-6 text-white mb-5">
                        Let’s build something amazing today.
                    </h1>
                    <p class="text-white-80">
                        Maybe some text here will help me see it better. Oh God. Oke, let’s do it then.
                    </p>
                </div>
                <!-- Circle -->
                <div class="w-56 h-56 bg-orange-500 rounded-circle position-absolute bottom-0 end-20 transform translate-y-1/3"></div>
            </div>
            <div class="col-12 col-md-9 col-lg-7 offset-lg-5 border-left-lg min-h-lg-screen d-flex flex-column justify-content-center py-lg-16 px-lg-20 position-relative">
                <div class="row">
                    <div class="col-lg-10 col-md-9 col-xl-6 mx-auto ms-xl-0">
                        <div class="mt-10 mt-lg-5 mb-6 d-flex align-items-center d-lg-block">
                            <span class="d-inline-block d-lg-block h1 mb-lg-6 me-3">👋</span>
                            <h1 class="ls-tight font-bolder h2">
                                {{ __('Nice to see you!') }}
                            </h1>
                        </div>
                        <form method="POST" action="{{ route('login') }}">
                            @csrf
                            <div class="mb-5">
                                <label class="form-label" for="email">{{ __('E-Mail Address') }}</label>
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="mb-5">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div>
                                        <label class="form-label" for="password">{{ __('Password') }}</label>
                                    </div>
                                    <div class="mb-2">
                                        @if (Route::has('password.request'))
                                        <a href="{{ route('password.request') }}" class="small text-muted">Forgot password?</a>
                                        @endif
                                    </div>
                                </div>
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="mb-5">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="remember">
                                        {{ __('Remember Me') }}
                                    </label>
                                </div>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-primary w-full">
                                    {{ __('Sign in') }}
                                </button>
                            </div>
                        </form>
                        <div class="my-6">
                            <small>{{ __('Don\'t have an account') }}</small>
                            <a href="{{ route('register') }}" class="text-warning text-sm font-semibold">{{ __('Sign up') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-guest-layout>

The register page

Copy and paste the code below in your register page located in the resources/views/auth/register.blade.php:

<x-guest-layout>
    <div class="px-5 py-5 p-lg-0 bg-surface-secondary">
        <div class="d-flex justify-content-center">
            <div class="col-lg-5 col-xl-4 p-12 p-xl-20 position-fixed start-0 top-0 h-screen overflow-y-hidden bg-primary d-none d-lg-flex flex-column">
                <!-- Logo -->
                <a class="d-block" href="#">
                    <img src="https://preview.webpixels.io/web/img/logos/clever-light.svg" class="h-10" alt="...">
                </a>
                <!-- Title -->
                <div class="mt-32 mb-20">
                    <h1 class="ls-tight font-bolder display-6 text-white mb-5">
                        Let’s build something amazing today.
                    </h1>
                    <p class="text-white-80">
                        Maybe some text here will help me see it better. Oh God. Oke, let’s do it then.
                    </p>
                </div>
                <!-- Circle -->
                <div class="w-56 h-56 bg-orange-500 rounded-circle position-absolute bottom-0 end-20 transform translate-y-1/3"></div>
            </div>
            <div class="col-12 col-md-9 col-lg-7 offset-lg-5 border-left-lg min-h-lg-screen d-flex flex-column justify-content-center py-lg-16 px-lg-20 position-relative">
                <div class="row">
                    <div class="col-lg-10 col-md-9 col-xl-6 mx-auto ms-xl-0">
                        <div class="mt-10 mt-lg-5 mb-6 d-flex align-items-center d-lg-block">
                            <span class="d-inline-block d-lg-block h1 mb-lg-6 me-3">👋</span>
                            <h1 class="ls-tight font-bolder h2">
                                {{ __('Create an account') }}
                            </h1>
                        </div>
                        <form method="POST" action="{{ route('register') }}">
                            @csrf
                            <div class="mb-5">
                                <label class="form-label" for="email">{{ __('Name') }}</label>
                                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>

                                @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="mb-5">
                                <label class="form-label" for="email">{{ __('E-Mail Address') }}</label>
                                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="mb-5">
                                <label class="form-label" for="password">{{ __('Password') }}</label>
                                <input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">

                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="mb-5">
                                <label class="form-label" for="password-confirm">{{ __('Confirm Password') }}</label>
                                <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
                            </div>
                            <div>
                                <button type="submit" class="btn btn-primary w-full">
                                    {{ __('Sign up') }}
                                </button>
                            </div>
                        </form>
                        <div class="my-6">
                            <small>{{ __('Already have an account?') }}</small>
                            <a href="{{ route('login') }}" class="text-warning text-sm font-semibold">{{ __('Sign in') }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-guest-layout>

Other authentication screens

Inside your Laravel app, you will notice there are additional pages for account verification, password reset, and more. I took care of those too and you can find them in the project's repo.

For those who want to explore the code, here's the GitHub repo for this project.

Coming up

This is the first part of this series. In order to keep it clean and simple, I will dedicate one article for each major step towards our app completion.

In the following parts we will take it a step further and prepare your app for more complex pages and features, like:

user list and management
user roles and permissions
simple blog system

Follow me and subscribe to the newsletter to be the first to find out when I release them.