DEV Community: Pasquale Vitiello

Free Tailwind dashboard template

Pasquale Vitiello — Tue, 27 Apr 2021 09:46:11 +0000

Hey guys,

As the title says, I made a free dashboard template using Tailwind CSS + React!

It comes with several pre-coded charts/graphs that I developed using the awesome Chart.js 3 library!

Live demo: https://mosaic.cruip.com/
Download on Github: https://github.com/cruip/tailwind-dashboard-template

Use it for whatever you want, and feel free to share your comments and feedback below 🙂

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;
  }
}