Forem: Leonardo Rafael Wehrmeister

Beer CSS - A battle for less HTML and CSS

Leonardo Rafael Wehrmeister — Fri, 07 Mar 2025 15:56:03 +0000

The battleground of web development has long echoed with the clash of frameworks. For years, developers have navigated a dizzying array of HTML and CSS libraries, each promising to streamline the creation of beautiful, responsive websites. From the behemoth Bootstrap to the customizable Tailwind CSS, the landscape was a chaotic tapestry of competing philosophies.

The "war of less" emerged as a counter-movement, a rebellion against the bloat and complexity that had crept into many popular frameworks. Developers yearned for simplicity, for frameworks that empowered them without imposing rigid structures or unnecessary overhead. This shift saw the rise of minimalist contenders, each vying for the crown of lightweight efficiency.

Among these contenders, Beer CSS (👉Homepage and 👉Github) emerged as a surprising alternative. While others focused on intricate configuration and extensive component libraries, Beer CSS took a refreshingly straightforward approach. It championed semantic HTML, leveraging the power of native browser capabilities and providing only the essential styling to enhance, not replace, the developer's control.

The key to Beer CSS's triumph lay in its philosophy:

⚔️ Minimalism: It stripped away the unnecessary, focusing on core styling principles and a lean codebase. This translated to faster load times and improved performance, a crucial factor in today's performance-driven web.

⚔️ Semantic HTML: Encouraging developers to write clean, meaningful HTML, Beer CSS empowered them to create accessible and maintainable websites.

⚔️ Flexibility: Is based on Material Design 3 but not delivery a rigid system. It provided a set of utility classes that could be combined and customized, without any custom CSS.
👉See an example here
👉And other example here

⚔️ Ease of Use: Beer CSS's simplicity made it incredibly easy to learn and implement, even for novice developers. Its documentation was clear and concise, further contributing to its appeal.

⚔️ Beyond Prototyping: Many minimalist CSS frameworks prioritize rapid prototyping, offering a basic set of styles for quick mockups. Beer CSS, while excellent for prototyping, aims to be a viable solution for production-ready websites.

In a world where complexity often masqueraded as power, Beer CSS offered a refreshing alternative. It reminded developers that less is often more, that true power lies in understanding the fundamentals and leveraging the capabilities of the platform itself.

The "war of less" wasn't about eliminating frameworks entirely; it was about finding the right balance between convenience and control. Beer CSS, with its focus on simplicity, performance, and developer empowerment, ultimately proved to be the champion, proving that a light, refreshing approach can win the day.

Beer CSS: the revolution in web performance and ergonomics

Leonardo Rafael Wehrmeister — Thu, 05 Sep 2024 11:38:20 +0000

Web design and development are constantly evolving under the propulsion of new technologies. Among these, Beer CSS stands out as a promising CSS framework that redefines the rules of minimalist design while superamplifying performance. Based on the robust Material Design 3 but considerably lighter, this framework targets an unprecedented optimization of the loading speed and responsiveness of websites.

The advent of a new framework: an introduction to Beer CSS

In the saturated world of CSS frameworks, Beer CSS emerges as a unique solution. This project adopts the principles of Material Design 3 while overcoming the usual flaws related to the heaviness of conventional frameworks. With a size tenfold lower than its competitors, 10 times lighter than general frameworks based on Material Design, Beer CSS offers a solid base to create fluid and attractive user interfaces with disconcerting ease. Developers will quickly perceive the benefits of such a tool since it facilitates a multitude of common operations while drastically accelerating development times.

Tools and Compatibility: The Versatility of Beer CSS

Imagine having a tool in your hands that allows you to create fluid and attractive user interfaces with disconcerting ease. That’s exactly what Beer CSS offers, a CSS framework that revolutionizes web design by offering increased flexibility to developers. Thanks to its compatibility with various HTML preprocessors such as Pug or Haml, Beer CSS integrates seamlessly into virtually any project, increasing its portability and applicability.

But how does it work exactly? The Beer CSS installation relies on a limited number of lightweight files: the stylesheet, the JS components and the dynamic color JS lib to manage the integration of dark/light mode or advanced color modes. And it doesn't stop there! Its great modularity and its non-invasive footprint also allow it to be completed, for example, by the support of icons by the font of your choice, SVGs or the use of specialized libs like Font Awesome.

This way, developers can not only maintain cleaner and more structured code, but also benefit from exceptional modularity that adapts perfectly to the specific requirements of each project. This modularity means that Beer CSS can be used with many template engines as well as in pure HTML for designing website page templates.

Performance Boost: Why Beer CSS is a Game Changer

With its reduced size, Beer CSS is inherently designed to improve web page performance. In a world where loading speed is crucial for user engagement and SEO, using Beer CSS means minimizing page rendering time. This performance gain is not insignificant; it directly contributes to improving Core Web Vitals scores, which are essential for a good user experience and effective organic SEO. Beer CSS's lightweight design allows it to significantly reduce response times, ensuring smooth and responsive browsing.

Flexibility and customization: adapt Beer CSS to your needs

Imagine you’re an architect designing a building from scratch. You need to consider the needs of your future residents, with varied living spaces, staircases, bedrooms, bathrooms, etc. That’s how Beer CSS works, your new companion for designing elegant and intuitive user interfaces. Beyond its performance boosting ability, Beer CSS offers great flexibility. But what does this mean for developers in concrete terms?

Let’s take a concrete example. If you imagine creating a complex e-commerce site or a personal blog, you need a framework that can adapt to your specific needs. And that’s exactly what Beer CSS offers, a solid, simplified and adaptable foundation for any context. This gives developers a wide range of customizable tools and components, allowing them to adapt the framework to different visual styles and requirements. And what makes this possible?

This is thanks in part to Google’s Material Design 3 legacy, which brings ergonomic recommendations to the top of the web project design. This means that Beer CSS incorporates proven concepts that improve the site’s navigability and interactivity, providing a fluid and accessible experience for users. So you can start creating your web project, confident that Beer CSS gives you the tools you need to meet your needs and those of your users.

Adjustable color palette
Flexible grid system
Dynamic components
In-depth use of HTML semantics

This adaptability makes Beer CSS a preferred choice for projects requiring both aesthetic consistency and uniqueness.

Promote better user ergonomics

User ergonomics or UX is now a central pillar in web development. Beer CSS enhances this dimension by making it easy to create elegant and intuitive interfaces. Thanks to its base from Material Design 3, it integrates proven concepts that improve the navigability and interactivity of the site. Thus, users benefit from a fluid experience, with responsive and accessible interfaces regardless of the device used.

Concrete examples that speak for themselves: Have you ever visited an e-commerce application with buttons that react instantly, providing a pleasant and engaging user experience? Did you know that these elegant and responsive interfaces may be the result of Beer CSS? This innovative CSS framework does not just deliver on promises. It provides concrete examples, such as a complex layout resembling a Reddit interface or a YouTube homepage, a Gmail interface example, that show its capabilities in terms of e-commerce integration and sophisticated designs. More examples and demos of Beer CSS can also be found on Codepen.

By visiting the Beer CSS website , you will discover these and many other real-world examples. They are a testament to its flexibility and ability to adapt to various visual styles and requirements. Whether for a personal blog or a complex e-commerce platform, Beer CSS offers a solid foundation that is simplified and adaptable to any context. Developers, prepare to be amazed by its exceptional modularity and ease of use, which will propel your projects to new heights.

Sponsors and backers: a community committed to the future of Beer CSS

Behind every great project, there is often a community of enthusiasts and technical and financial supporters. Beer CSS is no exception. The project already benefits from the support of many sponsors and backers from the web development community. This solidarity not only demonstrates confidence in the promise of Beer CSS but also ensures its evolution and sustainability.

Future framework integration

As web development continues to evolve, Beer CSS stands as a revolutionary CSS framework that meets users’ growing expectations for speed, accessibility, simplicity, and usability. By integrating the latest trends in frontend development, Beer CSS offers a modern, efficient, and stylish solution for developers looking to improve the performance and user experience of their websites. With its exceptional modularity and ease of use, Beer CSS is poised to become a cornerstone for future web constructions.

The original post is in French, and you can get it here https://leblogduwebmaster.fr/article274/beer-css-framework

Semantic HTML vs Web Components: Building Blocks of a Better Web

Leonardo Rafael Wehrmeister — Thu, 18 Jul 2024 10:12:25 +0000

Front-end development is all about crafting user experiences, and the foundation of that experience lies in the code itself. Two powerful tools in our arsenal are semantic HTML and web components. But how do they differ, and when should you use each?

Semantic HTML: The Cornerstone of Structure

Imagine a house built entirely of bricks, with no distinction between walls, doors, and windows. That's essentially what non-semantic HTML is like. Semantic HTML, on the other hand, uses descriptive tags like <header>, <nav> and <article> to define the meaning and purpose of content.

Here's why semantic HTML rocks:

Accessibility: Screen readers and assistive technologies can interpret the structure of a page, making it easier for everyone to navigate and understand your content.

Maintainability: Code with clear meaning is easier for you and other developers to understand and modify later.

SEO: Search engines can glean more context from semantic markup, potentially improving your search ranking.

Web Components: Reusable UI Lego Blocks

Web components are like Lego bricks for your web applications. They encapsulate UI elements with their own HTML structure, styles, and behavior. This allows you to:

Create custom UI elements: Build custom components with highly interactive elements, that can be easily integrated across your application.

Encapsulation: Isolate styles and behavior within the component, preventing conflicts with other parts of your code.

Choosing the Right Tool

So, when do you use which? Here's a quick guide:

Use semantic HTML whenever possible: For any page structure, if you can use a default html tag, semantic HTML is the clear winner.

Consider complexity: For highly interactive elements, web components offer more control over behavior compared to plain HTML.

The Future is Bright (and Semantic!)

Web components are a powerful tool, but they shouldn't replace semantic HTML entirely. Think of semantic HTML as the foundation and web components as the custom building blocks that create a beautiful and functional user experience. By using them together, you can craft websites that are not only user-friendly and accessible but also a joy to develop and maintain.

Beer CSS: The Secret Weapon for Material Design 3 UIs

Leonardo Rafael Wehrmeister — Thu, 27 Jun 2024 15:05:43 +0000

Ever wanted to build sharp, modern UIs with Material Design 3 but without the bloat of other frameworks? Look no further than, go ahead with Beer CSS!

What makes Beer CSS a great choice for your next project?

Let's highlight some points:

🧙‍♂️Material Design Mastery: Built specifically for Material Design 3, Beer CSS lets you implement Google's latest design language with ease. Think clean layouts, subtle shadows, and a focus on user experience.

🏅Lightweight Champion: Unlike some frameworks that can weigh down your site, Beer CSS is a featherweight. It boasts a tiny footprint, ensuring your website loads fast – perfect for mobile users and keeping your SEO happy.

💪Code Like a Boss: Forget complex setups and configurations. Beer CSS is all about simplicity. Just include the library and start styling your UI with its pre-made utility classes. Buttons, typography, spacing – it's all there.

🪄Tweak to Perfection: While Beer CSS champions Material Design 3, it doesn't hold you hostage. You can still customize things to match your project's unique needs.

Getting Started is a Breeze

No time for lengthy documentation dives? Beer CSS gets you coding fast. Think of it as a UI kit with ready-to-use classes for all the essentials. Just add the library to your HTML and start applying classes to your elements.

Need some real world examples?

If I told you that you can do the work with a half of code, do you believe me? Beer CSS has an unbelievable DX. You will get it when you start to work with it. Here are some real world examples:

A menu dropdown

// Beer CSS
<div>
  <button>Button</button>
  <menu>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </menu>
</div>

// Vuetify
<v-menu>
  <template>
    <v-btn color="primary">Button</v-btn>
  </template>
  <v-list>
    <v-list-item>
      <v-list-item-title>Item 1</v-list-item-title>
      <v-list-item-title>Item 2</v-list-item-title>
      <v-list-item-title>Item 3</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

// Quasar
<q-btn color="primary" label="Button">
  <q-menu>
    <q-list>
      <q-item>
        <q-item-section>Item 1</q-item-section>
      </q-item>
      <q-item>
        <q-item-section>Item 2</q-item-section>
      </q-item>
      <q-item>
        <q-item-section>Item 3</q-item-section>
      </q-item>
    </q-list>
  </q-menu>
</q-btn>

// Beer CSS
// Multi level menu dropdown (do you believe? 🤯)
<div>
  <button>Button</button>
  <menu>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>
      More Items
      <menu>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </menu>
    </li>
  </menu>
</div>

A card with buttons

// Beer CSS
<article>
  <h6>Title</h6>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  <nav>
    <button>Button 1</button>
    <button>Button 2</button>
  </nav>
</article>

// Vuetify
<v-card>
  <v-card-item>
    <h6>Title</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </v-card-item>

  <v-card-actions>
    <v-btn>Button 1</v-btn>
    <v-btn>Button 2</v-btn>
  </v-card-actions>
</v-card>

// Quasar
<q-card>
  <q-card-section>
    <h6>Title</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </q-card-section>

  <q-card-actions>
    <q-btn>Button 1</q-btn>
    <q-btn>Button 2</q-btn>
  </q-card-actions>
</q-card>

Reusing the same html content

// A card with title + button
<article>
  <h6>Title</h6>
  <nav>
    <button>Button 1</button>
  </nav>
</article>

// A dialog with title + button
<dialog>
  <h6>Title</h6>
  <nav>
    <button>Button 1</button>
  </nav>
</dialog>

// A menu dropdown with title + button
<menu>
  <h6>Title</h6>
  <nav>
    <button>Button 1</button>
  </nav>
</menu>

Customizing with readable global helpers

<article class="small|medium|large|round|no-round|border...">
  <h6 class="small|medium|large...">Title</h6>
  <nav class="right-align|center-align|left-align...">
    <button class="small|medium|large|round|no-round|border...">Button 1</button>
  </nav>
</article>

Ready to Brew Up Something Awesome?

Head over to the Beer CSS website (https://www.beercss.com) to explore the docs and see it in action. You can also grab it from Github (https://github.com/beercss/beercss) and get started building those sleek Material Design 3 UIs in no time.

Is Beer CSS the Right Choice for You?

If you prioritize speed, ease of use, and a clean Material Design 3 aesthetic, Beer CSS is your best friend. However, if you need extreme design customization or aren't a fan of Material Design 3, you might want to check out other general purpose framework.

List expansions - Beer CSS Tips #5

Leonardo Rafael Wehrmeister — Wed, 12 Jun 2024 03:21:49 +0000

Hello,

I want to share a serie of posts containing some tips of Beer CSS. Beer CSS is a new framework around, based on (not restricted to) Material Design 3. Material Design 3 is a design system created by Google. In this post, we will learn about the list expansions. The list expansions are lists with items and subitems.

If you don't known the concept of settings, elements and helpers used by Beer CSS, you can read this page.

1) First, we will create some items inside an article element.

<article>
  <a class="row wave">Item 1</a>
  <a class="row wave">Item 2</a>
  <a class="row wave">Item 3</a>
  <a class="row wave">Item 4</a>
  <a class="row wave">Item 5</a>
</article>

2) Now we will use the details and summary elements to have items and subitems. Use the none helper on summary element to empty the default styles from browser. In this example, after click on "Item 1" it will show the other items:

<article>
  <details>
    <summary class="none">
      <a class="row wave">Item 1</a>
    </summary>
    <a class="row wave">Item 2</a>
    <a class="row wave">Item 3</a>
    <a class="row wave">Item 4</a>
    <a class="row wave">Item 5</a>
  </details>
</article>

3) You can reuse the items and subitems code in any other element like nav, menu, tooltip, dialog, etc:

<nav class="drawer">
  <details>
    <summary class="none">
      <a class="row wave">Item 1</a>
    </summary>
    <a class="row wave">Item 2</a>
    <a class="row wave">Item 3</a>
    <a class="row wave">Item 4</a>
    <a class="row wave">Item 5</a>
  </details>
</nav>

4) How about a multi-level menu? We can do a multi-level menu using the same code inside a tooltip element. And the tooltip element inside a summary element:

<nav class="drawer">
  <details>
    <summary class="none">
      <a class="row wave">Item 1</a>
      <div class="tooltip max right">
        <details>
          <summary class="none">
            <a class="row wave">Item 1</a>
          </summary>
          <a class="row wave">Item 2</a>
          <a class="row wave">Item 3</a>
          <a class="row wave">Item 4</a>
          <a class="row wave">Item 5</a>
        </details>
      </div>
    </summary>
    <a class="row wave">Item 2</a>
    <a class="row wave">Item 3</a>
    <a class="row wave">Item 4</a>
    <a class="row wave">Item 5</a>
  </details>
</nav>

The helpers of Beer CSS can be used in any element. This makes the framework very customizable. It has the same logic and names in all ways. This makes the Beer CSS very easy to understand and reuse. I made a codepen to see some list expansions created with Beer CSS here.

Hope you enjoy this article. Thanks for read!

Beer CSS:
https://www.beercss.com

Material Design 3:
https://m3.material.io/

Codepen:
https://codepen.io/leo-bnu/pen/Baewrgg

About settings, elements and helpers used by Beer CSS:
https://github.com/beercss/beercss/blob/main/docs/INDEX.md

Main layouts - Beer CSS Tips #4

Leonardo Rafael Wehrmeister — Mon, 06 May 2024 12:09:04 +0000

Hello,

I want to share a serie of posts containing some tips of Beer CSS. Beer CSS is a new framework around, based on (not restricted to) Material Design 3. Material Design 3 is a design system created by Google. In this post, we will learn about the main layout. The main layout is the basic structure of your page.

If you don't known the concept of settings, elements and helpers used by Beer CSS, you can read this page.

1) First, you need to create a main element. Use responsive helper to be responsive with other elements around.

<main class="responsive"></main>

2) You can create a nav element as navigation rail. Use left and right helpers to set the position. Navigation rail must be placed before all other elements.

<nav class="left">
  <a>
    <i>home</i>
    <div>Home</div>
  </a>
  <a>
    <i>search</i>
    <div>Search</div>
  </a>
  <a>
    <i>share</i>
    <div>Share</div>
  </a>
</nav>

3) If you want a navigation drawer, just add the drawer helper to nav element. Navigation drawer must be placed before all other elements.

<nav class="left drawer">
  <a>
    <i>home</i>
    <div>Home</div>
  </a>
  <a>
    <i>search</i>
    <div>Search</div>
  </a>
  <a>
    <i>share</i>
    <div>Share</div>
  </a>
</nav>

4) Add the header and footer elements as you wish. By default header and footer elements has a background color. Add the transparent helper to set the background color as transparent.

<header class="transparent"></header>

<footer class="transparent"></footer>

5) Now combine all to generate the main layout of your page. The semantic HTML helps a lot here.


<nav class="left">
  <a>
    <i>home</i>
    <div>Home</div>
  </a>
  <a>
    <i>search</i>
    <div>Search</div>
  </a>
  <a>
    <i>share</i>
    <div>Share</div>
  </a>
</nav>

<header class="transparent"></header>

<main class="responsive"></main>

<footer class="transparent"></footer>

Hope you enjoy this article. Thanks for read!

Beer CSS:
https://www.beercss.com

Material Design 3:
https://m3.material.io/

Codepen:
https://codepen.io/leo-bnu/pen/NWmmmMd

About settings, elements and helpers used by Beer CSS:
https://github.com/beercss/beercss/blob/main/docs/INDEX.md

Beyond Basic Functions: Explore Currying in JavaScript

Leonardo Rafael Wehrmeister — Tue, 26 Mar 2024 13:35:53 +0000

Currying in JavaScript is a functional programming technique that involves transforming a function with multiple arguments into a series of functions, each taking a single argument at a time.

Here's a breakdown of what currying does:

Takes a function with multiple arguments: Imagine a function that adds three numbers together.
Transforms it into a sequence of functions: Currying breaks this function down into smaller functions, where each function takes one argument and returns a new function that awaits the remaining arguments.
Partial application: You can call the curried function with one argument at a time, and it remembers the provided arguments until all arguments are supplied.

Benefits of currying include:

Improved code reusability: By creating smaller functions, you can reuse them in different contexts.
Enhanced code composability: Curried functions can be easily combined to create more complex functionality.
Increased flexibility: You can provide arguments partially and build up the function call over time.

Here are some code examples of currying in JavaScript using strings:

1. Curried Greeter:

This example creates a curried function for building greetings:

function greet(salutation) {
  return function(name) {
    return `${salutation}, ${name}!`;
  };
}

const sayHello = greet("Hello");
const sayHi = greet("Hi");

console.log(sayHello("Alice")); // Output: Hello, Alice!
console.log(sayHi("Bob")); // Output: Hi, Bob!

Explanation:

We define a function greet that takes a salutation string (salutation).
It returns a function that takes a name string (name).
The returned function constructs the greeting by combining the salutation and name.
We create separate functions sayHello and sayHi using partial application with different greetings.

2. Curried String Manipulation:

This example demonstrates currying for string manipulations:

function modifyString(action) {
  return function(str) {
    switch (action) {
      case "uppercase":
        return str.toUpperCase();
      case "lowercase":
        return str.toLowerCase();
      case "trim":
        return str.trim();
      default:
        return str;
    }
  };
}

const toUpper = modifyString("uppercase");
const toLower = modifyString("lowercase");
const trimString = modifyString("trim");

console.log(toUpper("hello world")); // Output: HELLO WORLD
console.log(toLower("HI THERE")); // Output: hi there
console.log(trimString("   spaces around  ")); // Output: spaces around

Explanation:

We define a function modifyString that takes an action string (action).
It returns a function that takes a string (str).
The inner function uses a switch statement to perform the specified action on the string based on the provided action.
We create separate functions for specific actions like toUpper, toLower, and trimString using partial application.

3. Curried String Formatting:

This example showcases currying to create a reusable string formatter:

function formatString(prefix, suffix) {
  return function(str) {
    return `${prefix}${str}${suffix}`;
  };
}

const announcement = formatString("[ Announcement]: ", "!");

console.log(announcement("JavaScript is awesome")); // Output: [ Announcement]: JavaScript is awesome!

Explanation:

We define a function formatString that takes a prefix string (prefix) and a suffix string (suffix).
It returns a function that takes a string (str).
The returned function combines the prefix, string, and suffix to create the formatted output.
We create a function announcement using partial application with a specific prefix and suffix for announcements.
These examples demonstrate how currying allows you to create reusable functions for various string manipulations and formatting tasks in JavaScript.

While not essential for every situation, currying provides a valuable tool for functional programmers and those seeking to write cleaner, more maintainable JavaScript code. It's a technique worth exploring to enhance your functional programming skills and potentially improve the structure and readability of your JavaScript projects.

Design Systems for 2024

Leonardo Rafael Wehrmeister — Tue, 27 Feb 2024 19:42:40 +0000

A design system is a collection of reusable components and guidelines that form the foundation for user interfaces (UI) across various digital products within an organization. It essentially acts as a single source of truth for all things related to the UI, ensuring consistency and efficiency in design and development.

Here's a breakdown of the key components of a design system:

Reusable UI components: These are pre-built building blocks like buttons, menus, forms, etc., that can be easily integrated and reused across different digital products. This saves designers and developers time and effort compared to creating them from scratch every time.

Style guides: These define the visual language of the system, including things like typography, color palettes, spacing, and iconography. This ensures visual consistency across all interfaces, contributing to a cohesive brand experience.

Documentation and guidelines: This part provides clear instructions on how to use the components and adhere to the style guide. It helps developers understand the technical implementation of the components and aids designers in creating consistent and user-friendly experiences.

Overall, a design system UI offers several benefits:

Consistency: Ensures a uniform look and feel across all products, fostering brand recognition and familiarity for users.

Efficiency: Saves time and resources by enabling the reuse of pre-built components and established design patterns.

Scalability: Makes it easier to manage and maintain UI elements as the product portfolio grows, facilitating future development.

Collaboration: Provides a common language for design and development teams, fostering smoother communication and collaboration.

In essence, a design system UI acts as a powerful tool for maintaining consistency, efficiency, and scalability in the design and development of digital products.

Determining the "top" design systems is subjective, as different systems in various aspects. However, some of the well-established and popular design systems in 2024 include:

Material Design 3 by Google:

A comprehensive and mature system known for its clean, user-friendly aesthetics and extensive documentation. It offers a wide range of components and guidelines for building web, mobile, and desktop applications.

Homepage:
👉 https://m3.material.io

An open source CSS Framework:
👉 https://www.beercss.com

Fluent 2 by Microsoft:

Microsoft's design system emphasizes a clean, modern aesthetic with a focus on light, depth, motion, and material. It's well-suited for building UIs for Windows, web, and mobile platforms.

Homepage:
👉 https://fluent2.microsoft.design

Carbon Design System by IBM:

A robust system known for its modularity and accessibility focus. It provides a wide range of components and guidelines for building web, mobile, and desktop applications, with an emphasis on inclusivity and accessibility.

Homepage:
👉 https://carbondesignsystem.com/

Design System by Apple:

Apple doesn't have a single, unified design system in the traditional sense. However, they do provide a robust collection of resources and guidelines that collectively act as a foundation for the design of their software products. These resources can be found on the Apple Developer website under the Design section.

Homepage:
👉 https://developer.apple.com/design/

It's important to note that the best design system for you will depend on your specific needs and preferences. Consider factors like the size and complexity of your design projects, the platforms you're targeting, and the importance of accessibility when choosing a system to adopt.

The classless and class-light CSS aproaches

Leonardo Rafael Wehrmeister — Wed, 24 Jan 2024 11:25:51 +0000

Both classless and class-light CSS approaches aim to simplify web styling by reducing reliance on traditional class-based methods. However, they take slightly different paths to achieve this:

Classless CSS

Focuses on semantic styling: This approach utilizes the inherent meaning of HTML tags to apply styles automatically. For example, an <h1> element might get a larger font size and bolder text automatically based on its semantic meaning as a heading.
Minimal use of classes: You don't need to add specific class names to your HTML elements for basic styling. The framework takes care of it based on the tag itself.
Super lightweight: Due to the minimal approach, classless frameworks are typically very small in size, making them ideal for performance-critical websites where every byte counts.
Limited customization: Since styles are based solely on semantics, there's less flexibility for complex layouts and specific design changes.

Examples:

Sakura (https://oxal.org/projects/sakura)
Simple.css (https://simplecss.org)

Class-light CSS

Blends semantics and utility classes: These frameworks provide some basic styles for semantic elements, but also offer a small set of utility classes that you can use for further customization.
More control over the look and feel: While still emphasizing clean HTML, you can use utility classes to adjust margins, padding, colors, and more, giving you more control over the final design.
Balances flexibility and size: Compared to classless, class-light offers more control but remains relatively lightweight, making it a good compromise for many projects.

Examples:

Beer CSS (https://www.beercss.com)
Milligram (https://milligram.io)

Choosing the right approach

Prioritize speed and simplicity: Choose classless if performance is your top concern and you're happy with basic styling based on semantics.
Need some flexibility and control: Choose class-light if you want to retain the clean HTML approach while having the option for further customization through utility classes.

Ultimately, the best choice depends on your specific project requirements and preferences. Consider factors like the desired level of control, performance needs, and overall project complexity when making your decision.

Top Material Design 3 web frameworks of 2024

Leonardo Rafael Wehrmeister — Tue, 23 Jan 2024 17:12:23 +0000

There are some CSS framework options that implement Material Design 3, each with its own advantages and disadvantages. Here are some of the most popular options:

Independent structures

Material Web (ready to use): Google's official library for Material Design 3. Offers components ready to be used in any web framework. It's a good option if you want full control over your integration and customization.

👉 https://m3.material.io/develop/web

Beer CSS (ready to use): A lightweight, easy-to-use CSS framework designed specifically for Material Design 3. It focuses on simplicity, uses HTML semantic standard and offers more components than the official Google library web version.

👉 https://www.beercss.com

Frameworks for specific frameworks

MUICSS (under dev): A Material Design-based collection of UI components, built for React. It offers deep integration with React and a good ecosystem of tools and add-ons.

👉 https://www.muicss.com

Vuetify (under dev): A library for Vue.js that implements Material Design 3. It offers Vue-specific components and fluid integration with your templating system.

👉 https://vuetifyjs.com

Angular Material (under dev): A set of UI components based on Material Design 3 for Angular. It offers a familiar development experience for Angular users and integration with the framework's native features.

👉 https://material.angular.io

Generic Frameworks

Frameworks like Tailwind CSS or Bootstrap can also be used to implement Material Design 3, although they require a little more manual and custom work. The best option for you will depend on your specific needs and preferences. Consider factors such as:

Conclusion

Your web framework: If you already use a specific framework, such as React or Angular, opt for a compatible CSS framework as it may be the best choice.

Level of complexity: If you want a quick and easy-to-use solution, Beer CSS or Material Web could be good options.

Flexibility and control: If you need more control and customization, Material Web, Beer CSS or generic frameworks like Tailwind CSS may be the best choices.

I recommend that you explore the documentation and demos of each framework to see which one best suits your project.

Tips to avoid legacy growth in your large scale web system (for frontend)

Leonardo Rafael Wehrmeister — Mon, 22 Jan 2024 14:01:07 +0000

Hi Devs!

I would to share some tips to avoid legacy growth in your large scale web system (for frontend). This is just my personal experience. Don't need to be the truth and all discuss are welcome.

By following some tips, you can keep your system always up to date, facilitating maintenance and framework/ecosystem changes. And this can also help keep your DX level high (most of the time):

1) Break your frontends into small repositories

2) Don’t bet on just one framework/ecosystem

3) Use a global CSS

4) Use semantic HTML

5) Don't create components for everything, only those that have some logic

6) Use only one router

1) Break your frontends into small repositories

Divide and conquer. Here repositories can be divided into parts of the system, such as a page or a group of pages. Breaking your frontends into small repositories, in addition to making deployments easier, can give you more freedom to try new things, refactoring or even using another stack. This approach allows you to try things without fear, as you won't be impacting the system as a whole. It also allows you to work with multidisciplinary teams from different squads and skills.

2) Don’t bet on just one framework/ecosystem

We currently have several fantastic frameworks and ecosystems that meet our needs. But their lifespan is always unknown. After a certain time, some items in the ecosystem begin to be depreciated. Then the dev's satisfaction with them starts to decline. From the moment you realize that you are trying too hard to do simple things, it may be time to do something about it. The important thing here is to try to keep the team's DX always high.

3) Use a global CSS

The global CSS is to prevent the system from having a "frankenstein UI". What is a "Frankenstein UI"? As we have several repositories, with several components, several stacks and several UIs, this can all result in a "moderately" different UI between one page and another. Here the tip is not to use different UIs. Avoid using UIs linked to some framework/ecosystem such as Material-UI, Vuetify, Quasar and others. Mixing these types of UIs together can generate severe differences between your pages.

4) Use semantic HTML

This is a very current point. Instead of having components for everything, why not directly use semantic HTML? You can have dialogs, buttons, cards among others, writing clean and unified HTML throughout the system. As semantic HTML is part of the web platform, it is independent of any framework/ecosystem, so you open up the range of options to use anything on your system. It's a blank page, ready to be colored however you want. I recommend a class-light approach as done at https://www.beercss.com. There are others too, just google it.

5) Don't create components for everything, only those that have some logic

This point is in line with the previous one. If you choose to use semantic HTML, you will realize that creating components for everything ends up being "pointless". Semantic HTML already has unique markup that you can use system-wide. Abstracting a button, card, nav, among others into a component no longer makes much sense. The tip here is to only create components when you have some type of logic within them, such as parts of a form or an autocomplete.

6) Use only one router

When we break our frontends into multiple parts, we need "glue". The "glue" for all these repositories, which were separated by page or group of pages, would be the router. It is important to have this unique router, so we can make the necessary initializations on each of our frontends. Avoid routers linked to a framework/ecosystem if you intend to use different stacks on your system at the same time.

Hope you enjoy and feel free to discuss about it!

Cheers to Craft Design: Beer CSS - A Lightweight Material Design Framework

Leonardo Rafael Wehrmeister — Sat, 30 Dec 2023 17:48:14 +0000

Hey fellow web devs, let's talk about something refreshing in the world of CSS frameworks: Beer CSS. Yes, you read that right – it's not just for choosing your Saturday night brew anymore.

Beer CSS is the first framework built specifically for Material Design 3, and it's aiming to change the game with its focus on:

Tiny Size: Ditch the bloat! Beer CSS weighs in at a fraction of the size of other Material Design frameworks, making it lightning-fast and resource-friendly.

Semantic Goodness: It prioritizes clean, semantic HTML, giving you a solid foundation for accessible and well-structured websites.

DX Delight: Developer experience takes center stage. Beer CSS is simple to learn and use, with clear documentation and an intuitive approach.

Theme Control: Got a taste for customization? Beer CSS gives you the flexibility to tweak Material Design's themes and make your project truly your own.

But wait, there's more! Beer CSS packs a punch with features like:

Responsive Layouts: Adapt your design to any screen size with ease. ️

Utility Classes: Speed up your workflow with a handy set of ready-made classes for common styles.

Accessibility Focus: Beer CSS keeps inclusivity in mind, ensuring your website is accessible to everyone. ♿️

Intrigued? I totally get it! Here's what you can do next:

Check out the website: https://www.beercss.com/

Join the community: https://github.com/beercss/beercss

Let's raise a glass to a fresh approach to Material Design with Beer CSS! I'm curious to hear your thoughts – have you tried it out? What do you like about it?

Cheers!