I have mentioned in several previous posts that I have a long
list of Blazor applications that I want to build. I did a self-driven analysis of the structure and
hurdles of all the different applications I have written and the applications I
have planned to develop. I found patterns to slow starts. My new goal is
to eliminate the built-in excuses for not even starting these new projects by building a design system.
From my analysis, I found out I get stuck on several
decision hurdles:
1.
Colors
2.
Layout
3.
Authentication
4.
Database
Use
5.
User Controls
6.
Data Grid controls
The challenge is to remove as many of these barriers to
starting new projects. I think I have a new
system design that will provide me with most of this solution. I will be explaining the solution in this multipart
post where I will dive into each design area and explain how I have streamed-lined my process.
Colors
Deciding on what colors to use for a project is the largest
challenge for me. You must pick out a
primary color, a secondary, and usually 4 more other colors all that correlate
with each other.
Then once you have your colors, you must decide what color
goes where, buttons, headers nav, etc.
Since I am now a TailwindCss fanboy, I will be using their
built-in design system to solve the color issue. I will not be leveraging the theme
feature. I am not interested in taking
advantage, at this point anyway, of the full theming solution.
How it works
You need to take advantage of the tailwind.config.js file
and extend the color section.
theme: {
extend: {
colors: {
In this section, you can provide name-value pairs for your defined colors. The hard part for this is to find good names that are generic to use across different applications but provide some form of intelligent description.
For mine, I have chosen:
'main': '#ffffff',
'link': '#0000FF',
primary: {
DEFAULT: colors.purple[600],
},
secondary: {
DEFAULT: colors.gray[600],
},
info: {
DEFAULT: colors.white[500],
},
}
Notice that names are not green, blue etc. but are more general. The value part of the definition can be
either a system color or colors.XXXX or a actual value #XXXX.
Full definition:
'main': '#ffffff',
'link': '#0000FF',
primary: {
DEFAULT: colors.purple[600],
50: colors.purple[50],
100: colors.purple[100],
200: colors.purple[200],
300: colors.purple[300],
400: colors.purple[400],
500: colors.purple[500],
600: colors.purple[600],
700: colors.purple[700],
800: colors.purple[800],
900: colors.purple[900],
light: colors.purple[500],
lighter: colors.purple[400],
dark: colors.purple[700],
darker: colors.purple[800]
},
secondary: {
DEFAULT: colors.gray[600],
50: colors.gray[50],
100: colors.gray[100],
200: colors.gray[200],
300: colors.gray[300],
400: colors.gray[400],
500: colors.gray[500],
600: colors.gray[600],
700: colors.gray[700],
800: colors.gray[800],
900: colors.gray[900],
light: colors.gray[500],
lighter: colors.gray[400],
dark: colors.gray[700],
darker: colors.gray[800]
},
info: {
DEFAULT: colors.white[500],
50: colors.white[50],
100: colors.white[100],
200: colors.white[200],
300: colors.white[300],
400: colors.white[400],
500: colors.white[500],
600: colors.white[600],
700: colors.white[700],
800: colors.white[800],
900: colors.white[900],
light: colors.white[500],
lighter: colors.white[400],
dark: colors.white[700],
darker: colors.white[800]
},
}
You add the different levels of the color as well, 50-900. You can even give the colors specific names, light dark, etc.
Implement the Colors
You will need to replace/use the new names in the application. Note that you must still use the prefix that you are coloring such as text or bg.
Here is an example from the standard Counter page:
<div class="flex flex-grow">
<div class="w-1/2 m-16">
<span class="font-extrabold text-7xl tracking-wide mb-6">Counter</span>
<p>Current count: @currentCount</p>
<button @onclick="IncrementCount" class="bg-primary-500 px-4 py-2 rounded text-info-50 transition duration-300 ease-in-out transform hover:scale-150">Click me</button>
</div>
</div>
Notice how nicely the color now flows within the applied CSS is now.
Changing The Colors
Once we select our new color scheme, we simply change the values related to each defined color.
'main': '#ff0000,
'link': '#8acf00,
primary: {
DEFAULT: colors.teal[600],
And that’s it. This will not only ease the stress of applying colors to a new project but will speed up the initialization of new projects and help me get over the startup hurdle. I now have a project template that can be used for new projects with my new design system.
Summary
This is just step one, but I feel colors are the biggest hurdle slowing me down. Only time will tell.
Comments
Post a Comment