Masthash

#css

Inautilo
3 hours ago

#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

Bryce Wray
6 hours ago
Roma Komarov
7 hours ago

#CSS Tip: read the specs. That’s it, that’s the whole tip.

Roni Laukkarinen
9 hours ago

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

Screenshot of the mobile interface of Mastodon Bird UI, dark/light theme presented, home feed.
Jon
11 hours ago

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?

Anton Andreasson
11 hours ago

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.

Friday Front-End
13 hours ago

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/

CSS Basics
13 hours ago

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/

Emory L.
14 hours ago

@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

Overview of the CSS from the linked demo
RCKT
15 hours ago

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

Aral Balkan
19 hours ago

: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.

Roni Laukkarinen
23 hours ago

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

New Mastodon Bird UI list behaviour on desktop, shows lists on hover only so they take less space vertically.
Jan :rust: :ferris:
1 day ago

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

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

—jm
1 day ago

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

Jon
1 day ago

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

Dean
1 day ago

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

CodePen.IO :verify:
1 day ago

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

Media source: https://pbs.twimg.com/media/FsTXy_3XsAIBJT_?format=jpg&name=orig
Media source: https://pbs.twimg.com/media/FsTX2fyXwAMkfBd?format=png&name=orig
Media source: https://pbs.twimg.com/media/FsTX4usWIAA8dBr?format=png&name=orig
Media source: https://pbs.twimg.com/media/FsOed7OWcAM8RrN?format=jpg&name=orig
Roma Komarov
1 day ago

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)

Amber Weinberg
1 day ago

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....

Peri
1 day ago

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

Josh Bruce
1 day ago

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

Jon :verified:
1 day ago

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

#nzgreens
#css
@nzgreens

Roni Laukkarinen
1 day ago

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

Screenshot of the mobile interface of Mastodon Bird UI, dark/light theme presented, home feed.
CodePen.IO :verify:
1 day ago

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

Media source: https://video.twimg.com/ext_tw_video/1640485138244009990/pu/vid/720x720/3KDjWgSFv4hcrpaO.mp4?tag=12
Amber Weinberg
1 day ago

#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;→

Webdev Weekly
1 day ago
CSS Basics
2 days ago

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/

Friday Front-End
2 days ago

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

David Bisset
2 days ago

NERD ALERT.

Trigonometric functions in #CSS

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

Mayank
2 days ago

is there a way to track how many sites/devs are using #css logical properties?

Bryce Wray
2 days ago

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

Chee Aun 🤔
2 days ago

Still waiting for a PostCSS plugin for Relative Color Syntax.

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

#CSS #WebDev

Sharon Machlis
2 days ago

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

Screenshot of a demo Shiny app with different colors for various buttons and navigation items, and a menu on the right allowing people to change the different colors
Max Bachhuber
2 days ago

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

Arp Laszlo • Comics • ADHD
2 days ago

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

Happy Daniel Bryan GIF by WWE

💡 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

Overview of the CSS code from the demo in the tweet
3 shades of green color
3 shades of red color
james
2 days ago

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 💜

Shi
2 days ago

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!

Roni Laukkarinen
2 days ago

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

Screenshot of the mobile interface of Mastodon Bird UI, dark/light theme presented, home feed.
Michal Bryxí
2 days ago

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 💫

Keith J Grant
2 days ago

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

Estelle Weyl
2 days ago

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.