DEV Community: Alexis Enache

What's new in Webpixels v3

Alexis Enache — Mon, 12 Jan 2026 07:25:36 +0000

Building modern interfaces with Bootstrap should be fast, consistent, and production-ready. That’s exactly why we built Webpixels.

Today, we’re excited to announce the launch of Webpixels v3, a major step forward in our mission to provide a complete Bootstrap design system built around real-world needs: reusable UI components, ready-made templates, and scalable patterns for modern web apps.

This release focuses on clarity, depth, and long-term usability for developers, freelancers, and teams building with Bootstrap.

What Is Webpixels?

Webpixels is a developer-first Bootstrap design system that helps you build faster by removing repetitive UI work.

Instead of starting every project from scratch, Webpixels gives you a structured library of:

Reusable Bootstrap UI components
Fully designed templates and pages
Consistent layout and spacing utilities
Real-world patterns for dashboards, SaaS apps, and marketing sites

Webpixels is built on Bootstrap 5, with clean HTML, scalable CSS, and practical component APIs that fit naturally into modern workflows.

What’s New in Webpixels v3

Webpixels v3 is not just a visual refresh. It’s a structural improvement across the entire system.

A Refreshed Experience

The new Webpixels site introduces a clearer structure, faster navigation, and improved discoverability across components, templates, and documentation. Everything is easier to browse, preview, and integrate into your projects.

Expanded UI Components Library

Webpixels v3 includes 600+ production-ready UI components, designed to cover real interface needs such as:

Navigation and headers
Forms and inputs
Cards, lists, and tables
Modals, alerts, and feedback states
Utility-driven layout components

All components are built to work seamlessly with Bootstrap’s core system, while extending it with consistent patterns and better defaults.

Browse all 700+ UI blocks

Bootstrap Templates and App Screens

Beyond individual components, Webpixels v3 offers 80+ ready-made app screens and marketing site pages, helping you move from idea to implementation faster.

You’ll find templates for:

Dashboards and analytics screens
Authentication flows (login, register, reset)
Marketing and landing pages
Pricing, contact, and content pages
Inner app layouts like settings, profiles, and lists

Each page is designed to be dropped directly into your project or adapted to your product’s needs.

Browse all app screens and marketing pages

Improved Documentation for Bootstrap Developers

Clear documentation is just as important as good UI.

Webpixels v3 comes with improved, structured documentation that helps you:

Here's what you can do with the new docs:

Get started quickly with installation and setup
Understand component usage and customization
Configure colors, typography, spacing, and themes
Learn layout patterns and utility-driven design

The documentation is written for developers who want practical guidance, not abstract theory.

Read the docs

Built for Long-Term Projects

Webpixels is designed for people who build and maintain products over time. Whether you’re working on a SaaS app, a startup MVP, or multiple client projects, the system is built to scale with you.

You can use Webpixels for:

Unlimited personal projects
Commercial products and SaaS applications
Client work and agency projects

Updates focus on stability, compatibility, and incremental improvements rather than constant breaking changes.

Why Webpixels Exists

Webpixels was built to solve a simple problem: Bootstrap is powerful, but real-world UI takes time.

By providing a structured design system, reusable components, and complete templates, Webpixels helps you:

Ship faster
Maintain consistency
Focus on product logic instead of repetitive UI work

Webpixels v3 is a foundation, not a finish line. More components, templates, and refinements are already in progress.

Get Started With Webpixels v3

If you’re building with Bootstrap and want a faster, more consistent way to design and ship interfaces, Webpixels v3 is ready.

Explore the components, browse the templates, and start building with confidence.

Get started now

Top 9 unsubscribe apps and email cleaners helping you achieve inbox-zero

Alexis Enache — Wed, 14 Aug 2024 16:14:42 +0000

The landscape of email inbox cleaning tools has evolved significantly as users increasingly seek ways to manage the overwhelming volume of emails they receive daily. These tools are designed to help users reduce spam, minimize distractions, and maintain a more organized inbox, ultimately enhancing productivity.

Many of these tools leverage advanced algorithms and machine learning to filter out unwanted messages, unsubscribe from newsletters, and prioritize essential emails.

By automatically categorizing or even deleting less important emails, these tools allow users to focus on what truly matters without the constant distraction of a cluttered inbox.

In addition to spam filtering, many inbox cleaning tools offer features that help users regain control over their email subscriptions and manage them more effectively. This includes identifying and unsubscribing from unwanted newsletters and promotional emails that often clog up inboxes.

Some tools provide daily digests or summary views, allowing users to review non-essential emails at their convenience rather than being interrupted by them throughout the day.

This approach not only reduces the number of incoming emails but also helps users stay focused on their tasks by limiting the intrusion of non-critical communications.

Moreover, the integration of these tools with popular email platforms and apps has made it easier for users to implement inbox cleaning routines seamlessly. Many tools now offer customizable settings that allow users to tailor the filtering and organizational processes to their specific needs.

This personalization ensures that users can maintain an inbox environment that supports their productivity goals, with fewer distractions and less time spent on email management. As digital communication continues to grow, the demand for effective inbox cleaning tools is likely to increase, driven by the need for better focus and efficient email management.

Without further introduction I have made a list of the best services out there:

1. AgainstData

AgainstData offers a comprehensive service that enhances user privacy and control by managing and deleting online accounts and personal information, with a notable emphasis on email unsubscribe features.

The platform helps users locate and remove their data from various online services by identifying accounts and subscriptions associated with their email addresses.

It generates a detailed report of where their personal information is stored, allowing users to request the deletion or deactivation of these accounts.

In addition to account management, AgainstData includes a robust email unsubscribe functionality, which helps users eliminate unwanted subscriptions and reduce email clutter.

What sets AgainstData apary is its multifaceted approach to privacy and data management. The platform goes beyond mere account deletion by offering privacy insights and helping users mitigate risks.

AgainstData’s email unsubscribe feature is particularly valuable for users looking to clean up their inboxes, as it allows them to quickly and efficiently stop receiving unwanted newsletters and promotional emails. This integrated approach ensures that users can not only secure their online presence but also manage their email communications more effectively.

Another key differentiator for AgainstData is its personalized support and user-centric design. The platform provides tailored guidance throughout the process of account deletion and email unsubscriptions, helping users navigate the complexities of managing their digital footprint.

Users do not need to do any research on who are the legal entities that hold their data or to research contact details of their Data Protection Office (DPO), the app provides all of these and reduces the effort to 1 click.

With ongoing monitoring and updates on the status of data removal requests and unsubscribe actions, AgainstData offers a holistic solution that addresses both immediate and long-term privacy concerns.

By focusing on both account management and email decluttering, AgainstData stands out as a comprehensive tool for enhancing digital privacy and organization.

To help you decide if this tool is right for you, take advantage of the Free Trial to explore its features. If you choose to continue, the service is available for just $10 per month, or you can save with the annual plan at $25 per year.

2. Mailstrom

Mailstrom is an email management service tailored to users seeking to regain control over their overcrowded inboxes.

The platform excels in its ability to sort and organize emails into actionable groups based on key characteristics like sender, subject line, or date, enabling users to efficiently manage large volumes of messages. By consolidating similar emails into categories, Mailstrom allows users to delete, archive, or label thousands of emails with just a few clicks, significantly reducing the time spent on inbox management. This batch processing capability is particularly valuable for those with years of accumulated emails, helping them clean up their inboxes quickly and effectively.

In addition to its organizing and decluttering features, Mailstrom offers tools that help users prevent future inbox overload. The service makes it easy to unsubscribe from unwanted newsletters and promotional emails, as well as block senders, thus minimizing the influx of non-essential messages. Users can customize their experience with filters and preferences that align with their specific email habits and needs. Integrated with major email providers like Gmail, Outlook, and Yahoo, Mailstrom provides a seamless experience, allowing users to maintain a cleaner, more focused inbox, ultimately improving productivity and reducing digital stress.

This service offers flexible plans to suit different needs, starting with a Free Trial to get you started. Monthly subscriptions range from $9 to $29.95, while annual plans offer more savings, priced between $59.95 and $199.95 per year.

3. Superhuman

Superhuman offers a premium email client designed for professionals seeking to optimize their email experience with speed, efficiency, and enhanced productivity.

The platform is built with a focus on speed, boasting a sleek, minimalist interface that prioritizes quick navigation and streamlined workflows. Superhuman incorporates powerful features like AI-driven triage, where emails are automatically prioritized based on importance, and a split inbox that categorizes emails into actionable groups.

Additionally, the service includes features like read status tracking, reminders, and the ability to send emails at a specific time, allowing users to manage their communications with precision and ease.

Beyond its core functionality, Superhuman is known for its unique onboarding experience, where users receive personalized training to maximize the platform's potential. This high-touch approach, combined with the app’s keyboard shortcuts and customizability, ensures that users can handle their emails at lightning speed, reducing the time spent on email management.

By focusing on the user experience and offering advanced features not typically found in standard email clients, Superhuman aims to help professionals achieve "inbox zero" more efficiently, fostering a more focused and productive work environment.

If you're ready to commit, this service offers straightforward pricing without a trial period. Monthly subscriptions range from $25 to $33, giving you access to all features right away.

4. Trimbox

Trimbox offers a specialized email management tool focused on helping users declutter their inboxes by automatically managing and filtering unwanted emails, particularly promotional content.

The service integrates seamlessly with Gmail, where it identifies and unsubscribes users from newsletters, promotional emails, and other non-essential communications that often flood inboxes.

By leveraging smart algorithms, Trimbox.io ensures that important emails are retained while eliminating those that contribute to inbox overload, helping users maintain a cleaner, more focused email environment.

In addition to its core unsubscribe functionality, Trimbox.io is designed to be easy to use, with a lightweight browser extension that requires minimal setup. The tool works in the background, quietly managing incoming emails without requiring constant user input. This simplicity and automation make it an ideal solution for individuals who want to reduce distractions and streamline their email experience without the need for complex configurations.

Trimbox's focus on ease of use and efficiency helps users reclaim their inboxes, leading to a more organized digital workspace and less time wasted on managing unwanted emails.

Start with a Free Trial to see if this service meets your needs. After that, you can continue with a monthly plan for $12.99 or opt for the annual plan at just $28 per year for added savings.

5. LeaveMeAlone

LeaveMeAlone offers a streamlined service for users who want to regain control of their email inboxes by efficiently managing and reducing unwanted emails.

The platform specializes in helping users unsubscribe from unwanted newsletters, promotional emails, and other non-essential communications in bulk. With a simple, user-friendly interface, LeaveMeAlone scans the user's inbox to identify all subscription emails, presenting them in an organized list. Users can then choose which subscriptions to keep and which to unsubscribe from, all with just a few clicks. This approach makes it easy to clean up inboxes and reduce the daily influx of distracting emails.

In addition to its core unsubscribe functionality, LeaveMeAlone prioritizes privacy and security. The service does not store user emails on its servers, ensuring that personal data remains secure throughout the process. Users can also control how often they receive updates and manage their inbox cleanups on their own schedule.

By focusing on simplicity, privacy, and effectiveness, LeaveMeAlone provides a valuable solution for individuals looking to declutter their inboxes, reduce distractions, and maintain a more focused and manageable email environment.

Begin with a Free Trial to explore the features of this service. If you decide to subscribe, monthly plans range from $8 to $14, while annual plans offer savings at $80 to $140 per year, giving you flexible options to suit your needs.

6. Clean Email

Clean Email is an email management service designed to help users efficiently organize and declutter their inboxes by offering a suite of powerful tools that streamline email management.

The platform excels in automatically categorizing emails into easy-to-manage bundles, such as newsletters, social media notifications, and unread messages, allowing users to quickly sort, archive, or delete large groups of emails in just a few clicks.

Clean Email also offers advanced filtering and search capabilities, enabling users to set custom rules for organizing incoming emails, ensuring that important messages are easily accessible while reducing inbox clutter.

Beyond basic organization, Clean Email provides features like one-click unsubscribe, which allows users to easily opt out of unwanted subscriptions and prevent future email overload. The service also includes automation options like "Auto Clean," which continuously applies the user's chosen rules to incoming emails, maintaining a tidy inbox with minimal effort.

Clean Email’s focus on privacy ensures that user data is secure, with no emails stored on its servers. By offering comprehensive tools for inbox management, Clean Email helps users save time, reduce stress, and maintain a more organized digital workspace.

Take advantage of the Free Trial to see if this service is right for you. After that, monthly pricing ranges from $11.89 to $35.69, with annual plans offering even better value, priced between $35.69 and $118.99 per year.

7. Cleanfox

Cleanfox is an email management service that focuses on helping users declutter their inboxes by identifying and eliminating unwanted newsletters and promotional emails.

Caution: This service is free because it monetises user anonymised data

The platform scans the user's inbox to find subscription-based emails and provides a simple interface where users can review, delete, or unsubscribe from them with ease. Cleanfox also offers users the ability to delete past emails from these subscriptions in bulk, allowing for a significant reduction in inbox clutter.

This service is especially valuable for users who want to maintain a cleaner, more organized inbox with minimal effort, ensuring that important emails aren't lost among the noise of marketing messages.

A key feature of Cleanfox is its emphasis on environmental impact. The platform highlights the carbon footprint associated with storing unnecessary emails, encouraging users to delete them as a way to reduce their digital carbon footprint.

By tying the act of decluttering to a positive environmental outcome, Cleanfox positions itself as not just an email management tool, but also a contributor to a greener planet. This unique angle appeals to environmentally conscious users who are looking for ways to reduce their ecological impact in everyday digital activities.

Cleanfox's business model is primarily based on data monetization, where anonymized data from users’ email habits is aggregated and shared with third-party companies for market research and analysis.

This data helps companies understand trends in consumer behavior, particularly around email subscriptions and engagement. Importantly, Cleanfox emphasizes that this data is anonymized, ensuring that personal information is not shared.

The service is free to use for individuals, with the monetization through anonymized data allowing Cleanfox to maintain and improve its offerings without charging users directly.

8. Unroll.me

Unroll.me offers a streamlined solution for managing and decluttering email inboxes by focusing on subscription emails.

Caution: This service is free because it monetises user anonymised data

The platform helps users easily review and organize their subscriptions through a single, user-friendly interface. Upon connecting their email account, users receive a consolidated daily digest called the “Rollup,” which aggregates all their subscription emails into one convenient summary.

This allows users to quickly scan through and decide whether to keep, unsubscribe from, or delete various email subscriptions. The Rollup feature reduces inbox clutter and provides a more organized way to handle promotional content and newsletters.

In addition to managing subscriptions, Unroll.me offers tools to simplify email organization and improve productivity. Users can batch unsubscribe from unwanted newsletters, ensuring they no longer receive emails from sources they no longer wish to engage with. The platform also provides options to set preferences for how different types of emails are handled, enhancing user control over their email environment.

By consolidating subscription emails and offering easy management options, Unroll.me helps users maintain a cleaner inbox and reduce the stress associated with email overload.

To keep Unroll.me users from having to pay, Nielsen, which owns this platform, measures e-commerce through a technology that automatically recognizes commercial emails and extracts purchase information from them.

9. SaneBox

SaneBox provides a sophisticated email management solution designed to help users regain control over their inboxes by leveraging artificial intelligence and advanced algorithms.

The platform categorizes incoming emails into various folders based on their importance and relevance, such as "SaneLater" for less urgent messages and "SaneNews" for newsletters and promotional content. This intelligent sorting allows users to focus on high-priority emails while less important messages are neatly organized out of the main inbox, reducing clutter and enhancing productivity.

Additionally, SaneBox offers features like email snoozing, which lets users temporarily remove emails from their inbox until a more convenient time, and reminders for follow-ups to ensure important messages are not forgotten.

Beyond basic email categorization, SaneBox includes tools to streamline email management and improve overall efficiency. It provides options for creating custom folders and rules, allowing users to tailor the email organization process to their specific needs. The platform also integrates with various email clients and services, making it a versatile solution for users across different platforms.

By combining intelligent email sorting with customizable features, SaneBox helps users maintain a cleaner, more organized inbox, ultimately enhancing their ability to manage communications effectively and focus on what truly matters.

Explore the service with flexible pricing options: monthly subscriptions range from $7 to $36, while annual plans offer significant savings, priced between $59 and $299 per year.

Takeaway

Free email cleaning services that sell user data often come with significant privacy risks, as the business model relies on monetizing user information to generate revenue.

These services may collect and exploit personal data, including email addresses and browsing habits, to target users with ads or share data with third parties. This not only jeopardizes user privacy but can also lead to unwanted data breaches and misuse of information.

In contrast, paid and transparent email cleaning tools offer a more secure alternative by prioritizing user privacy and data protection. With a subscription-based model, these services avoid relying on data sales and instead invest in robust security measures and clear privacy policies.

Users benefit from enhanced data protection and the assurance that their personal information is handled responsibly, making paid tools a more reliable choice for those concerned about privacy and data security.

Photo credits: Image by rawpixel.com on Freepik

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

11ty: Inject SVG code using Shortcodes

Alexis Enache — Thu, 06 Jan 2022 14:33:59 +0000

Create a {% svg %} shortcode to inject SVG icons, images, or illustration directly into your template.

Open the .eleventy.js config file and add the following code at the top of the page:

const fs = require('fs');

Inside the Eleventy config create a new function that will get the SVG contents:

function eleventyConfig(config) {
   let getSvgContent = function (file) {
      let relativeFilePath = `./src/svg/${file}.svg`;
      let data = fs.readFileSync(relativeFilePath, 
      function(err, contents) {
         if (err) return err
         return contents
      });

      return data.toString('utf8');
   }
}

Next, create the new shortcode using the addShortcode function, like so:

config.addShortcode("svg", getSvgContent);

Create a new folder in the src folder, name it: svg, and add a new vector file with the .svg extension.

To use it in your templates, simply add the new shortcode tag and the file path:

{% svg "myfile" %}

If you want to use subfolders:

{% svg "subfolder/myfile" %}

Notice, we are only using the subfolder and file name, without any extension. That is because in our function we are doing this automatically.

That's it!

The full code

const fs = require('fs');

function eleventyConfig(config) {
   let getSvgContent = function (file) {
      let relativeFilePath = `./src/svg/${file}.svg`;
      let data = fs.readFileSync(relativeFilePath, 
      function(err, contents) {
         if (err) return err
         return contents
      });

      return data.toString('utf8');
   }

   config.addShortcode("svg", getSvgContent);
}

module.exports = eleventyConfig;

Thanks for reading

Feel free to change it however you need. Don't forget to like, share, and comment ✌️

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.