No coding necessary
Blacksmith
Craft custom styles for your Foundry-based site using Blacksmith's point-and-click stylesheets. Build custom CSS that can help elevate your site designs.
Hone your site's styling and functionality
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.
Take It To The Limit
Blacksmith provides you the ability to apply and customize a wide variety of different CSS properties. You can then apply these properties to your existing page elements to create various effects, animations, hide or show content and so much more. Combine these with media queries, pseudo selectors and more! Let's have a look at the various different properties available to apply to your Blacksmith CSS selectors.
- Aspect Ratio
- Backdrop Filter
- Background Color
- Background Gradient
- Background Image
- Background Sizing
- Border
- Border Radius
- Box Shadow
- Color
- Columns
- Content
- Cursor
- Display
- Fill
- Filter
- Font Size
- Font Spacing: Line Height
- Font Spacing: Letter Spacing
- Font Spacing: Word Spacing
- Font Weight
- Height
- Margin
- Opacity
- Overflow
- Padding
- Position
- Text Alignment
- Text Decoration
- Text Shadow
- Text Transform
- Transform: Scale
- Transform: Scale X-Axis
- Transform: Scale Y-Axis
- Transform: Translate
- Transform: Rotate
- Transform: Rotate X-Axis
- Transform: Rotate Y-Axis
- Transform: Rotate Z-Axis
- Transform: Perspective
- Transition
- White Space
- Width
- Z-Index
Applying custom Styles is simple, yet powerful
These properties can be applied in a variety of ways, and we can use pseudo selectors, media queires and more to style elements in various different scenarios. Trigger a style when a visitor hovers their cursor over content or when a specific breakpoint is reached. We've also baked in the ability to apply Foundry's color presets to some of the Blacksmith properties as well.
Plus tutorial videos!
EXAMPLES
The Sky's the Limit
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.
Retro Aqua Buttons
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.
Glass Background
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.
Appearing Icons
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.
Dark Mode
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.
Highly Powerful
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.
Now You See Me...
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.
Corner Ribbons
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.
Signup for our newsletter
THE FORGE. Stay up to date on future versions of Elixir products, as well as important news, updates and more through our newsletter.