Practical Ecommerce

CSS, JavaScript Frameworks for Ecommerce Sites in 2016

Foundation is one of the most popular CSS frameworks currently available.

Foundation is one of the most popular CSS frameworks currently available.

The CSS and JavaScript frameworks an ecommerce business chooses can have a significant impact on that business’s website features, performance, and development costs.

The combination of programming languages, frameworks, libraries, and software used to build an application, like a website, is sometimes called a stack or a technology stack. In the web application context, the full stack, meaning all of the technologies involved, may be divided into two sections: the back-end and the front-end. The front-end stack describes the technologies, frameworks, and languages used to present the site.

HTML, CSS, and JavaScript

At its most basic, the front-end web development stack includes three languages.

  • Hypertext Markup Language (HTML). Describes the web page structure.
  • Cascading Style Sheets (CSS). Describes how page elements look or how elements are presented in the web browser.
  • JavaScript. Provides user interaction or other features.

The Front-end Stack Matters for Ecommerce

HTML, CSS, and JavaScript work together on just about every website in existence, but not every implementation is the same. How the front-end stack is employed matters for at least three reasons.

  • Feature development. Some CSS or JavaScript frameworks make it easier, relatively speaking, to implement a specific feature.
  • Development cost. Well-understood and popular CSS or JavaScript frameworks may be less expensive to use. If a framework is popular, a greater number of web developers will be familiar with it. When more developers are familiar with a framework, they will compete. Familiarity may also mean the work can be done more quickly.
  • Site performance. A poorly written script could slow down a store’s website, discourage shoppers, and hurt the bottom line.

Popular CSS Frameworks

A CSS framework uses a combination of technologies and standard classes to make presenting website content easier and more robust. Specifically, a CSS framework will often implement a preprocessor to allow for variables or mixins, which are not part of the basic CSS standard.

Here is an example of how a CSS variable might be used. Imagine a company using the color #009bff for its brand, a header, and as the background color for a few sections of its website. In CSS this color declaration would be repeated several times.

// Example CSS
.brand {
    color: #009bff;
}
h1 {
    color: #009bff;
}
.jumbotron {
    background-color: #009bff;
}
footer {
    background-color: #009bff;
}

With extended SCSS (Sassy CSS) a variable is declared, then the variable name is used instead of the color.

// Example SCSS with Variable
$brand-blue: #009bff;
.brand {
    color: $brand-blue;
}
h1 {
    color: $brand-blue;
}
.jumbotron {
    background-color: $brand-blue;
}
footer {
    background-color: $brand-blue;
}

At first glance, it doesn’t seem like the variable provided much of a benefit. There is now an extra line declaring the variable, and it is repeated just as many times in the CSS. But what if the store using this CSS changes its brand color from #009bff to #00c3ff? The basic CSS would require a change every instance of the color, but the SCSS could be completely changed with just one line.

$brand-blue: #00c3ff;

Similarly, frameworks will provide ready-to-use classes for common site presentation. As an example, imagine a site wants to present a navigation section. The site’s designer or front-end developer could write a lot of CSS describing the navigation’s position, margin, padding, colors, or more. A second option would be to use a navigation class already available as part of a framework. In this second example, a couple of class declarations are all that is needed.

<nav class=”navbar navbar-default”>
Foundation is one of the most popular CSS frameworks currently available.

Foundation is one of the most popular CSS frameworks currently available.

In 2016, there are two superb CSS frameworks, in my view, that should be considered for ecommerce websites.

  • Bootstrap. As the most popular CSS framework, Bootstrap is the current gold standard for site presentation, rapid CSS creation, and consistency. It can be used with many, if not most, ecommerce platforms. And the vast majority of web designers and front-end developers are familiar with Bootstrap.
  • Foundation. Built to provide CSS for websites, email, and applications, Foundation is also widely used and understood.

With Bootstrap or Foundation you can get the benefits of using a CSS (or, really, CSS and some JavaScript) from widely understood and used frameworks.

Popular JavaScript Frameworks

JavaScript frameworks have evolved into extremely powerful tools capable of running and managing complete applications. Often these modern frameworks will implement some version of the model-view-control pattern and they may be modular in nature, making it easy to reuse code.

Vue.js is a powerful JavaScript framework for modern site development.

Vue.js is a powerful JavaScript framework for modern site development.

There is significant competition among JavaScript frameworks, with four leading, in my view, the way at present.

  • AngularJS. Powered by Google, AngularJS is as much a method for building a JavaScript framework as it is a framework itself. It is also one of the most popular JavaScript frameworks at present.
  • React. React, by Facebook, is a component-based and declarative JavaScript framework. It is another leader in JavaScript frameworks and a very solid choice.
  • Vue.js. A favorite in the Laravel community, Vue is an easy-to-use and is rapidly growing to be one of the most popular of this new generation of JavaScript frameworks.
  • Ember. To quote its website, Ember “incorporates common idioms so you can focus on what makes your app special.”

With any of these four frameworks, an ecommerce site can get the best JavaScript has to offer at present.

CSS and JavaScript Frameworks Change

The CSS and JavaScript frameworks a company used a few years ago to build a website have changed. The jQuery Library, as an example, advanced JavaScript so far that it felt refreshing to write. Now many web developers have that same sensation when they use Vue or Angular, and jQuery is, perhaps, employed less on new applications.

In a similar way, some of the frameworks described in this article may be routine in the next few years, but that is the point.

Ecommerce site owners should work to use a modern front-end stack that helps provide a feature-rich, high-performance website that is cost effective to build and maintain.

Armando Roggio

Armando Roggio

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

  1. Carlos Rivera July 12, 2016 Reply

    Very useful information. Thank you so much for this review!

    • Armando Roggio July 16, 2016 Reply

      No problem Carlos.

      I am using Bootstrap on almost everything I do currently. On the JavaScript side, I am working on a new Shopify-powered site that uses Vue.js extensively on product detail pages. I hope to finish the site this month. I will share a link with you when it launches.

      Separate from the Shopify project, I am working with a couple of other folks on a custom ecommerce platform using Apache, MongoDB, Laravel, Bootstrap, and Vue.js.

  2. Shankar July 17, 2016 Reply

    Good information, exactly I agree with you on front-end development for customer acquisition.

  3. Gopika January 6, 2017 Reply

    AngularJS is a great JavaScript framework that has some very compelling features for not only developers, but designers as well! In this tutorial, we will cover what I consider to be the most essential features, and how they can help make your next web application awesome.

    To get an idea of what you can do with AngularJS, check out the Best AngularJS Training in Chennai.