Project 03, Part II: Sprite Sheets: Bravura London Registration Page

Continuing with my project on Bravura London's registration page, I wanted to talk a little about sprite sheets, and what I think I now know about them. Code-wise, this is something I struggled to wrap my head around. Coming from a gaming background, I think I have a pretty clear grasp of a sprite sheet's functionality and how they can be used.

A sprite sheet is essentially a composite of several different images, all combined into one single image. Within your code, you can specify which co-ordinates from the whole image are rendered. You may only wish to render a portion of the image. It's case dependant, but for performance, it can be quicker to only load in a single image and selectively display each of these sprites, as opposed to loading lots of smaller images.

The sprite sheets displayed on Bravura are the social media icons and the tiling background. As you can see from the social media icons, this image is a list of 11 different images all combined into one atlas. You wouldn't want to draw this whole image as it is because you may not have a social media page for all of these outlets, so you define which pixels are shown, making them individual entities. The trick here, to make it simpler for you to code, is to have all the images evenly spaced within the same height:width ratio. We're talking 22px by 22px for the icons in this instance, meaning if I want to call the third image in, I will need to step along 44px and render from that point onward.

Firstly, if we look at the HTML, I've made an unordered list containing 5 list items, one for each of the social media outlets we wish to link to. Notice how, even though I want to render images, there is no <img> tag here, that is strictly handled by the CSS in this instance. So, I've created 5 list items, each containing an <a> tag to link us to another website.

The CSS of the spritesheet will draw the image of the social media icons and we have to define which specific pixels the CSS should draw for each icon. There are 3 simple inputs for defining a spite:

    left: 0px;
    width: 22px;
    background: url('http://') 0 0;

As we're rendering a 2D image, we draw along two axis; x-axis (left-right) and the y-axis (up-down). Meaning our first CSS input (left: 0px) depends on where we wish the sprite to start drawing from. If we're drawing the first image, we'll start from 0px, then jump along in increments for every subsequent sprite.

The next input (width: 22px;) defines how wide the image is, and where we wish to stop drawing from. In this instance, all sprites are 22px wide, so this value will remain the same. This is recommended, as it makes the mathematics a lot easier to work out.

Finally, we have (background: url('http://') 0 0;), this defines the image you wish to render, and its position for left and top.

This CSS needs to be set for each sprite you wish to render, in my case, I will have 5 blocks of code each synced to a different HTML class.

To read more about using sprite-sheets, use the W3Schools CSS Image Sprites. To view the full HTML and CSS from this project, see my previous post: Project 03, Part I: Fonts: Bravura London Registration Page.

Project 03, Part I: Fonts: Bravura London Registration Page

After being on, what I guess we'd refer to, a hiatus due to err... personal, emotional... entanglement (?) I've been out of the HTML game for some time. Like 4 weeks tops. But that's a lot of time to forget things. I feel super behind right now, but I also finally feel ready to get straight back on that horse.

Before it all kicked off, I'd started a project to recreate the registration page on Bravura London's online store. I like this site, it's clean, accessible and it has a kicking colour palette. I also wanted to attempt a project that included forms, after publishing Project 02: Forms & Buttons, putting practise into more practise. 

Top: Original, Bottom: Recreate

As usual, there are ever-so-slight differences between the original and my rendition. Mostly to do with positioning. That is something I just can't seem to put to bed. As for styling, in terms of adding custom fonts, matching the tables and buttons, creating spritesheets I'd say that all went rather well indeed.

Adding A Custom Font

As I'm sure we're all aware, there are a select number of font families that are deemed web safe (Read more on W3Schools CSS Web Safe Fonts). These are fonts that can typically be read by any browser, on any computer as they should be installed by default. We're talking your serif, your sans serif, your monospace here. 

Within these generic families are a selection of generic typefaces for when you need to specify a particular style. The typefaces within each family generally won't have much variation, once again, they're a selection of big hitters that should be available to most browsers and computers. For example, Times and Georgia would fall within the serif family. But what if you call Georgia and the user doesn't have it installed? Well, you can use a fallback that the browser can refer to if the desired typeface isn't available.

In CSS you would call:

{
    font-family: "Times New Roman", Times, serif;
}

Calling font-family, you guessed it, refers to you wanting to change the typeface that is displayed. In this case we're going with Times New Roman. If you want to call a specific typeface, you will always need to do so within quotation marks ("), this is generally to avoid errors with spaces and punctuation. Times is a generic typeface, there are no quotes here because it is a single word and should come pre-installed. If the user does not have Times New Roman available to them, the browser will render Times instead. Finally, if you don't have Times, well, you fallback on serif. All these fonts are serif fonts and therefore, there should not be much visual discrepancy between what you see and what the user sees if they don't have all fonts available. 

The rendering order is from left-to-right. If the user does not have the font that is being called, the browser will try the next one in the list. 

We all know the classics; Times New Roman, Arial, etc. but there are thousands upon thousands of custom fonts out there, below the radar, waiting to be rendered. The two custom fonts used within the Bravura site are Lato and Dosis. Never heard or them? Nor I. Your browser won't have heard of them either, so you'll have to tell it where to find them. This is done within the <head> section of your HTML sheet. 

Thankfully, both these fonts can be found within Google Fonts. This is an archive of elegantly designed open source typography. Google Fonts will also provide you with the characters and the weights for you to easily copy-paste into your code. 

In HTML, my <head> code now looks a little like this:

Just like loading in a CSS stylesheet, we are loading in the data for our typefaces, including the font weights we need to use. As Google Fonts set everything up nicely for us, we just have to refer to the correct location in the href and the call the typeface within our CSS document. 

This is a very friendly and free way of using custom fonts to improve the design of your site. Be weary that users still may not be able to download these custom fonts, so have comfortable fallback fonts that still render to the desired effect. 

---

As per usual, the accompanying code. I got all fancy this time and called my stylesheet as a separate file, so if you wish to view it correctly, please check the file names. 

HTML

CSS

  

Project 02: Forms & Buttons

After recently reading the W3Schools Chapter on HTML Forms, I thought to myself, "Hey, you know what would be neat for my next project, creating a sheet of lovely looking log-in designs." It's gotten to a stage now where I, unashamedly, find that kind of idea just plain tasty.

I found what I would loosely describe as a tutorial on Codrops, Creative Button Styles. You're supplied with the CSS and the Javascript and, to be honest, it was pretty much all Javascript and therefore very irrelevant to what I'm currently learning (one step at a time, am I right?), but I liked the idea and rolled with it. 

If you're interested Colour Lovers is where I found all of these delicious colour schemes. From top to bottom: Odd but Trendy, Pink Parrot, Blue Kitten, none, Sand & Bikini. 

In the first example, you can see a fade transition between blue to purple on hover. I achieved this by setting opacity: 1; within the button class, then adding a transition on hover:

button:hover.btn-1 {

   transition: .XXs ease-in-out;

   background-color: purple;

}

The .XXs specifies how long in seconds you wish the transition to take, and the ease-in-out property specifics it should be a steady and linear fade. To eliminate any fade transitions when active - as this can look a little messy - simply set the opacity back to 1 with a 0s transition time:

button:active.btn-1 {

   opacity: 1;

   transition: .0s; 

}

This is followed by 3 simple designs of simply changing the colour of the box, borders and text on hover. While this relies heavily on the palette, these simple hover changes can feel very responsive and demonstrate clearly to the user that they are interactable elements. While it may be a little overkill in this demonstration, it still has a juiciness to it.

In the final example, I tried to make the buttons appear as though they were being pressed down on hover then on click, as in the first Codrops example (but remember, there's no Javascript here yet). Therefore, I just played around with reducing the sizes of the top and bottom borders to give the illusion it was being pressed in. Let's look how that's coded:

.btn-5 {

   border-bottom: 4px solid #7391b6;

   border-top: 2px solid #4ed4d8;

   padding-top: 3px;

}

button:hover.btn-5 {

   border-bottom: 2px solid #7391b6;

   border-top: 4px solid #f0e3f2;

   padding-top: 0px;

}

button:active.btn-5 {

   border-bottom: 0px solid #7391b6;

   border-top: 6px solid #f0e3f2;

}

First up, when :active, visually the element shifts, so there's some code needed there that I haven't yet got to the bottom of. 

What's happened here, is we have three different colours: #7391b6 (dark blue), #4ed4d8 (blue) and #f0e3f2 (pink).  The background colour is pink, so when defining the button, we add an "invisible" blue border (the same colour as the button itself) to the top of 2px, meaning, when we hover we make that top border bigger at 4px and change its colour to pink, so it appears as though the button has moved down 4px even though the top border has actually increased in size. We have simultaneously reduced the bottom border (dark blue, to make it appear 3D) to give the impression the button is now inset. The padding keeps the elements locked in position when their border sizes are shifting. 

It's important to do the maths here, making sure to flip the top and bottom border pixel values and add the necessary amount of padding. 

Again, this is far from perfect, but if you want to try it for yourself, or see exactly what I did here, you can find the code here:

 

Styling Links with IDs and Classes

As mentioned recently in Project 01: Recreating the Telegraph, I've been struggling to wrap my head around the CSS behind using the <a> tag in conjunction with id and class attributes. I was able to get the functionality to work (somewhat) flawlessly when using the id, but with a class, I had no such luck when trying to apply the same methodology. The thing is, they don't work the same way one bit.

Well, they do kind of work the same way, just a tiny bit backwards. 

Referencing from within an id

When referencing an <a> element within an id, you need to put the id first. For example:

  #navigation a:link, #navigation a:visited {

  color: red

  }

Add a space between the id and the element selector and separate multiple selections with a comma and a space. This will work because the chain for id's is:

  #id > element selector > decoration

The catch is, the id tag must not be placed within an <a> element, it needs to be coded within a parent tag. The code simply doesn't run if the id is placed within the <a> tag because it is then referencing and invalidating itself. 

Referencing from within a class

When referencing an <a> element within a class, you need to put the class name second. For example:

  a:link.navigation, a:visited.navigation {

  color: red

  }

There should be no spaces between the element selector and the class name. Multiple selections should be separated with a comma and a space. My best guess for why the specificity has to be ordered this way is to account for syntax errors if the values were reversed, or had spaces, it would change their meaning entirely. The chain for classes is:

   element selector > .class > decoration

With this approach, the class must be defined within the <a> tag, as to correctly reference itself. 

---

While perhaps still a bit blurry around the edges, ordering the syntax in the manner does call correctly. For anyone interested in seeing these methods in action, you can simply copy this code here:

Project 01: Recreating the Telegraph - The Results Are In

While I am under no illusion that this is a perfect mimicry of the actual Telegraph site design, I feel comfortable enough here, to hang up my hat and call it a day on this project. Working by eye (besides the use of the Photoshop colour-picker tool) is never easy, even more so when it comes to sizes, positioning, widths, etc. As you can see, there are some clear alignment errors - the majority of which, I tried to fix and failed.

Original article: The Telegraph - 15 Maps That Will Change the Way You See the World

For me, padding, border, margin is the clincher. W3Schools has a very clear diagram of this here, but I'm still struggling to visualise this in practice. I have most clearly failed in this area in with the ordered list within the article. 

position and float are also two concepts I'm struggling to apply. The distraction of the content definitely isn't helping, so it's probably worth making a playground where I can test all the function of these elements correctly.

Designing and formatting the list numbers in CSS was the most fun part, as it gave the richest reward. To think up a method of creating circular borders (using the border-radius tag with a high value), see it work, then inspect the actual CSS and find it was originally created using a similar method is very rewarding indeed. While mine may be a little rough round the edges, it is fit for purpose. 

Once again I'm supplying the HTML/CSS here. I think it's always worth sharing for the shake of learning and evolving. Even if it is learning through not what to do. I haven't seen any good HTML/CSS to know if mine is well-written, well-formatted, correct use of specificity, or class/id overload, but I can safely say that it's probably not. If it's bad, it's bad, but these are all skills to develop.

Project 01: Fighting the Link Formatting

As mentioned previously, I found the task of styling elements that doubled up as an <a> tag to be a tricky task indeed. I still feel that way, so instead of taking on the whole beast with one swing, I decided to extract the "Read More" section of The Telegraph and work on that singularly. It definitely helps, and what I came up with wasn't perfect, but it was definitely a lot more manageable.

While I'm sure any untrained eye can spot the difference (mimicking formatting is proving hard) the key task of getting these links to colour and hover correctly worked like a charm. Using specificity seemed key to success here (thank you, Khan Academy CSS Specificity). While I'm sure it would be more beneficial to up my class game, using definitions such as ol li { } gave me the right amount of control.

I've pasted the code I made for this into a Paste Bin (also included below) for anyone to nosey at. I'm happy enough for now, but that's still not happy enough. I will integrate this mini-project into my main code and go from there.

 

Project 01: Recreating The Telephraph

While I'm not one to be found nose-deep in a broadsheet, let alone The Telegraph, I have to admire the simplicity of their site design, especially when learning to recreate existing CSS content. At least that what I expected this project to be like, but when I finally got pen to paper, I realised just how wrong I was.

A job like this takes a lot of planning, and the nuances within the design have proven to be unexpectedly complex. I've struggled with defining the number of <div> elements I require, scared to add more as the list of classes and tags extends longer and longer. Editing headings and other elements that also double up with the <a> tag has also been difficult - having to style a:link, a:visted, a:hover sometimes individually and sometimes not picking up changes at all. Furthermore, trying to style the numbers in a list seemed near impossible until I found this nifty tutorial which instead utilised the <span> tag (Design Shack - 5 Simple and Practical CSS List Styles You Can Copy and Paste).

While I haven't looked around yet, it would also be nice to have a colour-picker desktop app - no more copying images into Photoshop, thank you very much. I suspect there might be a tool out there for this, if not, hold that thought!

The article in particular that I'm trying to mimic is the 15 maps that will change the way you see the world travel piece. It contains a lot of images, lists, links and interesting formatting qualities. I thought it would prove an interesting challenge while not been beyond my range.

At first glance, I'm not sure if my current attempt would fool anyone, but the building blocks are definitely in place. As you can clearly see, I'm struggling with the positioning, trying to wrap my head around absolute and relative, margin and padding in particular. 

There are also the colouring issues I mentioned when dealing with an element that is both a heading/p element and a <a> tag. For reasons I don't yet understand, their style only applies correctly on hover. 

As a first pass, I'm happy to keep banging my head against the wall until I get to the bottom of this. I hope, by the next major update, to have fixed the positioning and link colouring issues.