When you start your journey in Front-end Development, as you are introduced to HTML and CSS preferably in a project-based learning system, everything about it is very interesting. You get to develop your first project and the next after that most probably through cloning existing pages to exercise your learned knowledge which I have to say is indeed highly satisfying. As time goes on with you acquiring more knowledge in the field, that feeling of interest never seems to depreciate. (If you are not familiar with project-based learning, I greatly recommend you check out written by a friend of mine known as ). this article Witah Georjane But as you make further progress and get quite advanced, you will soon start to realize that the projects you are working on are getting bigger and bigger, and the pages demand more input and work in the course of their design and hence require more time for their completion which time you technically do not have much of. This will lead you to ask yourself a question many programmers and developers such as yourself have asked before which is, “ ”. How can I make the development process of my HTML web-pages quicker and simpler, and still produce great work and output ? Lucky for us, many programmers and developers with whom you share a mind on this have come up with numerous solutions all of which can not be covered in this article. But in an attempt to answer this wonderful question, this article will focus on as tools we can use to boost efficiency in the development process of HTML web-pages. CSS Frameworks and Preprocessors But before we get to that, written by another friend of mine known as is also a good place to look concerning boosting efficiency as a Front-end Developer. this article Lucas Delbel What are CSS Frameworks and Preprocessors and how can you use them to drive efficiency? Firstly it’s important to understand what efficiency is, According to the : Cambridge Dictionary Efficiency is the good use of time and energy in a way that does not waste any. With that definition in mind, let’s dive into how we can use CSS Frameworks and Preprocessors to achieve it. Note: This article assumes you have prior knowledge and a fairly good understanding of HTML 5 and CSS 3. If you don’t, take a look at . this course Let’s take a look at the CSS Frameworks first. There are several definitions of a framework but according to , Jeff Croft A Framework is a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. Well simply put, A CSS Framework is a set of tools and libraries involving standardized CSS properties that can be reused to make a developer’s design job easier and thus more efficient. Think of it this way, say you have a color that is generally going to appear in several elements through-out your page, you could simply assign that color to a class and use that class on all the elements you feel require that specific color in your web-page. CSS Frameworks use this above theory on a broader level; you could create your own, or you could use the already existing ones on the internet. There are numerous open-source CSS Frameworks all over the internet and the most common ones are (Bootstrap) and (Foundation). For the purposes of this article, we will only be looking at Bootstrap. Twitter Bootstrap Zurb Foundation Bootstrap is a CSS Framework that was created by developers at twitter to standardize the use of repetitive CSS styling properties used through-out their pages to ease their designing phase for more efficiency. Again, lucky for us, Bootstrap was made available to the public to benefit all developers and like any other CSS Framework, it enables you to style your HTML elements from within your HTML file by assigning bootstrap classes to those specific elements. For example, you could create a fully responsive and styled header section for your web-page by easily copying the following code from the and pasting it into your HTML file: Bootstrap web-page Fluid jumbotron This is a modified jumbotron that occupies the entire horizontal space of its parent. < = ”> div class ”jumbotron jumbotron-fluid < = > div class ”container” < = "> h1 class ”display-4 </ > h1 < = > p class ”lead” </ > p </ > div </ > div All you have to do is to import the necessary bootstrap files required to enable your project to recognize the above Bootstrap classes. You can learn how to do this and a lot more Bootstrap functionalities by viewing this short videos series tutorial below, which would essentially make you an expert in bootstrap or at least gets you up and running in 1 or 2 hours. Also, visit the official and take a look at the various classes that would provide styles to your elements ranging from colors, borders, grid systems, typography to the box-model such as margins and padding, to mention a few. bootstrap website With this, except for custom styling that would be specific to your web-page, a CSS Framework like Bootstrap would nullify the need to create a CSS file for styling your HTML elements which in my books is a pretty good boost of efficiency. Now let’s take a look at CSS Preprocessors. According to , Steven Bradley A CSS Preprocessor is a program that takes a code written in a preprocessed language and converts it into the same old CSS we have been writing for years. CSS Preprocessors enable developers to write more specific, flexible, and maintainable CSS. This is because they are not bound by the limitations of plain old CSS. Since a CSS preprocessor is written in a programming language, it provides more freedom by providing various functionalities such as variables, nesting, inheritance, mixins, functions and mathematical operations which enable easy automating of repetitive tasks such as CSS styling properties. There are numerous CSS preprocessors, the most popular ones being SASS, LESS, and STYLUS. For this article, we shall briefly look at SASS. SASS stands for “Syntactically Awesome Style Sheet” which is written in the RUBY programming language, and just like any other CSS preprocessor, it permits developers to use abstracting in their CSS code. In simple terms, this means you can generalize CSS code that applies to the styling of numerous HTML elements in a single location and get to reuse it to style those various elements. For example the use of variables that enables assigning of CSS properties to a variable name of your choice and calling that name in styling various elements of your choice in CSS. Here is a quick demonstration that is written in .scss: : red; : blue; { : ; : ; } $primary_background $primary_color body background-color $primary_background color $primary_color You can learn how to set up and use SASS as well as its associated advantages by viewing this short videos series tutorial below which will get you up and running in a few hours as well. You can also visit this for more information about SASS and CSS preprocessors in general. site In Conclusion We all agree that efficiency is highly valuable and beneficial in any production process, and the HTML pages design process is not any different. Any steps and solutions taken to boost efficiency during this process are steps in the right direction. For this reason, I believe CSS Frameworks and preprocessors ought to be incorporated by any Front-end Developer in their design process. They help to immensely reduce the work invested and time spent on styling various HTML elements which ultimately reduces time spent on each project, thus increasing the rapidness with which more projects are designed.
