René's URL Explorer Experiment


Title: SmolCSS

Open Graph Title: SmolCSS

X Title: SmolCSS

Description: Minimal snippets for modern CSS layouts and components, created by Stephanie Eckles of ModernCSS.dev

Open Graph Description: Minimal snippets for modern CSS layouts and components

X Description: Minimal snippets for modern CSS layouts and components

direct link

Domain: smolcss.dev

NoneIE=edge
twitter:cardsummary_large_image
twitter:creator@5t3ph
og:imagehttps://smolcss.dev/smolcss.png
twitter:imagehttps://smolcss.dev/smolcss.png

Links:

Stephanie Eckleshttps://twitter.com/5t3ph
ModernCSS.devhttps://moderncss.dev
Responsive CSS Gridhttps://smolcss.dev#smol-css-grid
Responsive Flexbox Gridhttps://smolcss.dev#smol-flexbox-grid
Modern Centeringhttps://smolcss.dev#smol-grid-centering
Intrinsic Containerhttps://smolcss.dev#smol-container
Breakout Gridhttps://smolcss.dev#smol-breakout-grid
Stack Layouthttps://smolcss.dev#smol-stack-layout
Responsive Paddinghttps://smolcss.dev#smol-responsive-padding
Responsive Sidebar Layouthttps://smolcss.dev#smol-responsive-sidebar
Aspect Ratio Galleryhttps://smolcss.dev#smol-aspect-ratio-gallery
Flexible Unbreakable Boxeshttps://smolcss.dev#smol-unbreakable-boxes
Background Picturehttps://smolcss.dev#smol-background-picture
Composable Card Componenthttps://smolcss.dev#smol-card-component
Avatar List Componenthttps://smolcss.dev#smol-avatar-list
Scroll Snaphttps://smolcss.dev#smol-scroll-snap
Focus Styleshttps://smolcss.dev#smol-focus-styles
Visited Styleshttps://smolcss.dev#smol-visited-styles
Document Styleshttps://smolcss.dev#smol-document-styles
Transitionshttps://smolcss.dev#smol-transitions
Article Anchorshttps://smolcss.dev#smol-article-anchors
List Markershttps://smolcss.dev#smol-list-markers
# Section titled Smol Responsive CSS Grid https://smolcss.dev#smol-css-grid
creating a responsive CSS grid solutionhttps://moderncss.dev/solutions-to-replace-the-12-column-grid/
# Section titled Smol Responsive Flexbox Grid https://smolcss.dev#smol-flexbox-grid
creating a responsive flexbox grid solutionhttps://moderncss.dev/solutions-to-replace-the-12-column-grid/
# Section titled Smol Modern Centering https://smolcss.dev#smol-grid-centering
see more centering solutionshttps://moderncss.dev/complete-guide-to-centering-in-css/
# Section titled Smol Intrinsic Container https://smolcss.dev#smol-container
margin-inline has fairly good supporthttps://caniuse.com/mdn-css_properties_margin-inline
Smol Flexible Unbreakable Boxeshttps://smolcss.dev#smol-unbreakable-boxes
review additional uses of min()https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max/#the-modern-css-container-class
# Section titled Smol Breakout Grid https://smolcss.dev#smol-breakout-grid
Smol Responsive Gridhttps://smolcss.dev#smol-css-grid
# Section titled Smol Stack Layout https://smolcss.dev#smol-stack-layout
cumulative layout shifthttps://web.dev/cls/
Pexelshttps://www.pexels.com/video/a-sky-full-of-stars-at-night-2646392/
website hero designshttps://moderncss.dev/3-popular-website-heroes-created-with-css-grid-layout/
creating custom checkboxeshttps://moderncss.dev/pure-css-custom-checkbox-style/
position animated image captionshttps://moderncss.dev/animated-image-gallery-captions-with-bonus-ken-burns-effect/
# Section titled Smol Responsive Padding https://smolcss.dev#smol-responsive-padding
more techniques for contextual, intrinsic spacinghttps://moderncss.dev/contextual-spacing-for-intrinsic-web-design/
# Section titled Smol Responsive Sidebar Layout https://smolcss.dev#smol-responsive-sidebar
# Section titled Smol Aspect Ratio Gallery https://smolcss.dev#smol-aspect-ratio-gallery
has support in all major modern browsershttps://caniuse.com/mdn-css_properties_aspect-ratio
Smol Responsive Flexbox Gridhttps://smolcss.dev#smol-flexbox-grid
flexbox gallery egghead lessonhttps://egghead.io/lessons/flexbox-create-an-automatically-responsive-flexbox-gallery?af=2s65ms
egghead lesson on object-fithttps://egghead.io/lessons/css-apply-aspect-ratio-sizing-to-images-with-css-object-fit?af=2s65ms
# Section titled Smol Flexible Unbreakable Boxes https://smolcss.dev#smol-unbreakable-boxes
CSS is awesomehttps://css-tricks.com/css-is-in-fact-awesome/
responsive paddinghttps://smolcss.dev#smol-responsive-padding
hyphenshttps://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#browser_compatibility
visited styles demohttps://smolcss.dev#smol-visited-styles
Developing For Imperfect: Future Proofing CSS Styleshttps://moderncss.dev/developing-for-imperfect-future-proofing-css-styles/
# Section titled Smol Background Picture https://smolcss.dev#smol-background-picture
image galleryhttps://smolcss.dev#smol-aspect-ratio-gallery
Smol Stack Layouthttps://smolcss.dev#smol-stack-layout
Mark Harpurhttps://unsplash.com/@luckybeanz?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
Unsplashhttps://unsplash.com/s/photos/landscape?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText
handling responsive image displayhttps://12daysofweb.dev/2021/image-display-elements/
# Section titled Smol Composable Card Component https://smolcss.dev#smol-card-component
CSS Selectors Level 4https://drafts.csswg.org/selectors-4/#negation
well supported in modern browsershttps://caniuse.com/css-not-sel-list
Smol Aspect Ratio Galleryhttps://smolcss.dev#smol-aspect-ratio-gallery
Smol Responsive CSS Gridhttps://smolcss.dev#smol-css-grid
Visit ModernCSS.devhttps://moderncss.dev
selectors and combinatorshttps://moderncss.dev/guide-to-advanced-css-selectors-part-one/
pseudo classes and pseudo elementshttps://moderncss.dev/guide-to-advanced-css-selectors-part-two/
# Section titled Smol Avatar List Component https://smolcss.dev#smol-avatar-list
facepilehttps://indieweb.org/facepile
https://smolcss.dev#smol-avatar-list
https://smolcss.dev#smol-avatar-list
https://smolcss.dev#smol-avatar-list
video lesson on object-fithttps://egghead.io/lessons/css-apply-aspect-ratio-sizing-to-images-with-css-object-fit?af=2s65ms
methods for creating CSS bordershttps://moderncss.dev/the-3-css-methods-for-adding-element-borders/
example of using :focus-withinhttps://moderncss.dev/css-only-accessible-dropdown-navigation-menu/
avataaarshttps://getavataaars.com/
# Section titled Smol Scroll Snap https://smolcss.dev#smol-scroll-snap
# Section titled Smol Focus Styles https://smolcss.dev#smol-focus-styles
generate an accessible color palette with ButtonBuddyhttps://buttonbuddy.dev
A linkjavascript:;
A link customized to dashed stylejavascript:;
article on newly supported CSS pseudo-class selectorshttps://www.smashingmagazine.com/2021/04/guide-supported-modern-css-pseudo-class-selectors/
tips on how CSS impacts accessibilityhttps://moderncss.dev/modern-css-upgrades-to-improve-accessibility/
# Section titled Smol Visited Styles https://smolcss.dev#smol-visited-styles
the potential to be exploited in terms of user's privacyhttps://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector
ModernCSS.devhttps://ModernCSS.dev
LearnFromSteph.devhttps://LearnFromSteph.dev
Course: Accessibly Styling Form Fieldshttps://5t3ph.dev/a11y-forms
in-depth reference on styling :visitedhttps://una.im/hacking-visited/
Style Stage directoryhttps://stylestage.dev/styles/
# Section titled Smol Document Styles https://smolcss.dev#smol-document-styles
starting with part onehttps://moderncss.dev/guide-to-advanced-css-selectors-part-one/
Smol 11ty Starterhttps://smol-11ty-starter.netlify.app/
# Section titled Smol Transitions https://smolcss.dev#smol-transitions
# Section titled Smol Article Anchors https://smolcss.dev#smol-article-anchors
researched by Amber Wilsonhttps://amberwilson.co.uk/blog/are-your-anchor-links-accessible/
# Section titled A Wonderful Article Headline https://smolcss.dev#smol-article-anchor-title
Learn more about the :target pseudo classhttps://moderncss.dev/guide-to-advanced-css-selectors-part-two/
# Section titled Smol List Markers https://smolcss.dev#smol-list-markers
totally custom list styleshttps://moderncss.dev/totally-custom-list-styles/
ModernCSS.devhttps://moderncss.dev
watch my front-end lessons on eggheadhttps://5t3ph.dev/egghead
Style Stagehttps://stylestage.dev
Stephanie Eckleshttps://twitter.com/5t3ph
ModernCSS.devhttps://moderncss.dev
Subscribe to RSShttps://smolcss.dev/feed/
Buy Me a Coffeehttps://www.buymeacoffee.com/moderncss
Star on GitHubhttps://github.com/5t3ph/smolcss
can harm accessibilityhttps://adrianroselli.com/2020/10/a11yto-conf-css-display-properties-versus-html-semantics.html

Viewport: width=device-width, initial-scale=1.0

URLs of crawlers that visited me.