Theming & Styling
You can set all tailwind options in the tailwind/ directory.
If you want to override an option create a Javascript file under the tailwind/ folder or if you want to extend an option create a Javascript file under the tailwind/extend folder with the same name as the option name. Properties must be specified with module.export in the file.
Example Cases:
- If you want to override containers, create a container.js file under the tailwind/ folder.
- If you want to extend heights, create a height.js file under the tailwind/extend folder.
Recommended Usage Example: Colors
When you override colors in tailwind, it is recommended to use some rules. First of all, create colors.js file under the tailwind/ folder.
Pick a color as ‘500’ #4169E1.
Create colors (tint and shade) from 100 to 900.
module.exports = {
royalblue: {
'100': '#8DA5ED',
'200': '#7A96EA',
'300': '#6787E7',
'400': '#5478E4',
'500': '#4169E1',
'600': '#3B5FCB',
'700': '#3454B4',
'800': '#2E4A9E',
'900': '#273F87'
}
};(Optional) You can add the “Default, hover, and foreground” options to your color. Add DEFAULT color as #4169E1 which is equal to ‘500’ and hover color as #2E4A9E which is equal to ‘800’.
module.exports = {
royalblue: {
DEFAULT: '#4169E1',
hover: '#2E4A9E',
foreground: '#FFFFFF',
'100': '#8DA5ED',
'200': '#7A96EA',
'300': '#6787E7',
'400': '#5478E4',
'500': '#4169E1',
'600': '#3B5FCB',
'700': '#3454B4',
'800': '#2E4A9E',
'900': '#273F87'
}
}
Finally we removed all tailwind default colors. Then placed our colors in to tailwind. But if we needed tailwind default colors too, we should be create the colors.js file under the tailwind/extend folder with the same content.
You can customize other options too, as in this example. Extend or overwrite it if you want.
Color Usage
After editing your colors, you can use them in style files (*.scss) like below.
.myDiv {
// It will change div's background color;
@apply bg-royalblue-100 ... bg-royalblue-900;
}
.myText {
// It will change text's color;
@apply text-royalblue-100 ... text-royalblue-900;
}
or
.myDiv {
// You can also use like that if you add DEFAULT to your color
// In our case it's equal to @apply bg-royalblue-500;
@apply bg-royalblue;
}
.myText {
// You can also use like that if you add DEFAULT to your color
// In our case it's equal to @apply text-royalblue-500;
@apply text-royalblue;
}
Primary & Secondary Color
In project zero, two main colors are used and these colors are named as primary and secondary. By default, the primary colors are the shade of black and we use them to colorize the components. For example, if you want to change the color of the components, change the primary color section in tailwind/colors.js file as shown below.
module.exports = {
primary: {
DEFAULT: '#4169E1',
hover: '#2E4A9E',
foreground: '#FFFFFF',
'100': '#8DA5ED',
'200': '#7A96EA',
'300': '#6787E7',
'400': '#5478E4',
'500': '#4169E1',
'600': '#3B5FCB',
'700': '#3454B4',
'800': '#2E4A9E',
'900': '#273F87'
}
}
Theming
In Project Zero, we used web components to create the components (pz-button, pz-input, pz-modal, etc.). You can see all components in the /templates/components/web-components folder. All pz-components have multiple theming options.
pz-button has an optional appearance attribute. You can assign ‘filled’, ‘outlined’, or ‘ghost’ to the appearance attribute. The default value of the appearance attribute is ‘filled’.
<pz-button appearance="filled">filled</pz-button>
<pz-button appearance="outlined">outlined</pz-button>
<pz-button appearance="ghost">ghost</pz-button>
Figure 1. pz-button appearance example.
Some attributes like size can be shared between components.. The size attribute is assignable to pz-button, pz-input, and pz-select. You can assign ‘xs’, ‘sm’, ‘md’, ‘lg’, ‘xl’, ‘2xl’, or ‘3xl’ to the size attribute. The default value of the size attribute is ‘md’.
<pz-input placeholder="test input" size="lg"></pz-input>
<pz-select name="mySelect" size="lg">
<option value="test" selected>test</option>
<option value="test2">test2</option>
<pz-select>
<pz-button size="lg">button</pz-button>
<pz-button>default md size button</pz-button>
Figure 2. The size attribute example.
You can check the style guide page for more of the theming options.
Styling
We are using a combination of BEM (Block Element Modifier) and ABEM (Atomic Block Element Modifier) CSS class naming convention that makes CSS easier to maintain.
block-name__element-name -modifier-name
Figure 3. The basic syntax of class naming convention.
For more explanation, let's create a simple HTML and SCSS file as an example of CSS naming.
<header class="content-header">
<a class="content-header__back-button -disabled">
<!-- -->
</a>
<div class="content-header__body">
<!-- -->
</div>
</header>
Figure 4. index.html file.
.a-content-header {
// other styles.
&__back-button {
// back-button element styles.
&.-disabled {
// back-button disabled modifier styles.
}
}
// other styles.
}
Figure 5. Index.scss file.
In Project Zero, we have separate *.scss files to maintain styles for every page, widget and component.
/my-page
├── index.html
├── index.scss
├── index.js
Figure 6. The basic structure of the page folder.
Customize Component Style
In Project Zero, every component has its style file. You can edit style files according to your project requirements.
For example, if you want to add a rounded corner to the pz-button component, find the /button directory under the /templates/components/web-components and open the ‘index.scss’ file.
Add @apply rounded; to .pz-button class.
.pz-button {
...
@apply rounded;
...
}
Figure 7. Add rounded to pz-button.
After completing the style changes, all pz-buttons will have a 4px rounded corner.