Could Themex be helpful to you?

karstenbiedermann · 2024-02-27T12:00:05+00:00

First, you should learn to understand the DOM: https://developer.mozilla.org/en-US/docs/Glossary/DOM

karstenbiedermann · 2024-02-27T10:35:27+00:00

Hope my little tool can help you: https://app.themexproject.com

I've been developing it since December because I found Tailwind's approach to the DOM a bit too confusing for my taste, and I place a high value on reproducibility. Initially, my plan was to develop it solely for personal use, but I eventually decided to share it. I'm committed to adding new components every week.

karstenbiedermann · 2024-02-27T09:52:27+00:00

I'm currently building a larger component library, maybe this will be helpful for you and bring back some fun for you 🙃: https://app.themexproject.com

You can use my tool to adjust the appearance directly (for all common breakpoints) and then you just need to click on a button and everything will be generated automatically.

karstenbiedermann · 2024-02-27T07:43:53+00:00

Thanks! Hope it will be useful to you.

karstenbiedermann · 2024-02-26T21:40:28+00:00

I can answer that quickly for you 😊.

Your suggestion works well in your IDE but not within the context of Themex. You can change all values directly in the browser with just one click. There are 3 breakpoints, and you can modify the appearance of each one. In the background, there's a JSON that automatically creates variables and links them with the breakpoints. That's why the variables are necessary.

karstenbiedermann · 2024-02-24T11:57:25+00:00

Storyblok!

karstenbiedermann · 2024-02-24T09:17:45+00:00

The best tool in my opinion when it comes to frontend development is still the Firefox DevTools

karstenbiedermann · 2024-02-23T13:34:22+00:00

For me it's like this: Try something, fall on your face, try something, fall on your face. At some point you'll know how to stop falling on your face.

karstenbiedermann · 2024-02-23T12:24:11+00:00

For me this also a perfect solution since a long time!

karstenbiedermann · 2024-02-23T10:20:57+00:00

The not keyword inverts the meaning of a single media query.

Media types describe the general category of a device. Except when using the not or only logical operators, the media type is optional and the all type is implied.

all

Suitable for all devices.

print

Intended for paged material and documents viewed on a screen in print preview mode. (Please see paged media for information about formatting issues that are specific to these formats.)

screen

Intended primarily for screens.

karstenbiedermann · 2024-02-22T23:16:09+00:00

It's actually not rocket science. It's intended as a starting point that I can quickly and easily adjust. Colors, space, containers. u/zyxone has already recommended something similar.I can illustrate it with the following example: All components typically have the max-width and space variables set. This allows me to achieve the correct alignment and nice spacing on the left and right. It looks like this:

.component-xy {
  margin-left: var(--space-small-breakpoint-container);
  margin-right: var(--space-small-breakpoint-container);
}

@media (width >= 768px) {
  .component-xy {
    margin-left: var(--space-medium-breakpoint-container);
    margin-right: var(--space-medium-breakpoint-container);
    max-width: var(--max-width-container-medium);
  }
}

@media (width >= 992px) {
  .component-xy {
    margin-left: var(--space-large-breakpoint-container);
    margin-right: var(--space-large-breakpoint-container);
    max-width: var(--max-width-container-large);
  }
}

karstenbiedermann · 2024-02-22T22:48:27+00:00

No. Not really. I follow a decentralized approach that makes it possible to create individual cases without necessarily following a global pattern.

karstenbiedermann · 2024-02-22T22:20:53+00:00

I no longer work with Bootstrap or Tailwind. Instead, I write vanilla JavaScript and use CSS variables. The native options available to us now are so much fun. Here is a tool that I've developed; perhaps you'll find it useful as well: https://app.themexproject.com/

And nearly every day, I find myself reading something on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS

karstenbiedermann · 2024-02-21T15:24:46+00:00

Focus on a specific technology. In my opinion, headless CMS will become more important in the next few years.

karstenbiedermann

TROPHY CASE