The post Powder Box Shadow appeared first on Brian Gardner.
]]>box-shadow
property allows designers to add drop shadows to HTML elements, creating an illusion of depth. By defining values for horizontal and vertical offsets, blur and spread radius, and color, one can control the shadow’s direction, softness, size, and shade, enhancing use of the Group and Image blocks.
Using theme.json
, Powder accomplishes two things:
Here’s the relevant code in theme.json
:
{
"settings": {
"shadow": {
"defaultPresets": false,
"presets": [
{
"name": "Faint",
"shadow": "0 2px 4px rgb(10, 10, 10, 0.1)",
"slug": "faint"
},
{
"name": "Light",
"shadow": "0 0 10px rgb(10, 10, 10, 0.1)",
"slug": "light"
},
{
"name": "Solid",
"shadow": "8px 8px 0 rgb(10, 10, 10, 1)",
"slug": "solid"
}
]
}
}
}
This code yields a set of preset variables:
--wp--preset--shadow--faint: 0 2px 4px rgb(10, 10, 10, 0.1);
--wp--preset--shadow--light: 0 0 10px rgb(10, 10, 10, 0.1);
--wp--preset--shadow--solid: 8px 8px 0 rgb(10, 10, 10, 1);
In the Powder style.css
file, matching utility classes are defined:
/* Utility
---------------------------------------- */
/* -- Box Shadow -- */
.is-style-shadow-faint {
box-shadow: var(--wp--preset--shadow--faint);
}
.is-style-shadow-light {
box-shadow: var(--wp--preset--shadow--light);
}
.is-style-shadow-solid {
box-shadow: var(--wp--preset--shadow--solid);
}
To style blocks using these utility classes, add the class name to the Advanced > Additional CSS class option. Here are some examples:
“Every day I try to remind myself of the good in the world, the love I’ve witnessed and the faith I have in humanity.”
“Every day I try to remind myself of the good in the world, the love I’ve witnessed and the faith I have in humanity.”
“Every day I try to remind myself of the good in the world, the love I’ve witnessed and the faith I have in humanity.”
The post Powder Box Shadow appeared first on Brian Gardner.
]]>The post Powder Font Sizes appeared first on Brian Gardner.
]]>theme.json
file, which is the heart of global styles and settings. This empowers designers to set foundational typography standards and tailor font sizes for various blocks with precision and ease.a
Powder utilizes an intuitive approach (T-shirt sizing method) which categorizes font sizes into relatable and easily recognizable tiers.
Here’s the relevant code in theme.json
:
{
"settings": {
"typography": {
"fontSizes": [
{
"fluid": false,
"name": "Tiny",
"size": "14px",
"slug": "tiny"
},
{
"fluid": false,
"name": "xSmall",
"size": "16px",
"slug": "x-small"
},
{
"fluid": false,
"name": "Small",
"size": "18px",
"slug": "small"
},
{
"fluid": {
"min": "18px",
"max": "20px"
},
"name": "Medium",
"size": "20px",
"slug": "medium"
},
{
"fluid": {
"min": "20px",
"max": "24px"
},
"name": "Large",
"size": "24px",
"slug": "large"
},
{
"fluid": {
"min": "24px",
"max": "30px"
},
"name": "xLarge",
"size": "30px",
"slug": "x-large"
}
]
}
}
}
Four additional sizes are included. These sizes are ideal for hero sections, banners, or any other design elements where you want the text to take center stage, where it commands attention and makes a striking impact.
Here’s the relevant code in theme.json
:
{
"settings": {
"typography": {
"fontSizes": [
{
"fluid": {
"min": "30px",
"max": "36px"
},
"name": "36px",
"size": "36px",
"slug": "max-36"
},
{
"fluid": {
"min": "36px",
"max": "48px"
},
"name": "48px",
"size": "48px",
"slug": "max-48"
},
{
"fluid": {
"min": "42px",
"max": "60px"
},
"name": "60px",
"size": "60px",
"slug": "max-60"
},
{
"fluid": {
"min": "48px",
"max": "72px"
},
"name": "72px",
"size": "72px",
"slug": "max-72"
}
]
}
}
}
The post Powder Font Sizes appeared first on Brian Gardner.
]]>The post Powder Theme Colors appeared first on Brian Gardner.
]]>Each variation includes six colors, as defined in theme.json
below: Base, Contrast, Primary, Secondary, Tertiary, and Quaternary.
{
"settings": {
"color": {
"palette": [
{
"color": "#ffffff",
"name": "Base",
"slug": "base"
},
{
"color": "#0a0a0a",
"name": "Contrast",
"slug": "contrast"
},
{
"color": "#6d28d9",
"name": "Primary",
"slug": "primary"
},
{
"color": "#8b5cf6",
"name": "Secondary",
"slug": "secondary"
},
{
"color": "#c4b5fd",
"name": "Tertiary",
"slug": "tertiary"
},
{
"color": "#ede9fe",
"name": "Quaternary",
"slug": "quaternary"
}
]
}
}
}
This code yields a set of preset variables for the colors:
--wp--preset--color--base: #ffffff;
--wp--preset--color--contrast: #0a0a0a;
--wp--preset--color--primary: #be185d;
--wp--preset--color--secondary: #ec4899;
--wp--preset--color--tertiary: #f9a8d4;
--wp--preset--color--quaternary: #fce7f3;
The default palette in the Powder theme mirrors Tailwind CSS’s Violet shades. Below is a screenshot of its appearance in the editor:
You can choose from 22 variations by navigating to Appearance > Editor > Styles and selecting your favorite color palette.
The post Powder Theme Colors appeared first on Brian Gardner.
]]>The post Inter Font by Rasmus Andersson appeared first on Brian Gardner.
]]>Created by Rasmus Andersson, Inter is a variable font family carefully crafted and designed for computer screens. There are nine weights, each with italic counterparts—a total of 18 styles.
Inter is available as a variable font, encompassing all styles in a significantly more compact file size. A variable font is inherently flexible, allowing you to seamlessly blend different weights and italic angles, offering a practically limitless array of variations.
Inter, a versatile typeface, comes equipped with numerous OpenType features, enabling customization for functionality and aesthetics to suit your precise requirements. These features offer the flexibility to mix and match, creating unique stylistic variations
The release of Inter version 4.0 marked a major update, featuring a complete redesign of many glyphs, the introduction of six new “Display” designs, and the addition of various OpenType features.
It also included technical improvements like a change in the UPM and enhanced metrics. While maintaining some consistency with the previous version, particularly in smaller text sizes, expect to see noticeable differences with this new version.
Using Inter is as easy as downloading & installing it. If you want to use Inter on your website, you can get it from Google Fonts.
Inter is licensed under the SIL Open Font License. You are free to use this font in almost any way imaginable. It can be used freely in your projects—print or digital, commercial or otherwise.
Below is a list of resources you might find helpful about Inter:
The post Inter Font by Rasmus Andersson appeared first on Brian Gardner.
]]>The post Commercial Distancing appeared first on Brian Gardner.
]]>As Seth Godin once wisely said:
“There’s always the opportunity to cut a corner, sacrifice lifestyle quality, and suck it up as we race to grab a little more market share. But the problem with the race to the bottom is that you might win.”
As creators, we aim to distance ourselves from the dissatisfaction associated with undervalued labor and underpriced offerings. By embracing commercial distancing, we chart a different course.
To embrace this concept, consider these guiding principles:
Cherish quality and innovation: It’s easy to get lost in the noise, but remember the importance of delivering outstanding quality and staying innovative. By constantly improving our craft, we can stand out from the crowd and command the prices our work deserves.
Cultivate a memorable brand: Our brand tells our story and should connect with our target audience. Devote time to developing a rich narrative that showcases values, passion, and unique offerings. A solid brand shields us from market pressures and highlights the importance of our work.
Seek collaborative opportunities: We’re all in this together, and sometimes joining forces can propel us further than going it alone. So, let’s collaborate with like-minded creators or businesses, combine your strengths, and create experiences that set you apart.
The race to the top is a marathon, not a sprint. With commercial distancing, we can elevate our work, nurture our values, and create something remarkable.
Wouldn’t that be fulfilling?
I’d love to explore how we might integrate commercial distancing into our artistic journeys. Here’s to thriving together and elevating the creator economy.
The post Commercial Distancing appeared first on Brian Gardner.
]]>The post Geomanist Font by Atipo Foundry appeared first on Brian Gardner.
]]>Geomanist has a contemporary sans design, clean and elegant, with a combination of geometric shapes and humanistic beat.
Geomanist was crafted by Atipo®, a compact yet versatile studio founded in 2010 by Raúl García del Pomar and Ismael González. Atipo® specializes in providing lasting and sincere graphic solutions, prioritizing innovative ideas over mere aesthetic appeal.
The exquisite Geomanist typeface is available in 18 distinct font styles, ranging from the gracefully slender Thin weight to the robust and impactful Ultra. Each style is appealing and visually delightful.
Geomanist was designed in 9 font weights, with an italic version.
Geomanist is versatile for both personal and commercial projects, and it’s also web-friendly for enhancing your website or. You can download the regular font style for free, and the entire font family is readily available for more diverse typography options.
Geomanist can be used to design something special, like this:
Disclaimer: I have no affiliation with Geomanist, its founders, or their associates. Rest assured, there has been no financial transaction involved in my endorsement. I am simply an admirer, eager to contribute positively to the design community. Namaste.
The post Geomanist Font by Atipo Foundry appeared first on Brian Gardner.
]]>The post Finding Your Creative Sweet Spot appeared first on Brian Gardner.
]]>“Where your passion meets their need, that is your calling.”
Let’s dive deeper into this concept and examine how it can effectively guide us through the dynamic landscape of our creative journey.
As changemakers, our passions fuel us. They ignite the spark that drives us to express ourselves and manifest our visions. However, in a world of possibilities, we may sometimes feel adrift, seeking guidance to create work that genuinely makes a difference.
The second part offers us the clarity we seek: “their need.”
It reminds us that while our passion sets the stage, our true calling is to address the needs of the people we seek to engage. By centering our focus on their needs, we can forge work that resonates and generates a profound and enduring influence.
So, how can you uncover the sweet spot where your passion meets their need? Consider these approaches:
Unearth your distinctive strengths: Contemplate your authentic passions and determine how they can benefit others. Consider whether some causes or issues resonate with your values and could be seamlessly integrated into your creative endeavors.
Empathize with your tribe: Invest time in understanding your audience’s needs, aspirations, and pain points. Engage with them, welcome their feedback, and let it inform your creations.
Embrace the art of iteration: Stay open to experimentation and exploration. Utilize feedback to refine your work, and boldly adapt when you uncover better ways to address their needs.
Cultivate a curious mindset: Keep learning and seeking new ideas. As you broaden your perspectives, you will become increasingly adept at identifying and addressing the evolving needs of those you lead.
As creators, our purpose goes beyond self-expression; it includes inspiring transformative progress.
By identifying the convergence of our passions and the needs of our audience, we can do significant work that contributes to the change we wish to see in the world.
The post Finding Your Creative Sweet Spot appeared first on Brian Gardner.
]]>The post The Secret Weapon for Creators appeared first on Brian Gardner.
]]>And guess what? I’ve found an absolute gem of a tool: my newsletter. By developing and maintaining a newsletter, I’ve been able to connect with readers on a deeper level and make my creative journey even more rewarding.
Here’s how newsletters have made a difference in my life as a creator and why you should consider adopting this tool.
First and foremost, connection. There’s something magical about sliding into someone’s inbox and having an intimate and personal conversation. I can share my thoughts, ideas, and even a few chuckles with readers, while keepingthings light and easy.
Next is the potential to generate extra income. As I continue to curate, provide insights, and share helpful resources, I increase those willing to support my creative pursuits. Seeing readers invest their time and, hopefully, their hard-earned money in my work is heartwarming.
Finally, my newsletter has catalyzed my personal and professional growth. I don’t have to worry about crafting the perfect social media caption or competing for engagement. Instead, I can be myself, share fun stories, and explore new ideas without fear of judgment. It’s like a creative playground where I can experiment, learn, and grow, all while forging meaningful connections with you.
So how about you? Are you looking to forge new connections, flaunt your creative flair, and revel in the process? Look no further than newsletters. They’re a hidden gem for creators, offering an exciting avenue to unleash the boundless scope of your imaginative brilliance.
The post The Secret Weapon for Creators appeared first on Brian Gardner.
]]>The post This is a Sample Post #1 appeared first on Brian Gardner.
]]>Nec nam aliquam sem et tortor consequat porta nibh. Viverra maecenas accumsan lacus. Blandit massa enim nec nunc mattis enim. Consequat mauris nunc congue vitae. Elementum tempus egestas. Justo taylor magna iaculis eu diam phasellus. Vulputate scelerisque felis imperdiet.
Augue lacus viverra vitae congue eu consequat ac felis. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Dictum consectetur a erat nam at. Nec tincidunt praesent semper feugiat nibh sed aliquam.
Sit amet nulla facilisi morbi tempus iaculis urna. Lobortis scelerisque dui faucibus in ornare quamra viverra. Ut amet augue ipsum. Maecenas tempus eros ellentesque sodales. Pellentesque porta sollicitud felis sed.
Fusce at est sapien. Aliquam tempus nulla ac nisi rhoncus, morbi convallis magna rhoncus. Morbi viverra lobortis ante, swiftly volut ipsum malesua. Curabi accu suscipit mauris quis tindunt, quisque vitae mi pellentesque.
The post This is a Sample Post #1 appeared first on Brian Gardner.
]]>The post This is a Sample Post #2 appeared first on Brian Gardner.
]]>Nec nam aliquam sem et tortor consequat porta nibh. Viverra maecenas accumsan lacus. Blandit massa enim nec nunc mattis enim. Consequat mauris nunc congue vitae. Elementum tempus egestas. Justo taylor magna iaculis eu diam phasellus. Vulputate scelerisque felis imperdiet.
Augue lacus viverra vitae congue eu consequat ac felis. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet. Dictum consectetur a erat nam at. Nec tincidunt praesent semper feugiat nibh sed aliquam.
Sit amet nulla facilisi morbi tempus iaculis urna. Lobortis scelerisque dui faucibus in ornare quamra viverra. Ut amet augue ipsum. Maecenas tempus eros ellentesque sodales. Pellentesque porta sollicitud felis sed.
Fusce at est sapien. Aliquam tempus nulla ac nisi rhoncus, morbi convallis magna rhoncus. Morbi viverra lobortis ante, swiftly volut ipsum malesua. Curabi accu suscipit mauris quis tindunt, quisque vitae mi pellentesque.
The post This is a Sample Post #2 appeared first on Brian Gardner.
]]>