Reboot

Reboot, a collection of element-specific CSS changes in a single file, kickstarts UX4G by offering a beautiful, dependable, and straightforward foundation upon which to develop.

Approach #

Reboot improves on Normalise by giving numerous HTML components subjective styling with only element selectors. Only classes can be used for additional style. For instance, restart several <table> styles to create a baseline that is easier and then provide .table, .table-bordered and more.

Following are the criteria and justifications for selecting what to override in Reboot:

Change several browser default values for scalable component spacing to utilise rems rather than ems
Stay away from the upper margin. Unexpected outcomes can emerge from the collapse of vertical boundaries. However, a single direction of margin is a simpler mental model, which is more significant.
Block elements margins should be in rems for simpler scaling across device sizes.
Keep font-related property declarations to a minimum and use inherit whenever possible.

CSS variables #

Added in v1.0.0

With v1.0.0, we made _root.scss a mandatory @import for all of our CSS bundles, including ux4g.css, ux4g-reboot.css, and ux4g-grid.css. Regardless of how many root level CSS variables are used in a bundle, this adds them to all bundles. In order to allow more real-time customisation without constantly recompiling Sass, UX4G will eventually continue to see additional CSS variables introduced over time. The strategy is to convert the original Sass variables into CSS variables. In this method, Sass' full potential is still available even if there is no use of CSS variables. The full implementation of this is still in the works.

For example, consider these :root CSS variables for common styles:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

In practice, those variables are then applied in Reboot like so:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Which allows you to make real-time customizations however you like:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

Page defaults #

To give better page-wide defaults, the and elements have been changed. More particularly:

Every element, including *::before and *::after and border-box, has its box-sizing set globally. This makes sure that padding or borders never cause an element's defined width to be exceeded.
There is no base font-size declared on the but 16px (the browser default) is assumed. font-size: For simple responsive type-scaling using media queries that respects user preferences and ensures a more accessible approach, 1rem is used to the. The $font-size-root variable can be changed to override this browser default.
The global font-family, font-weight, line-height, and colour are also set by the.
To avoid font discrepancies, some form elements will inherit this later. The has a defined background-color, which is set by default to #fff, for security.

Native font stack #

For the best text rendering across all platforms and operating systems, UX4G makes use of a "native font stack" or "system font stack." These system fonts provide enhanced screen rendering, changeable font support, and other features that have been specifically created with modern devices in mind. Read more about native font stacks in this Smashing Magazine article.

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Be aware that many common symbols and dingbat Unicode characters will appear as multicolored pictographs due to the font stack's inclusion of emoji fonts. They won't be impacted by any CSS color schemes, and their look will vary based on the native emoji font of the browser or platform.

The <body> is given this font family, and UX4G as a whole automatically inherits it. Recompile UX4G and edit $font-family-base to change the system font family.

Headings and paragraphs #

All heading elements—e.g., <h1>—and <p> are reset to have their margin-top removed. Headings have margin-bottom: .5rem added and paragraphs margin-bottom: 1rem for easy spacing.

Heading	Example
`<h1></h1>`	h1. UX4G heading
`<h2></h2>`	h2. UX4G heading
`<h3></h3>`	h3. UX4G heading
`<h4></h4>`	h4. UX4G heading
`<h5></h5>`	h5. UX4G heading
<h6></h6>	h6. UX4G heading

Horizontal rules #

The <hr> element has been simplified. Similar to browser defaults, <hr>s are styled via border-top, have a default opacity: .25, and automatically inherit their border-color via color, including when color is set via the parent. They can be modified with text, border, and opacity utilities.

  <hr/>
  
  <div class="text-success">
    <hr/>
  </div>
  
  <hr class="border border-danger border-2 opacity-50"/>
  <hr class="border border-primary border-3 opacity-75"/>

Result

Lists #

All lists, including <ul>, <ol>, and <dl>, have a margin-bottom of 1rem and a margin-top that has been eliminated. There is no margin-bottom for nested lists. On the <ul> and <ol> elements, the padding-left has also been reset.

<div class="bd-example">
<ul>
<li>All lists have their top margin removed</li>
<li>And their bottom margin normalized</li>
<li>Nested lists have no bottom margin</li>
  <ul>
    <li>This way they have a more even appearance</li>
    <li>Particularly when followed by more list items</li>
  </ul>
<li>The left padding has also been reset</li>
</ul>
<ol>
<li>Here's an ordered list</li>
<li>With a few list items</li>
<li>It has the same overall look</li>
<li>As the previous unordered list</li>
</ol>
</div>

Result

All lists have their top margin removed
And their bottom margin normalized
Nested lists have no bottom margin

This way they have a more even appearance
Particularly when followed by more list items

The left padding has also been reset

Description lists now have improved margins for a cleaner design, more obvious hierarchy, and better spacing. <dd>s add margin-bottom: .5rem and reset margin-left to 0, whereas <dt>s are bolded.

Description lists: A description list is perfect for defining terms.
Term: Definition for the term.; A second definition for the same term.
Another term: Definition for this other term.

Inline code #

Use <code> to enclose inline code snippets. Angle brackets in HTML must always be escaped.

For example, <section> should be wrapped as inline.

Result

 For example, <section> should be wrapped as inline.

Code blocks #

For many lines of code, use <pre>. Again, for appropriate rendering, make sure to escape any angle brackets in the code. The margin-top and margin-bottom of the <pre> element are removed and replaced with rem units, respectively.

<p>Sample text here...</p> <p>And another line of sample text here...</p>

Result

<p>Sample text here...</p> <p>And another line of sample text here...</p>

Variables #

For indicating variables use the <var> tag.

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Result

y = mx + b

User input #

To denote input that is commonly typed using a keyboard, use the symbol <kbd>.

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Result

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

Sample output #

For indicating sample output from a program use the <samp> tag.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

RESULT

This text is meant to be treated as sample output from a computer program.

Tables #

Tables are slightly adjusted to style <caption>s, collapse borders, and ensure consistent text-align throughout. Additional changes for borders, padding, and more come with [the .table class] Tables.

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

RESULT

This is an example table, and this is its caption to describe the contents.
Table heading	Table heading	Table heading	Table heading
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell
Table cell	Table cell	Table cell	Table cell

Forms #

Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:

<fieldset>s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
<legend>s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
<label>s are set to display: inline-block to allow margin to be applied.
<input>s, <select>s, <textarea>s, and <button>s are mostly addressed by Normalize, but Reboot removes their margin and sets line-height: inherit, too.
<textarea>s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
<button>s and <input> button elements have cursor: pointer when :not(:disabled).

These changes, and more, are demonstrated below.

                                            
<form class="bd-example">
<fieldset>
<legend>Example legend</legend>
<div class="mb-15"><label class="mr-10" for="input">Example input</label><input type="text" id="input"
placeholder="Example input">
</div>
<div class="mb-15"><label class="mr-10" for="email">Example email</label><input type="email" id="email"
placeholder="test@example.com"></div>
<div class="mb-15"><label class="mr-10" for="tel">Example telephone</label><input type="tel" id="tel"></div>
<div class="mb-15"><label class="mr-10" for="url">Example url</label><input type="url" id="url"></div>
<div class="mb-15"><label class="mr-10" for="number">Example number</label><input type="number"
id="number"></div>
<div class="mb-15"><label class="mr-10" for="search">Example search</label><input type="search"
id="search"></div>
<div class="mb-15"><label class="mr-10" for="range">Example range</label><input type="range" id="range"
min="0" max="10"></div>
<div class="mb-15"><label class="mr-10" for="file">Example file input</label><input type="file" id="file">
</div>
<div class="mb-15"><label class="mr-10" for="select">Example select</label><select id="select">
<option value="">Choose...</option>
<optgroup label="Option group 1">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</optgroup>
<optgroup label="Option group 2">
<option value="">Option 4</option>
<option value="">Option 5</option>
<option value="">Option 6</option>
</optgroup>
</select></div>
<div class="mb-15"><label><input type="checkbox" value=""> Check this
checkbox</label></div>
<div><label><input type="radio" name="optionsRadios" id="optionsRadios1"
value="option1" checked=""> Option one is this and
that</label><label><input type="radio" name="optionsRadios"
id="optionsRadios2" value="option2">Option two is something else
that's also super long to demonstrate the wrapping
of these fancy form controls.</label><label><input type="radio"
name="optionsRadios" id="optionsRadios3" disabled=""
value="option3"> Option three is disabled</label>
</div>
<div class="mb-15"><label class="mr-10" for="textarea">Example textarea</label><textarea id="textarea"
rows="3"></textarea></div>
<div class="mb-15"><label class="mr-10" for="date">Example date</label><input type="date" id="date"></div>
<div class="mb-15"><label class="mr-10" for="time">Example time</label><input type="time" id="time"></div>
<div class="mb-15"><label class="mr-10" for="password">Example password</label><input type="password"
id="password"></div>
<div class="mb-15"><label class="mr-10" for="datetime-local">Example
datetime-local</label><input type="datetime-local"
id="datetime-local"></div>
<div class="mb-15"><label class="mr-10" for="week">Example week</label><input type="week" id="week"></div>
<div class="mb-15"><label class="mr-10" for="month">Example month</label><input type="month" id="month">
</div>
<div class="mb-15"><label class="mr-10" for="color">Example color</label><input type="color" id="color">
</div>
<div class="mb-15"><label class="mr-10" for="output">Example output</label><output name="result"
id="output">100</output></div>
<div class="mb-15 "><button class="mr-10" type="submit">Button submit</button><input type="submit"
value="Input submit button"><input type="reset"
value="Input reset button"><input type="button"
value="Input button"></div>
<div class="mb-15 mr-10"><button type="submit" disabled="">Button
submit</button><input type="submit" disabled=""
value="Input submit button"><input type="reset" disabled=""
value="Input reset button"><input type="button" disabled=""
value="Input button"></div>
</fieldset>
</form>

RESULT

Example legend

Example input

Example email

Example telephone

Example url

Example number

Example search

Example range

Example file input

Example select

Check this checkbox

Option one is this and thatOption two is something else that's also super long to demonstrate the wrapping of these fancy form controls. Option three is disabled

Example textarea

Example date

Example time

Example password

Example datetime-local

Example week

Example month

Example color

Example output100

caution

Date & color input support Keep in mind date inputs are not fully supported by all browsers, namely Safari.

Pointers on buttons #

An improvement for role="button" in Reboot changes the default cursor to a pointer. To help show that an element is interactive, add this attribute to it. For <button> elements, which receive their own cursor change, this role is not required.

<span role="button" tabindex="0">Non-button element button</span>

RESULT

Non-button element button

Misc elements #

Address #

The <address> element has been modified to change the default font style of the browser from italic to normal. Additionally, margin-bottom: 1rem has been added, and line-height has now been inherited. <address>s are used to provide contact details for the nearest ancestor (or a body of work in general). Keep formatting by using a <br> at the end of each line.

  <address>
    <strong>Twitter, Inc.</strong><br/>
    1355 Market St, Suite 900<br/>
    San Francisco, CA 94103<br/>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>

  <address>
    <strong>Full Name</strong><br/>
    <a href="mailto:first.last@example.com">first.last@example.com</a>
  </address>

RESULT

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Full Name
first.last@example.com

Blockquote #

The default margin on blockquotes is 1em 40px, so we reset that to 0 0 1rem for something more consistent with other elements.

  <blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
  </blockquote>
  <p>Someone famous in <cite title="Source Title">Source Title</cite></p>

RESULT

A well-known quote, contained in a blockquote element.

Inline elements #

The <abbr> element receives basic styling to make it stand out amongst paragraph text.

  The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.

RESULT

The HTML abbreviation element.

Summary #

The default cursor on summary is text, so we reset that to pointer to convey that the element can be interacted with by clicking on it.

<details>
    <summary>Some details</summary>
    <p>More info about the details.</p>
  </details>

  <details open>
    <summary>Even more details</summary>
    <p>Here are even more details about the details.</p>
  </details>

RESULT

Some details

More info about the details.

Even more details

Here are even more details about the details.

HTML5 `[hidden]` attribute

The [hidden] global attribute in HTML5 has the default styling of display: none. We improve on this default, taking a cue from PureCSS, by setting [hidden] {display: none!important;} to help stop its display from being unintentionally overridden.

The jQuery $(...).hide() and $(...).show() methods do not work with [hidden]. Because of this, it is not strongly recommend [hidden] above other methods of controlling the visibility of items.

Use the.invisible class in its place to just toggle an element's visibility, leaving the element's presentation unaltered and allowing it to continue influencing the document's flow.

<input type="text" hidden>

caution

jQuery incompatibility

[hidden] is not compatible with jQuery’s $(...).hide() and $(...).show() methods. Therefore, we don’t currently especially endorse [hidden] over other techniques for managing the display of elements.

To merely toggle the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document, use the .invisible class instead.

Approach
CSS variables
Page defaults
Native font stack
Headings and paragraphs
Horizontal rules
Lists
Inline code
Code blocks
Variables
User input
Sample output
Tables
Forms
- Pointers on buttons
Misc elements
HTML5 [hidden] attribute

Previous « Images

Next Tables »

Reboot

Approach #

CSS variables #

Page defaults #

Native font stack #

Headings and paragraphs #

Horizontal rules #

Result

Lists #

Result

Inline code #

Result

Code blocks #

Result

Variables #

Result

User input #

Result

Sample output #

RESULT

Tables #

RESULT

Forms #

RESULT

Pointers on buttons #

RESULT

Misc elements #

Address #

RESULT

Blockquote #

RESULT

Inline elements #

RESULT

Summary #

RESULT

HTML5 [hidden] attribute

jQuery incompatibility

HTML5 `[hidden]` attribute