A paper-style imitation library
Now I get it. As often, the container of the node matter.
A guide to primary navigation on the related HTML tags. About HTML, inert
and tabindex
are explained.
For CSS, an optimal focus indicator is explained. There are also :focus-within
and :focus-visible
.
Finally some patterns such as Accordion, Tooltips and skip links are explained.
It looks good.
In order to create tokens (without meaning), the best possible options are:
- $font-14 (px)
- $font-100 (abstract 100s value)
So new tokens can be
- $font-16, $font-36
- $font-150, $font-125, etc..
Names are then important! --level-3
, --spacing
, etc...
- container queries
- style queries (only chromium)
:has
(FF catches up)nth-of
selectortext-wrap: balance
(only chromium): definitely a good oneinitial-letter
(only chromium and safari)- dynamic viewport units (svh, sve, lvh, lvw, dvh, dvw)
- wide gamut color spaces
color-mix
- CSS nesting (FF have to implement it)
- CSS trigonometric functions
- individual transform properties (hey that was supported by FF since v72...)
- popover and selectmenu tags are WIP
and more
A text with a dynamic size depending of the container width:
.container {
container-type: inline-size;
}
.fluid-type {
font-size: clamp(1rem, 4cqi, 3rem);
}
Strategy 2: Grow From a Base Font Size with calc()
font-size: calc(var(--font-size-base) + var(--font-size-fluid, 3cqi));
An upper-bound size can be set with min
if needed.
Strategy 3: Generate Styles Using a Type Scale Ratio
The reason behind Atomic CSS
UnoCSS is an engine instead of a framework because there are no core utilities - all the functionalities are provided via presets or inline configurations.
Transition a CSS grid row from 0
to 1fr
to get an accordion working :D
An Advantage is the text is already rendered for screen readers.
Wow I didn't think about it. It seems practical!
With a list with data-index attributes such as <li class="searchable" data-index="newtoncronintorphy.dorothea@gmail.com(121)644-5577">
and the snippet:
<script type="text/javascript">
var searchStyle = document.getElementById('search_style');
document.getElementById('search').addEventListener('input', function() {
if (!this.value) {
searchStyle.innerHTML = "";
return;
}
// look ma, no indexOf!
searchStyle.innerHTML = ".searchable:not([data-index*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
// beware of css injections!
});
</script>
A simple CSS code to check bot messages on social media (mastodon).
A minimalist CSS library with special work on sidenotes, figures, and epigraphs.
An example of layout top to bottom with different width 👍
A color picker with the oklch format
oklch is based on human perception instead of the RGB for LCH.
How to make this better with little css.
Inherit font-size, line-height, word-spacing, border and padding.
There are also
In order to migrate code bases efficiently to the css logical properties, one should use a migration tool.
There is already a way to parse CSS with https://github.com/servo/rust-cssparser.
What we need is simply to replace some of its value :)
There is also a simple find-and-replace example with a gist: https://gist.github.com/cchaos/acfd24d603acd5f176766ab86b5dd1d5.
Depending on the vessel (ship):
Stern (back), port (left), bow (forward), starboard (right). These directions are based on the vessel "cap".
Depending on the skiers:
"skier's Left" is based on a skier facing down the mountain.
Depending on the reader:
- inline is how a sentence is read
- block is the perpendicular of inline
- start is where the flow... starts
- end is where the flow ... ends
I find it still hard to explain and I got it with examples. Read more on mdn
block/inline and start/end can be mixed up to target a specific location. From our Latin reader perspective, it applies as follows: https://i0.wp.com/css-tricks.com/wp-content/uploads/2022/03/block-dir.png?w=720&ssl=1
It's user-centric because its language direction is respective. [...] We can embrace diversity, complexity, and unpredictability and rely on the browser engines to properly lay it out.
Why all of these? Because right, left, top, and bottom can be interpreted differently between the explainer's and the public points of view.
A clear starting point on logical properties!