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.
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:
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.
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!
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 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
:
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-classesfocus
, hover
, active
, and visited
– represent their corresponding pseudo-classesreduced-motion
– helps with accessibility(a11y) for users who prefer pages with less motionresponsive
– helps build mobile-first experiences that adapt to various displaysThese 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>
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.
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.
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:
box-sizing: border-box
should be used by defaultborder-color
, background-color
, and color
classes. All classes can be generated at the individual modules described aboveHucssley 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:
!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";
.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; }
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.
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 and mobile apps, recording everything that happens in your web app, mobile app, or website. 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 and mobile apps — start monitoring for free.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowSimplify component interaction and dynamic theming in Vue 3 with defineExpose and for better control and flexibility.
Explore how to integrate TypeScript into a Node.js and Express application, leveraging ts-node, nodemon, and TypeScript path aliases.
es-toolkit is a lightweight, efficient JavaScript utility library, ideal as a modern Lodash alternative for smaller bundles.
The use cases for the ResizeObserver API may not be immediately obvious, so let’s take a look at a few practical examples.