#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

https://sass-lang.com/blog/sass-and-native-nesting

#CSS #WebDev #Sass #SCSS #Nesting #NativeNesting

#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

#css

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

#css

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/

@glyph you gotta go responsive i guess 😂 one of my old iterations of my homepage was comically bad on a monitor because i was "mobile first" but had nothing second! #web

#responsiveDesign #css

💡 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

#CSS

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! ✨

#css

Tailwind CSS v3.3

Link: https://tailwindcss.com/blog/tailwindcss-v3-3
Discussion: https://news.ycombinator.com/item?id=35353182

#css

: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

To find the right colors in your #WebDesign is a real hsl().

#Pun #Puns #WebDev #CSS #Color #Colors

My favorite little Mastodon CSS snippet:

.column, .drawer { flex: 1 1 auto; }
.column[aria-label="Home"],
.column[aria-label="Local timeline"],
.column[aria-label="Federated timeline"] {
flex: 2.5 1 auto;
}

#Mastodon #CSS

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)

Someone tell the #CSS and #browser gods that I really really want an "align-self: the height of the other guy" property for grid, when I'm using an image on the left and want it to be no taller than the content on the right....

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.

#html #css #webdev

Update: now fixed.
---
NZ Greens landing page currently.

#nzgreens
#css
@nzgreens

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&nbsp;→

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

#css #javascript #programming #webdesign #webdev

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

NERD ALERT.

Trigonometric functions in #CSS

https://web.dev/css-trig-functions/

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:

https://tailwindcss.com/blog/tailwindcss-v3-3

#CSS #WebDev #Tailwind #TailwindCSS #UtilityFirst

Still waiting for a PostCSS plugin for Relative Color Syntax.

https://webkit.org/blog/13966/webkit-features-in-safari-16-4/#color

#CSS #WebDev

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/

#PWA #WebDev #HTML #CSS #JavaScript #JS #Apple

Part of me wants to #design a #website to look like a #synthesizer interface.

The other part of me wonders how practical it would be for readability & #UX.

However, the first part is yelling a lot louder than the second part 😆

#synth #CSS

💡 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

#CSS

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

Demo: https://mementomori.social

#OpenSource #Mastodon #MastodonBirdUI #CSS #UI #WebDev

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.