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">…

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">…


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 👇

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">…


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. …


This is the second part of a series of step-by-step tutorials where we will walk you through every aspect of customizing a Cruip landing page template from the ground up.

Didn’t you know about Cruip? Check it out 👇

Premise

Behind every Cruip template, there is a solid design project. Davide Pacilio is the head of design and the man who ensures the respect of the best design standards. He uses to provide an essential (but very accurate) design system that guarantees a consistent visual identity for each template.


This is the first part of a series of step-by-step tutorials where we will walk you through every aspect of customizing a Cruip landing page template from the ground up.

Didn’t you know about Cruip? Check it out 👇

The folder structure

Let’s suppose you’ve just downloaded Laurel but you have no idea where to start.

That can be pretty understandable at the beginning, so let’s start by having a look at the folder structure👇

Pasquale Vitiello

Front-end developer 👋 Founder (and Co-*) @ cruip.com, freebiesbug.com, sneakpeekit.com, opendept.net

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store