How Hucssley utility classes can improve frontend development

Written by Austin Roy Omondi✏️

While functionality is the most important aspect of web development, creating a great user experience that is also easy on the eyes is also very crucial. However, styling can be both a painstaking and time-consuming task. In some cases, one may quickly implement the required functionality before spending a significant amount of time working on the appearance of a certain component. This is where CSS frameworks can be extremely helpful.

Most of these CSS frameworks such as Bootstrap and Semantic UI come with prebuilt components that can be quickly put to use by the developer to speed up development.

Hucssley does things a little differently though. With no prebuilt components, Hucssley is a utility class library that instead follows the route laid out by other similar libraries such as Tailwind and Tachyons, providing a variety of utility classes that developers can use alongside base HTML elements to quickly create components.

Why use Hucssley?

Hucssley is based on SASS, providing atomic utility classes to help quickly create consistent and performant UI components. While this may mean having to create all our components on our own, Hucssley holds a major advantage over traditional UI component libraries as it is completely customizable without the need for third party support.

The Hucssley team built it around five key goals, as defined in their documentation:

1. To be incredibly easy to learn and use by providing a system of atomic classes that mostly map 1:1 with existing CSS properties
2. To allow anyone of any skill to rapidly build for the web without unknowingly causing CSS bloat or fighting against some of CSS’s core, but sometimes difficult to understand, principals
3. To provide the tools required to build UI for any breakpoint, user interaction, or UI state
4. To be completely platform agnostic and portable between frontend stacks, with Sass being the only dependency
5. To be highly flexible to your needs, with the ability to easily customize existing classes and create new ones

The core idea behind Hucssley is making it as easy and adoptable as possible as it’s syntax is as close to CSS as possible, this makes Hucssley easier to learn than other CSS utility libraries, or as stated in the documentation:

“If you know CSS properties, you know Hucssley”

Hucssley aims to ease the styling process regardless of expertise in CSS while avoiding bloating and easing the naming process for components and states. Hucssley also handles any specificity wars that may arise from the use of certain CSS selectors, this makes it easier to avoid unwanted side effects when adjusting certain properties.

Hucssley is also platform agnostic and can easily be plugged into any web development frameworks such as React, Vue, or Angular and can even be used with HTML emails.

Using utility class libraries like Hucssley when building design system components can allow for quick development of consistent user experience across components.

If you wish to find out more about how Hucssley tries to solve a number of problems associated with CSS, there is a section of their documentation about how they try to rethink CSS.

Installing Hucssley

Hucssley is still in early development at the moment and as a result, it is yet to be published on npm. For this reason, you will need to install it directly from GitHub by running:

npm install github:stowball/hucssley#master

or with yarn:

yarn add github:stowball/hucssley#master

You can use Hucssley as is without any customization in your file by importing into your SASS file like this:

@import "path_to_node_modules/hucssley/src/index";

However, if you wish to customize it, you will need to import Hucssley files followed by your own customized files as shown below and this will override default configurations with your new ones:

@import "path_to_node_modules/hucssley/src/helpers";

@import "path_to_node_modules/hucssley/src/variables/global/index";
// @import "custom/variables/global/index";

@import "path_to_node_modules/hucssley/src/variables/classes/index";
// @import "custom/variables/classes/index";
// set class overrides before if you don’t need access to the defaults & want changes to flow through referenced vars

@import "path_to_node_modules/hucssley/src/variables/reset/index";
// @import "custom/variables/reset/index";

@import "path_to_node_modules/hucssley/src/styles";
// @import "custom/classes/index";

In projects using webpack, you can load Hucssley with Sass loader.

Upgrading Hucssley to the latest version is done by reinstalling the package if you are using npm. For yarn it is a little more complicated as running the installation command won’t automatically update any files, instead, you should run this command:

  yarn upgrade hucssley

And that’s it, you’re all set to use Hucssley in your project!

Usage & features

Hucssley’s utility classes are utilized by adding them as regular classes to HTML elements as shown in this live demo from the documentation that uses the code below:

<div class="
  background-color:blue-0
  padding:500
">
  <div class="
    align-items:center
    background-color:neutral-0
    border-color:neutral-200
    border-radius:500
    border-style:solid
    border-width:100
    display:flex
    flex-direction:column
    padding:500
    text-align:center
    @mq-768--flex-direction:row
    @mq-768--text-align:left
  ">
   <img
      alt=""
      class="
        background-color:blue-600
        border-color:neutral-100
        border-radius:1000
        border-style:solid
        border-width:200
        margin-bottom:400
        width:50%
        @mq-600--width:30%
        @mq-768--margin-bottom:0
        @mq-768--margin-right:500
        @mq-768--width:20%
      "
      src="https://hireup.cdn.prismic.io/hireup/89e15301c28e6396927d85e38e9c5d5833ebab09_kyle_357-bonnie.png"
    />
    <div>
      <p class="
        font-size:600
        font-weight:700
        line-height:200
        margin-bottom:400
      ">
        Disability support workers who love what you love
      </p>
      <a
        class="
          background-color:blue-900
          border-color:neutral-700
          color:neutral-0
          display:inline-block
          padding-horizontal:400
          padding-vertical:300
          transition-duration:200
          transition-easing:ease
          transition-property:all
          &:hocus--background-color:blue-600
          &:hocus--scale:105
          @mq-768--padding-horizontal:500
          @mq-768--padding-vertical:400
        "
        href="#"
      >
        Find your connection
      </a>
    </div>
  </div>
</div>

With just a regular HTML file, we are able to see just how easy it is to set up a responsive, accessible, and interactive component which can be used to display a user profile on a card. This is all done with only vanilla HTML and Hucssley.

This demo shows some of the great features Hucssley packs right out of the box, let us look at some of these key features and how they can help your development process.

Modules

Modules allow developers to generate pseudo and custom parent classes. Hucssley classes all have these core modules:

• base – base classes in Hucssley roughly equate to a standard version of a CSS property and value. e.g. align-items: flex-end is available through the base class .align-items:flex-end
  • the property is the class name with the value coming after the:
  • some classes are slightly different from the default, these are:

animation-count -> animation-iteration-count
animation-easing -> animation-timing-function
animation-mode -> animation-fill-mode
animation-state -> animation-play-state
content -> ::[pseudo]-content
momentum-scrolling -> -webkit-overflow-scrolling
pos-[bottom,left,right,top] -> bottom,left,right,top
rotate -> transform: rotate
scale -> transform: scale
size -> height & width
svg-fill-color -> fill
svg-fill-rule -> fill-rule
svg-stroke-color -> stroke
transition-easing -> transition-timing-function
translate-x -> transform: translateX
translate-y -> transform: translateY

All of the above aliases – and every other class alias – can be changed to your liking, however. Please read the docs for more details.

• hocus – a shortcut module for hover and focus pseudo-classes
• focus, hover, active, and visited – represent their corresponding pseudo-classes
• reduced-motion – helps with accessibility(a11y) for users who prefer pages with less motion
• responsive – helps build mobile-first experiences that adapt to various displays

State modules

These allow you to change the UI according to a particular state, following this pattern [state-name]--[base-class] . For the state class to be activated the raw state name needs to be added as a class as well as shown below:

<div class="
  display:none
  //add the state class
  is-open--display:block
  // add the state name to activate the class
  is-open
">
  //add some UI
</div>

Group modules

With groups, you can style child elements when interacting with a generic parent element (:focu and/or :hover), or when it’s in a particular UI state. Their syntax is group[group-type]__[base-class]:

.group:focus__scale:110
.group:hover__scale:110
.group:hocus__scale:110 // both :focus and :hover
.group-is-selected__background-color:blue-300

Just like state modules, the raw state name needs to be applied along with the parent element being given a .group class:

<html>
  …
  <div class="
    group
+   is-selected
  ">
    <ul class="
      group:hover__scale:110
      group-is-selected__background-color:blue-300
    "></ul>
  </div>
</html>

Modules can be combined to create a wide range of experiences.

Scales

Hucssley favors a millennial(0-1000) scale to represent values rather than names. This allows for a more uniform method of declaring the values of certain attributes. You are, however, free to customize this to your own liking and can assign the values of the scale to a name of your liking.

By default, the following classes use a millennial-scale:

• background-color
• border-color
• border-radius
• border-width
• color
• font-size
• letter-spacing
• line-height
• margin
• padding
• transition-delay
• transition-duration

While others, like opacity and scale use values more relevant to your conceptual model.

Configuration

Hucssley is easily customizable, however, you need to be familiar with the basic syntax of Sass(variables, lists, and maps). The configuration is split into three sections as defined in the documentation:

• Reset configuration uses plain variables to customize “generic” styles like whether box-sizing: border-box should be used by default
• Global configuration mostly uses maps to handle things like the default media queries, colors, spacings, UI states, and themes
• Classes provides list and map variables to adjust the modules, and values for each class individually. Some classes (like those that deal with color) inherit from the same base variable by default, so only one change is required to affect all border-color, background-color, and color classes. All classes can be generated at the individual modules described above

Hucssley provides several helper functions to help with customization that you can read more about in this section of the documentation.

These custom helper functions can also be used to create your own themes as shown in this demo. That is not all, you can also use these helpers to create custom classes to achieve your desired UI.

Hucssley classes intentionally have a low specificity count, but this may cause conflicts when integrating it into existing projects. To help cope with this, Hucssley provides two ways for developers to increase specificity:

• Forcing !important using $hu-use-important: true; before importing the reset and class style:

$hu-use-important: true;

@import "path_to_node_modules/hucssley/src/styles";
// @import "custom/classes/index";

• Separating class styles with a descendent selector. Hucssley is written in Sass, this means, you can easily wrap your imports in a new selector to convert every class to use a descendent selector:

.hucssley {
  @import "path_to_node_modules/hucssley/src/styles";
  // @import "custom/classes/index";
}

which will produce:

.hucssley .align-content:baseline {
  align-content: baseline;
}

.hucssley .align-content:center {
  align-content: center;
}

Conclusion

Built with a great focus on allowing developers to make use of their prior CSS knowledge, Huccsley is fairly easy to pick up and helps with solving the problems associated with vanilla CSS. These are just some of the many features built into Hucssley. It is an exciting technology that could make waves in web development once it leaves beta and it will be exciting to see how it will help developers create great experiences using its wide suite of tools. You can read in more detail about what else Hucssley has to offer in the documentation.

---

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.

LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — Start monitoring for free.

---

The post How Hucssley utility classes can improve frontend development appeared first on LogRocket Blog.