CSS/SCSS + HTML

by Jerry Sky

Notes on the static web technologies.

1. Resources

1.1. General

1.2. Animations

1.3. Archived (sentimental)

2. Web-kit scrollbar styling

As the webkit browser have very ugly scrollbars and there is no front-runner when it comes to JS-based scrollbar frameworks - the best solution seems to just style them using CSS/SCSS directly.

/* width */
::-webkit-scrollbar {
  background: lighten(#333, 3.5%);
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: lighten(#333, 9%);
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: lighten(#333, 30%);
}
/* Corner */
::-webkit-scrollbar-corner {
  background: lighten(#333, 3.5%);
}
/* Resizer */
::-webkit-resizer {
  background: lighten(#333, 8%);
}

3. Bootstrap & Sass

The idea is to not use the classic Bootstrap classes on HTML elements, but rather to compose a singular class of an element from Bootstrap’s @mixins.

Instead of attaching these col classes like so:

<div class="container">
  <div class="row">
    <div class="banana col-sm-6 col-md-4">
      <p>banana 🍌 content</p>
    </div>
  </div>
</div>

create a class that defines that element by using @mixins:

.banana {
  @include make-col-ready;
  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(md) {
    @include make-col(4);
  }
  p {
    font-size: 3rem;
    color: yellow;
    font-weight: 600;
  }
}

To use these @mixins and other Bootstrap’s functionalities it is necessary to import them:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

Since there is no need for these classic classes to be used in HTML you can turn them off by changing a variable in the _variables.css file:

$enable-grid-classes: false !default;

or just not to include the Bootstrap css file in your app config e.g. Angular (angular.json).

Read more in the source.

To create a link inside a div (that could be e.g. a post) which itself is a separate link you could use a solution described here by Sara Soueidan.
Essentially, the header of, in this case, an article is stretched over a div representing a description of a given article. Of course, this header is a link to this article. Now, we can incorporate another link inside this description and making it hover over the article link (using z-index).

Here is a piece of code from previously mentioned article that presents an example solution to this problem:

.the-post {
    /* elevate the links up */
    a {
        position: relative;
        z-index: 1;
    }
}

.the-post-title {
    /* ... */

    a {
        position: static;
        /* expand the pseudo-element to cover the post area */
        &::before {
            content: "";
            position: absolute;
            z-index: 0;
            top: ...;
            left: ...;
            width: ...;
            height: ...;
            /* ... */
        }
    }
}

5. Website design with respect to keyboard users

Most website designs are not optimized for keyboard users that facilitate the Tab key for navigating websites. The problem is, many websites have redundant links (multiple links referring to the same resource) that generate excess Tab keystrokes to navigate through e.g. articles on a website, as described here by Sara Soueidan. However, a fix to this problem is quite simple:

<a href="cool-subpage.html" tabindex="-1" aria-hidden="true">Cool subpage</a>

The tabindex attribute set to -1 renders this element invisible to keyboard users navigating using the Tab key. This element will be skipped.
The aria-hidden attribute set to true makes this element invisible to screen readers thus preventing from exposing this unreachable element to the user.

When a fixed header (an HTML element that is always visible – scroll position doesn’t matter) is present on the webpage the standard anchor links don’t work as expected. The targeted anchor element is not fully visible as the fixed header covers some of the target element.

The solution is to create a special anchor element that is offset by the fixed header’s height.

The anchor target element:

<div class="anchor" id="target"></div>

and its styling:

.anchor {
    margin-top: -$header-height;// - $additional-offset;
    padding-top: $header-height;// + $additional-offset;
}

where $header-height is the height of the fixed header and the optional $additional-offset variable can be used to move the view even further to improve readability.

Source: an answer on Stack Overflow