#css
i made my own tiny website thing on plain HTML and CSS
https://snugglybun.neocities.org/
#web #css #html #web1 #neocities #geocities #oldskool #worldwideweb

#Design #Development #Evolutions
2023 state of design systems and where we take them next · How far design systems have come and where they are heading https://ilo.im/11x65a
“Design systems continue to stick around and will likely stick around until there is a new buzzword for them.” — Ian Frost
_____
#DesignSystem #UiDesign #DigitalDesign #WebDesign #WebDevelopment #WebDev #AI #WebComponents #Frontend #HTML #CSS #JavaScript
New entry on the Sass Blog:
Sass and Native Nesting
#CSS Tip: read the specs. That’s it, that’s the whole tip.
Mastodon Bird UI v1.3.4 released! :neon_skull:
Changelog:
* Accessibility: Fix focus for list toggle (thanks @MerriNet!)
* Accessibility: Fix focus ring on :focus-visible on column-links
* Add follow and unfollow hashtag icons (thanks for the idea @jaoler and @lari)
Source code: https://github.com/ronilaukkarinen/mastodon-bird-ui
Demo: https://mementomori.social
#OpenSource #Mastodon #MastodonBirdUI #CSS #UI #WebDev #MastoAdmin

CSS is hard no matter how good you are at it
Link: https://www.aha.io/engineering/articles/css-is-hard-no-matter-how-good-you-are-at-it
Discussion: https://news.ycombinator.com/item?id=35361628
What is the best way/format to share/sync #DesignTokens between #Figma and #CSS (custom properties)?
Looking to spearhead an approach to bring #DesignSystem stuffs in Figma into site/app development at work.
Hopefully there is a way to use these tokens in Figma through the UI, and also to export them or sync them to a GitHub repo or something - as CSS custom properties or as JSON - or another approach if there is a better one?
Seeing people post about their first encounters with #CSS, I was reminded of my first “aha” moment of it as I scanned the source code of some of Todd Fahrner’s early works. He colored borders of th and td elements to achieve bevels and depths, which was unseen at the time, outside of images based trickery that is.
Adding Dark Mode via CSS Variables
https://www.mirrorful.com/blog/implementing-dark-mode
Discussions: https://discu.eu/q/https://www.mirrorful.com/blog/implementing-dark-mode
Selecting previous siblings with #CSS :has(): "One of the more maddening limitations of CSS was for long its inability to select elements based on their children or preceding siblings. This made it impossible to construct CSS selectors that could target previous siblings of an element, but the has:() pseudo-class has thrown out the old limitations and opened up a new world of possibilities when working with selectors." https://tobiasahlin.com/blog/previous-sibling-css-has/

Some simple ways to make content look good: "Something non-designers understandably struggle with is how to make things look good. One of those things is long form content that’s well set and readable. Luckily, #CSS makes this easy, you just have to know what to change. That’s exactly what we’re going to teach you in this article." https://set.studio/some-simple-ways-to-make-content-look-good/

💡 CSS Tip!
Use the new color-mix() to manipulate the Hue of a color in the HSL color space (until better support for relative color syntax)
Demo: https://codepen.io/t_afif/pen/VwGNQEv via :codepen: #CodePen

Make an image respect its aspect ratio and at the same time assign desirable width and height.
```
max-width: 100%;
max-height: 100%;
height: auto;
width: auto;
```
Amazing! ✨
Tailwind CSS v3.3
Link: https://tailwindcss.com/blog/tailwindcss-v3-3
Discussion: https://news.ycombinator.com/item?id=35353182
:kitten: Just merged an improved slots implementation to main and you can now pass CSS class lists to components. 🎉
Read more:
Slots:
https://codeberg.org/kitten/app#slots
Layout components:
https://codeberg.org/kitten/app#layout-components
Passing CSS class lists to components:
https://codeberg.org/kitten/app#layout-components
Named slots:
https://codeberg.org/kitten/app#layout-components
Sample project:
https://codeberg.org/kitten/app/src/branch/main/examples/layout
#Kitten #SmallWeb #templating #layout #components #web #dev #html #css #js
By running my blog with only pure #html and #css, my carbon footprint is significantly lower than with a resource hungry monster like #wordpress.
Dadurch, dass mein Blog nur mit purem #html und #css läuft, ist mein Kohlenstoff-Fußabdruck erheblich geringer, als bei einem Ressourcen hungrigen Monster wie #Wordpress.
Mastodon Bird UI v1.3.3 released! :neon_skull:
Changelog:
* Hide navigation-panel scrollbars on Firefox on desktop
* Hide lists by default, show the list of lists on hover (thanks for the idea @laukanhenkka!)
* Order preferences menu before lists
* Add order to all desktop column-link items
Source code: https://github.com/ronilaukkarinen/mastodon-bird-ui
Demo: https://mementomori.social
#OpenSource #Mastodon #MastodonBirdUI #CSS #UI #WebDev #MastoAdmin


When using CSS import to bring css into files, do duplicate import statements result in duplicate code or bad performance? Thinking whether I could create native web components (custom elements) that import a CSS file into a cascade layer. The principle being to NOT encapsulate styles with Shadow DOM, but embrace the cascade for styling purposes. #CSS #WebComponents #CascadeLove
Thanks to #AutoDeploy with #GithubWorkflows I did a month ago, and after introducing the concept of #GitHub to my girlfriend, she’s able to correct my typos in our websites without any knowledge in server, #Hugo, #HTML, #CSS or even deployment. 🙂
(And she don’t need me for it!)
#IndieDev
RT T. Afif @ CSS Challenges
💡 CSS Tip!
Use the new color-mix() to create different shades from one color.
Mix with ⚫️black for a darker color and ⚪️white for a lighter color
Demo: http://codepen.io/t_afif/pen/ExeMOPV via @CodePen
#CSS https://t.co/m5VP4QBP11
<div class="rsshub-quote">
T. Afif @ CSS Challenges: 💡 CSS Tip!
Use the new color-mix() function to create a color switch.
✅ No color duplication
✅ Define your colors using one variable
✅ Easy switch between colors
✅ Suitable for dark/light mode
Demo: http://codepen.io/t_afif/pen/XWPGWPp via @CodePen
#CSS https://t.co/4l9uyVXPds
</div>
:sys_twitter: https://twitter.com/ChallengesCss/status/1640674024438083584




What if… When something is focused via `:focus-visible` in #CSS, pressing `esc` would by default remove the `:focus-visible`, but would keep the `:focus` on the element?
I'm thinking about how it could be possible to use `:focus-visible` for something like tooltips, but currently there is no way to dismiss them other than using JS or tabbing away from the context.
(if anyone who's good with #accessibility / #a11y could tell if this is a good or a bad idea — I would be happy)
And today reminded me of the fact that #CSS makes my eyes cross, my brain ache and gives me a mighty need to stab the shit out things. #CustomStreamThemeSetup
Automatic code syntax highlighting on the web.
What are folks using these days?
Last one I used was https://prismjs.com
Curious what else is out there.

Mastodon Bird UI v1.3.2 released! :neon_skull:
Changelog:
* Fix destructive button border color
* Show green followed icon in the profile following/followers account wrapper
* Add `--width-side-panel` for side panel widths
* Fit content to iPad landscape view (thanks @jarilehtinen!)
* Fix horizontal scrollbar on some iPad views
Source code: https://github.com/ronilaukkarinen/mastodon-bird-ui
Demo: https://mementomori.social
#OpenSource #Mastodon #MastodonBirdUI #CSS #UI #WebDev #MastoAdmin

RT Konstantin Denerz
My next @CodePen shows a neumorphic temperature slider. The liquid animation is made with CSS clip-path animation ✅.
🔗 https://codepen.io/konstantindenerz/pen/qBMvXNK
Inspiration: https://twitter.com/realvjy/status/1640342553563217920
#css #animation #liquid #slider #temperatureslider https://t.co/vV1tOJe9Aj
<div class="rsshub-quote">
vijay verma: Over the weekend, I started learning SwiftUI. After spending some time to learn the basics, with the help of ChatGPT and of GLSL coding knowledge, I created my very first app. More info and source code shared below 🧶 https://t.co/GwHldLdChr
</div>
:sys_twitter: https://twitter.com/kdenerz/status/1640487672371085313

#CSS TRICK ALERT: using a non-breaking space in between the last word and an inline text arrow means the arrow will never break to a line by itself:
Big Green DAO LIVE: Shifting Purse and Power tono to Recap →
Trig.js gives you the ability to create scroll animations purely in CSS
https://github.com/iDev-Games/Trig-JS
Discussions: https://discu.eu/q/https://github.com/iDev-Games/Trig-JS
Animated gradient text in #CSS: "There might be some elements on your website that you may want your users to draw their attention to, and one of the ways to do so is by using gradient-y fonts. But it’s even better if you can animate the gradient effect on the font." https://www.amitmerchant.com/animated-gradient-effect-in-css/
Responsive Border Radius with Badge: This is a really cool #CSS-only trick — the little "unread messages" badge stays attached to the corner of the blue box no matter how large the border radius is! https://codepen.io/wheatup/details/zYJaWrX

is there a way to track how many sites/devs are using #css logical properties?
For those of you into Tailwind CSS, it’s now at v.3.3.0 with quite a few new features:
Still waiting for a PostCSS plugin for Relative Color Syntax.
https://webkit.org/blog/13966/webkit-features-in-safari-16-4/#color
The {bslib} #rstats 📦 's bs_theme_preview() function lets you tweak bootswatch CSS themes in real time with easy-to-use menus - *and* gives you the R code for your changes. I'm actually having fun playing around with CSS 😀
Pkg by @cpsievert & others
https://rstudio.github.io/bslib/articles/bslib.html#real-time
#CSS #RShiny

I didn't expect that day to come... iOS 16.4 will support #WebPush 🥳😱
This will be one big step into fully supporting #ProgressiveWebApps on all major platforms.
And lot more features all people in #WebDevelopment have waited for: https://webkit.org/blog/13966/webkit-features-in-safari-16-4/


💡 CSS Tip!
Use the new color-mix() to create different shades from one color.
Mix with ⚫️ black for a darker color and ⚪️ white for a lighter color
Demo: https://codepen.io/t_afif/pen/ExeMOPV via :codepen: #CodePen



Amazed that I didn't know about the `:only-child` pseudo selector in #css
Hello World!
The #ComputationalMethods division of @ICAHDQ is excited to be out here tooting on Mastodon! 🐘
Follow us for content about #ComputationalSocialScience #CSS #Communication #ComputationalComputation #nlproc #networkscience and more!
Follow us and let us know who we should be following! Thanks for helping us settle in 💜
Push notifications are now supported cross-browser https://web.dev/push-notifications-in-all-modern-browsers/ by @tomayac #webdev #web #frontend #css #html #programming #coding #code
Guten Morgen!
Ich würde mir gerne die Arbeit in einer IT-Firma im Bereich Webdev/ Python Programmierung anschauen, über ein 2 wöchiges #Praktikum oder ähnliches.
Ich habe lange hobbymäßig und auf selbstständiger Basis im #Webdev Bereich gearbeitet. Ich habe Kenntnisse in #HTML, #CSS, #JavaScript, #Python, #Git + GitHub, #WordPress #SEO für Webseiten. Mit Datenbanken habe ich mich auch schon beschäftigt. Ich lerne gerne neue Sachen.
Kennt ihr Firmen die so etwas anbieten? Bitte teilen!
Mastodon Bird UI v1.3.1 released! :neon_skull:
This is a minor bugfix release.
Changelog:
* Fix regression in the mobile nav: Column-links not same height
* Fix bell icon alignment on mobile
* Fix ellipsis icon alignment on mobile
Source code: https://github.com/ronilaukkarinen/mastodon-bird-ui

From a bigger perspective:
- #pdf is like the web before modern #CSS where everything needed to be tailored to one resolution and exactly one reading experience 👎
- #epub gives me the same feeling like when #ResponsiveDesign started to be a thing 💫
oklch: The second value, chroma, is a value from zero to infinity!
computers: okay, but the practical limit is 0.37
oklch: sounds great! ship it!
🤔
(I mean, I love oklch, but seriously this piece could have taken an extra three seconds of thought to see the problem and fix) #css
If you do a
`@import url(reset.css) layer(reset);`
You don't need to include `:where()` selectors to keep low specificity low. The entire layer has lower precedence than ALL of your unlayered #CSS, no matter the specificity in your reset.
The `!important` declarations in your reset do take precedence, but you wanted that or you wouldn't have used the important flag.