<commit_before># Core CSS

## `@nrk/core-css` exposes a set of class names to ease creating backwards compatible layouts and standard NRK styling. The code is built on BEM-conventions and is namespaced `nrk-` to play nice with existing projects.

---

## Installation

Insert the code below into the `<head>` of your page to get started:

```html
<link rel="stylesheet" href="https://static.nrk.no/core-css/major/1/core-css.min.css">
```

---

## Accessibility

In general, semantic html-markup like `<nav>` does not require attributes for usability. There will be cases in which you will need to selectively "show" and "hide" content by either removing it from the visual flow or preventing screen readers from reading it.

<div class="nrk-grid">
  <div class="nrk-xs-12of12 nrk-md-3of12" style="padding-right:15px">
    <h3>Hide from everyone</h3>
    Add the <a href="https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/hidden"><code>hidden</code> attribute</a> attribute to dynamically hide content from all users. Remove the attribute to show it again.
  </div>
  <div class="nrk-xs-12of12 nrk-md-3of12" style="padding-right:15px">
    <h3>Hide from screen readers only</h3>
    Use the <code>aria-hidden="true"</code> attribute to hide content from screen readers while keeping it visually perceivable.
  </div>
  <div class="nrk-xs-12of12 nrk-md-3of12" style="padding-right:15px">
    <h3>Hide from browsers only</h3>
    Use the <code>.nrk-sr</code> class to show content to screen readers only. The content is visually hidden but remains visible for screen readers.
  </div>
  <div class="nrk-xs-12of12 nrk-md-3of12" style="padding-right:15px">
    <h3>Hide but show on focus</h3>
    Use the <code>.nrk-sr-focus</code> class to show content only when in focus. This is practical in keyboard-only interactions such as "skip to content".
  </div>
</div>

---

## Grid

 The `.nrk-grid` is flex based, but with a fallback to inline-block rendering for older browsers. Used alone, the grid only places it's direct child elements next to each other, aligns height to match tallest sibling and wraps rows when needed. The grid can therefore be used just to align items, or to build more complex layouts when combined with [size classes](/#sizes):

```html
<!-- Horizontal menu -->
<ul class="nrk-grid">
  <li>Menu item 1</li><commit_msg>Correct typos<commit_after># Core CSS

## `@nrk/core-css` exposes a set of class names to ease creating backwards compatible layouts and standard NRK styling. The code is built on BEM-conventions and is namespaced `nrk-` to play nice with existing projects.

---

## Installation

Insert the code below into the `<head>` of your page to get started:

```html
<link rel="stylesheet" href="https://static.nrk.no/core-css/major/1/core-css.min.css">
```

---

## Accessibility

In general, semantic html-markup like `<nav>` does not require attributes for usability. There will be cases in which you will need to selectively "show" and "hide" content by either removing it from the visual flow or preventing screen readers from reading it.

<div class="nrk-grid">
  <div class="nrk-xs-12of12 nrk-md-3of12" style="padding-right:15px">
    <h3>Hide from everyone</h3>
    Add the <a href="https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/hidden"><code>hidden</code> attribute</a> to dynamically hide content from all users. Remove the attribute to show it again.
  </div>
  <div class="nrk-xs-12of12 nrk-md-3of12" style="padding-right:15px">
    <h3>Hide from screen readers only</h3>
    Use the <code>aria-hidden="true"</code> attribute to hide content from screen readers while keeping it visually perceivable.
  </div>
  <div class="nrk-xs-12of12 nrk-md-3of12" style="padding-right:15px">
    <h3>Hide from browsers only</h3>
    Use the <code>.nrk-sr</code> class to show content to screen readers only. The content is visually hidden but remains visible for screen readers.
  </div>
  <div class="nrk-xs-12of12 nrk-md-3of12" style="padding-right:15px">
    <h3>Hide but show on focus</h3>
    Use the <code>.nrk-sr-focus</code> class to show content only when in focus. This is practical in keyboard-only interactions such as "skip to content".
  </div>
</div>

---

## Grid

 The `.nrk-grid` is flex based, but with a fallback to inline-block rendering for older browsers. Used alone, the grid only places it's direct child elements next to each other, aligns height to match tallest sibling and wraps rows when needed. The grid can therefore be used just to align items, or to build more complex layouts when combined with [size classes](#sizes):

```html
<!-- Horizontal menu -->
<ul class="nrk-grid">
  <li>Menu item 1</li>
{'fraction_non_alphanumeric': 0.11517990206514797, 'fraction_numerical': 0.019586970406642538, 'mean_word_length': 4.106521739130435, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 73, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4385094', 'n_tokens_mistral': 1500, 'n_tokens_neox': 1405, 'n_words': 571}