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
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;
}
}