https://cssfordesigners.com/feed CSS For Designers 2020-07-16T00:00:00+01:00 https://cssfordesigners.com/rare-css/scroll-behavior <![CDATA[scroll-behavior]]> Dave Smyth 2020-07-16T00:00:00+01:00 If we’re linking between two sections on the same page, it can be nice to create a smooth scroll to that new section. Traditionally, this has always required Javascript.

Now, we can do this in pure CSS with the scroll-behavior:

body {
    scroll-behavior: smooth;
}

Adding this to your CSS will create a smooth transition for links that cause the user’s page to scroll:

See the Pen (@websmyth) on CodePen.

Is it supported though?

Browser support is reasonably good. Key exceptions are: Safari, Internet Explorer and pre-2020 versions of Microsoft Edge.

]]>
https://cssfordesigners.com/rare-css/outline-offset <![CDATA[outline-offset]]> Dave Smyth 2020-07-09T00:00:00+01:00 When we’re styling :focus states, we often use the outline property to override the browser’s default styling.

This works well, but the outline can feel very close to the text that’s outlined. Right click or [tab] to the link in this Codepen to see:

See the Pen (@websmyth) on CodePen.

To create more space, we could add padding on focused elements.

Alternatively, we could use outline-offset, a little-used property that creates some space between an element and its outline:

See the Pen (@websmyth) on CodePen.

Is it supported though?

Browser support is very good except for IE and pre-2016 versions of Edge.

]]>
https://cssfordesigners.com/articles/top-typography-resources-2020 <![CDATA[The Top Typography Resources (2020)]]> Dave Smyth 2019-08-25T00:00:00+01:00 Choosing a typeface is a critical part of any design project, but there’s more to typography than picking a couple of nice looking fonts and hoping for the best.

Learning about type can be daunting because it’s such a broad topic. There are lots of rules/best practices and it can be difficult to know where to begin.

Traditional typography resources are a good start but, if you’re working on the web, there are more things to consider. How will the type work across a range of screen sizes?

There’s no quick fix, but here are 20 top resources for web typography today.

Learning

The websites listed below will help you to truly demystify typography. Learning the rules to follow (and later break) will seriously up your type game.

Practical Typography

A brilliantly thorough pay-what-you-can online book from Matthew Butterick, covering all sorts of typographical details. There is a font-switcher at the bottom of the site, which is a lovely (and appropriate) design detail.

The Elements of Typographic Style Applied to the Web

A useful guide on applying the techniques from Robert Bringhurst’s famous book to the web. From Richard Rutter, co-founder of Clearleft and author of Web Typography.

Typewolf

One of my all-time favourite typography educational resources. The newsletter is full of weekly inspiration and the headline product, the Typography Checklist, is incredible.

Rafal Tomal

Rafal has put together a fantastic typography course at an accessible price point. Well worth a look.

Better Web Type

A free course to accompany Matej Latin’s typography book. This site features some great articles on typography, too.

OpenType Features in CSS

OpenType features let you access a range of settings and alternate characters, such as superscript, ligatures and kerning. These won’t be available in all fonts, especially free ones, but this is a handy reference.

Tools & Resources

These tools can help you decide and improve on typographical choices.

Modular Scale

If you want your font sizes to feel coherent, rather than random, a scale can help.

Tanaguru Contrast Finder

To make your type as legible as possible, you’ll want to check the colour contrast against its background. This is a great tool to help with that because if your background colour doesn’t meet the accessibility criteria, it suggests lots of close alternatives.

Font Playground

This tool lets you experiment with variable fonts and their different feature sets.

Font Style Matcher

If you want to match the style of fallback fonts as closely as possible to your preferred font, this is the tool for you. Seeing the two fonts overlapping each other is a handy feature.

Foundries

There’s more to life than Adobe Fonts, Google Fonts and Monotype.

Use & Modify

A collection of “beautiful, classy, punk, professional, incomplete, weird typefaces”. They’re all open-source, so you can do with them what you please.

Open Foundry

This is another collection of high-quality open-source fonts.

Font Stand

I love the concept of this site. Rent a font at 10% of its standard price for 12 months (so pay 120% total), then you own it. Forever. The months don’t even need to be consecutive. A brilliant concept for accessing fonts that might otherwise be out unaffordable.

Inspiration

Typewolf

I know, this was mentioned above...but it’s such an excellent site for type inspiration. Especially if you’re looking for pairing inspiration – a fantastic resource.

Typespiration

Created by Rafal Tomal (mentioned above), this site features lots of great font combinations. More importantly, it demonstrates some beautiful setting of type to inspire you.

Font Combinations Library

A collection of eight Google Font combinations, with downloadable Sketch and Adobe XD templates.

FontPair

Lots of Google Font combinations to preview on this site. Handily categorised by the font classification (serif + serif, sans-serif + serif, etc).

Typ.io

What sets Typ.io apart from many other sites are the HTML/CSS snippets that demonstrate how an effect has been achieved. The site also lists where the fonts are available from.

Variable Fonts

Variable fonts are picking up some traction, but many designers are yet to use them. Depending on the font, they can be set in many more ways than their traditional counterparts.

These two sites introduce a range of variable fonts, show what can be done with them and where they’re available from.

Axis Praxis

Variable Fonts

]]>
https://cssfordesigners.com/articles/writing-css-faster <![CDATA[Writing CSS Faster]]> Dave Smyth 2019-08-08T00:00:00+01:00 Write. Save. Refresh. Edit. Save. Refresh.

Sound familiar? If that’s your CSS workflow, it can be a frustrating experience.

Some tools can ease this, but they usually involve the command line and local development. Neither is always possible or feasible.

What if there was a way to see your CSS changes live in the browser? No command line, no special tools, no need to develop locally.

Well, it’s already here, and it’s been here for a while: browser developer tools.

Using these allows us to quickly make changes to our CSS, see their effect in real-time, then add the changes to our CSS files. A much-neglected method of writing CSS that’s quick and helps to reduce the amount of troubleshooting you need to do.

Chromium’s DevTools

The screenshots and instructions in this article are from Chromium’s DevTools. This is the developer panel found in any browser that runs on Chromium: Google Chrome, Brave, Opera, Vivaldi and Microsoft Edge (soon).

Firefox’s Developer Tools are excellent, too. Things might have slightly different names and positions, but Firefox allows you to do the same stuff, which is pretty cool.

Getting started

There are a few ways to fire up DevTools. You can either:

  • Right click on any element on the page and select Inspect
  • Use the shortcut: [alt] + [cmd] + [c] on Mac, or [ctrl] + [shift] + [c] on Windows/Linux
  • Select Developer Tools from the menu: View > Developer > Developer Tools
  • From the Chromium “Customise and Control” dropdown, select More Tools > Developer Tools

When you’ve done that, the panel shown below will appear, normally anchored to the right or bottom of the browser.

Selecting an element

Before you can make changes, the first thing you’ll need to do is select the element you want to change. There are a couple of ways to do this.

You can either:

  1. Right-click on the element in the browser and select Inspect
  2. In the Elements section of DevTools, you can expand/collapse the HTML until you find the right element
  3. Use the ‘Click to select element’ shortcut ([alt] + [cmd] + [c] on Mac or [ctrl] + [shift] + [c] on Windows/Linux)

Sometimes methods #1 and #3 won’t suffice. This might be because the element you’re targeting is below another element in the HTML or the element is simply unclickable.

In that case, you’ll need to use method #2. Handily, as you hover over and click through elements, DevTools will highlight whatever you’re hovering over in the browser.

You can see how the highlighting works below:

Making changes

Once you’ve selected the element you want to change in DevTools, you’re ready to get started. DevTools allows us to add or change CSS in a few different ways.

The method you choose will depend on what you’re doing. Some ways of adding CSS are perfect for troubleshooting, while others are better if you want to write your project’s CSS in the browser.

Whichever method you choose, the DevTools panel you’re looking for is labelled Styles.

Quick ‘n’ dirty element.style

When you choose an element in DevTools the Styles tab will show you the CSS that’s affecting the element. Above all of the CSS you’ve written is a blank box that contains the following:

element.style {
}

Clicking anywhere in this box allows you to add a CSS property in value. Whatever you add here will be added to the element as an inline-style, which you can see in the element’s HTML.

If you want to quickly try out some CSS and see what effect it will have, this is a great method.

Editing an existing rule

This is a similar principle to editing the element.style, but it’s a little less specific. There’s a chance something else in your CSS might take precedence over what you write here, but that is what it’s meant to do.

Adding a new rule

If you’re writing CSS or tweaking an existing site, you’ll often need to write a new rule. You can do this by selecting the + icon in Styles.

This happens to be a brilliant way to troubleshoot specificity issues. If you’re having trouble getting your rules to take effect, but you can see them being overridden in the Styles or Computed tabs (i.e. they appear with a strikethrough), this can be a quick way to work out what’s going wrong.

You can see the other selectors that are affecting the rule, then tweak your CSS until it takes effect in the browser.

Selecting pseudo-classes

The Styles tab has a button labelled :hov. This allows you to trigger the various states that might affect an element, such as an a – it even includes the recent addition of focus-within which is pretty cool.

Once you’ve selected the right element and activated the relevant state(s), you’ll be able to see the related CSS in the Styles/Computed tabs. The pseudo-class will also show in the browser.

For instance, if your menu items are supposed to turn red when you hover over them, they will turn red when you select the element and check the :hover pseudo-class in DevTools.

NB: It’s not always easy to identify where the pseudo-class has been applied. In a menu, for instance, the :hover pseudo-class may be applied to the li rather than the a. If you’re struggling to select the correct element, check the surrounding elements as well – the pseudo-class might have been added to them instead.

Keeping track of changes

After a while, you might start using DevTools to make more significant changes to your CSS. If you’re making several changes at a time, you’ll want to regularly take note of these to replicate them in your CSS files.

DevTools makes this simple by tracking the changes you’ve made for you. As long as you don’t refresh the page, these changes will be stored in a single place, so you don’t need to remember what you’ve changed and changed back...

Look for a tab labelled Changes in the ‘Console drawer’. If this isn’t displaying, you can trigger it by pressing Escape.

Computed styles

CSS inheritance can get complicated at times and it’s useful to be able to see the final output of your CSS quickly. This is especially true if you’re using relative units of measurement, where the value you’re specifying (such as an em) won’t be calculated until the browser renders the code.

As you might expect, DevTools has a useful tool for this – the Computer styles tab. This might already be open (it’s the column with the Box Model at the top) – if not, it’s located next to the Styles tab.

In here, you can see the final calculated values of any property that has been specified. This might be font size, margin, padding or anything else.

Usefully, you can expand these to see any styles that have been overwritten (due to specificity or inheritance). You can also click through these to see them in the context of the CSS file.

Saving to local files

If you’re developing the site locally (i.e. on your computer), you can take all of this one step further. DevTools lets you automatically save the changes you’re making to the files.

Under Customize and control DevTools select Settings > Workspace > Add folder... then find the folder containing your CSS files.

When this is enabled, a little green circle will appear next to the file names in the Styles tab. This is certainly a useful feature, especially if you’re writing CSS from scratch. But be careful as it’s not so easy to undo changes!

Bonus: Moving elements around

A final non-CSS trick: you can drag-n-drop HTML elements around. This is a feature you might not use often but can be useful from time-to-time.

]]>