Spacing tool vs Blacksmith

I’m on vacation this week and I’m using some down time to over the F3 docs again and re-watching some of the videos, the Blacksmith video gave me an idea but I don’t know if it would be worth the effort so I wanted to get some feedback from the community. If I created a stylesheet and put all my padding rules in it and then just reference that class instead of using the spacing tool, would that save any code on the page? The idea of being able to adjust the padding of all my elements from one place would be a very nice side bonus if doing something like this is feasible. Example: say a client comes to me and say’s they feel their website is a little to tight and it needs more breathing room, I could just go into the stylesheet and add some additional padding…Done!! What do you guys think?

@arlenj I don’t know the answer to your question as I’m not sure about any unintend consequences of doing what you suggest. Off top of my head it seems reasonable … but may not be seeing downsides.

But I love, love, love Blacksmith. For instance it’s so easy for me to define “styling” of my H1, H2, and H3 in Blacksmith. Sizes are already taken care of in Control Center but I also tend to use different colors for H1, H2, H3 … so Blacksmith makes this super easy. Define colors in one go, partialize it, and voila … all color-coding of headers is taken care of throughout the site.

If it does make sense to Blacksmith style a spacing stack then it’s something I’ll have to give more consideration to. Interested to hear what Adam and others have to say.

3 Likes

It would depend on how you do it. But it is not going to use any less code really. Even if it did the savings would likely be minimal. What you’re suggesting is basically the same thing as Spacing’s presets.

Do what works for you and makes things easiest for you. There’s also built-in Bootstrap classes too of course.

1 Like

The Bootstrap classes crossed my mind. I plan on playing around with all this when I get back from vacation. I appreciate the feedback.

1 Like

I like your use of styling for the headers, I may have to steal that one… :joy:

1 Like

We don’t call it “stealing” but rather “collaboration”!

Over time it wouldn’t hurt to have a nice collection of Blacksmith styles that folks are willing to share. Partly as it might save some of us time, but mainly because other folks may come up with ideas we hadn’t considered. So sharing styles may also serve as inspiration.

There are many things to like about F3, but Blacksmith may be the show stopper.

4 Likes

That’s a cracking idea, I’m in on that one and happy to share. A great idea for ‘I would never have thought of that…’ situations and also for folk that are either new to classes or find it daunting.

I didn’t know or realise this, would I be right in thinking that Bootstrap has a whole load of native built in classes that can be tapped in to? Just had a quick search for Bootstrap classes, and found this:

I’m guessing or assuming that these are native within the theme so can just be applied as a class ‘straight out of the box’? If that’s the case are they version specific or generic across all releases of Bootstrap?

I’m not sure if we have access to all of them, here’s a link to the ones Adam mentions in the documentation.
https://foundry.elixirgraphics.com/documentation/common-classes/#gsc.tab=0

1 Like

You have access to most everything in Bootstrap 5. That said, some won’t be needed or applicable within Foundry, or may work differently.

The link that @arlenj points out is a most commonly used sort of list.

1 Like

Got it, that’s fantastic, thanks. Looking at the classes deeper, I can see the Bootstrap classes are all mostly included as part of the core functionality of F3 so as you say @elixirgraphics thet aren’t needed most of the time as they comprise the inherent functionality, it makes you appreciate the Stacks/F3 framework massively as a visual method of creating Bootstrap pages. Thanks for pointing me to the link @arlenj I am guilty of skipping documentation as I’m more of a kineaesthetic learner and use documention only when I’m stuck, so can miss potential. There are some great nuggets on there and I’m experimenting with them, hstack class added to a Container creates just what I was after on my last project, instead to achieve what I was after I used a series of columns, but wanted things a bit tighter to their natural width, so that is a great takeaway to use for future reference. Thanks again all.

2 Likes