DEV Community: Cruip

25 Places Where You Can Get Free Tailwind CSS Components

Davide Pacilio — Wed, 19 Jan 2022 13:45:34 +0000

When it comes to Tailwind CSS, it's hard to ignore the popularity of this famous front-end framework. Over the years, the growth of this ecosystem has seen steady increases, and it was announced that, in July, the download count of Tailwind CSS reached over three million. Considering the huge number of people who have downloaded the framework so far, you can count on an increase in support resources for developers that are building sites with this front-end framework.

If you're trying to find a good starting point with Tailwind CSS, I can't recommend the component libraries enough. These are what I think is the most important part of Tailwind: they provide a way to work with complete chunks of code without having to start from scratch. It doesn't make sense to reinvent the wheel when such great resources already exist.

Component libraries are great time-savers, but they can also be expensive for people on a budget. So, to help you find some great free options, I've put together a list of my favourite open-source resources—all of which I've tried and tested—to get you started.

The following component libraries are all available for use in any Tailwind CSS project. There is a wide variety of resources to choose from; ranging from code snippets, to fully-built UI kits. The full list includes:

Origin UI
Tailkits
Ghost UI
FloatUI
Tailwind Awesome
HyperUI
a17t
Kometa UI Kit
Tailwind Toolbox
Headless UI
Tailwind UI Kit
DaisyUI
Tailwind Components
Treact
Tail-Kit
Lofi UI
Meraki UI
VechaiUI
Mamba UI
Flowbite
Tailwind Starter Kit
Kutty
PostSrc
Tailblocks
Components Collection

Ready to dive in? Let's take a look at the list!

1. Origin UI

Origin UI offers a collection of free, open-source UI components designed with Tailwind CSS and Next.js. These components are ready to be dropped into projects for quick app UI development. The library includes elements like buttons, sliders, input fields, dialogs, and more, with regular updates. The open-source project is curated by the team behind Cruip.com!

2. Tailkits

Tailkits is a curated platform specializing in Tailwind CSS resources, offering a wide selection of premium and free templates, UI kits, and components. It features categories for various projects, such as landing pages, dashboards, and portfolios. The site also provides tools for enhancing productivity and allows users to submit their own resources.

3. Ghost UI

Can't find the perfect storm of styles for your next web app? Make it yourself with Gust UI. Gust UI is a Tailwind CSS gallery, showcasing responsive components, elements, and example pages. Quickly apply existing styles to your app without getting overwhelmed by a massive quantity of unrelated styles all thrown together. Remove what you don't need, change what you do need, and create an app that's just right for you.

4. FloatUI

Float UI is a collection of interactive UI components and elements that allow you to rapidly develop websites and web applications with React. Float UI is built from the ground up using pure React, React Router, and Tailwind CSS to provide everything you need to build a beautiful website. No jQuery or third-party plugins required.

5. Tailwind Awesome

Looking for the coolest new templates and UI kits for a website or web app? Tailwind Awesome is a hand-picked collection of the best free resources on the internet. The team behind this project is constantly on the lookout for new themes, templates, modules, and UI kits; so that you'll never run out of awesome things to use with Tailwind CSS.

6. HyperUI

HyperUI is a free, open source library of Tailwind CSS components. They are all customisable and ready to use out of the box. Get access to the source code for free, and copy/paste, or download your favorite components for easy integration into your own web project. Change colors, font sizes, content and much more.

7. a17t

a17t was created out of the need to have an extensible, atomic and design agnostic way to create UI components. This plugin is the culmination of several months of work, and a result of many discussions between two passionate individuals who argue over the ideal approach to CSS. You'll find this plugin makes creating Tailwind utility classes a breeze.

8. Kometa UI Kit

Kometa UI kit is a set of TailwindCSS-based UI components. You can use them as Tailwind sections, or simply as a handy set of elements to spice up your app. It doesn't matter if you're building an admin dashboard, a SPA, or just some website - these sections will become an essential part of your toolkit and, they will make your workflow way better.

9. Tailwind Toolbox

Tailwind Toolbox is a collection of useful open-source starter templates, components, handy building kits, generators, plugins, and tools to kick start any Tailwind CSS project. Almost everything on this site is open-source and available for you to use in your projects, so if you want to build something with Tailwind that needs a custom template to guide you then this is the site for you.

10. Headless UI

Need something simple, fast, and flat? Headless UI is a gallery of completely unstyled, fully accessible UI components that you can use in any way you choose. With everything from buttons and headers to menus, radios, and transitions, there's a little bit of everything for everyone. These are unchained components—just add your own flair to make them your own!

11. Tailwind UI Kit

Tailwind UI Kit is a powerful library of accessible, fully responsive, drop-in-ready Tailwind CSS components to fast track your workflow and make sure your latest project looks beautiful on all devices. With easy to implement styles, functional animations and handy utilities like the responsive menu bar, typography presets and more – you'll be able to get started with a handful of lines of code.

12. DaisyUI

DaisyUI is a collection of popular Tailwind CSS components with over 7K stars on Github and thousands of followers on Twitter. This repository contains a flexible set of widgets that can be used with Tailwind's component-based approach to component styling. Helpful for quickly creating custom UI in development as well as engaging design in production.

13. Tailwind Components

Tailwind Components is the perfect place if you're looking to begin building your next site or web app with Tailwind CSS. This popular website comes as an open-source repository of free UI components made for the Tailwind CSS framework. It includes templates, demos, and documentation to help you kick-start your next web project by providing a start point for your new site or app.

14. Treact

Treact is a modern gallery of React UI templates and components built using TailwindCSS. This product comes with a ton of cool CSS animations and a lot of useful structure to set up your next project super simple. All components are modular and fully responsive for a great mobile experience as well as big desktop screens. All the resources in Treact are constantly updated and 100% free for personal and commercial use.

15. Tail-Kit

Tail-Kit is a set of the 250+ most common components and the most popular component templates, followed by an extensive customisation guide. The goal is to speed up your development workflow and help you achieve the best experience possible when using Tailwind CSS. So stop coding CSS yourself and start Tail-Kitting!

16. Lofi UI

Lofi UI was created as a fun (but still functional) gallery of re-usable, re-workable, and just plain beautiful Tailwind CSS components. This product wanted to make a space that allowed both experienced frontend developers and beginners alike to learn from others, experiment with different components, and create something awesome in no time. No need to fork or modify this code, just build your own!

17. Meraki UI

Meraki UI is a collection of beautiful, handcrafted, and manually composed Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant dark mode. Packed with tons of accessible UI elements, contextual iconography, and sensible web typography Meraki UI is an ideal destination for anyone looking to start building web apps with awesome components built with utilities.

18. VechaiUI

VechaiUI is a CSS library that works out of the box with create-react-app (including TypeScript version), Preact cli (with compat), Next.js, Gatsby, and any other environment. VechaiUI was made for people who like to write the styles for their app rather than rely on an already-made theme. Using this library, you can make your app look great and be accessible with beautiful styles and accessible UIs.

19. Mamba UI

Mamba UI is designed to help you build beautiful user interfaces that look great on any screen size. It's a library of Tailwind CSS compliant components and templates covering a wide range of interface styles -- from simpler, component-based design to complex data table layouts that work out of the box

20. Flowbite

Start developing your next project with Flowbite - A growing library of over 400 free web components and interactive elements built with the utility classes from Tailwind CSS. Each element can be easily dropped into any Tailwind project to add a fresh new styling and branding. From common layout elements to more niche UIs this library is an invaluable resource for quickly building out any app or website.

21. Tailwind Starter Kit

Tailwind Starter Kit is free solution for Tailwind users that want to start using Tailwind for end to end styling of their projects, but are not comfortable installing CSS that is not officially released. It also comes with multiple components that can be used in any HTML document and is ready to use on React, Angular and Vue based projects. Everyone can take this CSS files from GitHub repository and start using Tailwind on their websites.

22. Kutty

Kutty is a Tailwind plugin for building modern and responsive web applications. It has a set of accessible and reusable components that are commonly used in web applications, such as dropdown, input groups and tabs. Kutty also provides common interface patterns like fixed header, sticky footer, centered navigation and full-screen layouts without navigation.

23. PostSrc

PostSrc is a collection of Tailwind CSS components for everyone. Browse all components in the collection, which are right for your project. Hint: you can use the search below the page to filter what you're looking for and view the results of individual components. Please note, the page is updated and posted daily so you might have to refresh to see new posts.

24. Tailblocks

Tailblocks is a powerful page builder that combines the best of Tailwind CSS with pre-built templates and sections, which you can use to build an entire website with only hand-picked Google Fonts. With over 120+ ready-to-use blocks and 10+ templates to choose from, you can create any type of website or landing page without the need of creating anything from scratch.

25. Components Collection

Looking for rare and uncommon Tailwind CSS components? We've got you covered! This repository includes all the best Tailwind CSS components and elements found on the internet. Everything is divided into a table of contents to allow you to easily access and grab what you need without the need of visiting multiple component libraries when searching for anything.

Conclusion

Thanks for reading, and please feel free to share your picks for other free component libraries in the comments below!

30 Awesome places to find design inspiration

Davide Pacilio — Tue, 13 Apr 2021 10:47:59 +0000

If I could give you one piece of advice about enhancing your creative process, it would be to never approach a new design project without researching for inspiration first!
It doesn't matter if you are a seasoned product designer or a non-creative person with zero experience designing products. The right dose of inspiration can help you be more productive, avoid creative blocks, and produce constant unique/fresh ideas for your projects.
I’m always on the lookout for places where I can find high-quality inspiration for my projects, and this collection includes an extensive list of sites I use to get ton of inspiration for absolutely anything. For example:

Landing Pages/Websites
Portfolios
eCommerce
Mobile apps
Web apps
Logo design
Email design
Visual design

30 Awesome places to find design inspiration:

Landing Pages/Websites:

SaaS Landing Page

A curated gallery showcasing high-quality SaaS landing pages and websites. You can also filter the results by the technology, fonts, colors, and more.

Land-book

On Land-book you'll find a wide range of design inspiration, from SaaS landing pages, agency websites, portfolios, to e-commerce stores.

Lapa

Lapa Ninja is a gallery featuring a vast variety of landing page design inspiration, educational books, UI kits, freebies, and more.

Landingfolio

A website gallery that offers landing page inspiration and resources. You can also filter the results by categories, such as SaaS, mobile apps, startups, and much more.

One Page Love

One Page Love, specializes in one-page websites, landing pages, and templates. It's the best you can find in this specific niche.

Minimal Gallery

Minimal Gallery is a web design gallery that combines a minimal design with a finely-honed selection of great websites and landing pages.

Portfolios:

Humans

Humans is a hidden gem for finding portfolio-related inspiration. You can filter the results by profession (developers, designers, photographers, etc.), and even by colors.

Awwwards

Awwwards is one of the best galleries on the internet to find inspirational design. It covers several categories, including a great selection of portfolios from top professionals and agencies.

Siteinspire

Siteinspire showcases a huge selection of amazingly designed websites, including one of the best portfolio directories you can find on the internet.

Semplice Showcase

The Semplice Showcase features the best portfolios built with Semplice (a portfolio system based on WordPress).

eCommerce:

Commerce Cream

Commerce Cream features some of the best-looking eCommerce websites submitted by top design agencies. If you’re looking for some eCommerce inspiration, Commerce Cream is a great resource.

ecomm.design

ecomm.design is a collection of top-notch eCommerce websites filterable by platforms (e.g., Shopify, Squarespace, etc.) and categories (e.g., fashion, accessories, etc.).

Shopify Themes

Explore a wide range of beautifully designed themes created by top-notch designers and agencies. Find inspiration, discover styles, and start building your next store.

Mobile Apps:

UX Archive

UXArchive is the leading destination to find design inspiration from the world’s top mobile apps.

Mobbin

Mobbin is a hand-picked collection of the latest mobile design patterns from apps that reflect the best in design.

UI Garage

UI Garage features the best mobile design inspiration sortable by platforms (iOS and Android), product categories, and design patterns.

Rowlab

Rowlab displays a curated collection of great mobile apps sortable by patterns, categories, elements, and even interface colors.

Scrnshts

Scrnshts is a hand-picked selection of the finest app store design screenshots created by top designers and illustrators.

Web Apps:

Screenlane

Screenlane is a growing library of user flows and screenshots from popular web products. It's a great place to find real-world web app patterns and inspiration.

Webframe

Webframe is massive library of 800+ screenshots to get inspiration from the internet's top web apps.

ReallyGoodUX

ReallyGoodUX is an inspirational directory to find the best UX examples—including onboarding tours and walkthroughs, UX copywriting, signup flows, and more.

Logos:

Brand New

Brand New features logos and brand designs of notable products, companies, services, and organizations across all industries and locations.

Font In Logo

FontInLogo helps you search and find World Brands (and other) Logos with their font details.

Logopond

Logopond is an inspirational site & showcase of identity work from designers of varying abilities all across the world.

Email Design:

Really Good Emails

Really Good Emails aims to be the best showcase of email design and resources on the web.

Email Love

Email Love is a brand new online resource curating the best email designs, templates, and tools.

Email Gallery

Email Gallery helps designers and developers find inspiration in the collection of emails from various companies and individuals.

Visual Design:

Designspiration

Designinspiration is an image & color search engine for creating mood boards and finding art, design, logos, photography, and app inspiration.

Baubauhaus

Baubauhaus is a design blog made up of many images that represent design, illustration, photography, fashion, and art-related inspiration.

Inspirationgrid

Inspiration Grid is an online magazine celebrating creative talent from around the world. It showcases daily awesome examples of design, art, illustration, typography, photography, architecture, and more.

Conclusion

Where do you get inspiration? Feel free to share your favorite sources of inspiration and we’ll add the best to the list.

50+ Free tools and resources to create awesome user interfaces (Part 2)

Davide Pacilio — Tue, 14 Jul 2020 10:28:09 +0000

After the success of the first post, and incited by several of you to publish a second edition, I decided to spend a few hours this weekend to release the Part 2 of 50+ free tools and resources to create awesome user interfaces.

As for the first post, the whole list has been divided into different categories, including:

Tools
Illustrations
Photos & Videos
Typography
Iconography
Palette
Vectors & Shapes
Inspiration
Utility

So if you’re looking for a free set of icons, just click on the Iconography link above.

Before we jump right in, I would like to thank all fellow devs for kindly sharing with me their favorite open-source projects after the release of the first post. Without their contribution, this second edition wouldn’t have been possible 🙌

50+ free tools and resources to create amazing UIs (Part 2):

Tools

Responsively

A web browser that aids responsive web app development. Preview all target screens in a single window side-by-side.

Photopea

An online, free, photoshop alternative that anyone can use.

Free Logo Maker

Create beautiful logos in minutes (by Namecheap).

Pastel

Pastel makes it super easy to invite your clients and teammates to leave useful comments directly on your live websites.

Whimsical

Communicate visually at the speed of thought – collaborative flowcharts, wireframes, sticky notes, and mind maps.

Illustrations

Handz

H A N D Z is a free 3D illustrations of diverse hands gestures.

Toy Faces Library

Toy Faces is a fun diverse library of 3D avatars for your design mockups and personal use. The entire bundle costs $10, but you can download 8 3D avatars for free.

Blush

Blush makes it easy for anyone to add stunning illustrations to their work. With collections made by artists across the globe, there's something for everyone, and every project.

Vector Creator

Create free personalised illustrations from 3000+ elements.

Diversity Avatars

Diversity Avatars is set of 59 free inclusive avatars to use in your products, projects, or anywhere you want to.

Streamline Lab

80 free colorful illustrations to use in your presentations, application onboarding or marketing websites

Photos & Videos

Pixabay

Over 1 million of free high quality photos, videos, and vectors.

Magdeleine

Hand-picked free photos for your inspiration.

Burst

Beautiful free stock photos for websites and commercial use (by Shopify).

Reshot

Tons of uniquely free stock photos. Handpicked & non-stocky.

Gratisography

Free use-as-you-please pictures that stand out.

ISO Republic

Thousands of Free High-Resolution CC0 Photos and Videos.

Mazwai

Stunning free stock footage clips, hand-picked by a team of video professionals. Simple licensing, and no sign-up required.

Image Colorizer

Colorize black and white images automatically.

Typography

Beautiful Web Type

Guide to only the best open-source typefaces.

Fontfabric

100% FREE—Beautiful typeface collection—Sans, Serif, Script, and more.

Font Library

Font Library is a gallery of high-quality fonts. Free downloads and quality support.

100 Days of Fonts

100 Days Of Fonts is a project by Do-Hee Kim exploring Google Font pairings for over 100 days. I personally consult this list when I need some inspiration for a new Cruip template.

1001 Fonts

Over 200K free fonts in 12092 families. Free to download for personal and commercial use.

Free Typography

The best free fonts, typefaces, and typography.

Iconography

Essentials

More than 300 icons, made on a precise 2px grid with a unique geometric style. Free to use anywhere you want.

266 FREE responsive icons

Free 266 responsive icons in 3 sizes (16/20/24px) created with pixel-perfect, dedicated for Interface design and wireframes.

Material Icons Library

Free collection of 1000+ icons for popular graphics tools.

Unicons

Open-source vector icons and icon-font library.

Tabler Icons

A set of over 550 free MIT-licensed high-quality SVG icons for you to use in your web projects.

Feather Icons

Simply beautiful open source icons.

Palette

Image to Colors

Upload an image to generate a color palette based on the image's primary colours.

Happy Hues

Happy Hues is a color palette inspiration site that acts as a real world example as to how the colours could be used in your design projects.

Piggment

Create the perfect gradient palette and get inspired to make something beautiful.

Coolors

Generate or browse beautiful color combinations for your designs.

Colorbox

Colorbox is a color tool by Lyft Design to produce color tints and shades.

Picular

Picular is a rocket fast primary color generator using Google's image search.

Vectors & Shapes

Shape Divider

Shape Dividers makes it easy for designers and developers to export beautiful SVG dividers for their projects.

Trianglify

Tweakable, one-of-a-kind hero images for your next project.

Free SVG Maps

Hundreds of free SVG maps available in high and low details.

Worldvectorlogo

Download hundreds of vector logos from brands you love.

Logolix

Free logos for your projects! No attribution required.

Inspiration

Webframe

800 web app screenshots for inspiration on your next app.

SaaS Landing Page

The best SaaS landing page examples for design inspiration.

Nicely Done

A curated showcase of the best digital products.

UI Design Daily

1000+ open-source UI designs, updated daily.

Mobbin

Discover the latest iOS UI design trends and patterns.

UI Garage

Daily handpicked UI inspiration & patterns.

Utility

Resizing App

Convert, optimise, crop, and resize images online in only one easy click. Free and unlimited.

TinyPNG

Smart PNG and JPEG compression - compress up to 20 images at the same time, for free!

Favic-o-matic

Favic-o-Matic generates favicons, both .ico & .png, and the HTML code needed to make your website look awesome on every browser and every device.

Screely

Instantly turn your screenshot into a beautiful mockup.

Sneakpeekit

Desktop, tablet, and mobile printable grids for design wireframing.

Font In Logo

Discover the fonts used on your favorite brand logos.

Conclusion

I hope you enjoyed this second edition of 50+ free tools and resources to create awesome user interfaces. Do you’ve other resources to recommend? Please feel free to contribute by commenting below - we might end up writing a third edition :)

50+ free tools and resources to create awesome user interfaces

Davide Pacilio — Tue, 12 May 2020 11:11:52 +0000

“You’re only as good as the tools you use”

This saying has been around for years and highlights the importance of using the correct tool for the job. This motto applies to hundreds of different fields and disciplines, and luckily for us, to the design too.

From my experience as a senior product designer, there is almost nothing more important than the correct tools to create a nice user interface. The right set of pictures or a well-balanced colour palette can make a huge difference between a poor and decent UI.

I’m going to share a list of free and very useful resources/tools that I use daily to create users interfaces (websites, landing pages, web applications, etc…) for my clients, and for my projects Cruip and SaaS Landing Page.

To allow you to easily find a specific set of resources/tools, I divided the list into different categories:

Photos & Videos
Illustrations
Palette
Typography
Animations & Effects
Iconography
Patterns & Shapes
Utility

So if you’re looking for a free set of icons, just jump to the iconography category.

A final note: This list doesn't include some of the most popular resources to create user interfaces like Unsplash (for the Photos & Videos category), or Google Fonts (for the Typography one). Why? You probably already know them.

50+ free tools and resources to create amazing UIs:

Photos & Videos

Coverr

Beautiful, free videos for your homepage background.

Mixkit

Awesome stock video clips, stock music & premiere pro templates all completely free!

Pexels

The best free stock photos & videos shared by talented creators.

Photo Creator

Create realistic stock photos from thousands of models, objects, and backgrounds.

Unscreen

Remove video and GIF backgrounds 100% automatically.

Remove Background

Remove the background of any image 100% automatically.

Generated Photos

The most practical way to get high-quality generated faces for commercial content.

Duotone

Convert any photo to a duotone in seconds.

Illustrations

Notioly

Beautiful Notion-style illustrations.

Open Peeps

100% free hand-drawn illustration library.

Smash Illustrations

Free mix & match illustration constructor.

Open Doodles

A collection of free sketchy illustrations.

Control Illustrations

108 free flat illustrations with customisable characters.

Ouch!

Free vector illustrations to class up your project.

Avataaars Generator

A simple web app for generating hand-drawn avatars.

Faux Code Generator

Turn real code (Github Gist) into faux code (SVG image).

Palette

Parametric Color Mixer

A colour palette composer inspired by audio parametric equalisers.

CSS Gradient

A simple and colorful CSS gradient generator.

Colorsinspo

Thousands of beautiful colour palettes you can use in one click.

Color Hexa

A free colour tool providing information about any colour and generating matching colour palettes, shades/tints for your designs.

Color Space

Generate nice colour palettes, gradients, and matching colour schemes for your next project!

Palettte App

Create, analyse and edit smooth colour palettes.

Colorable

A colour combination contrast tester.

Typography

Freebiesbug (free fonts)

Handpicked free fonts and typefaces for web and graphics designers.

Fonts Arena

Free fonts, and free alternatives to premium fonts.

Befonts

Download the free fonts for personal or commercial use.

Font Squirrel

Download thousands of completely legal, high quality, free fonts.

Fontjoy

Easily mix and match different Google Fonts for the perfect pairing.

Type Scale

Preview and choose the right type scale for your project. Experiment with font size, scale and different web fonts.

Animations & Effects

Smooth Shadow Generator

Make a smooth shadow with easing curves.

CSSeffectsSnippets

A collection of CSS effects made with Vue.js.

Separator Generator

A collection of customisable CSS section separators, with the possibility to easily copy the code.

Animista

A place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

Draggable

A lightweight, responsive, modern drag & drop library.

Block Reveal Effects

Ideas for revealing content in a schematic box look.

Iconography

IconStore

A library of free vector icons for personal and commercial projects, designed by first-class designers.

CSS Icons

Open-source CSS, SVG and Figma UI Icons available in SVG Sprite, styled-components, NPM &
API.

Icon Transition Generator

Create a snappy transition between two icons and download the SVG code.

Tilda Icons

A collection of 700+ free icons for landing pages.

Ikonate

Fully customisable & accessible vector icons.

Eva Icons

Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items.

Animated Icons

400 free animated icons downloadable in JSON for Lottie, GIF, and After Effects format.

Patterns & Shapes

CSS Patterns

CSS only library to fill your empty background with beautiful patterns.

Get Waves

A simple web app to generate svg waves, unique every time.

Blob Maker

Create organic SVG shapes in just a few seconds.

Rad Lines

A web tool for generating SVGs of polygons for plotting.

Patterns

Free collection of beautiful patterns for all vector formats.

Scribbbles

100+ vectorised scribbbles to spice up your design projects.

Utility

Nucleo App

A powerful application to collect, customise and export all your icons.

Checklist design

A collection of the best UX and UI practices.

Design System Repo

A comprehensive and curated list of design systems, style guides and pattern libraries that you can use for inspiration.

CSSPeeper

Inspect styles in a simple, well-organised & beautiful way.

AI Image Upscaler

Enlarge and enhance images automatically using AI.

Conclusion

I hope you enjoyed this list of free tools and resources. Hungry for more? Take a look at part 2 here.

I developed a free React landing page template

Pasquale Vitiello — Wed, 15 Apr 2020 13:21:38 +0000

I’m seeing many developers fighting against the outbreak by developing new awesome projects. I really love this attitude, so as a small gesture to support their journey (and to inspire others), I released this free React landing page template.

Check it live here: https://open.cruip.com/
Download it on Github: https://bit.ly/3edNiJx

Feel free to use it for whatever you want 🙌

How to build a pricing slider - Vue

Pasquale Vitiello — Mon, 23 Mar 2020 14:14:27 +0000

In the last article of this series, I am going to show you how to create the same exact pricing component in VueJS.

That's going to be a piece of cake since it's just a matter of following the same approach I used for React.

Let's create a Pricing.vue template file, and add the HTML 👇

<template>
  <div class="pricing">
    <div class="pricing-slider center-content">
      <label class="form-slider">
        <span>How many users do you have?</span>
        <input type="range">
      </label>
      <div class="pricing-slider-value">
        <!-- {{ Current slider value }} -->
      </div>
    </div>

    <div class="pricing-items">
      <div class="pricing-item">
        <div class="pricing-item-inner">
          <div class="pricing-item-content">
            <div class="pricing-item-header center-content">
              <div class="pricing-item-title">Basic</div>
              <div class="pricing-item-price">
                <span class="pricing-item-price-currency"></span>
                <span class="pricing-item-price-amount">Free</span>
              </div>
            </div>
            <div class="pricing-item-features">
              <ul class="pricing-item-features-list">
                <li class="is-checked">Excepteur sint occaecat</li>
                <li class="is-checked">Excepteur sint occaecat</li>
                <li class="is-checked">Excepteur sint occaecat</li>
                <li>Excepteur sint occaecat</li>
                <li>Excepteur sint occaecat</li>
              </ul>
            </div>
          </div>
          <div class="pricing-item-cta">
            <a class="button" href="http://cruip.com/">Buy Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pricing"
};
</script>

Shaping input and output data

We already have a data scheme with input and output values (check out the first article of this series to know more).

Key	Slider value	Price, currency	Price, amount	Price, after
0	1,000		Free
1	1,250	$	13	/m
2	1,500	$	17	/m
3	2,000	$	21	/m
4	2,500	$	25	/m
5	3,500	$	42	/m
6	6,000	$	58	/m
7	15,000	$	117	/m
8	50,000	$	208	/m
9	50,000+		Contact us

We will use the data object to contain those values.

Defining the component data

React has a built-in data function that returns an object. Here is where we will store input range and data scheme values.

data() {
  return {
    priceInputValue: "0",   // initial input value
    priceInput: {           // slider values
      0: "1,000",
      1: "1,250",
      2: "1,500",
      3: "2,000",
      4: "2,500",
      5: "3,500",
      6: "6,000",
      7: "15,000",
      8: "50,000",
      9: "50,000+"
    },
    priceOutput: {          // output values
      plan1: {
        0: ["", "Free", ""],
        1: ["$", "13", "/m"],
        2: ["$", "17", "/m"],
        3: ["$", "21", "/m"],
        4: ["$", "25", "/m"],
        5: ["$", "42", "/m"],
        6: ["$", "58", "/m"],
        7: ["$", "117", "/m"],
        8: ["$", "208", "/m"],
        9: ["", "Contact Us", ""]
      }
    }
  };
}

Now bind the priceInputValue to the input range with the v-model directive

<input type="range" v-model="priceInputValue" />

Setting range slider attributes

Create a ref on the input range element

<input type="range" ref="slider" v-model="priceInputValue">

Let's set the range slider min, max attributes, right after the component output has been rendered to the DOM 👇

mounted() {
  this.$refs.slider.setAttribute("min", 0);
  this.$refs.slider.setAttribute(
    "max",
    Object.keys(this.priceInput).length - 1
  );
}

We have now a range slider whose values go from 0 to 9! 🙌

Here is a recap of what we have built so far:

Binding input and output data

We have a working range slider, but it is still disconnected from the visualized price.

We need another method that retrieves the data to be outputted, accordingly with the current input value

getPricingData(obj, pos) {
  return pos !== undefined
    ? obj[this.priceInputValue][pos]
    : obj[this.priceInputValue];
}

This method has two parameters:

obj - The input or output object we want to retrieve data from
pos (optional) - The position of a required element in the array, if there is any. It is required for the plan objects, since to each key corresponds an array of values (e.g. 0: ["", "Free", ""], ...).

So, to output the current slider value, we will call the method like this 👇

<div class="pricing-slider-value">{{ getPricingData(priceInput) }}</div>

And here is how to output the price data instead 👇

<div class="pricing-item-price">
  <span class="pricing-item-price-currency">
    {{ getPricingData(this.priceOutput.plan1, 0) }}
  </span>
  <span class="pricing-item-price-amount">
    {{ getPricingData(this.priceOutput.plan1, 1) }}
  </span>
  {{ getPricingData(this.priceOutput.plan1, 2) }}
</div>

Adjusting the slider value element position

Almost there. 🏁 We want the slider value to be following the slider thumb.

We need a new method for that but, before proceeding, there is another DOM element that needs to be referenced.

Create a ref for the current slider value

<div ref="sliderValue" class="pricing-slider-value">{{ getPricingData(priceInput) }}</div>

Get the slider thumb size from a CSS property 👍

this.thumbSize = parseInt(
  window
    .getComputedStyle(this.$refs.sliderValue)
    .getPropertyValue("--thumb-size"),
  10
);

Now that we have referenced the .pricing-slider-value element, let's create the method we need.

handleSliderValuePosition(input) {
  const multiplier = input.value / input.max;
  const thumbOffset = this.thumbSize * multiplier;
  const priceInputOffset =
    (this.thumbSize - this.$refs.sliderValue.clientWidth) / 2;
  this.$refs.sliderValue.style.left =
    input.clientWidth * multiplier - thumbOffset + priceInputOffset + "px";
},

Here is a visual representation of what the method does 👇

Call the method as soon as the component has rendered.

mounted() {
  this.handleSliderValuePosition(this.$refs.slider);
}

We also need to call that method every time the input range value changes, so let's use the v-on directive to listen to element input event:

<input
  type="range"
  ref="slider"
  v-model="priceInputValue"
  @input="handleSliderValuePosition($event.target)"
>

Conclusion

Here is the final result. Click on Open Sandbox to see the full code.

I hope you enjoyed this tutorial. If you want to see this in action, here is a landing page template where it’s implemented 👉 Evelyn

How to build a pricing slider - React

Pasquale Vitiello — Thu, 19 Mar 2020 13:59:36 +0000

In this tutorial, I am going to build a pricing component in React using the HTML structure from the previous article of this series.

Let's create a Pricing.js component file, and add the HTML into the return statement 👇

import React from "react";

class Pricing extends React.Component {
  render() {
    return (
      <div className="pricing">
        <div className="pricing-slider center-content">
          <label className="form-slider">
            <span>How many users do you have?</span>
            <input type="range" />
          </label>
          <div className="pricing-slider-value">
            {/* Current slider value */}
          </div>
        </div>

        <div className="pricing-items">
          <div className="pricing-item">
            <div className="pricing-item-inner">
              <div className="pricing-item-content">
                <div className="pricing-item-header center-content">
                  <div class="pricing-item-title">Basic</div>
                  <div className="pricing-item-price">
                    <span className="pricing-item-price-currency" />
                    <span className="pricing-item-price-amount">Free</span>
                  </div>
                </div>
                <div className="pricing-item-features">
                  <ul className="pricing-item-features-list">
                    <li className="is-checked">Excepteur sint occaecat</li>
                    <li className="is-checked">Excepteur sint occaecat</li>
                    <li className="is-checked">Excepteur sint occaecat</li>
                    <li>Excepteur sint occaecat</li>
                    <li>Excepteur sint occaecat</li>
                  </ul>
                </div>
              </div>
              <div class="pricing-item-cta">
                <a class="button" href="http://cruip.com/">
                  Buy Now
                </a>
              </div>
            </div>
          </div>

          <div className="pricing-item">
            <div className="pricing-item-inner">
              <div className="pricing-item-content">
                <div className="pricing-item-header center-content">
                  <div class="pricing-item-title">Advanced</div>
                  <div className="pricing-item-price">
                    <span className="pricing-item-price-currency">$</span>
                    <span className="pricing-item-price-amount">13</span>
                    /m
                  </div>
                </div>
                <div className="pricing-item-features">
                  <ul className="pricing-item-features-list">
                    <li className="is-checked">Excepteur sint occaecat</li>
                    <li className="is-checked">Excepteur sint occaecat</li>
                    <li className="is-checked">Excepteur sint occaecat</li>
                    <li className="is-checked">Excepteur sint occaecat</li>
                    <li className="is-checked">Excepteur sint occaecat</li>
                  </ul>
                </div>
              </div>
              <div class="pricing-item-cta">
                <a class="button" href="http://cruip.com/">
                  Buy Now
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Pricing;

Shaping input and output data

We already have a data scheme with input and output values (check out the first article of this series to know more).

Key	Slider value	Price, currency	Price, amount	Price, after
0	1,000		Free
1	1,250	$	13	/m
2	1,500	$	17	/m
3	2,000	$	21	/m
4	2,500	$	25	/m
5	3,500	$	42	/m
6	6,000	$	58	/m
7	15,000	$	117	/m
8	50,000	$	208	/m
9	50,000+		Contact us

We will use the state object to contain that data.

Defining the component state

React has a built-in state object where to store property values that belongs to the component. I will use that to set input range and data scheme values.

state = {
  priceInputValue: "0", // initial input value
  priceInput: {         // slider values
    0: "1,000",
    1: "1,250",
    2: "1,500",
    3: "2,000",
    4: "2,500",
    5: "3,500",
    6: "6,000",
    7: "15,000",
    8: "50,000",
    9: "50,000+"
  },
  priceOutput: {        // output values
    plan1: {
      0: ["", "Free", ""],
      1: ["$", "13", "/m"],
      2: ["$", "17", "/m"],
      3: ["$", "21", "/m"],
      4: ["$", "25", "/m"],
      5: ["$", "42", "/m"],
      6: ["$", "58", "/m"],
      7: ["$", "117", "/m"],
      8: ["$", "208", "/m"],
      9: ["", "Contact Us", ""]
    }
  }
};

Now pass the priceInputValue to the input range defaultValue attribute:

<input type="range" defaultValue={this.state.priceInputValue} />

Setting range slider attributes

Create a ref and attach it to the input range element

// Create ref
slider = React.createRef();
// Attach ref
<input
  type="range"
  defaultValue={this.state.priceInputValue}
  ref={this.slider} />

Let's set the range slider min, max attributes, right after the component output has been rendered to the DOM 👇

componentDidMount() {
  this.slider.current.setAttribute("min", 0);
  this.slider.current.setAttribute(
    "max",
    Object.keys(this.state.priceInput).length - 1
  );
}

We have now a range slider whose values go from 0 to 9! 🙌

Here is a recap of what we have built so far:

Binding input and output data

We have a working range slider, but it is still disconnected from the visualized price.

Before anything else, we need to update the priceInputValue property value every time a user interacts with the slider. To do that, let's create a method ...

handlePricingSlide = e => {
  this.setState({ priceInputValue: e.target.value });
};

... to be invoked when the input onChange event occurs.

<input
  type="range"
  ref={this.slider}
  defaultValue={this.state.priceInputValue}
  onChange={this.handlePricingSlide}
/>

OK, now we need another method to retrieve the data to be outputted, accordingly with the current input value

getPricingData = (obj, pos) => {
  return set !== undefined
    ? obj[this.state.priceInputValue][pos]
    : obj[this.state.priceInputValue];
};

This method has two parameters:

obj - The input or output object we want to retrieve data from
pos (optional) - The position of a required element in the array, if there is any. It is required for the plan objects, since to each key corresponds an array of values (e.g. 0: ["", "Free", ""], ...).

So, to output the current slider value, we will call the method like this 👇

<div className="pricing-slider-value">
  {this.getPricingData(this.state.priceInput)}
</div>

And here is how to output the price data instead 👇

<div className="pricing-item-price">
  <span className="pricing-item-price-currency">
    {this.getPricingData(this.state.priceOutput.plan1, 0)}
  </span>
  <span className="pricing-item-price-amount">
    {this.getPricingData(this.state.priceOutput.plan1, 1)}
  </span>
  {this.getPricingData(this.state.priceOutput.plan1, 2)}
</div>

Adjusting the slider value element position

Almost there. 🏁 We want the slider value to be following the slider thumb.

We need a new method for that but, before proceeding, there is another DOM element that needs to be referenced.

Create a ref and pass it to the current slider value

// Create ref
sliderValue = React.createRef();
// Attach ref
<div className="pricing-slider-value" ref={this.sliderValue}>

Get the slider thumb size from a CSS property 👍

this.thumbSize = parseInt(
  window
    .getComputedStyle(this.sliderValue.current)
    .getPropertyValue("--thumb-size"),
  10
);

Now that we have a reference for the .pricing-slider-value element, we can create the method.

handleSliderValuePosition = input => {
  const multiplier = input.value / input.max;
  const thumbOffset = this.thumbSize * multiplier;
  const priceInputOffset =
    (this.thumbSize - this.sliderValue.current.clientWidth) / 2;
  this.sliderValue.current.style.left =
    input.clientWidth * multiplier - thumbOffset + priceInputOffset + "px";
};

Here is a visual representation of what the method does 👇

Call the method as soon as the component has rendered ...

componentDidMount() {
  this.handleSliderValuePosition(this.slider.current);
}

... and every time the input range value changes:

handlePricingSlide = e => {
  this.handleSliderValuePosition(e.target);
};

Conclusion

Here is the final result. Click on Open Sandbox to see the full code.

I hope you enjoyed this tutorial. If you want to see this in action, here is a landing page template where it’s implemented 👉 Storm

How to build a pricing slider - HTML & Vanilla JS

Pasquale Vitiello — Mon, 16 Mar 2020 16:35:33 +0000

If you are selling pay as you go or subscription plans, there might be chances that you need a landing page with a pricing table controlled by a range slider - just like in the example below 👇

I've recently built it for our landing page templates at Cruip, so I thought to write an article series to show you how I developed it (in HTML, React, and Vue), and what process I followed to implement the trickiest parts.

Let’s start with the HTML and JavaScript version, then we will cover React and Vue ones in the next articles!

Creating the HTML structure

I've created a very basic HTML structure, with some ready-made CSS from the Cruip framework.



<div class="pricing">

    <div class="pricing-slider">
        <label class="form-slider">
            <span>How many users do you have?</span>
            <input type="range" />
        </label>
        <div class="pricing-slider-value"></div>
    </div>

    <div class="pricing-items">
        <div class="pricing-item">
            <div class="pricing-item-inner">
                <div class="pricing-item-content">
                    <div class="pricing-item-header">
                        <div class="pricing-item-title">Basic</div>
                        <div class="pricing-item-price">
                            <span class="pricing-item-price-currency">$</span>
                            <span class="pricing-item-price-amount">13</span>
                            <span class="pricing-item-price-after">/m</span>
                        </div>
                    </div>
                    <div class="pricing-item-features">
                        <ul class="pricing-item-features-list">
                            <li class="is-checked">Excepteur sint occaecat</li>
                            <li class="is-checked">Excepteur sint occaecat</li>
                            <li class="is-checked">Excepteur sint occaecat</li>
                            <li>Excepteur sint occaecat</li>
                            <li>Excepteur sint occaecat</li>
                        </ul>
                    </div>
                </div>
                <div class="pricing-item-cta">
                    <a class="button" href="#">Buy Now</a>
                </div>
            </div>
        </div>
    </div>
</div>

Notice that we have input ⬇️ and output ⬆️ elements.

Input elements

The <input type="range" /> element, i.e. the slider control
The <div class="pricing-slider-value"> element, into which we will write the current slider value

Output elements

We can have multiple pricing tabs, which means multiple outputs. Each output consists of a <div class="pricing-item-price"> element, that contains 3 more elements:

<span class="pricing-item-price-currency"> for the currency sign
<span class="pricing-item-price-amount"> for the amount
<span class="pricing-item-price-after"> for any other information, such as the billing period

And here is the result 👇

Shaping input and output data

We need to design our data scheme now. I've defined a range of slider values (input) and the corresponding price values (output).

Key	Slider value	Price, currency	Price, amount	Price, after
0	1,000		Free
1	1,250	$	13	/m
2	1,500	$	17	/m
3	2,000	$	21	/m
4	2,500	$	25	/m
5	3,500	$	42	/m
6	6,000	$	58	/m
7	15,000	$	117	/m
8	50,000	$	208	/m
9	50,000+		Contact us

Go on adding input and output data to HTML via data attributes.

Input data 👇



<input
  type="range"
  data-price-input='{
      "0": "1,000",
      "1": "1,250",
      "2": "1,500",
      "3": "2,000",
      "4": "2,500",
      "5": "3,500",
      "6": "6,000",
      "7": "15,000",
      "8": "50,000",
      "9": "50,000+"                        
    }'
/>

Output data looks a little different for structure, since each value is not a string, but an array of strings.



<div
  class="pricing-item-price"
  data-price-output='{
    "0": ["", "Free", ""],
    "1": ["$", "13", "/m"],
    "2": ["$", "17", "/m"],
    "3": ["$", "21", "/m"],
    "4": ["$", "25", "/m"],
    "5": ["$", "42", "/m"],
    "6": ["$", "58", "/m"],
    "7": ["$", "117", "/m"],
    "8": ["$", "208", "/m"],
    "9": ["", "Contact us", ""]
  }'
>

Defining JavaScript variables

Since we might want to display more than one pricing slider on a page, let's collect all elements having pricing-slider as a class, and loop through them.



const pricingSliders = document.querySelectorAll(".pricing-slider");

if (pricingSliders.length > 0) {
  for (let i = 0; i < pricingSliders.length; i++) {
    const pricingSlider = pricingSliders[i];
  }
}

Now that we have our pricing slider defined by a constant, we can move forward with storing elements and data, for both input and output.

To do that, we are going to create:

a pricingInput object that contains stuff dealing with the range slider (the input)
a pricingOutput variable, that contains output elements and data. It's an array because, as previously said, we might have more than one output 😉



if (pricingSliders.length > 0) {
  for (let i = 0; i < pricingSliders.length; i++) {
    const pricingSlider = pricingSliders[i];

    // Build the input object
    const pricingInput = {
      el: pricingSlider.querySelector("input")
    };
    pricingInput.data = JSON.parse(
      pricingInput.el.getAttribute("data-price-input")
    );
    pricingInput.currentValEl = pricingSlider.querySelector(
      ".pricing-slider-value"
    );
    pricingInput.thumbSize = parseInt(
      window
        .getComputedStyle(pricingInput.currentValEl)
        .getPropertyValue("--thumb-size"),
      10
    );

    // Build the output array
    const pricingOutputEls = pricingSlider.parentNode.querySelectorAll(
      ".pricing-item-price"
    );
    const pricingOutput = [];
    for (let i = 0; i < pricingOutputEls.length; i++) {
      const pricingOutputEl = pricingOutputEls[i];
      const pricingOutputObj = {};
      pricingOutputObj.currency = pricingOutputEl.querySelector(
        ".pricing-item-price-currency"
      );
      pricingOutputObj.amount = pricingOutputEl.querySelector(
        ".pricing-item-price-amount"
      );
      pricingOutputObj.after = pricingOutputEl.querySelector(
        ".pricing-item-price-after"
      );
      pricingOutputObj.data = JSON.parse(
        pricingOutputEl.getAttribute("data-price-output")
      );
      pricingOutput.push(pricingOutputObj);
    }
  }
}

Let's see what's inside these objects 📦

Variable	returns
`pricingInput.el`	`<input type="range" />` elem
`pricingInput.data`	`{0: "1,000", 1: "1,250", ... }` object
`pricingInput.currentValEl`	`<div class="pricing-slider-value">` elem
`pricingInput.thumbSize`	`36` slider thumb size (parsed from CSS)
`pricingOutput[n].currency`	`<span class="pricing-item-price-currency">` elem
`pricingOutput[n].amount`	`<span class="pricing-item-price-amount">` elem
`pricingOutput[n].after`	`<span class="pricing-item-price-after">` elem
`pricingOutput[n].data`	`{0: ["", "Free", ""], ... }` object

Setting range slider attributes

Now we can proceed with setting the range slider min, max, and value attributes.



if (pricingSliders.length > 0) {
  for (let i = 0; i < pricingSliders.length; i++) {
    const pricingSlider = pricingSliders[i];

    // [ ... previously defined variables ... ]

    // set input range min attribute (0)
    pricingInputEl.setAttribute("min", 0);
    // set input range max attribute (9, i.e. the number of values)
    pricingInputEl.setAttribute("max", Object.keys(priceInput).length - 1);
    // initial slider value (0, or any other value if assigned via HTML)
    !pricingInputEl.getAttribute("value") &&
      pricingInputEl.setAttribute("value", 0);
  }
}

Great! We have a range slider whose values go from 0 to 9 🙌

The next step is outputting the slider value (e.g. 1,000) that corresponds to the current range value (e.g. 0), into the <div class="pricing-slider-value"> element.

To do that, we need to create a function to be invoked every time a user interacts with the slide. As obvious, we need to pass our input and output objects as arguments



function handlePricingSlide(input, output) {
  // output the current slider value
  if (input.currentValEl)
    input.currentValEl.innerHTML = input.data[input.el.value];
}

Let's call the function 📢



if (pricingSliders.length > 0) {
  for (let i = 0; i < pricingSliders.length; i++) {
    const pricingSlider = pricingSliders[i];

    // [ ... previously defined variables ... ]
    // [ ... previous range slider attributes assignment ... ]

    handlePricingSlider(pricingInput, pricingOutput);
    window.addEventListener("input", function() {
      handlePricingSlider(pricingInput, pricingOutput);
    });
  }
}

And here is the result 👇

Binding input and output data with JavaScript

We have a working range slider, but it is still disconnected from the visualized price. It's time to bind input slider values with output price data.



function handlePricingSlide(input, output) {
  // output the current slider value
  if (input.currentValEl)
    input.currentValEl.innerHTML = input.data[input.el.value];
  // update prices
  for (let i = 0; i < output.length; i++) {
    const outputObj = output[i];
    if (outputObj.currency) outputObj.currency.innerHTML = outputObj.data[input.el.value][0];
    if (outputObj.amount) outputObj.amount.innerHTML = outputObj.data[input.el.value][1];
    if (outputObj.after) outputObj.after.innerHTML = outputObj.data[input.el.value][2];
  }
}

We are basically looping through each pricingOutput object and outputting currency, amount and after values into the destination elements.

Adjusting the slider value element position

Almost there. 🏁 We want the slider value to be following the slider thumb.

Let's create a function calculating the left value to be applied to the slider value element.



function handleSliderValuePosition(input) {
  const multiplier = input.el.value / input.el.max;
  const thumbOffset = input.thumbSize * multiplier;
  const priceInputOffset =
    (input.thumbSize - input.currentValEl.clientWidth) / 2;
  input.currentValEl.style.left =
    input.el.clientWidth * multiplier - thumbOffset + priceInputOffset + "px";
}

The function determines the proper slider value position, so that the element is horizontally aligned with the slider thumb. Here is a visual representation of what the function does 👇

Notice that the thumb size value is parsed with the getComputedStyle() method (see the paragraph where we defined the JS variables). That way I can change the thumb size in the CSS, without having to change anything in my JavaScript file.

Setting a default slider value

In case you want to set an initial slider value other than Free, you just need to add a value="n" attribute to the range slider.

For example, <input type="range" value="1" /> will return a range slider with 1,000 as initial slider value.

Conclusions

Here is the final result again. Click on Open Sandbox to see the full code.

I hope you enjoyed this tutorial. If you want to see this in action here is a landing page template where it’s implemented 👉 Surface

5 reasons why I built a CSS framework (and what I've learned)

Pasquale Vitiello — Wed, 19 Feb 2020 14:08:45 +0000

Bootstrap, Foundation, Bulma, Tailwind, PureCSS, Materialize, and so forth: the idea of building your own CSS framework might sound like pure madness with so many ready-made CSS libraries out there.

But there might be some valid reasons that lead to taking up such a challenge. In this article, I will try to list the ones that convinced me to build a custom CSS framework for our Cruip templates.

1. I wanted a tailor-made suit

First and very debatable point! Productivity is what all of us should always keep the focus on, and that means to make things work with less time and effort. So why should I want to waste time just to reinvent the wheel?

Well, I think it depends on what you are working on. If you need to go fast, building a custom framework it's not a good move. In our case we wanted a solid, scalable and easy to maintain scaffold, and here's why we thought that doing everything from scratch was a more appropriate choice.

2. I needed a custom but reusable structure

During the prototyping stage of Cruip, we defined some fundamental principles:

We didn't want fluid, percent-based layouts
We didn't need grids yet
We wanted to define the white-space in multiples of 4
We wanted to adopt pixel only as measure unit
I needed a settings file to store custom variables for our sections and components
I needed Sass mixins and functions from my Swiss Army knife

Way too many needs for adopting a CSS framework. That's why we decided to build our own system.

3. I didn't want to end up with plethoric code

Generally speaking, I don't like to have things that I don't need around me. That applies to both life and job.

Every CSS library provides you much more than you need, and I prefer to spend my time writing new code rather than wasting time to remove unused code.

4. I wanted to save time in the long run

I've just said that building a CSS framework is time-consuming, but it's a one-time job.

I spent almost 3 months writing, testing, and fixing the base CSS for Cruip. What we get now is a solid skeleton that we can re-use anytime we need to build a landing page. Also, I can re-cycle my work for any of my future projects, aside from improving or extending it accordingly with the needs of the moment.

Not of secondary importance: it's my creature, and I can feel much more comfortable with it rather than with code written, maintained and updated by anyone else.

5. I wanted to challenge myself

Coding a CSS framework from scratch can be an exciting experience. You will test your skills at 360 degrees and it will force you to view things from a larger perspective. Definitely an experience that I would recommend!

Multiple, nested containers with CSS

Pasquale Vitiello — Mon, 03 Feb 2020 15:14:05 +0000

Almost every CSS framework provides one container utility class only, but I like the idea of having multiple container sizes in my CSS toolkit.

When I started building the CSS framework for the Cruip templates, I came up with the decision of including 3 different container classes:

container, for larger containers (1080px)
container-sm, for smaller containers (896px)
container-xs, for extra-small containers (620px)

Since we are not using a grid system, having multiple container widths might come in handy to have more control and more width options.

Containers in use on Surface template

Let's start from the beginning:



$container--width:      1080px;
$container--width-sm:   896px;
$container--width-xs:   620px;
$container--padding:    16px;

.container,
.container-sm,
.container-xs {
  width: 100%;
  margin: 0 auto;
  padding-left: $container--padding;
  padding-right: $container--padding;
}

.container {
  max-width: $container--width + ( $container--padding * 2 );
}

.container-sm {
  max-width: $container--width-sm + ( $container--padding * 2 );
}

.container-xs {
  max-width: $container--width-xs + ( $container--padding * 2 );
}

Normally, a container has some padding or margin on left and right sides, and when you try nesting a container into another one, that will result in misalignment issues below a certain breakpoint.

First thing to do is reset the padding of nested containers.



.container,
.container-sm,
.container-xs {

  .container,
  .container-sm,
  .container-xs {
    padding-left: 0;
    padding-right: 0;
  }
}

Seems easy - and it is indeed - but we need to adjust the containers width as well.



.container {

  .container-sm {
    max-width: $container--width-sm;
  }

  .container-xs {
    max-width: $container--width-xs;
  }
}

.container-sm {

  .container-xs {
    max-width: $container--width-xs;
  }
}

Everything is on the right track but code is still perfectible. Due to the presence of multiple containers, outputted CSS will be a bit verbose. Let's DRY things a little!

Above code can be refactored using the [attribute*=value] selector.



[class*=container] {

  [class*=container] {
    padding-left: 0;
    padding-right: 0;
  }

  .container-sm {
    max-width: $container--width-sm;
  }

  .container-xs {
    max-width: $container--width-xs;
  }
}

And here is the result:

Final CSS code:



$container--width:      1080px;
$container--width-sm:   896px;
$container--width-xs:   620px;
$container--padding:    16px;

.container,
.container-sm,
.container-xs {
  width: 100%;
  margin: 0 auto;
  padding-left: $container--padding;
  padding-right: $container--padding;
}

.container {
  max-width: $container--width + ( $container--padding * 2 );
}

.container-sm {
  max-width: $container--width-sm + ( $container--padding * 2 );
}

.container-xs {
  max-width: $container--width-xs + ( $container--padding * 2 );
}

[class*=container] {

  [class*=container] {
    padding-left: 0;
    padding-right: 0;
  }

  .container-sm {
    max-width: $container--width-sm;
  }

  .container-xs {
    max-width: $container--width-xs;
  }
}