Posts Tagged ‘Sass’

Heroes in a Sass Shell: Mixin Power!

The end of the year is here, and it’s a time to kick back and enjoy ourselves and our families; a time to have some fun. A time to build a set of minimalist Teenage Mutant Ninja Turtle characters in CSS! Outside of being a fun exercise in general, this is a great look into […]

Using BEM-Style CSS Syntax in SCSS

Modular component styles are becoming significantly important in modern UI trends. Handling scalability while decreasing naming convention differences is a necessary step towards code cohesion. Disclaimer: I use a slightly modified flavor of BEM syntax, feel free to use traditional BEM, or some other flavor of your own. When developing UI components, specifically for use […]

Typing On Laptop@1x.jpg

Background to Foreground Image Solution for Responsive Web Development

Proper design plays a key role when it comes to the topic of responsive web design (RWD). But sometimes we don’t have the luxury of a flushed out design to begin with. We often have to manage and make practical use of the assets in hand, and in some cases, background images can become a […]

Istock 518898712 Featured Image

Using Front-end Technologies like Node, Grunt, and Sass with AEM

In this article, I am going to show you how to use Grunt and Grunt plugins to compile Sass into CSS, minify CSS, add CSS source maps, merge JavaScript files, minify the JS, and add JavaScript source maps. We will be using Bower to add vendor JavaScript libraries to our project.  Before I show you […]

Developer Above Clock@1x.jpg

Why We Switched to Sass

Editor’s Note: In 2020, Perficient acquired Brainjocks, a leading digital consultancy with a strong Sitecore platform focus. This blog post predates the acquisition. BrainJocks has released SCORE v2.0, and our development team is loving it! This release brought many changes, but one of the biggest was to the front-end code. We have switched our CSS […]

Javascript Laptop@1x.jpg

Sass Maps and Iterators

One of the top rules for programmers is to stay DRY – don’t repeat yourself. CSS preprocessors are great for helping UI developers accomplish this goal. However, there are still some instances where it seems as if you can’t help but repeat yourself. Here’s a common example of background positions using a sprite: Typing “background-position” […]