NeatU CSS Framework

A lightweight mobile-first CSS framework for you to quickly create responsive websites that look great everywhere.

NeatU aims to make it possible for you to create awesome websites with as little HTML bloat as possible.

Breakpoints

NeatU uses the same breakpoints as Bootstrap. I use the following code in the layout.scss file to manage the breakpoints.

$viewport-widths: (
    'xs': 440px,
    's': 576px,
    'm': 768px,
    'l': 992px,
    'xl': 1200px,
    'xxl': 1400px
);

You can update these values to anything else that better fits your requirements.

Layout Instructions

Add the class n-flex to use CSS flexbox for laying out elements in a container.

Equal Width Child Elements (Basic)

There are five classes you can use to ensure child elements take up the available space equally at specific viewport widths.

Add any of the following classes to the n-flex element to make sure all elements have equal width over specific viewport widths.

Examples

In the following example, all three .n-wrapper elements will have equal width as long as the viewport with is above or equal to 576px. On narrower widths, the .n-wrapper elements will take up full width of the parent.

<div class="n-flex n-flex-eq-sw grid-example">
    <div class="n-wrapper">1</div>
    <div class="n-wrapper">2</div>
    <div class="n-wrapper">3</div>
</div>

Similarly, using the .n-flex-eq-mw class for the parent of all .n-wrapper elements will ensure they have equal width as long as the viewport width is above or equal to 768px.

<div class="n-flex n-flex-eq-mw grid-example">
    <div class="n-wrapper">1</div>
    <div class="n-wrapper">2</div>
    <div class="n-wrapper">3</div>
    <div class="n-wrapper">4</div>
</div>

Conclusion

As you can see, these classes work well when you want each child element to have the same width. However, they have two limitations.

1. The number of elements in a row stays constant across multiple viewport widths.

2. All child elements occupy a single row.

You can use classes from the next section to overcome these limitations.

Equal Width Child Elements (Advanced)

Let's say you want to ensure there is one element in a row when viewport width (or vw) >= 576px and vw < 768px, two elements when vw >= 768px and vw < 992px, three elements when vw >= 992px and vw < 1200px, four elements when vw >= 1200px.

The easiest way to do so in NeatU is with the n-flex-aw-1234 class.

<div class="n-flex n-flex-aw-1234 grid-example">
    <div class="n-wrapper">1</div>
    <div class="n-wrapper">2</div>
    <div class="n-wrapper">3</div>
    <div class="n-wrapper">4</div>
    <div class="n-wrapper">5</div>
    <div class="n-wrapper">6</div>
</div>

Use the class n-flex-aw-1234a to ensure that leftover elements fill up the remaining space.

<div class="n-flex n-flex-aw-1234a grid-example">
    <div class="n-wrapper">1</div>
    <div class="n-wrapper">2</div>
    <div class="n-wrapper">3</div>
    <div class="n-wrapper">4</div>
    <div class="n-wrapper">5</div>
    <div class="n-wrapper">6</div>
</div>

Examples

I will now show you examples of all such classes available in NeatU.

.n-flex-aw-12, .n-flex-aw-112, .n-flex-aw-2, .n-flex-aw-1223, .n-flex-aw-1234, .n-flex-22334

Custom Width Child Elements

It is not always ideal to divide the available parent width equally among children. NeatU provides plenty of classes to let you specify element width at various viewport widths.

Specify Width as Percentage

Classes like n-mw-5, n-mw-10, ...., n-mw-100 allow you to set the element width at 5%, 10%, ..., 100% when the viewport width is over 768px.

You can use viewport specific classes to set the width for a particular element. For instance, the classes n-sw-30, n-mw-40, n-lw-55, n-xlw-40, n-xxlw-30 will set the element width to 30%, 40%, 55%, 40%, and 30% on viewport widths above 576px, 768px, 992px, 1200px, and 1400px in the default configuration.

<div class="n-flex grid-example">
    <div class="n-wrapper n-sw-30 n-mw-40 n-lw-55 n-xlw-40 n-xxlw-30">1</div>
    <div class="n-wrapper n-sw-30 n-mw-20 n-lw-15 n-xlw-40 n-xxlw-30">2</div>
    <div class="n-wrapper n-sw-40 n-mw-40 n-lw-30 n-xlw-20 n-xxlw-40">3</div>
</div>

Specify Width Using Fractions

You can set an elements width to 1/4, 2/5, or 1/2 of the parent by using the classes n-*-25, n-*-40, or n-*-50 where the * could be sw, mw, lw, xlw, or xxlw depending on the viewport width you want to target.

However, you cannot target other common fractions like 1/3, 2/3, or 1/6 this way.

NeatU offers three classes n-*-1-3, n-*-2-3, and n-*-1-6 to specify the size of different elements as fractions. Again, you can replace * with the viewport you are targeting like sw, mw, lw, xlw, or xxlw.

Example

Let's understand how all these classes can work together with an example.

<div class="n-flex grid-example">
    <div class="n-mw-1-3">Left</div>
    <div class="n-mw-2-3">Right</div>
    <div class="n-lw-2-3 n-mw-50 n-flex grid-example n-flex-eq-mw">
        <div class="n-wrapper">1</div>
        <div class="n-wrapper">2</div>
        <div class="n-wrapper">3</div>
    </div>
    <div class="n-lw-1-3 n-mw-50">Ad</div>
</div>

The left and right elements take up 1/3 and 2/3 of the parent's width respectively as long as viewport is at least 768px wide. Below 768px, they take up the parent's entire width.

The nested grid and the Ad element take up 2/3 and 1/3 of the parent's width when viewport is at least 992px.

Inside the nested grid, the child elements will divide the width equally as long as the viewport width is at least 992px. Below this threshold, each element will take up the parent's entire width.

Forcefully Apply Custom Width

In some cases, you would probably want to place a custom width element in the same row as equal width elements.

You could add a class like n-mw-50 to set custom width on one child element but that won't work because of specificity.

One solution here is to add the n-flex-fw class to the parent element which also has the n-flex class. After that, add the class n-fw on all elements where you want to force a specific width.

Here is an example.

<div class="n-flex n-flex-fw n-flex-eq-mw grid-example">
    <div class="n-wrapper n-mw-50 n-lw-25 n-fw">1</div>
    <div class="n-wrapper">2</div>
    <div class="n-wrapper">3</div>
    <div class="n-wrapper">4</div>
    <div class="n-wrapper">5</div>
    <div class="n-wrapper">6</div>
</div>

We our forcing our Element '1' above to take up 25% of the parent's width on large screens and 50% on medium screens.

Colors

I have defined CSS variables for the following colors in NeatU. Each of these colors has an associated helper class that either sets the text color or background color.

I also use the color-mix() function in CSS to create a darker or lighter version of the original colors by mixing black and white to it respectively.

This keeps the size of stylesheet small while still allowing us to make subtle changes to text or background color on hover.

You can always add more colors to this list by updating the $colors variables in the neatu.scss file.

$colors: (
    'green': #4CAF50,
    'red': #E53935,
    'orange': #F57C00,
    'azure': #2196F3,
    'text': #222222,
    'border': #AAAAAA,
    'brand-primary': #00796B,
    'brand-secondary': #0c3671
);

Set Text Color

You can add the prefix tc- (Text Color) before all these color names to set text color. For example, using the classes tc-azure, tc-red, or tc-green on different elements will set their color to azure, red, and green.

Apply these classes to any element which has text whose color you want to change.

<h2 class="tc-azure no-mar">An Azure Colored Heading.</h2>
<a href="#link" class="tc-green">A mint green link.</a>
<p class="tc-ember-red">For instance, here is a paragraph with ember red text. Multiple <code>span</code> elements within it have <span class="tc-azure">azure color</span>, <span class="tc-mint-green">mint green color</span>, and <span class="tc-ruby">ruby color</span>.</p>

Change Text Color on Hover

Use the prefix tch- (Text Color Hover) with different color names to change the text color on hover. Hovering over the element will change the text color to 85% original and 15% black.

For instance, you can use the class tch-azure to set the text color to Azure or #2196F3. When you hover over the azure text, the color will change to #1C7FCE.

Use the prefix tclh- (Text Color Light Hover) to start with a lighter shade of the original color that has 50% white mixed in it. When someone hover over the text, the color will only have 30% white in it.

The following examples illustrates how each prefix works for a heading.

<h1 class="tch tclh-green no-mar">Prepare for Trouble, Make it Double</h1>
<h1 class="tch tch-red no-mar">My Adulting Skills: Questionable at Best</h1>

Apply Background Color

Use the prefix bg- (BackGround) with a color name to apply a background color to different elements.

If you feel that black colored text isn't properly visible on some backgrounds, you can always add the class tc-white to turn the text white.

You might also consider using the prefix bgl- (BackGround Light) with a color name to use a light shade of the color that has 50% white as background.

<h1 class="bgl-green no-mar s-lr-pad-x4 s-tb-mar-x2">Heading With Light Green Background.</h1>
<h1 class="tc-white bg-green s-lr-pad-x4 no-mar">Heading With Azure Background.</h1>

<p>A paragraph containing multiple span elements with <span class="bgl-orange s-pad-x2">orange</span>, <span class="bg-azure s-pad-x2">azure</span>, <span class="bgl-red s-pad-x2">red</span> background and black text.</p>
<p>A paragraph containing multiple span elements with <span class="bg-orange tc-white s-pad-x2">orange</span>, <span class="bg-eggplant tc-white s-pad-x2">eggplant</span>, <span class="bg-ruby tc-white s-pad-x2">ruby</span> background and white text.</p>

Change Background Color on Hover

As you might have guessed, the prefixes for changing the background color on hover are bgh- (BackGround Hover) and bglh- (BackGround Light Hover) respectively for normal and light color variants.

Buttons

You can create buttons in NeatU by using the class n-btn like this:

<button class="n-btn">Normal Button</button>

The result looks like this:

Add Background Color to Buttons

You can add classes like bglh-azure, bglh-red-orange, and bglh-mint-green to add a background color to the buttons. I have already explained how these classes work in the Colors section.

If you want to create a disabled button simply add the class disabled-btn.

<button class="n-btn bglh-azure">Normal Button</button>
<button class="n-btn bglh-red-orange">Red Button</button>
<button class="n-btn bglh-mint-green">Orange Button</button>
<button class="n-btn disabled-btn">Disabled Button</button>  

All buttons you create will have a black text color by default. However, black text is hard to read on dark backgrounds. You should consider adding the tc-white class to any buttons with a dark background to add enough contrast.

<button class="n-btn tc-white bgh-azure">Azure Button</button>
<button class="n-btn tc-white bgh-red">Red Button</button>
<button class="n-btn tc-white bgh-orange">Orange Button</button>
<button class="n-btn tc-white bgh-green">Green Button</button>
<button class="n-btn disabled-btn tc-white">Disabled Button</button>  

Add Rounded Corners to Buttons

Simply add classes like n-round, n-round-x2, ... , n-round-x5 to the button which should have rounded corners.

<button class="n-btn tc-white n-round disabled-btn bgh-gray">Disabled Button</button>
<button class="n-btn tc-white n-round-x2 bgh-azure">Normal Button</button>
<button class="n-btn tc-white n-round-x3 bgh-red">Danger Button</button>
<button class="n-btn tc-white n-round-x3 bgh-orange">Danger Button</button>
<button class="n-btn tc-white n-round-x4 bgh-green">Success Button</button>

Create Buttons with Outlines

Use the n-outline helpers classes to create buttons with a white background but colorful outline that matches the text color.

You can set the text color by using tch- classes I mentioned in the Colors section.

<button class="n-btn n-outline tch-azure">Normal Button</button>
<button class="n-btn n-outline disabled-btn tcl-text">Disabled Button</button>
<button class="n-btn n-outline-x2 tch-red">Red Button</button>
<button class="n-btn n-outline-x3 tch-orange">Orange Button</button>
<button class="n-btn n-outline-x4 tch-green">Green Button</button>

Create Buttons with Borders

If you want to create buttons that have a background as well as borders, you should use the n-border helper classes.

Using Button Classes on Links and Input Elements

You can add the n-btn class to tags like a and input to give them appearance of a button.

Use a combination of n-border, n-outline, and helper color classes to get desired results.

Form Elements

Images

Here are three images of different sizes each wrapped inside its own div element. This gives you better control over the spacing within the images.

<div class="n-flex gapped n-flex-eq-mw no-border">
    <div><img class="n-image-responsive" src="randomly-generated-placehold.co-url"></div>
    <div><img class="n-image-responsive n-round" src="randomly-generated-placehold.co-url"></div>
    <div><img class="n-image-responsive n-round-x5" src="randomly-generated-placehold.co-url"></div>
</div>

The whole code is wrapped inside a n-flex element with class n-flex-eq-mw.

You might remember that n-flex-eq-mw makes sure all children have equal width when viewport width >= 768px.

Images become responsive when you add the class n-image-responsive.

Figures

We use the figure element to display images, diagrams, code snippets etc. with an optional caption that goes inside the figcaption element.

You can use the following markup to display responsive figure elements using NeatU.

<figure>
    <img class="n-image-responsive" src="randomly-generated-placehold.co-url">
    <figcaption class="talign-start">This is a sample caption</figcaption>
</figure>

Add the classes n-round and n-round-x5 to the images to apply a border-radius.

You can also add the classes talign-start, talign-center, and talign-end to the figcaption element to control text alignment.

Add the classes caption-overlay, n-bshadow, and n-border to the figure element to apply different styling.

<div>
    <figure class="caption-overlay">
        <img class="n-image-responsive" src="randomly-generated-placehold.co-url">
        <figcaption>This is a sample caption</figcaption>
    </figure>
</div>
<div>
    <figure class="n-bshadow n-round-x5">
        <img class="n-image-responsive n-round-x5" src="randomly-generated-placehold.co-url" >
        <figcaption>This is a sample caption</figcaption>
    </figure>
</div>
<div>
    <figure class="n-border n-round">
        <img class="n-image-responsive n-round" src="randomly-generated-placehold.co-url">
        <figcaption>This is a sample caption</figcaption>
    </figure>
</div>

Cards

You can use the class n-card to create cards that display an image along with some textual description using a variety of elements like headings, paragraphs, links, and buttons.

<div class="n-wrapper">
    <div class="n-card n-oxsw-75">
        <img class="n-image-responsive" src="<?php echo generateRandomPlaceholderUrl(); ?>" alt="">
        <div class="n-card-body">
            <h3>What do you call a pony with a cough?</h3>
            <p>A little horse.</p>

            <a class="n-btn n-normal-btn" href="https://hellonitish.com">Vist Hello Nitish</a>
        </div>
    </div>
</div>

Want to know what else I have created?

Simply visit my website.

Visit Hello Nitish

What's the best thing about Switzerland?

I don't know, but the flag is a big plus.

Did you know?

Elephants have the largest brain in all of the animal kingdom. Their brain can weigh up to 5.4kg.

More Elephant Facts

Horizontal Cards

Add the class n-card-horizontal to display the card content horizontally.

You might have noticed vertical cards have a border applied to them by default. However, the horizontal cards don't.

This is because the image in horizontal cards does'nt always take up the entire height of the card. As a result, the car borders only touched one side of the image instead of three and it looked weird.

My son asked me if we were pyromaniacs.

I replied "yes we arson".

Did you know?

Ants can lift 20 to 50 times their own body weight.

The elements in horizontal cards are laid out vertically when viewport is less than 576px wide. This makes sure the elements aren't squished on narrow screens.

Additional Card Styling

You can always add classes n-bshadow, n-border, and n-round-x5 to modify the appearance of cards a bit.

For instance, the code below generates a card with additional styling coming from the classes n-border, n-bshadow and n-round-x5.

<div class="n-wrapper">
    <div class="n-card n-border n-card-horizontal n-oxsw-75">
        <img class="n-image-responsive n-sw-40 n-omw-25" src="<?php echo generateRandomPlaceholderUrl('Dad Joke', 500); ?>" alt="">
        <div class="n-card-body n-sw-60 n-omw-75">
            <h3>My wife and I laugh at hoe competitive we are.</h3>
            <p>But I laugh more.</p>
        </div>
    </div>
</div>

<div class="n-wrapper">
    <div class="n-card n-bshadow n-round-x5 n-card-horizontal n-oxsw-75">
        <img class="n-image-responsive n-sw-40 n-omw-25 n-round-x5" src="<?php echo generateRandomPlaceholderUrl('Awesome\nFacts', 500); ?>" alt="">
        <div class="n-card-body n-sw-60 n-omw-75">
            <h3>Did you know?</h3>
            <p>Mercury has water ice on its surface, despite the high temperatures.</p>
        </div>
    </div>
</div>

My wife and I laugh at how competitive we are.

But I laugh more.

Did you know?

Mercury has water ice on its surface, despite the high temperatures.

<div class="n-flex n-flex-eq-mw n-flex-al-stretch">
    <div class="n-wrapper">
        <div class="n-card n-bshadow n-round-x5">
            <img class="n-image-responsive" src="randomly-generated-placehold.co-url">
            <div class="n-card-body">
                    <h3>What's the best thing about Switzerland?</h3>
                    <p>I don't know, but the flag is a big plus.</p>
            </div>
        </div>
    </div>
</div>

How does a short dad measure success?

In short-steps and big smiles!

What does the clock wallpaper do?

It shows you the current time, date, and weather conditions in your location.

Clock Wallpaper by Nitish

Did you know?

The average person has 67 different species of bacteria in their belly button.

Read more fun facts about the human body.

Accordion

You can create an accordion in NeatU with the following markup.

<div class="n-accordion">
    <div class="n-acc-item">
        <div class="n-acc-item-head n-sflex">
            <h3>Why is the framework named "Neatu?"</h3> <i class="fa-solid fa-plus"></i>
        </div>
        <div class="n-acc-item-body">
            <p>People close to me call me "nitu". So, I thought I will use the word NeatU while naming my development projects.</p>
        </div>
    </div>
    <div class="n-acc-item">
        <div class="n-acc-item-head n-sflex">
            <h3>Who do I contact if I want to request some new features in "NeatU CSS Framework"?</h3> <i class="fa-solid fa-plus"></i>
        </div>
        <div class="n-acc-item-body">
            <p>You can let me know on <a href="https://github.com">GitHub</a>.</p>
        </div>
    </div>
    <div class="n-acc-item">
        <div class="n-acc-item-head n-sflex">
            <h3>How do I contribute to the project?</h3> <i class="fa-solid fa-plus"></i>
        </div>
        <div class="n-acc-item-body">
            <p>Again, GitHub is the best way to contribute.</p>
        </div>
    </div>
</div>

The markup above creates the following accordion.

You can add the class n-acc-stay-open to any n-acc-item to keep it open unless a user explicitly closes it.

Tables

Here is a normal table with no classes except those which determine its width (n-lw-75, n-xlw-60, and n-full-padding-sw.

The color in the table comes from the value of the variable var(--n-brand-primary-color) in CSS.

This table has two classes n-striped and n-hover-row applied to it.

The class n-column-borders makes sure the columns are separated by borders while the rows have no borders.

The class n-colored-th applies the brand color to the text while making the background white.

The class n-row-borders only applies borders to rows. I have also added the classes n-striped for additional styling.

Combine different classes to achieve unique results.

1. n-striped will add a different background color to alternate rows.

2. n-hover-row will highlight the row you are hovering by adding a background color.

3. n-column-borders will add borders to columns keeping rows borderless. It also adds a border just below th for separation.

4. n-row-borders will add borders to rows keeping columns borderless.

5. n-colored-th will make the background white and set the text color to the specified brand color.

Navigation

NeatU provides a few helper classes to help you create different types of navigation menus.

Basic Hamburger Navigation

You can create a basic hamburger menu in NeatU by using the n-navigation class.

Add the class nav-brand to the main brand link in the navigation.

Wrap all the navigation links in a div element with the n-navlink-group class.

<nav class="n-navigation tc-azure">
    <a href="https://hellonitish.com" class="nav-brand">brand</a>
    <i class="fa-solid fa-bars menu-opener" data-close="fa-bars" data-open="fa-xmark"></i>
    <div class="n-navlink-group">
        <ol>
            <li><a href="">Products</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Contact</a></li>
        </ol>
    </div>
</nav>

Use Custom Icons

The data-close and data-open attributes on the menu-opener element determine the class to show a closed and open hamburger menu respectively.

<i class="fa-solid fa-circle-down menu-opener" data-close="fa-circle-down" data-open="fa-circle-up"></i>

Shrinking Hamburger Navigation

One thing you might not like about the basic hamburger menu is that it hides all the navigation links behind the hamburger icon at once.

You might want to gradually add navigation links behind the hamburger icon if they can no longer fit in the available area.

Add the shrinker class to the navigation to create a shrinking hamburger navigation.

You will also have to make changes to the navigation structure to accommodate the movement of links.

<nav id="shrinker-menu" class="n-navigation shrinker tc-mint-green">
    <a href="https://hellonitish.com" class="nav-brand">brand</a>
    <ol>
        <li><a href="">Products</a></li>
        <li><a href="">Services</a></li>
        <li><a href="">Case Studies</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">About Us</a></li>
        <li><a href="">Profile</a></li>
    </ol>
    <i class="fa-solid fa-angles-down menu-opener" data-close="fa-angles-down" data-open="fa-angles-up"></i>
    <div class="n-navlink-group">
        <ol>
        </ol>
    </div>
</nav>

As you can see, all the navigation links are originally outside the n-navlink-group element.

NeatU moves them in or out of the n-navlink-group element based on the available space.

Customize the Navigation Menu

You can take help from the usual helper classes to add a background, border, or border radius around different elements.

For instance, use the bg-, bgl-, and bgle- classes to add a background color.

Use the n-border- classes to add a border and the n-round- classes to get rounded corners.

I have added two examples for demonstration.

<nav class="n-navigation tc-ruby bgle-ruby n-round-x2">

<nav class="n-navigation tc-black bgle-eggplant n-round-x5 n-border-x2">

Alerts

Alerts cme in handy when you want to display some information to users based on any actions they take.

You can create an alert with NeatU using the n-alert class like this:

<div class="n-alert"><p>A basic alert!</p></div>

Basic Colorful Alerts

I set background color for alerts in NeatU with the following CSS:

background: color-mix(in srgb, currentColor 10%, white);

This means that you can use the tc-* color classes to set the alert's text color and its background would automatically have a lighter shade of the same color.

<div class="n-alert tc-azure"><p>Hey, this is an informational alert with azure text.</p></div>
<div class="n-alert tc-orange"><p>Hey, this is a warning alert with orange text.</p></div>
<div class="n-alert tc-green"><p>Hey, this is a success alert with green text.</p></div>
<div class="n-alert tc-red"><p>Hey, this is danger alert with red text.</p></div>

Alerts with Borders, Box Shadows and Rounded Corners

You can make alerts more stylish by adding one or more helper classes to them.

1. Use bordered-alert to add a border with the same color as the alert text around the alert.

2. Use n-bshadow to add a white border and a subtle box-shadow around the alert.

3. Use different classes like n-round, n-round-x2, ... ,n-round-x5 to add a border radius to the alert.

You can also combine the classes to get try different looks for alerts.

<div class="n-alert n-border tc-red"><p>Hey, this is red alert with border.</p></div>
<div class="n-alert n-border-x2 tc-orange"><p>Hey, this is brown colored alert with a more prominent border.</p></div>
<div class="n-alert n-outline-x2 tc-dark-cyan"><p>Hey, alert only has an outline.</p></div>
<div class="n-alert n-round-x3 tc-eggplant"><p>Hey, this alert is a little round around the corners.</p></div>
<div class="n-alert n-bshadow n-round-x4 tc-mint-green"><p>Hey, this alert has a subtle box-shadow.</p></div>

Additional Markup in Alerts

Let's say you want to create an alert that has a heading, a link, and a couple of paragraphs.

<div class="n-alert tcl-azure s-pad-x8">
        <h3>Alert Heading!</h3>
        <hr>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <p>Hey, this alert is a <a href="#" class="c-inherit">little round</a> around the corners.</p>
        <button class="n-btn tc-white bg-mint-green">Accept</button>
        <button class="n-btn tc-white bgl-ruby">Reject</button>
    </div>

Display and Hide Alerts

You can either click the closing icon inside the alert or the dedicated button to close the alert.

Create and Destroy Alerts

What if you want to create and destroy alerts instead of showing and hiding them?

Pagination

You can use the pagination class to show paginated links if any piece of content you want to display is spread across multiple pages on your website.

The elements nav, ul, li, and a are part of the pagination markup in NeatU.

<nav>
    <ul class="pagination">
        <li><a href="">Previous</a></li>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">Next</a></li>
    </ul>
</nav>

Colorful Pagination Links

The text color set on the paginated links determines their background color. Initially, the background is a mix of 15% text color and 85% white.

You can use helper text color classes with prefixes tch- and tclh- to set the color of paginated links.

When you use tch- prefixed classes, the paginated links get a much darker background and white text on hover.

<nav>
    <ul class="pagination tch-orange">
        <li><a href="">Previous</a></li>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">Next</a></li>
    </ul>
</nav>
    

When you use tclh- prefixed classes, the paginated links get a slightly darker background and black text on hover.

<nav>
    <ul class="pagination tclh-orange">
        <li><a href="">Previous</a></li>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">Next</a></li>
    </ul>
</nav>
    

Helper Pagination Classes

1. Use pag-bordered to add a border around each page link.

   <ul class="pagination pag-bordered tclh-green">

2. Use pag-disjoint to add some space between each link.

   <ul class="pagination pag-disjoint tch-red">

Pagination Links with Rounded Corners

Use classes like nc-rounded, nc-rounded-x2, ... , nc-rounded-x5 to add a border radius to all the page links.

In my opinion, nc-rounded classes work best when used along with pag-disjoint. I have used pag-disjoint and nc-rounded-x3 together in the example below for illustration.

<ul class="pagination pag-disjoint nc-rounded-x3 tch-blue">

Mix and Match Classes

You can use a combination of pag-disjoint, pag-bordered, tch-, tclh-, and nc-rounded-* classes to get the results you need.

<ul class="pagination pag-disjoint pag-bordered tch-red">

<ul class="pagination pag-disjoint pag-bordered nc-round-x3 tclh-green">

Disabled and Active Pagination Links

Tabs

Developers can use tabs to show a lot of categorized content into limited space while users can go through all that content without scrolling.

You can create tabs in three different styles in NeatU with slight variation in the markup.

Let's start with a basic example.

<ul class="n-tabs n-flex">
    <li class="active"><button class="n-btn" data-nu-target="family">Family</button></li>
    <li><button class="n-btn" data-nu-target="friends">Friends</button></li>
    <li><button class="n-btn" data-nu-target="neighbors">Neighbors</button></li>
</ul>

There are a few noteworthy things in the markup.

1. Adding the n-tabs class to a ul element will give you bordered tabs.

2. We use the nu-target data attribute to specify what content should show when users click a tab link.

3. The tab links are actually button element with the class n-btn.

4. The parent li tag of the tab button also get an active class when clicked.

Use the following markup for content that goes along with the above tab links.

<div class="tab-content s-pad-x8 n-border-x2" id="n-tab-content">
<div class="tab-pane fade show active" id="family" role="tabpanel" aria-labelledby="family-tab">This is something related to family.</div>
<div class="tab-pane fade hide" id="friends" role="tabpanel" aria-labelledby="friends-tab">This is something related to friends.</div>
<div class="tab-pane fade hide" id="neighbors" role="tabpanel" aria-labelledby="neighbors-tab">I also have bad neighbors.</div>
</div>

Note the use of tab-content class on the container div element and the tab-pane class for the content of individual tabs.

The use of id attribute on different div.tab-pane elements helps NeatU identify which tab pane's content it should display.

The id you specify here should match the value you provided in the nu-target data attribute.

Create Horizontal Pill Tabs

You can use the n-pills class instead of n-tabs to create tab links with no borders.

It is possible to specify the background color for the active tab links using background color helper classes like bg-, bgl-, bgh-, and bglh-.

Use the text color helper classes like tc-, tcl-, tch-, and tclh- to set a text color for the active tab button.

These classes are set a value for the nu-tab-classes data attribute. NeatU uses JavaScript to toggle these classes for different tab buttons.

You can also set a background color for the content panes using the bgle- helper classes that provide a very shade of different colors.

<ul class="n-pills n-flex" data-nu-tab-classes="bg-azure tc-white">
    <li class="active"><button class="n-btn bg-azure tc-white" data-nu-target="family-b">Family</button></li>
    <li><button class="n-btn" data-nu-target="friends-b">Friends</button></li>
    <li><button class="n-btn" data-nu-target="neighbors-b">Neighbors</button></li>
</ul>

Create Vertical Pill Tabs

Creating vertical pilled tabs is just a matter of using the n-pills and vertical-pills classes together.

<ul class="n-pills vertical-pills n-flex n-mw-15" data-nu-tab-classes="bg-orange tc-white">
    <li class="active"><button class="n-btn bg-orange tc-white" data-nu-target="family-c">Family</button></li>
    <li><button class="n-btn" data-nu-target="friends-c">Friends</button></li>
    <li><button class="n-btn" data-nu-target="neighbors-c">Neighbors</button></li>
</ul>

Use Different Class Combinations

You can add rounded corners or borders to the active pill tab by using the n-round- and n-border- helper classes.

Make sure you add the classes to the na-tab-classes data attribute as that's where NeatU looks for the classes to add to the active tab.

Item Groups

Item groups will help you group content items that show related information.

Basic Item Group

Creating item groups only requires you to add the hrz-group class to the container element.

<div class="vrt-group sc-pad-x4">
    <p>Why don't eggs tell jokes?</p>
    <p>What's orange and sounds like a parrot?</p>
    <p>Why did the scarecrow win an award?</p>
    <p>What do you call fake spaghetti?</p>
</div>

I have added an extra sc-pad-x4 class to add some padding around each paragraph element.

You could also add another class like n-round-x2 to the container element to give rounded corners to the first and last item in the group.

Horizontal Item Group

Creating a horizontal item group comes in handy when you want to create toolbars for applications like text or image editors.

The hrz-group class will create a horizontal item group for you.

<div class="hrz-group n-round">
    <button class="n-btn"><i class="fa-regular fa-floppy-disk"></i></button>
    <button class="n-btn"><i class="fa-solid fa-rotate-left"></i></button>
    ... and so on.
</div>

Place multiple .hrz-group elements inside a .n-flex element to create separate item groups.

You can always use helper text and background color classes to make the toolbars fancier.

<div class="n-flex n-gap-x4">
    <div class="hrz-group tc-blue bgle-blue wd-fit">
        <button class="n-btn"><i class="fa-regular fa-floppy-disk"></i></button>
        <button class="n-btn"><i class="fa-solid fa-rotate-left"></i></button>
        <button class="n-btn"><i class="fa-solid fa-rotate-right"></i></button>
    </div>
    ... and so on.
</div>

Custom Content in Group Items

You can add whatever content you like within individual items in an item group.

In the following example, we are using it to create a to-do list. However, you could do something similar with a contact list or music playlist.

<ol class="vrt-group sc-pad-x4 tc-slate-blue">
    <li class="n-flex n-flex-acjsb">
        <div class="wd-fit detail">
            <h3>Make Breakfast</h3>
            <p>Eat something healthy.</p>
        </div>
        <span class="wd-fit bg-ruby s-pad-x2 tc-white">7:00 AM</span>
    </li>
    ... and so on.
</ol>