NeetoUI is an open-source React component library developed for neeto. It makes it easier to build accessible and consistent UI in React applications. It is currently being used in more than 20 Neeto products. In this blog post, we will explore the exciting new features and enhancements of neetoUI.

The Spark

Though we were using neetoUI across all our products, we had to avoid neetoUI in certain products that followed a different UI style. For example, NeetoCode, a coding platform built by BigBinary, has its own special design that is drastically different from the established neetoUI style. So, while building the new landing page for NeetoCode, we also had to create custom buttons and form elements that followed the NeetoCode design.

Secondly, neetoUI only supported theme overrides. This means the users could easily override the color scheme of neetoUI just by replacing the color variables. But with NeetoCode, just updating the theme was not enough. From button sizing to border radius and variants, every component was different in the NeetoCode design system. That's when we realized that neetoUI requires even more customization options to improve its adaptability.

The Solution

To enhance the customizability of neetoUI, we planned to implement a set of customization features similar to popular design systems like Bootstrap and Ant design. These features would allow users to adapt the library to their unique design without compromising on the core advantages of using neetoUI. Apart from the color theming which neetoUI already supported, we also wanted to introduce component styling and responsive typography to further advance the customizability of neetoUI.

The Execution

NeetoUI has more than 30+ components, and enhancing the customizability of those components was not an easy task. We approached each component one by one and refactored the respective styles to use CSS variables for all the properties.

Let’s take the example of the Button component from neetoUI. Earlie,r we could only customize the colors used in the buttons. But with v6, we have made every aspect of the button, like padding, border-radius, font size, etc. customizable.

Here is the list of variables used by the Button component.

CSS

--neeto-ui-btn-padding-x: 8px;
--neeto-ui-btn-padding-y: 6px;
--neeto-ui-btn-font-size: var(--neeto-ui-text-sm);
--neeto-ui-btn-font-weight: var(--neeto-ui-font-medium);
--neeto-ui-btn-line-height: 16px;
--neeto-ui-btn-color: rgb(var(--neeto-ui-black));
--neeto-ui-btn-bg-color: transparent;
--neeto-ui-btn-border-width: 0;
--neeto-ui-btn-border-color: transparent;
--neeto-ui-btn-border-radius: var(--neeto-ui-rounded);
--neeto-ui-btn-gap: 4px;
--neeto-ui-btn-icon-size: 16px;
--neeto-ui-btn-box-shadow: none;
--neeto-ui-btn-outline: none;

// Disabled
--neeto-ui-btn-disabled-opacity: 0.5;

// Hover
--neeto-ui-btn-hover-color: rgb(var(--neeto-ui-black));
--neeto-ui-btn-hover-bg-color: transparent;
--neeto-ui-btn-hover-box-shadow: none;
--neeto-ui-btn-hover-opacity: 1;

// Focus
--neeto-ui-btn-focus-color: rgb(var(--neeto-ui-black));
--neeto-ui-btn-focus-box-shadow: none;
--neeto-ui-btn-focus-opacity: 1;

// Focus Visible
--neeto-ui-btn-focus-visible-color: rgb(var(--neeto-ui-black));
--neeto-ui-btn-focus-visible-outline: 3px solid rgba(var(--neeto-ui-primary-500), 50%);
--neeto-ui-btn-focus-visible-outline-offset: 1px;
--neeto-ui-btn-focus-visible-box-shadow: none;

The users can now tweak each property of the Button component using these variables and create their version of the component. You can see it in action, here.

Likewise, we have updated all the components and the new neetoUI storybook has examples on how to override each component.

The Result

With all the customization improvements, neetoUI v6 has been released to the public. Just by changing a few CSS variables, you can now change the look and feel of neetoUI at both the global and component levels to match your exact design requirements.

Do visit this page to understand the nuances of neetoUI v6 up close.

We hope you have a clearer understanding of the improvements we have made to the library. Do try it out and let us know your feedback.

In neeto products, we use lots of listing pages which contain Header, SubHeader, and Table components. The Table component height is adjusted by inheriting the height of the wrapper that contains the Table component. One common problem for many developers is the need to calculate the height of sibling components and adjust the table wrapper height dynamically. This can often lead to double scroll issues and result in layout inconsistencies. However, we can resolve this issue by using a generic wrapper component called TableWrapper.

The TableWrapper component serves as a wrapper for a table element. It helps to avoid the dynamic height calculation and inconsistency in heights for the parent container of the table component.

TableWrapper should be used only with Tables used in the listing layout as shown below. Container should be the parent component of TableWrapper.

<Container>
  <Header />
  <SubHeader />
  <TableWrapper>
    <Table columnData={columnData} rowData={rowData} />
  </TableWrapper>
</Container>

CodeSandbox Demo

TableWrapper is a Flexbox CSS layout model designed to provide a more efficient way of arranging and aligning elements within a container. It eliminates the need for complicated height calculations and offers a flexible and intuitive approach to building responsive designs.

One of the major advantages of using Flexbox is that it allows you to create layouts without relying on dynamic height calculations. Traditionally, when working with CSS, you often need to calculate and set heights for elements to ensure they align properly. This becomes especially challenging when dealing with varying content lengths or responsive designs.

Flexbox solves this problem by providing a set of properties that control the distribution and alignment of elements within a container. Instead of setting explicit heights, you can let Flexbox handle the vertical alignment automatically based on the content and container dimensions.

Key Flexbox properties for height control

1. display: flex;: By applying this property to the container, you activate the Flexbox layout model. It transforms the container into a flex container, allowing you to control the behaviour of its child elements.

2. flex-direction: row/column;: This property defines the direction in which the flex items are laid out within the container. By default, it is set to row, which arranges the items horizontally. However, you can also set it to column to create a vertical arrangement.

3. align-items: flex-start/center/flex-end;: This property aligns the flex items along the cross-axis of the container. Setting it to flex-start aligns the items at the top, center aligning them in the middle, and flex-end aligning them at the bottom.

4. flex-grow: 1;: This property allows the flex items to grow and occupy the available space within the container. Setting it to 1 ensures that the items expand to fill any remaining space vertically.

5. min-height: 0;: The min-height CSS property sets the minimum height of an element. It prevents the used value of the height property from becoming smaller than the value specified for min-height.

Benefits of using Flexbox for height control

1. Simplified Layouts: Flexbox eliminates the need for complex height calculations, making your CSS code simpler and easier to maintain.

2. Responsive Design: Flexbox naturally adapts to different screen sizes and orientations, providing a responsive layout without the need for media queries or explicit height adjustments.

3. Dynamic Content: Flexbox handles varying content lengths effortlessly. Whether you have short or long content, the items will adjust their height accordingly, ensuring a consistent and visually pleasing design.

4. Cross-browser Compatibility: Flexbox is well-supported by modern browsers, including all major ones, ensuring consistent behaviour across different platforms.

<div class="layout__wrapper">
  <div class="layout__container">
    <!-- Table component -->
  </div>
</div>

.layout__wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  min-height: 0;
  overflow: auto;
}

.layout__container {
  flex-grow: 1;
  min-height: 0;
}

Using TableWrapper with table contains pagination

TableWrapper height is adjusted to contain pagination element using the hasPagination prop. hasPagination prop accepts boolean value. It can be calculated using totalCount and defaultPageSize values as shown below.

<Container>
  <Header />
  <SubHeader />
  <TableWrapper hasPagination={totalCount > defaultPageSize}>
    <Table columnData={columnData} rowData={rowData} />
  </TableWrapper>
</Container>

CodeSandbox Demo

Responsive design has become fundamental to modern web development as users access websites from various devices with varying screen sizes. NeetoSite is a website-building tool by Neeto. We strive for a great user experience on all devices for sites built using NeetoSite.

This blog will discuss implementing responsive typography, padding, and margin using the RFS package.

At NeetoSite, users can personalize font sizes from the design page. If a user selects the largest font size (9xl) for the title, everything looks flawless on the desktop view. However, when switching to mobile, things start to look a little off. The title appears out of place, and that's because we had been using the same font size for both desktop view and mobile view.

Desktop view

Mobile view

Limitations of the Tailwind approach

We use Tailwind CSS to create the building blocks of NeetoSite. One way to implement responsive typography is to use Tailwind's responsive font size classes.

For example, to make the text 60px on large desktop screens, we can use the lg:text-6xl class.

<p class="lg:text-6xl">Text</p>

Now we need to choose the font size for mobile and tablet devices. Let's say we choose 30px for mobile and 48px for tablets. We need to add additional Tailwind classes:

<p class="text-3xl md:text-5xl lg:text-6xl">Responsive text</p>

• The text-3xl class makes text 30px on mobile.
• The md:text-5xl class will set the font size to 48px on tablet devices.

Now, let's dive into a practical example within NeetoSite. This platform provides users with the flexibility to customize font sizes for their content from the design page.

NeetoSite offers a total of 13 font size variants, each associated with its default desktop value, as shown in the table below.

For each font size variant, the challenge is to determine the optimal font sizes for tablets and mobile devices. Once we have chosen the font sizes for mobile and tablet, we need to apply the corresponding Tailwind classes, as mentioned above. It can indeed involve a substantial amount of work and effort, doesn't it?

The solution - RFS package

What is RFS?

Bootstrap’s side project RFS is a unit resizing engine that was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). It's a great tool for creating responsive typography and layouts, as it automatically calculates the appropriate values based on the dimensions of the browser viewport. Nowadays, RFS is capable of rescaling most CSS properties with unit values like margin, padding, border-radius, or even box-shadow.

Using RFS

The rfs() mixin provides shorthands for common CSS properties with unit values, such as font-size, margin, and padding. This makes it easy to use RFS to create responsive CSS.

Importantly, we don't need to worry about creating complex media queries to achieve responsive font sizes. RFS handles this for us.

For example, to set the font size of a .title class to be responsive, you would use the following Sass code.

.title {
  @include font-size(4rem);
}

The above Sass code will generate the following CSS output.

.title {
  font-size: calc(1.525rem + 3.3vw);
}

@media (min-width: 1200px) {
  .title {
    font-size: 4rem;
  }
}

In the generated CSS, the font size is set to calc(1.525rem + 3.3vw). This formula takes a base size of 1.525rem and adds 3.3% of the viewport width (vw). As the viewport width changes, the font size dynamically adjusts to ensure optimal readability and aesthetics. If the viewport width is greater than 1200px, the built-in media query in the generated CSS sets the font size back to the user-defined value of 4rem.

Visualisation

The following visualization shows how RFS rescales font sizes based on the viewport width.

Note that every font size is generated in a combination of rem and vw units, but they are mapped to px in the graph to make it easier to understand.

The X-axis represents the viewport width in pixels. The Y-axis represents the font size in pixels. The colored lines represent the different font sizes that can be generated using RFS.

As you can see, the font sizes are scaled down as the viewport width decreases. This ensures that the text is readable on all devices, regardless of the screen size.

How we applied RFS on NeetoSite

We created custom CSS classes for each font size variants and applied RFS to them. RFS automatically calculates the appropriate values based on the browser viewport, so the font size scales down pleasingly.

.ns-font-9xl {
  @include font-size(4.5rem !important);
}

.ns-font-8xl {
  @include font-size(3.75rem !important);
}

.ns-font-7xl {
  @include font-size(3rem !important);
}

.ns-font-6xl {
  @include font-size(2.5rem !important);
}

.ns-font-5xl {
  @include font-size(2.25rem !important);
}

.ns-font-4xl {
  @include font-size(2rem !important);
}

.ns-font-3xl {
  @include font-size(1.75rem !important);
}

.ns-font-2xl {
  @include font-size(1.5rem !important);
}

.ns-font-xl {
  @include font-size(1.25rem !important);
}

.ns-font-lg {
  @include font-size(1.125rem !important);
}

.ns-font-base {
  @include font-size(1rem !important);
}

.ns-font-sm {
  @include font-size(0.875rem !important);
}

.ns-font-xs {
  @include font-size(0.75rem !important);
}

Similarly we created custom CSS classes for each padding and margin variants and applied RFS to them.

RFS fluid rescaling in action

How RFS transformed NeetoSite

• Improved mobile responsiveness: With RFS, we were able to effortlessly set responsive font sizes, paddings, and margins for different screen sizes, ensuring a seamless and visually pleasing experience across devices.

• Simplified user customization: Users could continue customizing font sizes, but now with the added benefit of automatic responsiveness, eliminating the burden of setting tablet and mobile values manually.

• Enhanced readability: RFS helps ensure that the text remains readable at all screen sizes.

• Improved consistency: The use of RFS ensures that the typography, padding, and margin of all NeetoSite blocks are consistent across all devices. This is because it scales all of the padding and margin values based on the same formula.

See RFS in action

Take a look at BigBinary Academy, a place to learn coding powered by NeetoSite. Recent changes have brought about a significant improvement in mobile responsiveness. Another example of successful RFS implementation can be found at https://neetocode.com, a coding platform built by BigBinary.

Flexbox is a powerful CSS layout module that allows us to create flexible and responsive user interfaces. However, when dealing with flex items that contain text, we may encounter issues where the text overflows its container, disrupting the user interface. In this article, we'll explore the problem of text overflow in flex items and learn about the automatic minimum size behavior of flex items.

The problem

Consider a scenario where we have a card component with a title that can be lengthy. To prevent the card from becoming too large and breaking the layout, we want to truncate the title and show an ellipsis when it overflows its container.

However, even after applying the necessary CSS properties such as white-space: nowrap, overflow: hidden, and text-overflow: ellipsis to card__title, the text doesn't truncate as expected. The card content doesn't shrink to accommodate the overflowing text, resulting in an undesired UI.

HTML

<div class="card">
  <div class="card__avatar"></div>
  <div class="card__content">
    <p class="card__title">This is anexampleofalengthytitle</p>
    <p class="card__description">some text here</p>
  </div>
</div>

CSS

.card {
  display: flex;
  align-items: center;
  width: 260px;
  gap: 10px;
  padding: 10px;
  margin: 20px;
  background-color: #ffffff;
  border-radius: 10px;
}

.card__avatar {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background-color: #aac4ff;
  border-radius: 50%;
}

.card__content {
}

.card__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 20px;
  margin: 0;
}

.card__description {
  font-size: 14px;
  margin: 0;
}

Why is it not shrinking?

The default value of flex-shrink of a flex item is 1, which means the card__content should be able to shrink as much as it wants to. Surprisingly, the result is not what we expected!

The flexbox algorithm refuses to shrink a child below its minimum size.

When there is text inside an element, the minimum size is determined by the length of the longest string of characters that cannot be broken.

Flexbox specification:

To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; for scroll containers the automatic minimum size is zero, as usual.

The solutions

To overcome the issue of the flex item not shrinking as expected, we can apply one of the following solutions:

Solution 1 : Set min-width: 0;

.card__content {
  min-width: 0;
}

By explicitly setting min-width: 0; on the flex item, we can override the default behavior and allow the element to shrink beyond its automatic minimum size. This change enables the flex item to adjust its size to accommodate the ellipsis and prevent UI disruption.

Solution 2: Set overflow: hidden;

.card__content {
  overflow: hidden;
}

Setting overflow: hidden; alone can also help. This property ensures that any overflowing content is hidden, which indirectly allows the flex item to shrink properly.

codesandbox demo

Conclusion

Understanding the automatic minimum size behavior of flex items is crucial for creating effective and visually pleasing web layouts. By implementing the suggested solutions, you can overcome the challenges associated with text overflow and achieve the desired UI outcomes.

Happy coding ❤️