They expect MAGIC!
But before I go on, I want to make it clear, I really do love our Creative group. What they do, what they come up with, it’s always beautiful. The problem I run into, and why I add the but… is now, it’s up to me to implement it.
Honestly, I feel like this could be a series or collection of topics on how I manage to deliver the magic they so often ask for. So if I can do it justice, maybe it’ll become a continuing series of how I take beautiful pieces of art and bend, skew, and push the boundaries of ServiceNow to present them.
One Rectangle to rule them all
Pro-Tip
Never be afraid to raise concerns over viability, scalability, usability, and maintainability/complexity when building out designs. Your relationship with the Creative team should be built on trust and success. There will be times when you have to make the decision, as a developer, that a design component raises concerns and ultimately, may not be feasible for the project. You shouldn’t be afraid to bring this up, but this also isn’t an excuse to not do something whether you don’t know how, or don’t want to – that breaks the trust between both groups.
I was given a design spec for a carousel that shows a number of “slides” with a rectangle box for the background. Sure, it sounds very simple – but is it really?
The rectangle has padding on the left and then runs all the way to the right with no border. This then continues till it reaches the last slide in opposite fashion: so the left side has no border and runs to the same padding on the right. If you’re having trouble visualizing this, I bet an image will help a thousand times more than my explanation of it.
Now, some of you enterprising people will notice that I’m only showing the first and last slide, yet there are some slides in between. I’ll cover those later, though, you would have the top and bottom of the rectangle running to the edges of the screen.
So, how do I handle this? I know from experience that an image could work here, but it probably isn’t the best way to handle this. Back in the day when CSS wasn’t as robust as it is today – and you had the added benefit[?] of IE 6 – there wasn’t much you could do but use images and hack around trying to get everything to work.
So what am I going to do, and how am I going to do it? I really didn’t like the idea of an image. Not only does it require loading an image, I would need to maintain that and positioning and it’s not as flexible when it comes to responsive sizing (large screen to small screen).
The answer to this was to have CSS draw the shape and use borders around it. Very simple and flexible enough for screen response.
A brief history in time
CSS has all kinds of neat things loaded into it, but there’s some tricks with it – I’ll happily admit I don’t know every part of each specification out there (CSS 1, 2.1, 3), but I know enough to get me answers on what I don’t know. At any rate, we’re going to be talking about a couple of them that come into play here.
The :before pseudo-element and the content property, both of which showed up in CSS 2.1 June 2011 are going to be our helpers today. While they have been around for just about 7 years (at the time of this writing), they weren’t readily supported by all the browsers that you had out there – you back when you spent a lot of time making sure things worked in various versions of IE because they were the majority browsers and people didn’t always keep them up to date.
But what is a pseudo-element?
The W3 CSS 2.1 Specification says:
Pseudo-elements represent abstract elements of the document beyond those elements explicitly created by the document language. Since they are not restricted to fitting into the document tree, the[y] can be used the[to] select and style portions of the document that do not necessarily map to the document’s tree structure.
[I had to help some grammatical issues].
Again in plain english – you are basically adding an selector to an element that isn’t part of the document, err wait maybe that isn’t as simple as I thought either. Let’s try an example:
So in this example you can see that, without any additional markup in the html document (HTML Template), I am able to stylize the first line of the paragraph (CSS – SCSS), without affecting any of the other lines.
Slip Sliding Away…
Alright, let’s move on from the boring history of CSS and get into the meat of this article. I’m going to run through a simplified version of what I did for a client, and show you how I used CSS to draw a rectangle that is responsive and easy to handle – how I managed to produce some MAGIC!
On A Carousel
Let’s build a simple array of objects for the basis of our carousel. Nothing special, and we’ll only have 4 array elements.
Now, let’s use the Angular UI Carousel component to build out our carousel. It’s pretty straight forward.
I want to point out a couple of things here. First, depending on the images you use, you may notice that the carousel changes height per image. Secondly, there’s no real room for a background.
We’ll have to make some changes to the template to better accommodate that. I’m also going to set the images as the background to each slide – this answers another common issue where you may encounter the client being in-charge of the media and you want to make it easier for them with different sized assets.
I’m also going to remove the arrows on the side, this was part of the design spec (it will also help in seeing the whole thing. There’s some other things that I’ll be doing to, but I’ll explain after the example. So just like those cooking shows, I’ll have the code ready in a sec, hun…
HTML Template final
CSS – SCSS final
And what does that get us?
HTML Template
The key points of the template are:
- Using AngularJS to set additional styles for the first and last slide ng-class=”{‘recBox-left’:$first,’recBox-right’:$last}”
- Creating a box inside a box, this allows a container for the background and a container for the slide.
CSS – SCSS
The key points of the css are:
- Default css to cover all slides div.recBox-center:before
- Left and Right css for first and last slide respectively div.recBox-left:before and div.recBox-right:before
The basic premise here is I used the outside box to handle the rectangle background. This allows me to position and size accordingly without disturbing the slide itself. The :before pseudo-element allows me to style the outer box with the rectangle as the background without setting the box to these styles which would break the box and the box within. The 3 css styles cover the different slide positions that are present, left, middle, and right.
Pro Tip
As a matter of reference, I got all the images from https://pixabay.com/ and then uploaded them to System UI -> Images. They weren’t all the same size or ratio, and if you do it the same way, you’ll notice some clipping. The usage of style=”background-image: url(image-url);” alleviates a lot of headaches when it comes to dealing with different size images, and is usually a great middle ground when dealing with them. It’s a good way to handle allowing the end user update assets.
I hope this installment has been enlightening and helpful to anyone who might be in a jam trying to produce MAGIC. Or give someone hope, when they are handed a design that seems overwhelming. Just remember, you should be working with your Creative group, not against them. Don’t be afraid to tell them that something may not work, but try to make sure it’s a true statement and not because you don’t want to do it.
P.S.
This is what the final version of my production carousel looks like this. Granted there is some other functionality built in, like an hover overlay, and it changes completely at full screen size (at full screen size it’s 1 slide with 4 panels). But those parts might just have to be another episode.
