Andrew's Digital Garden
Topic - css
Related:
[[design]]
[[layout]]
[[responsivedesign]]
[[typography]]
[[web]]
#topic-page
Referred in
Masking vs clipping in CSS
Overflow hidden vs clip
Topic - languages
Gradients to transparent in Safari
Layout components
CSS System Colours
Easy CSS Masks
Cyclic CSS variables
Utility vs Semantic CSS
Position fixed & transforms
CSS Anchor Positioning
Quantity queries in CSS
:is and :where selectors
CSS combinators
:enabled vs :not(:disabled)
@use in SASS
CSS Masks
BEM
Extending in SASS
Every Layout
Width vs device-width, and responsive design
Border-radius accepts 8 values
Overscroll behaviour in CSS
Responsive props
:focus-visible-within
@property with CSS Custom Properties
CSS Relative Colors
Utility props API
reading-flow and reading-order
Block links, and interactive cards
Basics of CSS-in-JS
Digital Garden
:not selector
Whitespace + Flex
Ideas
Scaling stroke width in SVGs
CSS `word-break` vs `overflow-wrap`
Style queries
Stacking Contexts in CSS
CSS Logical Properties
SVG paint-order & borders
Separating CSS files from components for CSS-in-JS
Margin collapse
Child selectors vs descendant selectors
Animating to keywords
CSS Custom Properties
Mixing colours in CSS
Pausing animations in CSS
Animated gradients in CSS
Extend a CSS background outside of its container
`leading-trim` in CSS (now `text-box`)
CSS `accent-color`
Creating non-rectangular backgrounds in CSS
Cascade layers
CSS aspect-ratio
Using :has with odd numbered grids
Dictating flex items per row
Progressive enhancement
Specificity in CSS
Space as a first-class concept
Anatomy of Typography
The CSS Box Model
Pixel breakpoints and zooming
Atomic CSS
How styled-components injects styles
CSS and explicit dependencies
The Flexbox Holy Albatross
Private members in SASS
CSS variables flow down only
`clamp()` in CSS
How to select elements that are not children of other elements in CSS
Single source of styles in Styled Components
Clip paths in CSS
Fab four technique in CSS
Flow containers
Careful when using attr selectors with class
Constructable stylesheets
Donut scope
Soft hyphens
Unpacking line-height in CSS
Loading fonts in a browser
Flex item minimum width
Web Components for design systems
:focus-visible
Using box shadow over border
Using multiple box shadows
How to style the file input button
Scroll shadows
CSS variables make invalid statements valid
The Sidebar layout
Topic - layout
`lh` for sizing icons
Reusable components and width
calc-size
Selecting the first n items in CSS
Build-time vs Runtime CSS-in-JS
How do percentage values work in CSS position properties?
Hiding things accessibly
Topic - html
`@supports` in CSS
:has(:not()) vs :not(:has())
font-size-adjust
:has selector
Styling scrollbars
Line heights should be unitless
OKLCH
Defensive :focus-visible
:focus-within
Why styled components uses two classes
rgba() is just rgb()
Sizing images & layout shifts
Focus outlines
Media queries and fractional viewports
CSS text balancing
Percentage based padding in CSS
Scroll margin
display: flow-root
Visibility CSS keyword
@media hover feature
CSS Grid Blowouts
CSS attr attribute
Selecting a range of n items in CSS
Matching border radiuses for nested corners
Width and Height in CSS
Viewport units
Single-class vs multi-class CSS
Layout algorithms in CSS
CSS attributes selectors
nth-child 'of S' syntax
CSS units
Subpixel rendering
The selectmenu element
Reusable components and margin
::before and ::after on input elements
Background-clip in CSS
One invalid selector breaks the entire group
Snowflakes vs modifications
CSS Grid's `auto-fill` vs `auto-fit`
Topic - web
Braid's `Divider` component
CSS variables for theming
Intrinsic sizes in CSS
Container queries
The lobotomized owl selector
Partial CSS Variables
Positioning floating elements regardless of scrollbar existence
Colour variables
Semantic CSS
SASS vs SCSS
Background repeat
The top layer
Ampersand (&) in styled-components
Topic - css