In my last post I revealed a simple Theming tool on the Blazor Ramp documentation site for the primary colour and explained that I would continue to do some more work on the Theming side of things, as well as to provide better component usage examples before making more components.
For those new to my component library, everything is driven from CSS custom properties, AKA variables. There are no component class parameters; however, every part of every component can be altered if need be, due to the hierarchy of these variables. In order to make this simpler for you, I started to create some theming tools that let you see live changes and then copy the variables for your stylesheet.
I have now finished work on a Theming Border Tool, which allows you to control the border radii on all of the components (as well as items used on the site). There are 7 categories of border groupings, with a total of 11 border types that you can control and output the variables for.
The Theme Border Tool and all of the groupings can be found on the Theming Sandbox page, which is also the place that gives you access to copying all of the variables to the clipboard via the "View & get theme variables" button. However, each border group also has an information Toggletip that shows the current live value for its associated border type.
Rather than try to cram every component onto the page next to the border control sliders, I reversed this and have added the border tools applicable to the components on every component usage page. As every slider is live, once you change it on one page, that change is everywhere. Currently, I am not storing your preferences, so any changes will not persist between site visits; the tools are merely to allow you to see the changes live and then copy the variables for your own usage.
The documentation site uses the default border radii of the published components; the only non default variable setting is the primary colour values used for the colours, which I change every few weeks, as it's only a matter of changing a single variable to change the look of the entire site.
In order for you to better see the changes, I have changed, and am currently changing, all of my sitewide CSS classes so they also belong to the component border groupings. Given this, I have also started work on a new NuGet package called BlazorRamp.CssClasses, so all the classes that I create and use for the site will be made available to you.
As the name suggests, this package will be a library of CSS classes that use the same underlying Core CSS variables and groupings as the components, so if you say use the Button class, it uses the same styles/variables as the buttons used inside any of the components, etc. Changing one variable affects all buttons, components or otherwise. I will not be making components that are merely wrappers around things like a button component or card component, unless there is good reason to do so, so for such things as these I will stick to plain old CSS and make these available instead.
As this is Blazor and .NET, rather than just give you the classes, each BEM (another topic for another day) class will have an associated .NET object, so rather than using strings, you can use object properties and methods to set the CSS class information. For example, I have a Section class that is primarily for site content, so rather than just use strings in the class attribute, you would do something like: class="@Section.Base @Section.Bordered @Section.Radius(SectionRadius.Content)", which in this instance would create a content area that has visible borders with a radius associated with the Content border radius grouping.
I used the term visible borders; the reason for this is that a border radius affects the border irrespective of whether you see it as a line around the element. This radius also affects the CSS outline property, and given Blazor Ramp is an accessibility-first component library, I make heavy use of the outline property for focus indicators. So even if you do not see a border change whilst using a mouse, switch to using a keyboard and you will see them, due to using :focus-visible.
Regarding the CSS Classes NuGet, I will most likely release something in the next few days with the Section class and a couple of others, and then just publish each time I add a new class and associated object, etc.
With regards to Theming colours, there is a lot I could do, and I will most likely at some stage make the Colour Theming tool more like the border one, drilling down into certain parts of each component. This is a little more complex, though, given that I would also need to display all of the contrast ratios, as I currently do on the Theming Accessibility page, so you can ensure everything still passes, etc.
That's it for this posting, as I need to get back to work on the CSS project, and if I'm lucky, just maybe I will take an hour off, given it's a bank holiday here in the UK.
Enjoy the rest of your day - Paul
You can go and mess with the borders on my documentation site, which is just WASM hosted on GitHub Pages, but as mentioned, the appropriate tools are also on each component's usage page: https://docs.blazorramp.uk/theming/sandbox
GitHub repo: https://github.com/BlazorRamp/Components
