With Blacksmith you can easily create your own CSS styles, or interface with Foundry's underlying CSS, using nothing but Blacksmith's own controls.
No coding necessary on your part.
Link your custom created CSS to a selector like a class, page body, buttons or other elements. Include pseudo classes to narrow in on your target, create hover effects and even work with media queries for various breakpoints and dark mode. Allows you to reuse your CSS across multiple page elements as well.
EXAMPLES
While you can create a nearly endless combination of styles using Blacksmith, we thought we'd show a few elements below that we've elevated using some Blacksmith stylesheets.
Each of the examples below are created using only Foundry tools. We've added a few custom Blacksmith CSS properties to elevate their styling as well as add a bit of interactivity.
Buttons in Foundry are super simple to make, and look nice a modern. But what if we want to create a throwback style to the age of OS X Aqua buttons? A few Blacksmith stylesheets to handle our button, highlight and hover animation and we have a beautiful retro button.
In this example we've set our Card tool's background to be transparent so that we can apply a subtle glass-like background using Blacksmith. We've gone a step further to add a gradient on top of it as well to give it an even more glossy look. You can also apply animations using transitions. Here, as with the buttons above, we've added a bit of movement when they're hovered over with the mouse.
Here we've used Blacksmith's ability to target child classes to make the Badge Box icons only appear when the visitor hovers over the background container. This adds a nice custom effect and a point of visual interest.
Using Blacksmith we have access to the CSS Dark Mode Media Queries. This means we can alter styling, visibility, etc based on whether the visitor prefers light or dark mode for their browser / operating system. The best part about this is that we now have control over more than just colors when using the Light and Dark Media Queries.
Here we have a Container to which we've applied two Blacksmith classes. One for Light Mode and one for Dark. Each has different settings for the Background Color, Text Color, Border Radius and Box Shadow properties.
A popular trick with Light and Dark Mode Media Queries is to hide or show different content depending on the visitor's Light or Dark Mode preferences. Here we're hiding / showing certain icons using these Media Queries.
Here we've made some decorative corner ribbons, which we've added to a couple of Cards. The styling is all done through Blacksmith, and the corner ribbons consist of a simple Foundry HTML item.