DEV Community: Chisom Uma

Custom Ecommerce Platform vs. Off-the-Shelf: 5 Factors to Help You Make the Best Choice

Chisom Uma — Mon, 03 Jul 2023 10:48:40 +0000

A custom ecommerce platform is a unique and tailored solution for selling products or services online built to meet a business's specific needs and requirements. This platform provides greater control and customization options compared to off-the-shelf ecommerce solutions. Custom ecommerce platforms are designed from scratch, allowing for greater flexibility and security.

Off-the-shelf ecommerce platforms are prebuilt software that can be installed almost immediately after they are acquired. The platform provides all the essential features ready in one platform. It makes it easier and faster for stores to get up and running. Using an off-the-shelf platform requires minimal development work to set up as-is, putting aside customizations.

Companies like Sephora and Netflix merch shops have used off-the-shelf ecommerce platforms such as Shopify. On the other hand, companies such as Amazon and Tesla use custom ecommerce platforms.

This article examines the differences between a custom ecommerce and an off-the-shelf platform and provides readers with a better understanding of the advantages and disadvantages of each option. This article aims to help you decide which is the best fit for your ecommerce business.

What are Off-the-Shelf Ecommerce Platforms?

Off-the-Shelf ecommerce platforms are pre-built software solutions for building and managing an online store. These platforms provide a wide range of features and functionalities to online businesses set up and run quickly without requiring extensive technical knowledge. Examples of off-the-shelf ecommerce platforms include Shopify, Magento, WooCommerce, and BigCommerce.

Off-the-shelf platforms can be installed and deployed immediately, allowing businesses to start selling online quickly.

Pros of Off-the-shelf Ecommerce Platforms

Time-Saving : it provides the basic ecommerce features out-of-the-box, allowing businesses to go live quickly.
Plugins: There is an availability of plugins that can add various features with minimal additional technical work.
Regular Updates: Off-the-shelf ecommerce platforms are designed to be updated regularly to ensure they remain secure and compliant with the latest technologies and standards.

Cons of Off-the-Shelf Ecommerce Platforms

Despite the benefits of off-the-shelf platforms, its worth noting that some large companies, including Amazon, Nike, and Tesla, prefer not to use them. There are several reasons behind this decision, including:

Slow Site Speed: Customization most times include plugins. Plugins are one of the advantages of an off-the-shelf platform, but they can slow down your site. Too many plugins could risk slowing down your site or even causing it to crash.
Integration Problems: Integrations are hard to add because most off-the-shelf platforms either don't allow you to own your tech stack completely or dont provide the necessary architecture for seamless integrations. This often leads to unanticipated bugs or leaves the platform at risk of breaking.
Fewer Customization Options: A challenge of customizing an off-the-shelf ecommerce platform is the platform's architecture. These platforms are often built with a specific architecture that may not be flexible enough to accommodate changes easily. Customizing the platform's architecture can lead to the accumulation of technical debt, making it harder to update or test the platform in the future.
Control limitations: An off-the-shelf platform can limit the businesss control and customization options as the platform may have strict limitations on what can be modified or altered. This can impact the ability of the business to differentiate itself from competitors and meet specific customer needs effectively.
Lack of Tech Ownership: An off-the-shelf platform does not allow businesses to choose the architecture or the components of their ecommerce store, including what integrations they want to use or features they want to add.
High Costs Risks: Businesses may also be at the mercy of the provider's pricing and licensing models, which can change without notice and potentially increase operating costs. Additionally, if the provider goes out of business or discontinues the platform, the business may be forced to switch to a different solution, leading to significant disruption and additional costs.

What are Custom Ecommerce Platforms?

Custom ecommerce platforms are online shopping systems created for a specific business use case. Unlike off-the-shelf ecommerce solutions, these platforms are tailored to fit the unique features that the business wants to offer. This includes custom payment and shipping options, personalized branding design, and integrations with specific business tools and systems.

These platforms give businesses greater control and flexibility over their online sales processes than pre-built solutions.

Medusa is an excellent example of a custom commerce infrastructure.

Pros of Custom Ecommerce Platforms

Full Control and Ownership: A custom ecommerce platform gives businesses full control and ownership over their online store by allowing them to tailor the platform to their specific needs and requirements. It is designed to meet the business's unique requirements from the ground up. This means the business has complete control over its online store's functionality, design, and user experience, allowing it to create a truly personalized shopping experience for its customers.
Scalability: A custom ecommerce platform offers scalability to businesses by being designed and built specifically to meet their unique needs and requirements. With a platform tailored to a company's specific business needs, businesses can easily scale their operations as they grow without worrying about limitations or constraints imposed by generic off-the-shelf solutions.
Improved Performance: The platform provides businesses with a tailored solution optimized for their unique processes, customer base, and goals. This means the platform is designed to function efficiently and effectively without unnecessary features or excess resources. The result is faster load times, better user experience, and increased sales, as customers can find what they are looking for and complete their purchases quickly and smoothly.
Customization: Custom ecommerce platforms have the abstract architecture and tooling that allows businesses to easily customize any essential ecommerce features to match their use case without needing hacky workarounds.

Creating Custom Ecommerce Platforms Approaches

Developing a custom ecommerce platform can be a daunting task for any business. However, there are several approaches available to make it easier. The following are some of the most popular ways to create a custom ecommerce platform.

Custom Development from Scratch

Hire a professional developer. A business would work with a development team to create the platform from scratch.

This approach gives you more control over the platform's features, design, and functionality.

However, it takes more time to re-invent the wheel on basic ecommerce features, which leads to less focus on new and custom features and takes the platform longer to be ready to go live

Open Source Custom Ecommerce Platform

Open-source custom ecommerce platforms are cost-effective. They are free to use and allow you to make customizations easily. They also come with a range of community support, so you can get help if needed. Medusa is a leading open source commerce infrastructure for Node.js developers. It provides a flexible and modular architecture that can be easily customized to fit your business needs.

Trade-offs Between Custom Ecommerce Platforms Vs. Off-the-shelf Platforms

Need for Solution Flexibility

Custom ecommerce platforms are built specifically for your business so that they can be tailored to your specifications. This level of customization allows for greater flexibility and control over the functionality and design of your ecommerce store. You can add or remove features as you see fit and ensure your store is unique and stands out.

On the other hand, off-the-shelf ecommerce platforms offer a more standardized solution that may not be as flexible. While these platforms typically come with a wide range of features and integrations, they may not be able to accommodate all of your business needs.

Development Speed

Custom solutions are great when it comes to the development of custom features. Although, It requires more time to design and build the platform from scratch or use an open-source solution to fit the specific business needs.

Off-the-shelf platforms are set up quickly because they are pre-built and only need configuring to meet the business's requirements. It makes it faster to set up and deploy your store.

Scalability

Custom ecommerce platforms are designed and developed specifically for the needs of a particular business. They are highly scalable and flexible, allowing businesses to add new features and functionality as they grow. Custom ecommerce platforms can also be optimized for performance and speed, ensuring they can handle increased traffic without slowing down.

Off-the-shelf platforms lack the flexibility and scalability to grow with a business's evolving needs. These platforms do not have the specific features or customization options individual businesses require.

As a business grows, it may require more advanced features or integrations unavailable on the off-the-shelf platform. Also, the platform may become slow or unreliable as the number of users or data increases. Upgrades or changes to the platform can be expensive and may not always be compatible with existing systems or workflows.

Off-the-shelf platforms are pre-built solutions that offer a range of features and functionality out of the box. They are also designed to be scalable and can handle increased traffic and transactions as businesses grow.

Upfront Cost vs. Cost Over Time

Custom ecommerce platforms are typically expensive upfront but offer more flexibility, scalability, and customization options. Upfront costs can be high, requiring specialized development, design, and testing to ensure a seamless user experience. However, custom eCommerce solutions often cost less over time than pre-built solutions.

On an off-the-shelf platform, developing new features becomes costly and time-consuming. More time is spent resolving unanticipated bugs from third-party libraries or plugins, which can introduce compatibility issues or complex codebases. Off-the-shelf platforms may have specific upfront and long-term costs for using the platform, but more costs come with adding new features, maintaining the platform, and so on.

Developer Resources

Custom ecommerce platforms typically require more developer resources and agency support as they need to be built from scratch. This includes time and effort in designing, coding, testing, and maintaining the platform.

Build Custom Ecommerce Platforms with Medusa

Medusa is an open source composable digital commerce infrastructure that makes it effortless for businesses, developers, and merchants to build fully customizable commerce applications easily, providing an incredible developer experience.

Medusa is an optimal option for building custom ecommerce stores due to the following reasons:

Developer-Friendly: Medusa provides a great developer experience due to its modular architecture.
Open Source: Most ecommerce platforms will not allow you complete ownership of your existing tech stacks. This isn't the case with Medusa; it is open source and lets you control your tech stacks completely.
Flexibility: You can integrate it with third-party tools, including customer relationship management (CRM) and enterprise resource planning (ERP) systems, as well as external services like social media and marketing automation. This allows businesses to streamline their operations and get the most out of their ecommerce platform.
Customization: Medusa is composed of an abstraction-based architecture built for seamless customization. This allows you to set up your store according to your preferred business needs.
Community Support: With over 4000 developers on its Discord channel, Medusa has a strong community that is always willing to help. By participating in GitHub discussions with other ecommerce builders, open-source developers, and the Medusa core team, developers can also contribute to Medusa's growth.

Conclusion

This article explores the differences and trade-offs between custom ecommerce solutions and off-the-shelf solutions. The first offers distinct advantages over off-the-shelf solutions, especially for larger organizations. With custom ecommerce, businesses can tailor their stores to fit the specific needs of their customers.

With Medusa, you can easily customize and maintain your ecommerce store. Maintaining your products on the platform, offering discounts and gift cards, supporting multiple currencies, and much more. This is possible with Medusa's headless architecture, which separates the admin dashboard from the storefront and back-end server.

To learn more about Medusa and how to get started, check out Medusa's Documentation and User Guide.

A Complete Guide To API Calls With React And Axios

Chisom Uma — Mon, 21 Mar 2022 16:11:11 +0000

In this post, we are to be looking at how to use Axios in fetching data, manipulating it, and displaying it on your page with filtering functionality. We are also going to learn how to use the map, filter, and include method. In addition to that, you will learn how to create a simple loader to handle the loading state of the fetched data from the API endpoint.

Setting up the project

The first thing we need to do is set up the project with the create-react-app command terminal:

npx create-react-app project-name

Next thing is to open up the project directory through the terminal window, then input npm install axios to install Axios for the project locally.

Choose Target API

To do this, we are going to be using the Random User Generator API to fetch random user information, which we are going to use in our application. The next step is to add the Axios module to the application by importing it into our App.js file.

import axios from 'axios'

The next thing we are going to do is to fetch ten different users, and we are going to need only the name, last name, and a unique ID, which is required for React when creating lists of elements. This will also make the call more specific, for example, the nationality option.

Check out the API URL that we will make the call for below:

https://randomuser.me/api/?results=10&inc=name,registered&nat=fr

Note: i did not use the id option that was provided in the API because sometimes it returns null for some users. I made sure that there will be a unique value for each user, by including the registered option in the API.

Copy and paste it on your browser, you will see the returned data in JSON format.

The next thing is to make an API call through Axios.

Creating the App States

The first thing we are going to do is create the states using the useState hook from the React, so that we can be able to store the fetched data.

Inside our App component, next thing is to import the useState hook from React and then create the states as seen below.

import React, { useState } from "react";
import axios from "axios";

const App = () => {
  const [users, setUsers] = useState([]);
  const [store, setStore] = useState([]);

  return (
    <div>

    </div>
  );
};

export default App;

You can see the users and store states. One will be used for the purpose of filtering, and won’t be edited, while the other one will hold the filter results that will hold the filter results that will be shown in the DOM.

Fetch Data With Axios

Next thing is to create a getUsers function that will handle the fetching of data. In this function, we are going to use axios to fetch our data from the API using get method.

For us to display our fetched data when the page loads, we will have to import a React hook called useEffect and call the getUsers function inside it.

The useEffect is responsible for managing the side effects in functional components, and it is similar to the componentDidMount() lifecycle hook that is usually used in React class-based components. This hook accepts an empty array as a second argument for the purpose of side-effects cleanups. What you should do now is update the code in the App component, so that we check for the response data in the console, as shown below.

import React, { useState, useEffect } from "react";

const App = () => {
  const [users, setUsers] = useState([]);
  const [store, setStore] = useState([]);

  const getUsers = () => {
    axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
      .then(response => console.log(response))
  };

  useEffect(() => {
    getUsers();
  }, []);

  return (
    <div>

    </div>
  );
};

export default App;

Check the console, you will see an object output. Open the object, and you will see another object inside named data , inside the data, you will see an array known as results. If you want to return a specific value from the results, you can update the axios.get call as seen below.

axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
  .then(response => console.log(response.data.results[0].name.first))

What we did here is to log the name of the first value inside the results array.

Process the Result Data

What we are going to do next is to use the built-in map method for JavaScript in order to iterate through each element inside the array and create a new array of JavaScript Objects with a new structure.

As shown below, update your`getUsers function:

const getUsers = () => {
  axios
    .get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
    .then((response) => {
      const newData = response.data.results.map((result) => ({
        name: `${result.name.first} ${result.name.last}`,
        id: result.registered
      }));
      setUsers(newData);
      setStore(newData);
    })
    .catch((error) => {
      console.log(error);
    });

What we did in the code above is that we created a variable called newData. It stores the results by looking through the response.data.results array with the map method. Between the map callback, we are going to reference each element of the array as result (notice the singular/plural difference). Also, when we use the key-value pair of each object inside the array, we create another object with name and id key-value pairs.

Normally, if you go and check the result of the API call in your browser, you will notice that there are first and last key-value pairs inside the name object, but there is no no key-value pair for full name. From the code is showed you above, i was able to combine the first and last names to create a full name inside the JavaScript object.

Note: the JSON and JavaScript objects are different things, even though they work pretty much the same way.

Populate Data Stores With Filtering

The idea of filtering is not difficult at all. We have our store state, which keeps the original data always without changing. By using the filter function on this state, we only get the matching elements, then we assign them to the users state.

const filteredData = store.filter((item) => (
    item.name.toLowerCase().includes(event.target.value.toLowerCase()))

The filter method requires a function as an argument, a function that will run for each element in the array. Here, we are going to be referring to each element inside the array as item. Then, the next thing is to take the name key of each item and convert it to lower case so that we can make our filtering functionality case insensitive.

In the end, the filter method returns the matching elements. So, we just simply take these elements and store them in the setUsers state.

Next is to update the App component with the final version of the function we created.

const filterNames = (event) => {
   const filteredData = store.filter((item) =>
     item.name.toLowerCase().includes(event.target.value.toLowerCase())
   );
   setUsers(filteredData);
 };

Creating the Components

We can actually put everything inside the App component for this small example, but let’s take advantage of React and make small functional components.

Let us add some components to the app. The first thing is to import the components from separate JavaScript files, which we will define soon.

import Lists from "./components/Lists";
import SearchBar from "./components/SearchBar";

Next thing is to update our App components return statement to make use of these components.

return (
  <div className="Card">
      <div className="header">NAME LIST</div>
      <SearchBar searchFunction={filterNames} />
      <Lists usernames={users} />
  </div>
);

If you notice, there is the searchFunction prop for the SearchBar component and the usernames prop for the Lists component.

Note: we are going to be using users state instead of the store state to show the data. This is because the users state contains the filtered results.

**SearchBar** Component
This component only takes the filterNames function as a prop and calls this function when the input field changes. Put the code below on components/SearchBar.Js:

import React from 'react';

const SearchBar = ({ searchFunction}) => {
  return (
    <div>
        <input className="searchBar" type='search' onChange={searchFunction} />
    </div>
  )
};

export default SearchBar;

List Component
This List Component lists the names of the users. Put it into the components/List.js:

import React from 'react';

const Lists = ({ usernames }) => {
  return (
      <div>
          <ul>
              {usernames.map(username => (
                  <li key={username.id}>{username.name}</li>
              ))}
          </ul>
      </div>
  )
};

export default Lists;

Again, we used the map method to get each item in the array and create a <li> item out of it.

Note: when ****you use map to create a list of items, you should use a key so that React will keep track of each list item.

Track Loading State

To create a loading state, we have to use useState hook to show when the data is yet to be fetched.

const [loading, setLoading] = useState(false);

The next step is to update the loading state in our data fetch method.

const getUsers = () => {
  axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
    .then((response) => {
      const newData = response.data.results.map((result) => ({
        name: `${result.name.first} ${result.name.first}`,
        id: result.registered,
      }));
      setLoading(true);
      setUsers(newData);
      setStore(newData);
    })
    .catch((error) => {
      console.log(error);
    });
};

What we did here is create a loading state and set it to false initially. We then set this state to true while fetching the data with the setLoading state. Finally, we are going to return statement to render the loading state as shown below:

return (
  <>
    {loading ? (
      <div className="Card">
        <div className="header">NAME LIST</div>
        <SearchBar searchFunction={filterNames} />
        <Lists users={users} />
      </div>
    ) : (
      <div className="loader"></div>
    )}
  </>
);

We used the JavaScript ternary operator to render the SearchBar and Lists components when the loading state is false and then rendered a loader when the loading state is true. We also created a simple loader to display to display the loading state in the interface.

Style With CSS

This is the CSS file specific to this example:

body,

html {

  -webkit-font-smoothing: antialiased;

  margin: 0;

  padding: 0;

  font-family: "Raleway", sans-serif;

  -webkit-text-size-adjust: 100%;

}

body {

  display: flex;

  justify-content: center;

  font-size: 1rem/16;

  margin-top: 50px;

}

li,

ul {

  list-style: none;

  margin: 0;

  padding: 0;

}

ul {

  margin-top: 10px;

}

li {

  font-size: 0.8rem;

  margin-bottom: 8px;

  text-align: center;

  color: #959595;

}

li:last-of-type {

  margin-bottom: 50px;

}

.Card {

  font-size: 1.5rem;

  font-weight: bold;

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 200px;

  border-radius: 10px;

  background-color: white;

  box-shadow: 0 5px 3px 0 #ebebeb;

}

.header {

  position: relative;

  font-size: 20px;

  margin: 12px 0;

  color: #575757;

}

.header::after {

  content: "";

  position: absolute;

  left: -50%;

  bottom: -10px;

  width: 200%;

  height: 1px;

  background-color: #f1f1f1;

}

.searchBar {

  text-align: center;

  margin: 5px 0;

  border: 1px solid add8e6;

  height: 20px;

  color: #575757;

  border-radius: 3px;

}

.searchBar:focus {

  outline-width: 0;

}

.searchBar::placeholder {

  color: #dadada;

}

.loader {

  border: 15px solid #ccc;

  border-top: 15px solid #add8e6; 

  border-bottom: 15px solid #add8e6;

  border-radius: 50%;

  width: 80px;

  height: 80px;

  animation: rotate 2s linear infinite;

}

@keyframes rotate {

  0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); }

}

Conclusion

In this tutorial, we used the Random User Generator API as the source of random user data. We then fetched the data from an API endpoint and restructured the results inside a new JavaScript object with the map method.

The next thing we did was to create a filtering function with the filter and includes methods. Then finally, we created two different components and conditionally rendered our components with a loading state when the data is not fetched yet.

Simple ‘Mixin’ Alternative To Standard CSS Grids

Chisom Uma — Sat, 12 Mar 2022 13:22:05 +0000

Using CSS grid to generate layouts in a design provides developers with value, and makes things a lot easier for developers, but there are still some problems or downsides of using the CSS grid systems.

The main reason designers and web developers use CSS grid systems is to make the generation of layouts easier and faster. But the question is “can the generation of layouts be made easier and faster, and still overcome these problems?”.

Fortunately for us, the answer is “Yes!’, all thanks to CSS preprocessors such as LESS and SASS/SCSS that can work with CSS variables, and perform calculations and output CSS via ‘mixins’.

Outline

How CSS Grid System Works
Some Downsides Of Using CSS Grids
- High amounts of unused code
- Restrictions on layout
- set number of overall columns
- Non semantic markup
- Restrictions on nesting
An Alternative Solution
Tackling The Classic Layout
- Easy px to em/rem conversion
- .Row() mixin
- .Cols() mixin
Adding Padding And Margins
- Adding padding
- Adding wrapping padding
- Adding column gutters
Nesting And Increasing Layout Complexity
Conclusion

Prerequisite

Basic knowledge of CSS and CSS grids

How CSS Grid Systems Work

A grid system is usually made up of a specific number of columns, normally 12 or 16 columns, and the ability to set an element, like the div or class element, to a width of X columns.

Using CSS grid systems to create layouts on a website can be really easy, and of course, there are many values you can get from using CSS grid systems, but there are also downsides to using the CSS grid system.

You should not think that using the CSS grid is bad because it isn’t. But as a tool you will be using consistently in your codes, you should be able to know the pros and cons, to determine if it is right for a specific project.

Some Downsides Of Using CSS Grids

Some of the downsides of using CSS Grids include:

High amounts of unused code: Grid classes could be anywhere from 200 to 700 lines of code, but even in a simple design, most of the codes may never be used.
Restrictions on layout: Grids are already calculated, they tend to have set widths that are difficult to change, e.g. column widths, gutter widths. The design becomes restricted to working only those widths.
Set number of overall columns: Already calculated grid classes normally uses 12 or 16 columns. Let’s say you wanted a different number of columns, well, that won’t be possible.
Non Semantic markup: The use of grid classes tends to bring about the placement of numerous non-semantic class names all through a document, such as a “row” or “column”.
Restrictions on nesting: Most times, grid systems can only have columns that are nested inside one another. This restricts the complexity and flexibility of layout generation.

An Alternative Solution

‘Mixins’ are available in both LESS and SASS/SCSS. Mixins are reusable packages of rules that outputs different CSS depending on the information that is passed through them for processing.

If you are not yet familiar with the understanding of what preprocessors are, and how they work with mixins and variables, you can read about it from http://lesscss.org/.

Before we get started, you should know that there are already some existing libraries of LESS and SASS mixins that are already solving the problems if CSS grids, but we are going to be taking a different approach.

Note:
I am going to be writing these mixins in LESS, because it is harder to make LESS perform sophisticated operations than SASS, so it is easier for SASS users to adapt LESS mixins.

Tackling The Classic Layout

Let’s create a layout via LESS mixins, keeping the amount of CSS required to a minimum, with no pixel values, and maintaining a semantic markup. Let’s look at the HTML below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Classic Layout</title>
    <script type='text/javascript' src='js/modernizr.js'></script>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/classiclayout.css">
</head>
<body>
<header>

</header>
<main>
    <article>

    </article>
    <aside>

    </aside>
</main>
<footer>

</footer>
</body>
</html>

If you notice, there are no classes used here, only semantic HTML5 tags. I am going to be adding the following LESS code, using mixins and variables:

header, main, footer {
    .Row;
    background-color: #ccc;
    min-height: 200 * @toRems;
}

article {
    .Cols( 3 );
    min-height: 500 * @toRems;
    background-color: #ddd;
}

aside {
    .Cols( 1 );
    min-height: 500 * @toRems;
    background-color: #eee;
}

it will then generate the following lines of CSS:

header,
main,
footer {
  max-width: 75rem;
  width: 100%;
  margin: 0 auto;
  background-color: #ccc;
  min-height: 12.5rem;
}
header:before,
main:before,
footer:before,
header:after,
main:after,
footer:after {
  content: "";
  display: table;
}
header:after,
main:after,
footer:after {
  clear: both;
}
article {
  width: 75%;
  float: left;
  min-height: 31.25rem;
  background-color: #ddd;
}
aside {
  width: 25%;
  float: left;
  min-height: 31.25rem;
  background-color: #eee;
}

Check out the result on your browser, you will see a nice layout. Let’s check out the LESS mixins and variables that were used to create the layout you will be seeing in your browser:

//
// Variables for em / rem use
//

@base_px: 16; //set to the most common base px size used in browsers, should generally be left at default

@toRems: (1 / @base_px) + 0rem; //allows you to set values as the default px size to target, which is then converted into scalable rem values.

@toEms: (1 / @base_px) + 0em; //same as above, but with em values

//
// Grid mixins
//

@default-width: 1200 * @toRems;

@default-colspan: 1;

@default-total_cols: 4;

.Row ( @width : @default-width ) {
    max-width: @width;
    width: 100%;
    margin: 0 auto;
    // clear at the end of container
    &:before,
    &:after {
        content:"";
        display:table;
    }
    &:after {
        clear:both;
    }
}

.Cols ( @colspan : @default-colspan; @total_cols : @default-total_cols ) {
    width: ( @colspan * (100 / @total_cols) ) + 0%;
    float: left;
}

Now, let’s check out each elements one by one, as you can see above:

Easy px to em/rem conversion

//
// Variables for em / rem use
//

@base_px: 16; //set to the most common base px size used in browsers, should generally be left at default

@toRems: (1 / @base_px) + 0rem; //allows you to set values as the default px size to target, which is then converted into scalable rem values.

@toEms: (1 / @base_px) + 0em; //same as above, but with em values

The variables that are in the top section of the code set us up for easily scalable em or rem values all through the stylesheet, instead of a px value. However, when we use these values, it allows us to conceptualize our design in pixels. For example, we do not want the header, main or footer elements to be wider than 1200px, so instead of specifying 1200px as the max-width, we have to covert that 1200px to rems by multiplying it with the @toREms variable, for example:

1200 * @toRems;

The output value will be 75rem, which means that if a browser or user sets the default font-size to something different from the default size of 16px, then the entire site will scale proportionally. You can also do the same to generate em values, instead of using the @toEms variables.

.Row() mixin

@default-width: 1200 * @toRems;

.Row ( @width : @default-width ) {
    max-width: @width;
    width: 100%;
    margin: 0 auto;
    // clear at the end of container
    &:before,
    &:after {
        content:"";
        display:table;
    }
    &:after {
        clear:both;
    }
}

As you can see, the first mixin being used is the .Row() mixin. Instead of using the “.container” classes, you can call this mixin wherever you want an element to be centered with a maximum width. For our classic layout, we call this mixin on the header, main, and footer elements.

The mixin sets a max-width with a width of 100%. This will give us basic responsiveness by making the element automatically adjust to fill the available space when the viewport gets smaller than the max-width value. It also sets the margin to 0 auto making the elements to be automatically centered.

Lastly, it adds the pseudo-elements :before and :after and also uses them to automatically clear at the end of an element. This is required so that when adding columns inside the element, their float settings will be cleared.

The mixin accepts one parameter, a @width value:

.Row (@width : @default-width ) {

The value now gets passed to the max-width property:

max-width: @width;

If the mixin has a width parameter passed, e.g. .Row(40rem), the value will then be applied to the max-width property.

However, if the mixin is called without passing a parameter, i.e. .Row, then, the default value will be used. That default value is stored in the @default-width variable, which is set where you see:

@default-width: 1200 * @toRems;

All this means that the default maximum width of any element this mixin is used on will be 1200px, converted into 1200rem. Using this mixin allows you to set any element to be centered at your default max-width, or any other max-width you may want to apply. What this means is that you can change the width of the entire site by changing the value of the @default-width variable. Let’s say for example:

@default-width: 800 * @toRems;

.Cols() mixin

@default-colspan: 1;

@default-total_cols: 4;

.Cols ( @colspan : @default-colspan; @total_cols : @default-total_cols ) {
    width: ( @colspan * (100 / @total_cols) ) + 0%;
    float: left;
}

Because we are not using fixed pixels, all our column widths will have to be percentage-based, because we want our layout to remain completely flexible. To calculate these percentages, we use .cols() mixin. According to the values you put into the mixin, a simple formula is used to determine the percentage width value that should be applied to the element. The element’s float value is set to left, so that columns will sit side by side (remember that we automatically clear floats that are applied to the columns via the .Row() mixin).

The .cols() mixin allows you to specify how many columns wide you want your element to be, the same thing you could if you were using the standard CSS grid system. This is normally done by passing a @colspan parameter through the mixin, or you can set the default for the mixin via the @default-colspan variable.

But, unlike most CSS grid systems, you have complete control over how many total that value is relative to, rather than having access to only 12 or 16 columns. You can set the total columns by passing a @total_cols parameter through the mixin, or you can just the mixin default via the @default-total_cols variable. Sounds cool right?

In the earlier example of a “classic” layout which I gave above, using CSS grid, the content area was set to 9 out of 12 available columns,(3/4), while the sidebar was set to 3 out of 12 columns(1/4). Well, we do not need all 12 columns, and we do not need to break the layout into twelve, all we need is quarters, because we are trying to set the content area to 3/4 width, and the sidebar to 1/4 of the width. So, all we have to do now is set the value of the @default-total_cols to a variable of 4. For example:

@default-total_cols: 4;

Then, we are going to use the mixins as we did in our “classic” layout above. The mixins assume that you want your columns to have a possibility of 4 total columns. So, for us to set our article element to 3/4 width, you can do this:

article {
    .Cols( 3 );
}

then, if you want to set the sidebar to 1/4 width, you can do this:

aside {
    .Cols( 1 );
}

Let’s say you want to use a different number of total columns, we can do this by passing different values through the .cols() mixin. This will allow us to change the widths of the article and aside elements to any we want. Example:

article {
    .Cols( 7, 11 ); // sets this element to span 7 of a total 11 columns
    min-height: 500 * @toRems;
    background-color: #ddd;
}

aside {
    .Cols( 4, 11 ); // sets this element to span 4 of a total 11 columns
    min-height: 500 * @toRems;
    background-color: #eee;
}

Awesome right?

Adding Padding And Margins

When you begin adding content inside your container, you definitely would want to have the ability to control the spacing around it. There are ways you can control your spacing, and the best to use depends on what you are trying to achieve with the specific design you are trying to create.

Adding Padding

One of the easiest ways you can control your spacing is by using the simple addition of padding parameters to both .Row() and .Cols() mixins. We are going to adjust our mixin code as shown below:

@default-padding: 0;

.Row ( @width : @default-width; @padding: @default-padding; ) {
    max-width: @width;
    width: 100%;
    margin: 0 auto;
    padding: @padding;
    // clear at the end of container
    &:before,
    &:after {
        content:"";
        display:table;
    }
    &:after {
        clear:both;
    }
}

.Cols ( @colspan : @default-colspan; @total_cols : @default-total_cols; @padding: @default-padding; ) {
    width: ( @colspan * (100 / @total_cols) ) + 0%;
    float: left;
    padding: @padding;
}

We can now add padding to our header, article, aside, and footer elements. Note, we are also going to be setting the default box-sizing property all through the design to border-box so, padding does not get included in any browser calculation of the width of elements:

* {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
}

header, footer {
    .Row ( 
        @padding: 20 * @toRems;
    );
    background-color: #ccc;
    min-height: 200 * @toRems;
}

main {
    .Row;
    background-color: #ccc;
}

article {
    .Cols (
        @colspan: 3;
        @padding: 10 * @toRems 20 * @toRems;
    );
    min-height: 500 * @toRems;
    background-color: #ddd;
}

aside {
    .Cols (
        @colspan: 1;
        @padding: 10 * @toRems 20 * @toRems;
    );
    min-height: 500 * @toRems;
    background-color: #eee;
}

This will give us padding around each of our pieces of content, as shown below:

Adding Wrapper Margins

In some cases, the spacing that is intended to be added to a design is on the outside of an element, instead of the inside, for example, when you want a site’s background to show through between the elements. For this to happen, we have to make further additions to bot the .Row() and .Cols() mixins.

To get started, let’s allow spacing to be added above and below the elements that have our .Row() mixin applied to them. This can be done by simply replacing the existing margin property value with a variable that can be sent as a parameter all through the mixin.

@default-row_margin: 0 auto;

.Row ( @width : @default-width; @padding: @default-padding; @margin: @default-row_margin; ) {
    max-width: @width;
    width: 100%;
    margin: @margin;
    padding: @padding;
    // clear at the end of container
    &:before,
    &:after {
        content:"";
        display:table;
    }
    &:after {
        clear:both;
    }
}

As you can see, the default value for the row margin is still set to 0 auto, therefore, if no parameter is passed, the mixin will still center the element automatically.

If we pass an @margin value through the mixin:

header, footer {
    .Row ( 
        @padding: 20 * @toRems;
        @margin: 10 * @toRems auto;
    );
    background-color: #ccc;
    min-height: 200 * @toRems;
}

…we are going to be able to add vertical spacing as see below:

Also, if you do not want your element to center anymore, all you have to do is pass a @margin value of 0 auto 0 0 to left align an element, or you can do 0 0 0 auto to right align.

Adding Column Gutters

One of the common features of CSS grid systems is its ability to add gutters between the columns, i.e. margins that apply between each columns but not to the outside of the outermost columns. Once again we can add this functionality with some additions to the Cols() mixin:

@default-gutter: 0;

.Cols ( @colspan : @default-colspan; @total_cols : @default-total_cols; @padding: @default-padding; @gutter: @default-gutter; @edge: false; ){
    @total_gutter: (@total_cols - 1) * @gutter;
    @spanned_gutters: (@colspan - 1) * @gutter;
    width: ( @colspan * ( (100 - @total_gutter) / @total_cols) ) + @spanned_gutters + 0%;
    float: left;
    padding: @padding;
    .IfEdge (@edge; @gutter);
}

.IfEdge ( @edge; @gutter; ) when (@edge = false) {
    margin-right: @gutter + 0%;
}

.IfEdge ( @edge; @gutter; ) when (@edge = true) {
    margin-right: 0;
}

Now, the mixin does two extra things;

First, it checks for a value via the new @gutter parameter and goes on to factor it into the width calculation for the column.

Note: the @gutter ****value should be a number used as a percentage value. For example 2 for a 2% gutter.

Secondly, it goes on to check the new @edge variable to see is set to true or false. If it is set to false, the value of the @guttter parameter is added to the right margin as a percentage. IF it is set to true, the right margin is set to 0. This will allow you to specify where a column is at the edge of your layout and therefore, should not have an applied gutter.

In the example I will be showing you below, I will be showing you the effect of this change on the mixin. I have added two extra article element to our HTML. Also, I have adjusted the LESS for the article and aside elements, as shown below;

article {
    .Cols (
        @colspan: 1;
        @padding: 10 * @toRems 20 * @toRems;
        @gutter: 1; //include a gutter of 1%
    );
    min-height: 500 * @toRems;
    background-color: #ddd;
}

aside {
    .Cols (
        @colspan: 1;
        @padding: 10 * @toRems 20 * @toRems;
        @gutter: 1; //include a gutter of 1%
        @edge: true; //this is the column on the edge so don't set a right margin
    );
    min-height: 500 * @toRems;
    background-color: #eee;
}

the result is this;

To allow for control over vertical margins on columns, all we have to do is include some additional parameters in the mixin as shown below:

@default-margin_top: 0;

@default-margin_bottom: 0;

.Cols ( @colspan : @default-colspan; @total_cols : @default-total_cols; @padding: @default-padding; @gutter: @default-gutter; @edge: false; @margin_top : @default-margin_top; @margin_bottom : @default-margin_bottom; ){
    @total_gutter: (@total_cols - 1) * @gutter;
    @spanned_gutters: (@colspan - 1) * @gutter;
    width: ( @colspan * ( (100 - @total_gutter) / @total_cols) ) + @spanned_gutters + 0%;
    float: left;
    padding: @padding;
    .IfEdge (@edge; @gutter; @margin_top; @margin_bottom; );
}

.IfEdge ( @edge; @gutter; @margin_top; @margin_bottom;  ) when (@edge = false) {
    margin: @margin_top @gutter + 0% @margin_bottom 0;
}

.IfEdge ( @edge; @gutter; @margin_top; @margin_bottom;  ) when (@edge = true) {
    margin: @margin_top 0 @margin_bottom 0;
}

The top and bottom margin settings can now be included when we use the .Cols() mixin, as shown below:

article {
    .Cols (
        @colspan: 1;
        @padding: 10 * @toRems 20 * @toRems;
        @gutter: 1;
        @margin_top: 20 * @toRems;
        @margin_bottom: 30 * @toRems;
    );
    min-height: 500 * @toRems;
    background-color: #ddd;
}

aside {
    .Cols (
        @colspan: 1;
        @padding: 10 * @toRems 20 * @toRems;
        @gutter: 1;
        @edge: true;
        @margin_top: 20 * @toRems;
        @margin_bottom: 30 * @toRems;
    );
    min-height: 500 * @toRems;
    background-color: #eee;
}

…this would add vertical margins to the columns, as shown in the example below:

Nesting And Increasing Layout Complexity

To add another level of complexity to our example layout, we have to increase the number of article elements to 6 and place them inside a section element wrapper, then we can apply our mixins to create the layout in the example below:

I have made changes to the HTML to get the layout above, as you can see below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Classic Layout</title>
    <script type='text/javascript' src='js/modernizr.js'></script>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/classiclayout.css">
</head>
<body>
<header>
    <h1>Site Title</h1>
</header>
<main>
    <section>
        <h1>Latest Articles</h1>
        <article>
            <h1>Article Title</h1>
            <p>...</p>
        </article>
        <article>
            <h1>Article Title</h1>
            <p>...</p>
        </article>
        <article>
            <h1>Article Title</h1>
            <p>...</p>
        </article>
        <article>
            <h1>Article Title</h1>
            <p>...</p>
        </article>
        <article>
            <h1>Article Title</h1>
            <p>...</p>
        </article>
        <article>
            <h1>Article Title</h1>
            <p>...</p>
        </article>
    </section>
    <aside>
        <p>...</p>
    </aside>
</main>
<footer>
    <p>Example Footer</p>
</footer>
</body>
</html>

We are also going to change the LESS code we are using to control the layouts as shown below:

header, footer {
    .Row ( @padding: 20 * @toRems; @margin: 10 * @toRems auto; );
    background-color: #ccc;
    min-height: 100 * @toRems;
}

main {
    .Row;
}

section {
    .Cols ( @colspan: 3; @padding: 10 * @toRems 20 * @toRems; @gutter: 1; );
    background-color: #ddd;
}

aside {
    .Cols ( @colspan: 1; @padding: 10 * @toRems 20 * @toRems; @gutter: 1; @edge: true; );
    min-height: 500 * @toRems;
    background-color: #eee;
}

article {
    .Cols ( @colspan: 1; @total_cols: 3; @padding: 0 20 * @toRems 20 * @toRems 20 * @toRems; @margin_bottom: 20 * @toRems;  @gutter: 2; );
    background-color: #eee;
    &:nth-of-type(3n) {
        margin-right: 0;
    }
}

As you can see above, the section element has been set to take up 3 columns of the default of 4 total columns(3/4). Next to the section is the aside element, which is set to 1 column of 4(1/4). The section element acts as a wrapper for the article. Since the article elements are now nested, they can have all the new column width applied to them, and they will now each take up a percentage of their parent element’s interior. Therefore, each is set to 1 column out of 3, with a gutter of 2%.

All third article is identified by using the :nth-of-type(3n) selector and set to have no right margin/gutter.

Conclusion

We have gone through so many details in this article on how the .Row and .Cols mixins work so that you can have an understanding, for you to be able to make further additions and modifications if you want. The result of all we have covered is actually a simple and easy-to-use layout system.

By using just two mixins, you can now create highly complex, but scalable and flexible layouts, without restrictions. You can also use any total number of columns you feel like, width of gutters, and you can nest your grids as much as needed, etc.

A Complete Guide To Using CSS Custom Variables

Chisom Uma — Mon, 28 Feb 2022 07:00:58 +0000

Sometimes in CSS, values tend to show up multiple times or repeat themselves throughout your code. Imagine if you have a much bigger style sheet file, you will have to keep reusing these values again and again. That’s pretty stressful right?. Well, at some point, you might want to change every occurrence of a particular value. I know you may be asking “can’t i just do a find and replace?”. Doing a find and replace will work, but there is a much easier way you can change these values, and that is where CSS variables come in.

Outline

The Basics Of CSS Variables
- What Are CSS Variables
- Inheritance
- Working with Invalid Variables and Fallback Values
- Using CSS Variables With Inline Styles
- Storing Single and Multiple Values
What You Should Know About CSS Variables
- Using Variables With Media Queries
Conclusion

The Basics Of CSS Variables

What Are CSS Variables
CSS custom variables, also known as CSS variables or cascading variables, are entities that contain specific values that can be reused throughout a document. It is usually set using a custom property notion.

for example:

--main-color: black;

and can be accessed using the var() function.

color: var(--main-color);

When looking at the style sheet below, you notice that there are some values of some elements that keep repeating themselves. For example, the border-radius, the color #0176b8 (which we have on the border of the button, background color, main color for our anchor tags, and down on the inverse button), and for the images we also use the width and height of 2.5rem.

.btn{
  text-decoration: none
  color: white
  background-color: #0176b8
  display:inline-block
  padding: 1px
  border-radius: 5px
  border: 1px solid #00176b8
}

.btn.inverse{
  background-color: white;
  border-color:#0176b8
  color: #0176b8
}

.table img{
  width: 2.5rem
  height: 2.5rem
  border-radius:50%
}

Now, if you notice, these values show up, multiple times.

To get started, you have to define your variables inside the root pseudo-class, and this applies to the entire HTML document.

:root{

}

To define a variable, you will have to start with a double hyphen, and then you input the name of the variable next. For instance color -primary; then put in the value. Lets say the #0176b8 color.

:root{
  --color-primary; #0176b8
}

You have now justified the variable by doing this. The next thing is to use the variable in your CSS code, by replacing that value with var, open parenthesis and then you put the name of your variable inside.

a{
  color: var(--color-primary);
}

This will make all the anchor links, for example, to be defined by the variable. Remember that color #0176b8 is also the main color for the anchor tags. The awesome thing about this is that you can easily replace the value with another value. For instance, you can replace the color #0176b8 with let’s say Yellow, and all the elements that use that variable will get updated. Now instead of find and replace, you can just replace all the #0176b8 or colors in your CSS codes with your variable var(--color-primary);. Now if you change the color value, to let’s say yellow, every thing else changes to yellow. That’s pretty awesome, right?

:root{
  --color-primary; yellow
}

Let’s transform something else into a variable, like a border-radius for example. You can define another variable, by imputing borer-radius with 5pixels

:root{
  --color-primary; #0176b8
  --global-radius 5px;
}

All you have to do now is replace the border-radius with var(), global radius

.btn{
  text-decoration: none
  color: white
  background-color: #0176b8
  display:inline-block
  padding: 1px
  border-radius: var(global-radius);
  border: 1px solid #00176b8
}

.card {
    max-width: 50rem;
    background-color: white;
    padding: 2rem;
    border-radius: var(--global-radius);
    box-shadow: 1px 1px 15px 0 rgba(0, 0, 0, .25);
}

If you go to - - border-radius and change the value from 5px to maybe 20px you will notice the cards and buttons updating automatically.

As for the case of browser compatibility, if you open caniuse, you can check the browsers that are compatible with the CSS variables, as shown in the image below:

In this image, you can see that it is supported in most of the browsers, well except in internet explorer.

Inheritance
Inheritance controls what happens when there is no value specified for a property on an element;

<body>
  <div>
   <p>Hello</p>
  <h1>Text</h1> 
</body>

Now, if you apply styles to the body tag, then everything within the body tag will inherit those styles. Let’s assume we want everything under the body tag to have a font color of blue, all you have to do is;

.body{
  color: blue;
}

and everything under the body tag turns blue. Pretty cool right? well, that’s because everything within the body are inheriting that style. Let’s now say we want everything under the <div> tag to be yellow, you can do this:

.body{
  color: blue;
}
.div{
  color: yellow;
}

and everything in the <div> tags overrides the inherited styles of the <body>tag, and turns yellow, while the rest remains blue. So! what if you want only the <p> tag to be green even though they already have the <div> tag of yellow. Well, you can just do this:

.body{
  color: blue;
}
.div{
  color: yellow;
}
.p{
  color: green;
}

Working With Invalid Variables and Fallback Values

We are going to be learning what happens when certain CSS variables are invalid, and how the browser is going to deal with this, coupled with how to provide fallback values for CSS variables. Let’s get started!

<P> learning css variables<p>

then inside the CSS, you can write this;

:root{
  --color: 1rem;
}

As you can see, this is invalid, and we are going to see how the browser deals with it;

:root{
  --color: 1rem;
}
.body{
  display: flex;
  height: 100vh 
  align-items:center;
  justify-content: center:
}
.p{
  max-width: 50%
  color: var(--color);
}

at this point, nothing happens because the color variable is invalid, i.e. it has an invalid value for the color property. Now, the browser checks if the color property can be inherited. So it looks at its parents to see if there is a color defined there. If you notice, the body, which is the parent element of the <P> tag does not have a color defined. In this case, the browser will go back to the initial value of the color, which is black, so the text still appears black. Even if you were to set a color of green in the

tag it still won’t work, because of the cascading nature of CSS. However, let’s say we defined color of blue in the body;

:root{
  --color: 1rem;
}
.body{
  display: flex;
  height: 100vh 
  align-items:center;
  justify-content: center;
  color: blue;
}
.p{
  max-width: 50%
  color: var(--color);
}

Now, the text changes to blue, because we have defined the color off the body. If you remove the blue, the browser will automatically revert to the initial color, which is black. Hopefully, you understood this.

I am now going to show you how to define some fallback values for CSS variables. This is a simple mark up below;

<ul class="menu">
  <li><i class="far fa-bell"></i></li>
  <li><i class="far fa-bookmark"></i></li>
  <li><i class="far fa-calendar"></i></li>
</ul>

then for the CSS, i added some demo styles for the body;

.body{
  display: flex;
  height: 100vh;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

the next thing is to define our menu by defining some variables ;

.body{
  display: flex;
  height: 100vh;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
} 

.menu{
  --item-size: 3rem;
  --font-size: 18px
  --item-color-1: black;
  --item-color-1: green;

  list-style:none
  padding: 0
  margin: 0
  display: flex;
  gap: calc(var(--item-size)/4);
  font-size: var(--font-size);
}

trust me! it gets interesting from here. Now I am going to do this;

.body{
  display: flex;
  height: 100vh;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
} 

.menu{
  --item-size: 3rem;
  --font-size: 18px
  --item-color-1: black;
  --item-color-2: green;

  list-style:none
  padding: 0
  margin: 0
  display: flex;
  gap: calc(var(--item-size)/4);
  font-size: var(--font-size);
}

.menu li{
  background-color:var(--item-color-1,red);
  color: white;
  width: var(--item-size);
  height: var(--item--size);
  text-align: center;
  line-height: var(--item-size);
  border-radius: 5px;
}

Now, if you are going to use the var function like this, by adding a second parameter, what you are saying is, use item color 1 if it is defined, otherwise use the color red. So, if item color 1 was not defined, (--item-color-1, red); does not exist. You can even do;

.menu li{
  background-color:var(--item-color-2, blue));
  color: white;
  width: var(--item-size);
  height: var(--item--size);
  text-align: center;
  line-height: var(--item-size);
  border-radius: 5px;
}

what this means is that, you can say var(), and inside the var() you are saying, if item color 1 does not exist, then use item color 2 and if that does not exist, use another color, e.g. blue; if item color 1 was not defined, it uses item color 2. If item color 2 was not defined, it uses the fallback which is blue.

Note that this is not a solution for invalid variables. Therefore, you cannot use this fallback to fix invalid variables.

Using CSS Variables With Inline Styles

Using inline styles in production is not recommended in the final stages of your code, but it can break the CSS specificity that you defined in your style sheet. Although, you can use inline styles during development or testing. So, I will be showing you how variables can help you. Lets’ check out the simple grid i designed below in HTML;

<div  class= "grid">
  <div class= "grid-item">
    <img src="https://media.istockphoto.com/photos/advertising-concept-confident-and-smiling-young-african-american-picture-id1290599844?b=1&k=20&m=1290599844&s=170667a&w=0&h=mKM_VHxQK1N0l5ojPiG9mcIRERgt4RqMqfP5Z9hnKN8= "> 
    </div>


    <div class= "grid-item">
      <img src="https://media.istockphoto.com/photos/advertising-concept-confident-and-smiling-young-african-american-picture-id1290599844?b=1&k=20&m=1290599844&s=170667a&w=0&h=mKM_VHxQK1N0l5ojPiG9mcIRERgt4RqMqfP5Z9hnKN8= "> 
      </div>
</div>

Then i have the CSS;

.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
  grid-gap:var(--gap);
  margin-button 2rem;
}

.grid-item{
  background-color: #705ae3;
  color: white;
  display:flex;
  align-item: center;
  justify-content:center;
  padding: 2rem;
}

.img{
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%
  border: 2px solid white;
}

all you have to do here is define the actual variables, and we are going to define them in the root;

:root{
  --avatar-size: 3rem;
  --column-width: 20rem
  --gap: calc(var(--column-width)/ 10);

}

Now, let’s say during development or during testing, you can play around with different values for the grid, without opening up the CSS file again. You can do this from your browser or HTML using inline styles, as seen in the example below;

<div  class= "grid" style="--column-width: 12rem">
  <div class= "grid-item">
    <img src="https://media.istockphoto.com/photos/advertising-concept-confident-and-smiling-young-african-american-picture-id1290599844?b=1&k=20&m=1290599844&s=170667a&w=0&h=mKM_VHxQK1N0l5ojPiG9mcIRERgt4RqMqfP5Z9hnKN8= "> 
    </div>


    <div class= "grid-item">
      <img src="https://media.istockphoto.com/photos/advertising-concept-confident-and-smiling-young-african-american-picture-id1290599844?b=1&k=20&m=1290599844&s=170667a&w=0&h=mKM_VHxQK1N0l5ojPiG9mcIRERgt4RqMqfP5Z9hnKN8= "> 
      </div>
</div>

You can now play around with the size here. For instance, you can change the size from 12rem to 15rem, depending on which one you want to work with. Why this is cool is because you don’t have to change anything in your CSS file. Note, please do not use this in your final code.

Storing Single and Multiple Values
In this lesson, you will learn about what values you can store inside a CSS variable. You will see that you can store multiple values in the same variable. Let’s start with this simple HTML, which is a card with a paragraph and a button inside;

<div class="card">
  <h1> How are you today</h1>
  <p> i am fine thank you</p>

  <a href="a" class="btn">close window</a>
</div>

let’s write the CSS;

.body{
   display:flex;
   height: 100vh
   align-items: center;
   justify-content: center:
   background-color: #ececec;
   line-height: 1.35;
}

CSS variables are not just for holding numbers, pixel values, or colors. They are also capable of holding gradients for example;

:root{
  --body-bg: linear-gradient(120deg, #705ae3 0%, #8ec5fc 100%);
}

.body{
   display:flex;
   height: 100vh
   align-items: center;
   justify-content: center:
   background-color: #ececec;
   line-height: 1.35;
}

now you can go into your body and say;

:root{
  --body-bg: linear-gradient(120deg, #705ae3 0%, #8ec5fc 100%);
}

.body{
   background-image: var(--body-bg);
   display:flex;
   height: 100vh
   align-items: center;
   justify-content: center:
   background-color: #ececec;
   line-height: 1.35;
}

as i stated above, variables are capable of holding multiple values, i will be demonstrating with another example using button color;

:root{
  --body-bg: linear-gradient(120deg, #705ae3 0%, #8ec5fc 100%);
  --button-color: 107, 93, 227;
}

.body{
   background-image: var(--body-bg);
   display:flex;
   height: 100vh
   align-items: center;
   justify-content: center:
   background-color: #ececec;
   line-height: 1.35;
}

.btn{
  background-color: rgb(var(--button-color));
  display: inline-block;
  color: white;
  padding: 1rem 2.5rem;
  text-decoration:none;
  border-radius: 100px;
}

as you can see, you can use the 107, 93, 227; and define the color as rgb.

What You Should Know About CSS variables

Using CSS Variables With Media Queries and JavaScript
In this lesson, you are going to learn how to use CSS variables inside media queries, and how to change their value with JavaScript. For the HTML, we are going to use a simple grid;

<div class="grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
</div>

for the CSS;

.body{
  padding: 2rem;  
}

.grid{
  --grid-item-color: #8ec5fc
  --column-width: 100%;
  --gap: 1rem;

  display: grid;
  grid-template-column: repeat(auto-fill, minmax(var(--column-width),1fr));
  grid-gap: var(--gap);
}

.grid-item{
  background-color: var(--grid-item-color);
  color: white;
  display: fle;
  align-items: center;
  padding: 2rem;
}

Now, this version of the grid will work on all screen sizes, but what if you want to split up into multiple columns when it reaches or surpasses a certain screen width, all you have to do is use media query, as shown in the example below;

.body{
  padding: 2rem;  
}

.grid{
  --grid-item-color: #8ec5fc
  --column-width: 100%;
  --gap: 1rem;

  display: grid;
  grid-template-column: repeat(auto-fill, minmax(var(--column-width),1fr));
  grid-gap: var(--gap);
}

.grid-item{
  background-color: var(--grid-item-color);
  color: white;
  display: fle;
  align-items: center;
  padding: 2rem;
}

@media screen and (min-width: 720px) {
  .grid{
     --column-width: 10rem;
     --gap: calc(var(--column-width)/ 10);
  }
}

Now, when we go past 720 pixels, you see the changes in the grid from the stacked version to using actual columns, all thanks to the media query. Now, what about JavaScript, you can read CSS variables from JavaScript, and you can change the color. Let me show you in the example below;

let targetElem = document.querySelector('.grid');
targetElem.style.setProperty('--grid-item-color', 'purple');

Now, you can see that when we go back to the original code, i.e. the one outside the media query, it actually changes the color to whatever color you want, you can change the ‘purple’ color to ‘yellow’.

Conclusion
What I have done in this article, is to explain what CSS variables mean, and how to use them in your style sheet file. In the aspect of web development, speed and flexibility is very important, and CSS variables helps with these.

If you implement your CSS variables properly, it will make your code more readable and accessible, and still provide a semantic meaning to your values.