CSS Posts

The Toptal Engineering Blog is a hub for in-depth development tutorials and new technology announcements created by professional software engineers in the Toptal network.
Filip Petkovski
Apache Cordova Tutorial: Developing Mobile Applications with Cordova

Mobile applications are creeping in. Developing for each mobile platform can be an exhaustive task, especially if resources are limited. This is where Apache Cordova comes in handy by providing a way to develop mobile applications using standard web technologies - HTML5, CSS3 and JavaScript. This article explores how one can get started with Apache Cordova and build mobile applications targeted at a wide range of mobile devices.

Continue reading →
Fernando Rivas
Theming with Sass: An SCSS Tutorial

When it comes to theming; that is, changing the look and feel of your website while maintaining the same layout, Sass’ features—like mixins or functions—can feel like taking a plane instead of walking! In this tutorial on SCSS, we’re going to create a minimal theme and use SCSS to give our CSS programming some superpowers.

Continue reading →
Juan Calou
A How-to Guide to SVG Animation

The advantages of SVG on the web go beyond producing resolution-independent graphics. With a little CSS and JavaScript, you can apply cool animations and effects to your front-end without requiring the user to install bulky plugins.

Continue reading →
Rico Mossesgeld
Eight CSS Tips for Advanced Layouts and Effects

Knowledge of CSS is a fundamental skill in the web development space. However, implementing certain web design patterns with just CSS can be a frustrating task, and often requires an in-depth understanding of it.

In this article, Toptal Freelance Web Developer Rico Mossesgeld shares several CSS tips and tricks that take advantage of lesser known CSS features to solve real layout and design problems.

Continue reading →
Nicolás J. Engler
Make Your CSS Dynamic with CSS Custom Properties

If there is something every front-end developer wants, it is proper support for variables in CSS. For years, to work around this missing feature, developers have resorted to CSS preprocessors. However, all that changes with the introduction of CSS custom properties.

In this article, Toptal Freelance Software Engineer Nicolás J. Engler walks us through CSS custom properties and shows us how they can be used to make better, more dynamic stylesheets.

Continue reading →
Diego Díaz
How to Build CSS-only Smart Layouts with Flexbox

Although CSS was meant to deal with styling, creating extraordinary layouts on the web has always been a unique challenge and almost always required the developer to resort to JavaScript. However, Flexbox is here to change that.

In this article, Toptal Freelance Software Engineer Diego Díaz walks us through the basics of Flexbox and some cool examples of how Flexbox can be used to build smart CSS-only layouts.

Continue reading →
Nicolás J. Engler
PostCSS: Sass’s New Play Date

PostCSS is the hot new tool that’s making the rounds on the front-end side of web development. It has been quickly and widely adopted, and possibly will have a significant impact on how we base our present-day CSS.

In this article, Toptal Software Engineer Nicolás J. Engler introduces us and guides us on how to start using this tool, expand it with plugins, or integrate with other CSS processors, task runners, or bundlers.

Continue reading →
Eric Grosse
Webpack or Browserify & Gulp: Which Is Better?

Gone are the days where front-end developers for web applications could use ad-hoc JavaScript with jQuery and such all in a single JavaScript file. Modern web applications require more effort from the developer to adopt an overall architecture and development process. Building such front-end applications relies on lots of external dependencies and modular source code, and these elements necessitate automation to save developers time and reduce the chances of mistakes.

In this article, Toptal Freelance Software Engineer Eric Grosse shows us how various combinations of the popular tools Webpack, Browserify, Gulp and Npm can benefit us by enhancing our development environment and allowing us to focus on writing the app itself.

Continue reading →
Anton Kanevsky
Gulp: A Web Developer's Secret Weapon for Maximizing Site Speed

When dealing with web-based projects that run in the production environment, being able to build and deploy changes quickly is a top priority. However, repetitive processes such as building front-end assets, when not automated, can be prone to critical errors.

In this article, Toptal Freelance Software Engineer Anton Kanevsky shows us how Gulp can solve various challenges of build automation through simple JavaScript routines.

Continue reading →
Aleksey Abramovsky
Produce DWGs Like It's 2016: Teigha For Architecture

Today, the notion of repetitively modeling or drawing the windows, doors, and walls of standardized buildings seems archaic, so why do it? If you want to handle DWG files and ACA objects programmatically, one of the best platform options is Teigha Architecture.

In this article, Toptal Freelance Designer Alexey Abramovsky walks us through the DWG production of a small house to introduce us to the benefits of Teigha. Go from foundations to full render in this quick tutorial.

Continue reading →
Justin Brazeau
Sass Mixins: Keep Your Stylesheets DRY

Nowadays, front-end development workflows involve many modern tools and preprocessors that not only streamline the whole process, but also allow you to spend less time on common web tasks, giving you more time to focus on other aspects of the project that require more careful and skilled insight. Sass, the scripting language for syntactically awesome stylesheets, comes with robust and built-in support for mixins - an essential feature for keeping your stylesheets DRY.

In this article, Toptal Freelance Software Engineer Justin Brazeau shows us 10 useful Sass mixins that help keep your stylesheets manageable by breaking them into smaller reusable bits, each with its own focus.

Continue reading →
Tomislav Matijević
Introduction To BEM Methodology

When building smaller websites, the way developers structure their CSS code is usually not a big issue. However, when it comes to larger, more complex projects, code organization becomes crucial.

In this article, Toptal Freelance Software Engineer Tomislav Matijević introduces us to BEM methodology and explains how this CSS practice can massively improve code maintainability, speed up the development process, and streamline the teamwork of developers by arranging CSS classes into independent modules.

Continue reading →
Tomislav Bacinger
Toptal's Quick and Practical CSS Cheat Sheet

As software engineers, we’re always searching for the best tools and guides that will help us to be more productive while spending less time searching and reading long technical specifications.

Today, Toptal is pleased to present an entirely new resource to the community as a free download: a CSS Cheat Sheet. Toptal’s CSS Cheat Sheet is a quick CSS reference guide, and includes CSS syntax, the most important selectors, properties, sizes, and units, and other useful CSS details, all in a short, easily understandable format.

Continue reading →
Bryan Grezeszak
Top Ten Front-End Design Rules For Developers

Truly understanding design is easier said than done. Coding and aesthetic design require very different skill sets, which is why some front-end developers aren’t as proficient in design as they could be, and the quality of their work suffers for it.

In this post, Toptal Freelance Software Engineer Bryan Grezeszak explains why good front-end developers have to follow essential design principles down to the pixel, and should regularly seek out advice and feedback from their designers.

Continue reading →
Matt Spaulding
Build Ultra-Modern Web Apps with Angular Material

Material Design uses a paper metaphor, bold intentions, and meaningful motion to give user interfaces an ultra-modern feel. Web applications built using AngularJS can now easily adopt these design principles using Angular Material, a reference implementation of Google’s Material Design Specification.

In this article, Toptal engineer Matt Spaulding walks us through the principles of Material Design and showcases some modern user interface elements built using the Angular Material library.

Continue reading →
Stéphane P. Péricat
Electron: Cross-platform Desktop Apps Made Easy

Building cross-platform desktop applications has been something of a nightmare for a very long time, as extreme differences between popular desktop operating systems makes it a challenging feat. However, in light of newer tools and frameworks like Electron, building a cross-platform desktop application has never been easier. In this article, Toptal engineer Stéphane P. Péricat walks us through a step-by-step tutorial to building a cross-platform password key-ring desktop application using technologies that most of us are already familiar with.

Continue reading →
Lijana Saniukaite
Speeding up Application Development with Bootstrap

Bootstrap, one of the most used HTML/CSS/JavaScript front-end frameworks, offers a little more than just fancy customizable user interface elements. It provides a great starting point for many types of projects, a plethora of components, and many nifty styles predefined for responsive layout and utility classes to help keep your HTML and CSS code clean.

In this article, Toptal designer Lijana Saniukaite walks us through some practical Bootstrap tips and best practices to speed up your application development.

Continue reading →
Matias Hernandez
Sass Style Guide: A Sass Tutorial on How to Write Better CSS Code

When working on big web applications as a team with other developers, code needs to be scalable and readable. This can be a challenging process when it comes to CSS, although preprocessors like Sass are available. But only using preprocessors will only get you so far. In this article, Toptal engineer Matias Hernandez presents a style guide with advice on how to improve the way you write your code.

Continue reading →
Marcelo Mazza
Embracing Sass: Why You Should Stop Using Vanilla CSS

CSS preprocessors have been around for quite a while now. These tools, among many things, promise convenience in writing style sheets for the web. However, not everyone is taking advantage of these utilities, and is still resorting to writing vanilla CSS. In this article, Toptal engineer Marcelo Mazza discusses some of the reasons why he thinks Sass is the way to go and why you should be using it in your projects.

Continue reading →
Vedran Aberle Tokić
Responsive Design Is Not Enough, We Need Responsive Performance

Between square inch smart wristwatches and mammoth smart TVs, a responsive website capable of adapting to a wide array of screen sizes and device capabilities is something no one complains about. However, many websites are still plagued by desktop-first design paradigms, or mobile-first paradigms with absolutely no focus on performance. These traditional approaches to responsive web design have various shortcomings. Fortunately, some simple ideas can help solve these problems.

Continue reading →
Laureano Martin Arcanio
CSS Layout Tutorial: From Classic Approaches to the Latest Techniques

Mastering CSS is an absolute necessity for any solid web designer or developer. This tutorial walks you through the fundamentals of CSS layout principles, from classic CSS2 techniques to the latest approaches in CSS3. Learn more about how to leverage all that CSS has to offer in order to optimize both the user’s experience and the quality of your code.

Continue reading →
Tomislav Bacinger
The 10 Most Common Bootstrap Mistakes That Developers Make

Bootstrap is a powerful toolkit. It comes bundled with basic HTML and CSS design templates that include many common UI components. Most of the important pitfalls are mentioned in the Bootstrap documentation, but still some mistakes are pretty subtle, or have ambiguous causes. This article outlines some of the most common mistakes, problems, and misconceptions when using Bootstrap.

Continue reading →
Tomislav Bacinger
What is Bootstrap? A Short Bootstrap Tutorial on the What, Why, and How

If you’re doing anything web related, chances are you’ve heard about Bootstrap. Bootstrap is a powerful toolkit - a collection of HTML, CSS, and JavaScript tools for creating and building web pages and web applications. It is a free and open source project, hosted on GitHub, and originally created by (and for) Twitter. If by now you still don’t know what Bootstrap is, or you just want to get a better overview of what it is and what it does best, you’ve come to the right place.

Continue reading →
Anton Shkuratov
SVG Text Tutorial: Text Annotation on the Web

Texts are an integral part of user interfaces. In many cases, text annotation plays a vital role in grabbing the user’s attention or allowing the user to decorate and highlight the content they produce.

In this article, we walk through the ins and outs of an open source JavaScript library built for annotating texts on the web.

Continue reading →
Pavel Tiunov
Application Development with Rapid Application Development Framework AllcountJS

AllcountJS is an emerging open source framework built with rapid application development in mind. It is based on the idea of declarative application development using JSON-like configuration code that describes the structure and behavior of the application.

In this article, we walk through a step-by-step tutorial for prototyping a data oriented web application using AllcountJS.

Continue reading →