Posts Tagged ‘front-end’

Solved with CSS: Image Captions Done Right

There is a problem with the default styling of the figure caption (figcaption) element that is intrinsic to the way HTML and CSS work on their simplest level.  Elements don’t know or care about the other elements around them; they behave in their own way, no matter what content comes before or after them.  Let’s […]

Wineyard@1x.jpg

Finally, Support for Responsive Images in Sitecore!

Responsive Web Design (RWD) offers a cost effective, high quality and easily managed delivery of content to a variety of devices. Many teams build sites in RWD by using custom or popular responsive frameworks like Twitter Bootstrap or Foundation Zurb. But how can we combine the responsive design goodness with an intuitive content authoring experience […]

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 […]

Kid With Bricks@1x.jpg

Building a single-application component using Sitecore MVC, JS MVVM Framework and SCORE – PART 1

In this series of posts, I would like to show our readers how to build out a single-application component in Sitecore using one of the many popular MVVM JS frameworks on the market – in this case Knockout, together with SCORE. Even if you don’t use SCORE in your project, you can still follow along […]

Color Picking@1x.jpg

Styling Experience Editor for a Better Content Admin Experience

When building a new site using BrainJocks SCORE, are you paying attention to the styling of the Experience Editor view?

Some project team members may consider this a waste of time, especially for projects that are low on budget and/or need to be finished very quickly. But neglecting Experience Editor has meaningful consequences – and your Content Administrators will be the ones who suffer. A frustrating authoring and editing experience can make it impossible to leverage the full power of even the best website.

Our ultimate goal with BrainJocks’ projects is to style Experience Editor to look as close to the front end of the site as possible, optimizing the admin experience. I’ll explain two types of Experience Editor styling that we address when we build websites.

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” […]

Abstract Css@1x.jpg

Flexbox: The Most Powerful CSS that No One is Using

What if I told you that you can vertically center, match height, and reorder HTML using only CSS? Amazing, right? Now, what if I told you that this CSS is not supported in IE9 and only partially supported in IE10? cue Price is Right losing horn Flexbox is a very powerful set of CSS rules […]

Responsive Design@1x.jpg

Responsive Web Design / Development

I don’t know about you, but I spend a lot of time waiting. I wait for my wife while she’s shopping, I wait for doctor appointments and I wait for… you know, the list is endless. But, I do take advantage of my wait time by browsing the web using my phone. If I were […]