TechHub

0 posts0 participants0 posts today

GENKIライトモードとダークモードの切り替えはやっぱり <a href="https://social.vivaldi.net/tags/OpenProps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenProps</a> みたいに CSS 変数でやるべきだな<a href="https://social.vivaldi.net/tags/Tailwind" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Tailwind</a> が html タグに dark ってタグとか付けさせようとしててちょっとげんなりしている まあマニュアル切り替えみたいなことするならそういうのもあるとは思うけど、なんかやっぱり Tailwind は CSS 知ってると遠回りでしかないように感じる<a href="https://tailwindcss.com/docs/dark-mode" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://tailwindcss.com/docs/dark-mode</a>

MelHamnavoeI’m finding that <a href="https://front-end.social/@argyleink" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@argyleink</a>’s <a href="https://phpc.social/tags/openprops" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#openprops</a> makes for a strong foundation to build modern <a href="https://phpc.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> on top of. <a href="https://phpc.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://phpc.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a>

GENKI<a href="https://social.vivaldi.net/tags/TailwindCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TailwindCSS</a> の設定が <a href="https://social.vivaldi.net/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#JS</a> ではなく <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> からできるようになるらしい。 <a href="https://social.vivaldi.net/tags/OpenProps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenProps</a> とかで見慣れた <a href="https://social.vivaldi.net/tags/CSS%E5%A4%89%E6%95%B0" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS変数</a> <a href="https://social.vivaldi.net/tags/CSSVariables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSSVariables</a> で設定を上書きするスタイル。<a href="https://tailwindcss.com/docs/v4-beta#css-first-configuration" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://tailwindcss.com/docs/v4-beta#css-first-configuration</a>

🧿🪬🍄🌈🎮💻🚲🥓🎃💀🏴🛻🇺🇸<a href="https://ruby.social/@konnorrogers" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@konnorrogers</a> what do you think of <a href="https://open-props.style/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://open-props.style/</a>Is custom property lockin better than <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> classname lockin? <a href="https://mastodon.social/tags/openProps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#openProps</a>

Sue<a href="https://front-end.social/@argyleink" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@argyleink</a> hi Adam! looking for a nudge in the right direction. I think I've heard of a utility that maps an rbg to the closest open props color, but I can't find it. Is it real? Can you share a link? TYVM :) <a href="https://mastodon.social/tags/OpenProps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenProps</a>

westbrookRe: <a href="https://front-end.social/@css/112802157138745287" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://front-end.social/@css/112802157138745287</a>I've love to set default values for theme/component colors via a pallet of colors (say for instance <a href="https://open-props.style/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://open-props.style/</a>), e.g.:@property --surface { syntax: "<color>"; inherits: true; initial-value: light-dark(var(--gray-1), var(--gray-11)); }Assuming those two gray values are also @property, should that work? I'm not seeing it work, which makes me sad that `initial-value` would have less use when stacking vars.<a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/csswg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#csswg</a> <a href="https://mastodon.social/tags/themeYourWorld" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#themeYourWorld</a> <a href="https://mastodon.social/tags/openProps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#openProps</a>

GENKI<a href="https://social.vivaldi.net/tags/StateOfCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#StateOfCSS</a> の 2023 の CSS フレームワークの部、 <a href="https://social.vivaldi.net/tags/OpenProps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenProps</a> が興味と満足度で <a href="https://social.vivaldi.net/tags/TailwindCSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#TailwindCSS</a> を上回ってたやっぱそうだよね、という気持ち :tony_smiling: <a href="https://2023.stateofcss.com/ja-JP/css-frameworks/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://2023.stateofcss.com/ja-JP/css-frameworks/</a>

The Spicy WebThe results are in for the 2023 State of <a href="https://social.spicyweb.dev/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> survey, and among many surprising (and some not so surprising) takeaways is that the honor of winning the “Highest Retention” award went to… <a href="https://social.spicyweb.dev/tags/OpenProps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenProps</a> 🎉Congratulations! (And if you don't yet know what Open Props is, you don't know what you're missing! It's a super rad way to <a href="https://social.spicyweb.dev/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#WebDev</a> your own design system using vanilla CSS variables)<a href="https://thathtml.blog/2023/08/open-props-wins-2023-state-of-css-survey/" rel="nofollow noopener noreferrer" target="_blank">https://thathtml.blog/2023/08/open-props-wins-2023-state-of-css-survey/</a>

pablolarah🏆 State of CSS 2023 results: Highest Retention: Open Props @argyleink Awarded to the technology with the highest percentage of returning users. <a href="https://mastodon.social/tags/OpenProps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenProps</a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#css</a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#webdev</a> <a href="https://2023.stateofcss.com/en-US/awards/" rel="nofollow noopener noreferrer" translate="no" target="_blank">https://2023.stateofcss.com/en-US/awards/</a>

FelixI have this side project I’m working on where one of the goals was to write vanilla <a href="https://techhub.social/tags/css" class="mention hashtag" rel="tag">#css</a> instead of using any library or post-processor. <a href="https://techhub.social/tags/openprops" class="mention hashtag" rel="tag">#openprops</a> by <a href="https://front-end.social/@argyleink" class="u-url mention">@argyleink</a> was the only thing I needed and I was happy. UNTIL(dun dun duuu), I need a class to only position: relative. It annoyed me so much so I thought “let’s get <a href="https://techhub.social/tags/unocss" class="mention hashtag" rel="tag">#unocss</a> by <a href="https://m.webtoo.ls/@antfu" class="u-url mention">@antfu</a> in to on-demand me those util classes”. One thing led to another and I’ve converted my whole project to UnoCSS and I don’t know what to feel 😂 I do enjoy writing vanilla CSS more but man, those handy UnoCSS util classes and the possibility to “foolproof” your setup in a way CSS custom props can’t makes it hard to go vanilla CSS.

GENKIサンプルコードが特になんの注釈もなく <a href="https://social.vivaldi.net/tags/OpenProps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenProps</a> <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> 読み込んでる前提なのは、記事書いてる人がそもそもその作者だから :tony_laughing:Adapting typography to user preferences with CSS<a href="https://web.dev/adapting-typography-to-user-preferences-with-css/" rel="nofollow noopener noreferrer" target="_blank">https://web.dev/adapting-typography-to-user-preferences-with-css/</a>

GENKI<a href="https://social.vivaldi.net/tags/OpenProps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenProps</a> の <a href="https://social.vivaldi.net/tags/Figma" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Figma</a> <a href="https://social.vivaldi.net/tags/Variables" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#Variables</a> とかそのうち整備されそう（そしたら作り方の参考にしたい

GENKI<a href="https://social.vivaldi.net/tags/OpenProps" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#OpenProps</a> でも採用されてる、あるスタイル内にスコープが閉じたローカル <a href="https://social.vivaldi.net/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#CSS</a> 変数を --_foo って命名するやつ、もう結構メジャーなあれなのかな？（これ真似していくCSS Pattern: Fancy backgrounds with CSS gradients <a href="https://css-pattern.com/" rel="nofollow noopener noreferrer" target="_blank">https://css-pattern.com/</a>

Recent searches

Search options

Administered by:

Server stats:

#openprops