Design and CSS

Ashley Nolan
Senior UI Web Engineer at :
@AshNolan_
Design & CSS
So, I'd just like to start by saying thanks for coming along and for inviting me to come in and talk to you today.
So as Simon mentioned, I’m Ashley Nolan, and I work just around the corner from here at Just Eat as a Senior UI Engineer.

@AshNolan_ `
So, I’ve been working with the web for around 12 years professionally and I’ve been lucky enough to have worked with some great companies in that time.
Most recently, I’ve found myself working on some really high traffic projects such as the BBC Good Food website and now at JUST EAT I’m currently leading the rebuild of our Global Platform.

@AshNolan_ `
But I'm here to talk to you today about design and CSS, and although my professional career has spanned about 12 years, I started out playing around with the web in the late 90's when I was back in school -
and I only really thought about it when I was putting these slides together but as most of you were only a couple of years old when I was in school – or perhaps not even born at all which is even more
depressing to me – you would have missed out on amazing looking website designs such as this one.
So this website was released to market the film Space Jam in 1996, and was regarded as being one of the best looking websites back at that time.
So as you can see, things were pretty basic when the web started out – and that's just because CSS was a lot more simple than it is now. Layouts traditionally looked quite boxy because they were built using
HTML table tags rather than using CSS for layout and you were restricted by the styles that you could apply – for example you could only use built in system fonts so a lot of websites looked pretty similar.

@AshNolan_ `
Content StylingBehaviour
In terms of the web today, the main front-end technologies that are used to create websites are the same as back when that Space Jam site was built back in 1996, and so that's HTML, CSS and JavaScript –
and each of these technologies takes care of different aspects of a website.
HTML defines the content you will display on a page. JavaScript, thinking about it's most basic functionality, let’s you create behaviours and handle state on a webpage – such as what happens when
someone clicks on an area of your page, or if an event triggers when a user scrolls down your webpage for example.
CSS is what styles the content that you specify in your HTML, and that's the main topic I'm going to be talking about today.

@AshNolan_ `
3:00: So when I started playing around with these languages and making websites, I really fell in love with the power that HTML and CSS gave me.
CSS in particular was one of the first programming languages that I really connected with when I was starting out. I think like a lot of people who have gone on to become front-end developers – the ability to
change some values in CSS and be able to immediately see how those changes affect the visual design of a webpage was much more gratifying to me than when I was learning some of the other
programming languages that I was taught.
Personally, it’s been fascinating to see what was a pretty basic language back then turn into a language that is now massively powerful, with a mature eco-system of tools and methodologies around it.

@AshNolan_ :
CSS
What we'll cover today
• The cascade
• Importance, specificity and source order
• CSS Layout and design grids
• Web fonts
• Front-end Testing Tools
• Advanced reading
So what specifically are we going to cover today in terms of CSS.
Well first of all, it'd be really great if I could gauge knowledge levels in the room – because that'll probably adjust the content a little bit - so just in terms of CSS experience who here has never written any
CSS before?
Ok, great and who has written a little bit of CSS and feels like they know some of the basics of the language.
Awesome and is there anyone here who feels like they know CSS reasonably well? So moving on from the basics and feels quite confident using it.
Ok, well here's the rough list of things that I plan to cover today. We're going to talk about the basics such as the cascade, as well as what terms such as importance and specificity mean within CSS and how
knowing about these can help improve the code that you write. We'll also cover some CSS layout techniques, adding webfonts to a website, and then we'll finish by looking at a couple of front-end testing
tools, and some future topics you can go away and look at if you're interested in learning some more about CSS.

@AshNolan_ :
CSS
Cascading Style SheetsContent is styled with CSS
5:00: So, for those of you that don't know, CSS stands for Cascading Style Sheets, and as I mentioned earlier…
*CLICK*
…CSS is what styles the content on your webpage.

@AshNolan_ `http://ashn.uk/devtool
So just to show you this more visually, this is what the BBC homepage looks like when you turn CSS off and view it. So you can do this on any webpage using a chrome extension called "Web Developer
toolbar". If you'd like to try this out for yourself on any websites, the link to install the extension is in the bottom left of the slide.
So as you can see, the web would look pretty boring without CSS and it can be used to style lots of different aspects of a website – you can define colours, font-sizes, how things are laid out and more
complex things, like controlling animations and transitions between visual state.

@AshNolan_ :
Some simple CSS
CSS Selector
CSS properties
5:45: Its a really simple, declarative language. So the main idea with CSS is that you define a selector, which is the top part of this code block, and then define some CSS properties to show how you want the
elements being selected to be styled.
So here we're selecting the body tag and we're adding some styles to it, such as a background colour, a width, what font size and font-family to use and to align any text in the centre of our page.
Also, one small thing to be aware of in CSS, is that you need to use American spellings when defining properties – so you'll notice that in the above code where we have properties for colour and when
centring text – they both use the American spellings of those words.

@AshNolan_ :
By combining importance, origin, specificity, and the
source order of the style concerned, the CSS cascade
assigns a weight to each declaration. This weight is
used to determine exactly, and without conflict, which
style declarations should be applied to a specific
element: the declaration with the highest weight takes
precedence.
What is the cascade?
http://reference.sitepoint.com/css/cascade
So the C in CSS stands for Cascading, but what does that actually mean?
Well there's a really great definition on Sitepoint which describes it as shown here…
But I think the most important part of this definition, is the last sentence…

@AshNolan_ :
By combining importance, origin, specificity, and the
source order of the style concerned, the CSS cascade
assigns a weight to each declaration. This weight is
used to determine exactly, and without conflict, which
style declarations should be applied to a specific
element: the declaration with the highest weight takes
precedence.
What is the cascade?
http://reference.sitepoint.com/css/cascade
And that's "the CSS declaration with the highest weight takes precedence".
So what do we actually mean by this?

@AshNolan_ :
Remember this?
Well going back to our simple block of CSS – this on it's own should hopefully be pretty easy to understand what styles will be applied.
There's only one selector and only one set of properties, so we don't have to worry about which styles will take precedence over any others.

@AshNolan_ :
What happens here?
But what happens if we have some CSS a bit more like this – so here we have 3 selectors, but they're all targeting the same element – our body tag.
And some of the rules in each block are specifying the same thing. So our first and second blocks are both specifying a different background colour on our body tag. So this is where the cascade comes in –
to help us define which rules should take precedence in situations like this.
Now in CSS, rules that are defined lower down in our stylesheet are considered more important than those defined previously if they have the same selector specificity. So here, as the selectors are exactly
the same, the specificity is also the same and so the rules in our third selector block are considered the most important, then the ones defined in the second block, and then finally the ones in the first block.
So the width defined in the third block here, will take precedence over the width defined in the first block, so our page will be 500px wide and not 80% wide. And that's because of the rules of the cascade.

@AshNolan_ :
Selectors
• Element
• Classes
• IDs
• Complex selectors
Now in practice, you'll rarely see examples like that last one where you have the same selector being defined multiple times in one CSS file – I was just using it to illustrate an example – but the cascade does
becomes more important as we look at the other ways that we can select elements in CSS.
The main selectors that we can use are element selectors – which we've been using to select our body element – classes, IDs and complex selectors. So let's take a look at each of these.

@AshNolan_ :
Element selectors
• Matches elements with the corresponding element
type name
• Quite general and not very specific.
Now the selector that you've seen in the examples up to now, where we have been selecting the body tag, is what is called an element selector – and that's because you are selecting a HTML element by it's
tag name.
Now these selectors are quite general and so they tend to be used to define the default styles of your site. So if you want to make every paragraph tag on your website a certain size, you might write some
CSS to do that with an element selector such as this one and set the font-size of all the paragraph tags on your site to a certain value.

@AshNolan_ :
Classes and IDs?
When there is more than one of a given element on the
page, and you want them to look different, you can use
classes and IDs to do this.
<div></div>
<div id=“foo”></div>
<div class=“bar”></div>
Element:
ID:
Class:
Now as your site starts to grow, you may want to style some tags differently to others on your site and this isn't possible just using element selectors – but we two other main methods of selecting tags in CSS
– and that's to use either classes or IDs.

@AshNolan_ :
ID selectors
Matches an element that has a specific id attribute
value. Since id attributes must have unique values, an
ID selector can never match more than one element in
a document.
10:00: So what are both of these?
So IDs match an element that has a specific ID attribute value.
IDs are also unique, which means that you cannot have multiple HTML elements on a page with the same ID, and so this means that an ID selector in CSS can never match more than one element on a page.

@AshNolan_ :
Class selectors
Less specific than an ID because they are not unique
Classes are much more flexible than IDs. HTML elements can have any number of classes, and a class can be applied to multiple HTML elements.
So this means that we can define a CSS class selector that can change the style of multiple things on our webpage, which in practice is a lot more useful than using IDs.
So let's look at a code example to highlight this…

@AshNolan_ :
Selector examples
Selector basics
Complex Selectors
11:00 (5 minutes for demos).

@AshNolan_ :
Selectors and Specificity
- The lower the specificity of your CSS the better
- Use classes to help you achieve this
- More info on CSS selectors here:  
http://ashn.uk/selectors
16:00
Selectors link has all of the different types of selectors you can use to target elements – some of which we haven't had time to cover today.

@AshNolan_ :
CSS Layouts
…or how to put things where you want
them on a webpage
17:00: So the next thing I wanted to briefly cover, was CSS layouts and the different approaches that developers can use for constructing webpage layouts.

@AshNolan_ :
Design Grids
Now as we've only got a limited amount of time today, I wanted to cover probably the most common layout issue in CSS, and that's design grids.
So after things had moved on from the early days of web design using tables for layouts, things progressed towards using design grids.
So what do I mean by a design grid?

@AshNolan_ `
12 Column Grid
6 columns 6 columns
12 columns
4 columns4 columns4 columns
3 columns 3 columns 3 columns 3 columns
2 col2 col2 col2 col2 col2 col
Well an example of a design grid would be something that looks like the following.
So the idea of a grid in web design is that you split up the width of your design into a number of equal width columns – 12 became quite a popular number of columns to use on the web simply because 12 is
also divisible by 1, 2, 3, 4, and 6, so it gives you a good range of widths to design your content to.
So as you can see here, you can have 2 sections that span 6 columns each, or 3 sections that span 4 columns each, and so on.
So the reason that you design a grid like this is that once you have defined your design like this, it helps establish a rhythm and proportion for your site. There are whole talks and articles on grid design out
there so if you're interested in learning more about the thinking that goes into the proportions of grids, it's worth having a read of those to understand those design principles.

@AshNolan_ `http://ashn.uk/gridtool
Now once you know about grids, if you look closer at the websites you visit, then you'll likely be able to see that most of them are designed to a grid of some sort.
So for example, this is a screen recording of me putting a 12 column grid over the BBC website yesterday – and you can see by doing this how the site is designed with this grid in mind as it is aligned to
these 12 grid columns.
If you ever want to do this yourself, there are a few chrome extensions out there that let you do this – the one I'm using is called Design Grid overlay which you can find at that link in the bottom corner.

@AshNolan_ :
Design Grids
How do you implement these in CSS
So in terms of writing CSS, how can you go about implementing a design grid for a site you are building?

@AshNolan_ :
Essentially a way of 'ﬂoating' different blocks of
content next to one another.
Floats
https://css-tricks.com/all-about-floats/
Well the way that it was done up until very recently was using a layout technique called floats.
So the float property originates from print design, where in magazines or newspapers it was common to have images set into the page such that text flowed around them.
In CSS, page elements with the float property are just like the images in the print layout – they remain part of the flow of the page, and if surrounded by text content, this will flow around a floated element.

@AshNolan_ :
Floats
https://css-tricks.com/all-about-floats/
Aside from this simple example of wrapping text around elements, floats can also be used to create entire web layouts.
Essentially, by floating elements, you can make sections of your page sit side-by-side, and some CSS grid frameworks are still built using this technique. So if anyone has heard of Bootstrap which is a
common CSS framework, until recently their grid was using floats to define the grid which came with that.

@AshNolan_ :
Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
20:00: A couple of years ago, browser support for a layout property called "Flexbox" landed in all mainstream browsers.
Flexbox is short for flexible box model, and it was designed to deal with 2 dimensional layouts. So 2 dimensional layouts are where we are only concerned with one direction of the layout – so either
horizontal or vertical. So with the design grids that we've just been looking at, these are 2 dimensional because we're only concerned with defining the horizontal width of our webpage – so these grids are
actually pretty easy to create using Flexbox, even though grids aren't really the use-case that flexbox was designed to handle. So a lot of the grid frameworks that I mentioned before have now moved on to
being written using flexbox.
Flexbox gives you a lot more power than just specifying columns in a grid, because when writing your layouts in Flexbox it can help your layout adapt to the content on your webpage.
Now this is quite hard to explain just using slides, so let's take a quick look at another code sample.

@AshNolan_ :
Flexbox Reading
Complete Guide to Flexbox
Flexbox in GIFs
Flexbox Froggy
25?

@AshNolan_ :
A new CSS layout standard, that enables you to
specify native grid layouts in CSS.
CSS Grid
https://css-tricks.com/snippets/css/complete-guide-grid/
Now in the last year, an even newer CSS layout technique has started to become supported in the latest browsers, and this technique is called CSS Grid.
Now the idea of CSS Grid is that instead of using floats or flexbox, that were never designed to solve design grids on the web, we now have a truly 3 dimensional layout tool which lets you layout your website
in hugely creative ways.
Show CSS Grid example on Codepen

28:00: Now you might think, surely if I need a grid now when I'm building my own websites, I'd just turn to using the CSS grid property for that.
But one issue that always needs to be considered when writing any front-end code is what browsers your users will be using. So just because you are using the latest version of chrome, doesn't mean that
everyone using your website will be. There might be some people still using old versions of Internet explorer for example, or an older mobile phone which can't run the latest version of iOS on it.
So there's a really good site out there called CanIUse.com that helps you check what browsers support the latest features in HTML, CSS and JavaScript. So this is the current support list for Grid right now, and
although it's quite well supported across major browsers, there are still gaps in support, which means that it's worth either using one of the slightly older techniques, or using a technique called progressive
enhancement.

@AshNolan_ :
Progressive Enhancement
So progressive enhancement is simply where we try to develop our website so that as many of our users get a decent experience, and then use new features using the latest technology features to enhance
the experience for those users on the latest browsers.
By doing this, we don't make our website impossible to use for people with older browsers, they'll just get a experience that might not look quite as nice as if they were to use a more modern browser.
So for companies like Just Eat for example, this is really important as we have millions of users using a huge variety of devices and browsers, and so it's important for us to try and build things in this way.

@AshNolan_ :
Grid Reading
Complete Guide to Grid
Grid by example
Progressively enhancing layouts
More Grid examples

@AshNolan_ :
fonts
30:00: Now another subject that I wanted to really briefly cover was how to add webfonts to a website, so let's take a look at the different options you have for doing this on a site you're developing.

@AshNolan_ :
fonts
font-family:
font-size:
font-weight:
font-style:
line-height:
text-transform:
Arial, Helvetica
20px
normal or bold
normal or italic
1.2 or 20px
uppercase or lowercase
Many different options when styling fonts but you only
need to remember a few:

@AshNolan_ :
font stacks
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
When setting a font-family, it's important to specify a
number of fonts to create a font stack
So setting:
font-family: Avenir, Arial, sans-serif;
Creates a font-stack where the browser tries to use Avenir as its
top priority. If that font isn't available, it will try to use Arial and
then it will finally falls back to sans-serif.

@AshNolan_ :
Webfonts
Standard system fonts can be fairly limiting to a
websites design.
Web fonts enable us to use fonts that aren't installed
on a users machine, using a property called
@font-face.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

@AshNolan_ :
Webfont Services
Services like, Google Fonts, Typekit or fonts.com allow
us to use specially licensed fonts for use on the web.
Some are open source (free), others need to be
purchased.
Typekit and fonts.com are subscription services but
Google fonts are free.

@AshNolan_ :
Examples of web type
http://hellohappy.org/beautiful-web-type/
http://www.typewolf.com/
Good for inspiration, and so if you're stuck on what fonts to use, it's good to look at sites like these for some design inspiration.

@AshNolan_ :
Web font example
Go to example Codepen

@AshNolan_ :
Webfonts
- Google fonts is a great place to start out
- Experiment!

@AshNolan_ :
Testing
Front End Testing tools
35:00: So finally, I just wanted to spend a couple of minutes to cover what tools I use on a regular basis to help me test the sites that I build.

TMW Code Club
Developer tools
So the first tool, and probably the one I spend the most time using is the Chrome Developer tools. Firefox and Microsoft Edge also have their own developer tools, but I still find Chrome's my personal
favourite.
So Chrome's dev tools let you inspect the web page as you're building it, but it also let's you adjust the CSS on the page that you are inspecting, which is pretty handy for fixing bugs directly on the website
you're building.

@AshNolan_ :
Dev Tools Tips
https://umaar.com/dev-tips/
It has way too many features to go into here, but if you're interested in learrning more about it's features and what's possible a great resource on this is dev tools tips, which is a collection of over 160 tips
showing you what is possible with Chrome's dev tools.
You can also sign up to their email newsletter and they'll send you the latest features every week so you can stay up to date with the latest features being added.

TMW Code Club
BrowserStack
You can get a free trial account on Browserstack, and if you are open sourcing your project you can contact them and get a free account for doing this too.

TMW Code Club
WebPageTest
Used for performance testing your site.

@AshNolan_ :
Further CSS
Some future reading

@AshNolan_ `
One CSS tool that's really worth looking into as you become more confident writing CSS, is called Sass.
So Sass is an extension language that is built on top of CSS and gives you some features that just aren't possible with native CSS right now. So rather than being an all new language, Sass let's you write
standard CSS and just extends this with it's own functionality.
I'm not going to go into huge detail about Sass today, but I'd definitely advise you to take a look at it once you feel more comfortable writing basic CSS, as it gives you a number of great features that help
you write much better CSS code, such as variables, mixin's and functions.

@AshNolan_ `http://codepen.io/davidkpiano/
A really great site to look at for creative examples of what is possible using CSS and JavaScript is called CodePen. One of my favourite examples on the site is this illustration which has been created using
just CSS – so this uses no JavaScript at all, it's created solely using CSS animations and styles.
So this example uses Sass to create what would otherwise be extremely complex CSS animations and he’s created a whole number of animations like this one which you can view by visiting his CodePen
profile, the link to which is on the bottom of this slide, which I'll share with you all afterwards.
CodePen is full of examples like this that show how Sass can be used to help create flexible and maintainable code while creating some incredible visual effects.

@AshNolan_ :
Component driven CSS
So that developers can evolve CSS
components over time

@AshNolan_ :
Component driven development
- Reuse patterns across a website
- Becomes easier to ﬁnd speciﬁc functionality – and
redundancy – in a codebase
- It encourages the extension of styles (through
classes)
- CSS Components are not tightly coupled to a page
context, so can be used anywhere – including other
projects.

@AshNolan_ :
So moving to a real example, this is the current JUST EAT search results page.
Now rather than trying to style up the entire page so it’s specifically a search results page, we can break this down into much simpler components, putting them together to form this page.
So here we can have components for a media element, which would just handle the styling of an image sitting side by side to some text. We can also have a component for our results listing, because this is a style that is actually used in multiple
places on our site. And similarly you break apart this entire page into smaller components – the page navigation, breadcrumb, we have a rating component for the stars in our listing that are used across our site. And we might have a grid layout
component to handle how the overall page layout can be specified.
So by combining all of these components, we build up our search results page, but there’s nothing on this page that couldn’t potentially be used in another part of our site.

There’s a couple of really great resources on this that I’d recommend to anyone interested in learning more, and these are SMACSS by Jonathan Snook and Atomic Design by Brad Frost.
So both of these books explain in more detail how to go about making your CSS more modular, so it’s easily reusable, and go into a lot more detail about components and common issues people face on projects. In the case of SMACSS Jonathan
Snook applies this to the work that he did while he worked at Yahoo, and Atomic design goes into the detail of how this approach can be combined with tools like styleguides and the workflows you can use.
So I’d recommend checking these out if you haven’t already.

@AshNolan_ :
Naming Schemes
i.e. BEM or SUIT

@AshNolan_ :
Thanks
Ashley Nolan
Senior UI Engineer at :
@AshNolan_

Design and CSS

Recommended

More Related Content

What's hot (20)

More from nolly00 (9)

Recently uploaded (20)

Design and CSS