Learn to create custom, cross-browser, theme-able, scalable radio buttons in pure CSS and ensuring styles remain accessible across states.

Also checkboxes:
https://moderncss.dev/pure-css-custom-checkbox-style/

https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/

Information architect, author, and educator

Your Instagram feed may tell you that the line spacing should be 20% more than the font size. You may see that the difference should be as much as 50% as well.

There is no magic ratio. Text blocks will look different with different typefaces because of differences in Cap Height and X-height. While 120% is very likely to work for interface fonts — because they were created with a certain Cap to X-height ratio — the rest are problematic.

To solve the problem, you should not use a common index for all fonts, but an individual one, depending on its X-height. It is necessary to take a lowercase letter without extensions — for example, N — of the same point size as the typed text, and put it between two lines of text so that the upper boundary of the letter touches the typing line of the first line, and the lower boundary touches the upper height of the uppercase letter.

The benefit of a CSS framework is that it helps you create a number of eye-catching layouts without having to start from scratch.

1. For Simple Needs, Use Class-less
   Some examples of classless frameworks include sakura, watercss, holiday.css, bamboo css, attricss, and basic.css.

2. To Build on Mobile, Opt for Very Lightweight
   Examples of very lightweight CSS include pure, chota, and milligram.

3. For an Open-and-Go Solution, Use General Purpose
   Examples of general purpose CSS include bootstrap, primer, foundation, and base.

4. For Niche Needs, Opt for Specialized
   An example of a specialized CSS is bojler, which is used for developing lightweight and responsive email templates. It’s no secret that developing email templates is a pain.

5. Looking to Skip Javascript? Material Design is the Way to Go
   Material design CSS frameworks include newer versions of UI controls such as check boxes, text fields, column layouts ,and typography. MD is can be used across browsers by anyone who wants to create more portable and usable web pages.

6. For Greater Attention to Detail Utility-Based Frameworks Are Best
   Some examples of utility-based frameworks include tachyons and tailwind CSS.

7. For Web App Development and Mobile-First, Look to Base/Reset/Normalize
   Some great examples of base css frameworks include sanitize.css, ress, minireset.css, normalize.css, modern normalize, and natural selection.

8. For More Flexibility, Toolkits Work Well
   An example of a toolkit CSS is Bourbon. Bourbon aims for clarity, is pure Sass and lacks visual opinion.

9. Honorable Mentions Are Those with Stalled Development
   Some examples of stalled development frameworks include flexbox grid, semantic UI, materialize, neat, wing, and propeller.

Checkboxes are the worst
But I'm here to help make them better.

Here's an approach I use to always perfectly center them with the first line of text, no matter the text length or size

Laws of UX is a collection of best practices that designers can consider when building user interfaces.

Aesthetic-Usability Effect

Users often perceive aesthetically pleasing design as design that’s more usable.

We take a look at why the GOV.UK Design System changed the element it uses for inputting numbers, making it more accessible and easier to use.

Using <input type="text" inputmode="numeric" pattern="[0-9]*"> allows for a degree of separation between how the user enters data (“input mode”), what the browser expects the user input to contain (type equals number), and potentially how it tries to validate it.

Meet the Extendabox-rule

The four strokes making up a box end at each intersection. But in our unconsciousness, every one of those lines draws out an imaginary line much further, through the entirety of your design.

A grid works the other way around: you define a set of columns, gutters, and rows to make up certain sections of your design, and you then position all of your objects onto that grid.

Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

For the best results using Bulma, it's recommended to use the control element as often as possible.

<div class="field">
  <label class="label">Username</label>
  <div class="control has-icons-left has-icons-right">
    <input class="input is-success" type="text" placeholder="Text input" value="bulma">
    <span class="icon is-small is-left">
      <i class="fas fa-user"></i>
    </span>
    <span class="icon is-small is-right">
      <i class="fas fa-check"></i>
    </span>
  </div>
  <p class="help is-success">This username is available</p>
</div>

Setting up your screen reader

For this guide, I’m going to use VoiceOver on Mac, a screen reader program that comes on new Mac computers, iPhones, and iPads. If you’re on Windows, you can use JAWS or NVDA. I’ll provide guiding questions and examples of good and bad interactions, so your OS shouldn’t matter.
The first step is to enable your screen reader and get familiar with its keyboard shortcuts.

1. Tab
2. Ctrl-Option- ← →
3. Ctrl-Option-Cmd-H
4. Ctrl–Option–Cmd–G
   Bonus: disabled buttons

A cool spinner made only with divs, some border tricks, and one CSS animation.

I really enjoyed digging into this pen by Luke Richardville. You wouldn’t think it had much to teach, seeing as it’s only 12 lines of Pug and 32 lines of SCSS.

https://codepen.io/lukerichardville/pen/NWpYdQY

In this post, UXPin looks at using negative space in design and how you can use it to create more engaging websites and apps.

Good web design with tall line-height

100 Colorful vector illustration to design website banners and landing pages, commercial license and SVG FIGMA SKETCH AI files included

If you ever wanted to create triangles using CSS, you probably found code samples on stack-overflow or css-tricks. But how do they really work ? Understanding the process behind creating triangles…

Every element I use for the basic structure of a HTML document, with explanations why.

Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate.

https://html5boilerplate.com/

What does Cache-Control really do? In basic terms? Let’s find out!

When designing a website, the most important thing is to make it as usable and convenient as possible. On a website on which users could possibly get confused, it is best to include help elements. Help elements come in all different shapes and sizes: an entire page, a suggestion box or a quick tip. But they all have one thing in common: besides doing the obvious (i.e. helping the user), help elements provide an extra convenience that brings the website closer to that sought-after usability.

I find working with the grid helpful. The grid helps to maintain consistency across the different layouts and make faster design decisions. Grids give more precise control over alignments and layout on different screen sizes.

Fixed-Width Layout Grid Setup

To set up a fixed-width grid, we use fixed numeric value for gutters and columns. I recommend 74px wide columns, 32px wide gutters and 16px side margins on each side.

Mobile View

For mobile devices, we use a fluid grid where gutters and side margins have fixed numeric values. I recommend 16px wide gutters and 16px wide side margins on each side.
We can design mobile interfaces at 360×640 sized artboard.
Mobile devices have a small screen resolution. If we display the 12 separate columns, gutters, and side margins on such a small resolution, it becomes quite cumbersome to design at scale.

If there's one button you use every time you open Spotify, it’s the play button. Today, we’re updating it significantly for better accessibility.