Wrapping my head around CSS

Erl.ing · 2024-06-17T11:41:31.661+00:00

Toddle is great, but as a (old-school) HTML/CSS developer I'm having trouble wrapping my head around the concept of CSS and styling. Examples of things I'm missing that might be solved in some other way are:- A global stylesheet. I'm aware of the "Themes" part, but that feels somewhat restricted. How do I set a global line-height for every page, for instance? Or where do I define the global size of an H2, the border radius of all input fields, etc. Or if I just want a utility class (sr-only, for example)?- How do I set styles to the and tags. I'm seeing the the top level I can style?- In the CSS editor of an element (specifically the top level div) I've tried adding more global styles, but I'm not able to add new rules with selectors. For instance every should have a common bottom padding, adding p { padding-bottom: 5vh; } strips everything around the declaration.

Erl.ing

1 year ago

Toddle is great, but as a (old-school) HTML/CSS developer I'm having trouble wrapping my head around the concept of CSS and styling. Examples of things I'm missing that might be solved in some other way are:
- A global stylesheet. I'm aware of the "Themes" part, but that feels somewhat restricted. How do I set a global line-height for every page, for instance? Or where do I define the global size of an H2, the border radius of all input fields, etc. Or if I just want a utility class (sr-only, for example)?
- How do I set styles to the <html> and <body> tags. I'm seeing the <div in the preview, but is this <div> the top level I can style?
- In the CSS editor of an element (specifically the top level div) I've tried adding more global styles, but I'm not able to add new rules with selectors. For instance every <p> should have a common bottom padding, adding p { padding-bottom: 5vh; } strips everything around the declaration.
Erl.ing

1 year ago

Just found https://www.youtube.com/watch?v=foTLmS4hbAg, will this video answer my questions? 😅
Andreas Møller

1 year ago

Some of them.
the only way to style body or html today is with a style tag. I would recommend not doing that unless you have no other way.
Andreas Møller

1 year ago

in toddle you atyle the elements directly. we dont rely oin global styles.
Chris Laupama

1 year ago

You come to quickly love this method of styling. I really love it as it suits my workflow far more than managing classes etc. Personally I’m a style each element as I go and then use components if I want to repeat design elements elsewhere.

The combination of themes and components ends up being all you really need.
Erl.ing

1 year ago

So, if I want to say "Hey, I want all input fields in this app to look like this and behave like this on hover, focus and active" I have to create a input field component with that styling and use it all across my app? Kind of nesting components within components?
Andreas Møller

1 year ago

Yes exactly
Erl.ing

1 year ago

Aha, I see, then I'm a step closer to understanding. Thanks! 🙌
Andreas Møller

1 year ago

I thinknill do a video on this since a lot of people are struggling
harrisbones

2 months ago

Sorry to pull up an old thread, but @Andreas Møller did you do a video on this? I'm curious if the product philosophy is still not to support global styles?
Tod

2 months ago

Great job @! Your contribution to the Nordcraft Community just made you advance to Community Level 4! 🌲
@harrisbones
Sorry to pull up an old thread, but @Andreas Møller did you do a video on this? I'm curious if the product philosophy is still not to support global styles?
Lucas G

2 months ago

Yes and it is unlikely to change
@harrisbones
Sorry to pull up an old thread, but @Andreas Møller did you do a video on this? I'm curious if the product philosophy is still not to support global styles?
Andreas Møller

2 months ago

What problem are you trying to solve?
harrisbones

2 months ago

I'm sure part of it is learned behaviour. And part of it is likely trying to go 'with the grain' of the web — the C is cascade after all.
harrisbones

2 months ago

But the problem I think I'm interested in solving is creating global and related styles for html elements.
Lucas G

2 months ago

components are the way
Need a Yoda meme for components being the way
harrisbones

2 months ago

For example, things like
h1, h2, h3, h4, h5, h6 {
font: var(--heading-font);
margin-bottom: var(--heading-margin);
}

h1, h2, h3 {
color: var(--my-special-heading-color);
}

As I understand it, I'd have to create components for all of the native html elements?
Andreas Møller

2 months ago

Yes, but I would recommend not doing that.

HTML elements generally don't map that well to one specific style
These are all <button>
Lucas G

2 months ago

Buttons are a special case though
Andreas Møller

2 months ago
harrisbones

2 months ago

Yes, that is a reasonable counter argument. Especially in the context of a web app.

Perhaps I'm thinking about web sites, which might not be the target for Nordcraft.
Lucas G

2 months ago

He’s too quick with these screenshots lol
Andreas Møller

2 months ago

every element is a special case
@harrisbones
Yes, that is a reasonable counter argument. Especially in the context of a web app.

Perhaps I'm thinking about web sites, which might not be the target for Nordcraft.
Lucas G

2 months ago

No, I think he’s right overall. This can often be the case in websites as well
Andreas Møller

2 months ago

in the old days we would always just style elements and if it became a problem we would throw some more specific selectors at it.
@Andreas Møller
every element is a special case
harrisbones

2 months ago

I think we should be careful to not lean to heavily on examples of the Nordcraft UI to say that every element of all web apps is a special case 😅
Perhaps one example that might be more appropriate for a web-app is displaying user generated content. For example something that starts as markdown and gets rendered as html.
Lucas G

2 months ago

In his example though you can create heading components with minimal styles and set the rest when using them but idk if that would speed up workflows all that much
harrisbones

2 months ago

Yes, the workflow for creation is not likely sped up too much. Especially when the team size and the app is small.

Workflow for updates in the future is likely improved, but in the examples I gave many updates could be solved through updating the variables.
@harrisbones
I think we should be careful to not lean to heavily on examples of the Nordcraft UI to say that every element of all web apps is a special case 😅
Andreas Møller

2 months ago
Andreas Møller

2 months ago

For our blog and docs you cant do it.
harrisbones

2 months ago

I'm not sure I fully grasp what 'it' refers to here sorry.
Andreas Møller

2 months ago

I mean for our blog and docs an h1 always looks like a h1, h2 always looks like a h2 etc.
harrisbones

2 months ago

And the blog and doc styling is achieved through per-element styling? Like custom components for things like <code> ,<ul> and so on?
Andreas Møller

2 months ago

No it is all Nordcraft
Lucas G

2 months ago

The blog is a template you can check it out
Andreas Møller

2 months ago

Adding global styles can be perfectly fine for smaller websites. For larger projects it comes back to bite you 10 times out of 10
Lucas G

2 months ago

But I mean if your use case has it where headings are always the same then yeah use components but his point is that they usually differ enough to where you’d have to specifically style them anyways
Andreas Møller

2 months ago

Most React projects I have worked on had a rule against using them.
Good night gentlemen
@Andreas Møller
Adding global styles can be perfectly fine for smaller websites. For larger projects it comes back to bite you 10 times out of 10
harrisbones

2 months ago

I have felt this pain 😅
Lucas G

2 months ago

Even in small websites though
I made a landing page where my H2s were all different lol
harrisbones

2 months ago

Sometimes inconsistency is great, sometimes it is a smell of something else 😅
@harrisbones
Sometimes inconsistency is great, sometimes it is a smell of something else 😅
Lucas G

2 months ago

Also true
But in that one case it was intentional
harrisbones

2 months ago

Thanks for taking the time to respond anyway. I think I have a better grasp of the product philosophy, even if my own views don't perfectly align.
Lucas G

2 months ago

It’s just different. If you’ve been working a certain way for years it’s natural that a new way could cause friction
Greg IRE

2 months ago

I felt the same coming from Webflow but now I have learned more about NC recently I think the NC way is the right way and is making sense for me. And then coupled with how you can export the components for use on external sites i think that encapsulation also helps there too.

Wrapping my head around CSS

Erl.ing

Erl.ing

Andreas Møller

Andreas Møller

Chris Laupama

Erl.ing

Andreas Møller

Erl.ing

Andreas Møller

harrisbones

Tod

Lucas G

Andreas Møller

harrisbones

harrisbones

Lucas G

harrisbones

Andreas Møller

Lucas G

Andreas Møller

harrisbones

Lucas G

Andreas Møller

Lucas G

Andreas Møller

harrisbones

Lucas G

harrisbones

Andreas Møller

Andreas Møller

harrisbones

Andreas Møller

harrisbones

Andreas Møller

Lucas G

Andreas Møller

Lucas G

Andreas Møller

harrisbones

Lucas G

harrisbones

Lucas G

harrisbones

Lucas G

Greg IRE