C&W Frontend tool: Making frontend easier

C&W Frontend tool: Making frontend easier

Frontend frameworks are usually made up of a structure of files and folders of code such as HTML, JS and CSS. With responsive web design as a requirement, the development of websites have to adapt to various desktop and mobile sizes. One of the benefits for using a front end framework or tool is to solve the problem of making a site responsive while reducing the work involved.

Some more benefits are;

  • Speeds up the mockup process

  • A starter kit of HTML, JS and CSS code is provided

  • Well tested code

  • Browser compatible

  • Helps with work collaboration

  • Provides flexibility

  • Available updates and documentation

  • Keeping consistency

The C&W frontend tool provides developers with a set of (optional) tools to help during development. It consist of the following;

  • Gulp: automates workflow during development by complying sass into css when a sass file is saved.

  • Gulp-sass: Light-weight wrapper around node-sass to help with fast rendering.

  • SMACSS: Scalable and Modular Architecture for CSS (SMACSS) helps to structure code into various parts such as base, components, layouts, pages, utilities. This makes it easier for developers to find and work with code that is well-structured.

  • Sass doc: Helps with writing and viewing documentation on variables, mixins, functions and placeholders.

  • Source maps: Helps to map CSS generated by a processor (e.g Sass) back to the original file.

  • BrowserSync: Enables a live reload on the browser for every change made in sass which immediately appears on the site without having to reload.

  • Autoprefixer: helps with adding vendor prefixes for IE, chrome, firefox and opera

  • Sass lint: checks coding standards to ensure consistency and keeping the scss files clean

  • Susy grid system: helps to build quick and powerful layouts.

  • Breakpoint module: helps in writing media queries for different desktop and mobile sizes.

When the C&W frontend tool is installed, The sass folder contains the following directories;

  • Base

  • Components

  • Layouts

  • Pages

  • Utilities

Each folder can contain @import (http://sass-lang.com/guide#topic-5) to include partial files. For example, the base sass file (Primary stylesheet) in the base folder can contain the following;

////////////////////////

// Base File

// Imports base partials.

////////////////////////

@import 'reset';

@import 'media';

@import 'typography';

Using this example, ‘reset.scss’, ‘media.scss’ and ‘typography.scss’ are also stored under the Base folder as partials.

Base: This consist of base rules as defined by SMACSS (https://smacss.com/book/type-base). It contains only base HTML styles with no classes.

Components: This is the meat of the stylesheet. They are discrete parts of the page where extracted components should be placed to allow reuse throughout the theme. They should not rely on context (e.g. `.sidebar-first .component`)and should be flexible to respond to any width. Sub-component are the individual parts that make up a component. As a general rule, adding a class to target a sub-component is a much better option than using descendant selectors or element selectors. Almost everything not in the base should belong in the component. Component do not only contain classes but can also contain placeholder for your component.

Layout: CSS, by its very nature, is used to lay elements out on the page. However, there

is a distinction between layouts dictating the major and minor components of a page.

The minor components such as a callout, or login form, or a navigation item sit

within the scope of major components such as a header or footer. This folder can also contain grid-like styling.

Pages: This folder focuses on the top level page classes. It is important to remember that a page is made of components so there would not be a lot of styling in this folder. The Pages folder can contain page specific overrides based on (Drupal) page level classes.

Utilities: This folder is identified as a “helper”. It consist of a collection of variables and any generic mixins or functions. Similar to other programming languages, variables makes it much easier to maintain and ensure consistency throughout the stylesheets. These variables can consist of colors, breakpoints, fonts, spacing (such as padding and margin) and transition.

With this structure, creating styles become better and easier to maintain and extend. It also makes it easier to find various classes within the project and reduce the number of line code within a single file.

 

Cwsass folder structure

This tool can be found on github as CWsass