CSS is notorious for getting messy quickly as a website scales. While frameworks like Bootstrap can help, SMACSS takes a different approach, as a set of solid organizational guidelines. In this article, Toptal Freelance Front-end Developer Slobodan Gajic gives us a run-down of the idea and benefits behind Jonathan Snook’s architectural wisdom.Continue reading →
While preprocessors like Sass and Less have made CSS development easier, there is still a lot to be desired in this modern age of web development.
In this article, Toptal Freelance Software Engineer Tigran Vardanyan covers code styling, essential HTML and CSS practices, and why clean code still matters.Continue reading →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
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 →
Demand within the web design scene today has changed over the past few years: designers with front-end skills, and front-end developers with design skills, are more and more in demand. Yes, you could argue that the jobs are completely different—and maybe you straight-up don’t like one of them—but truth be told, in my six years as a freelance web developer and twelve years as a designer, I’ve learned that it’s much harder to get by as just a web designer or just a front-end developer.
Wearing both hats has a lot of advantages: from a professional perspective alone, you can find work more easily and charge a higher rate because you’re bringing more to the table.Continue reading →