indian flagGovernment of India
|
GitHub GitHub

Powered by NeGD | MeitY Government of India® UX4G

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 construct upon Normalizing, providing subjective styling to numerous HTML components using only element selectors. Additional style can only be applied using classes.

  • Adjust several browser default values for scalable component spacing to utilize 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.1

With v1.0.1, 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 provide better page-wide defaults, the elements html and body are upgraded. 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 color are also set by the body. Later, this is inherited by some elements to prevent inconsistencies
  • 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.

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.

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.

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.

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
100
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.

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.