B2SBLOG

Often times we are limited by output of the embedded plugin or CMS or other issues on how we can reach to a specific element and apply styles to it, throughout experience on numerous projects we got a set of useful snippets that help us in specific practical cases.

Missing component: content/content/introheader

Add custom styling to a DIV with custom data-attribute

Sometimes we just deal with elements that don't have classnames and need still to apply CSS this is how:

.MyClass1[data-widget-type="MyWidgetType1"]

External links marked with icon automatically through CSS

Considered to be a good practice but pretty easy to loose some, this snippet handles links automatically based on attribute value

a[target="_blank"]::after {
        content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
        margin: 0 3px 0 5px;
}

Replace text with CSS only

Shocking but true, CSS can also amend the actual content (visible to user ofc) we are going to use after its a pseudo element.
Visibility modifier will show the new text.

Example:

.toBeReplaced {
    visibility: hidden;
    position: relative;
}
.toBeReplaced: after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}
Old Text

Inner shadows for boxes

For example we want a container to be scrollable and to show that nicely we can use inner shadow. To achieve effect like on image below:

We are going to use hint from here - https://stackoverflow.com/questions/12081814/have-an-issue-with-box-shadow-inset-bottom-only

Inset Shadow on scrollable container

.product-list-wrapper {
    height: 500px;
    overflow-y: scroll;
    position: relative;
      .bottom-shadow{
        -moz-box-shadow: inset  0 -20px 20px -20px grey;
        -webkit-box-shadow: inset  0 -20px 20px -20px grey;
        box-shadow: inset  0 -20px 20px -20px grey;
        position:sticky;
        bottom:0;
        height: 20px;
        width:100%;
        display:block;
      }
}

Breakpoint mixins

While things are changing rapidly in this space we still have some basics and those mixins are so far best and most useful way to setup breakpoints

Onion Skin in CSS

To see boundaries of elements and figure out nesting we need sometimes to apply so called onion skin this snippet shows a version that do not add any new borders and do not interrupt layout itself

CSS populated from HTML classnames using Sublime plugin

Sublime is my favorite IDE (I'm alone btw in this and in general we use VSCode ofc) this plugin allows to populate CSS skeleton from injected HTML structure based on the classnames already used there.

https://packagecontrol.io/packages/eCSStractor

Bootstrap Grid on top of any website

This is our way to spot problems in the layout right away before migrating it to our headless storefront

https://chrome.google.com/webstore/detail/bootstrap-grid-for-any-we/ngjnlpkfccnglmlobafmobgjoiiliden/related

Horizontally scrollable DIV inside vertically scrollable DIV

Found this gem on StackOverflow ofc

HTML

CSS

&__scroll {
  &-horizontal {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow scrolling: touch;
  }
  &-vertical {
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}
}