Customizing

Yoi offers a wide range of build-in options for customization. Tweak color values, change components and add your own styles and scripts.

The Yoi Kit

To customize Yoi, you need to download and compile it on your machine. We prepared a starter repository — the Yoi Kit — which also offers powerful templating and a simple static page building workflow.

Yoi Kit on GitHub

Yoi Kit The following documentation specifically describes how to customize Yoi via the Yoi Kit. We highly advice using it instead of the main Yoi repository for customization.

Readme Files & Inline Coments You will find readme files inside most directories of the Yoi Kit. In addition to that, most files contain inline comments which provide useful contextual help.

Configuring and Customizing

After you checked the Yoi Kit out to your machine and executed npm install, you will find all config files in src/assets/less/config/. Use the variables in options.less to configure your own build of Yoi.

src └── assets └── less └── config ├── breakpoints.less ├── colors.less ├── options.less └── typography.less

options.less

Variable	Default value	Description
`@breakpointToJs`	true	Make the current breakpoint accessible in JS. Example: `var bp = YOI.currentBreakpoint();` — returns a string like `large`
`@fullColorPalette`	true	Switch between a full or optimized color palette. The optimized color palette only contains semantic colors.
`@rootFontSize`	10px	Yoi sets all font sizes in rem. Example: 1.5rem = 1.5 × `@rootFontSize` (eg. 10px) = 15px
`@maximumPageWrapperWidth`	100rem	The maximum width of the `.wrapper` layout utility.
`@defaultBorderRadius`	2	The default border-radius for all components. Multiplicand: 1px. Example: 2 produces a border-radius of 2px.
`@sizingSteps`	10	Number of steps for width & height utility classes. Example: 10 produces 10 fixed width & height utilities.
`@responsiveSizingSteps`	10	Nuber of steps for responsive width & height utility classes. See above.
`@sizingMultiplicand`	1rem	Multiplicand for width & height utility classes. Example for 1rem: `.w-10` = 10 × `@sizingMultiplicand` (eg. 1rem) = fixed width of 10rem.
`@spacingSteps`	10	Number of steps for margin & padding utility classes. Example: 10 produces 10 margin & padding utilities.
`@responsiveSpacingSteps`	10	Number of steps for responsive margin & padding utility classes. See above.
`@spacingMultiplicand`	0.5rem	Multiplicand for margin & padding utility classes. Example for 0.5rem: `.p-3` = 3 × `@spacingMultiplicand` = produces 1.5rem padding.
`@positionSteps`	10	Number of steps for micro-positioning utility classes, multiplicand: 1px.
`@responsivePositionSteps`	10	Number of steps for responsive micro-positioning utility classes, multiplicand: 1px.
`@defaultAnimationDuration`	200ms	Default css animation duration in milliseconds.

colors.less

Root color variables

Variable	Default Value	Description
`@htmlBackgroundColor`	`@color-white`	Background color of the `html` tag
`@bodyBackgroundColor`	`@color-white`	Background color of the `body` tag
`@textColor`	`@color-base-8`	Global text color
`@focusColor`	`@color-blue-22`	Highlight color for active elements (eg. a text input)
`@selectionColor`	`fade(@color-primary-25, 50%)`	Highlight color for selected text
`@linkColor' \|` @color-primary-12`	Link color

Color Palette

Use the variables in colors.less to change the color palette for your own build of Yoi. You can generate color steps (different shades of the same base color) with the Yoi Color Gradient Tool.

Yoi Color Gradient Tool

breakpoints.less

Yoi comes with a set of media queries to target different screen sizes. In breakpoints.less, you can change the following breakpoint variables:

Variable	Default value
`@bp-m-minwidth`	650px
`@bp-l-minwidth`	910px
`@bp-xl-minwidth`	1220px

Take a look at the comments in breakpoints.less for more detailed information.

typography.less

Use the variables in typography.less to change fonts, adjust font sizes and vertical rhythm. The file contains useful comments for contextual documentation.

Optimizing

By default configuration, Yoi has a rather massive file size — more than 4mb. This is way to much for any website to reasonably perform. Make sure that you only pick the parts you need before you publish your project.

Use the index files inside /src/assets/js/ to chose the JavaScript files for actions, behaviors, components and modules for your project. By default, all scripts are included.
Use src/assets/less/yoi-components.less and src/assets/less/yoi-utilities.less to pick the components and utilities for your project. By default, all components and utilities are included.
The publish task makes experimental use of uncss — a script that parses HTML files and removes all the CSS rules from the stylesheets that were not referenced. This may dramatically shrink the file size because it removes many unused utility classes (eg. for spacing and sizing).

Extending

We recommended to put your own stylesheets into the directory src/assets/less/theme/ and include them at the end of the file theme.less. For simple projects, write all your scripts to the file theme.js. For more complex projects, put individual JavaScript files into the directory js/theme/. All JavaScript files get merged during the build process.

└── src └── assets ├── js │ └─ theme │ └── theme.js └── less ├── theme │ └── […] theme.less

Debugging

Yoi offers a few options for visual debugging in options.less:

Variable	Default value	Description
`@showBreakpoint`	false	Display the active breakpoint on each page.
`@showGuides`	false	Show both vertically and horizontally centered guides.
`@debugImages`	false	Highlight images without alt- or title-attributes.

Placeholder

Yoi offers a styled placeholder element which can be useful while designing in the browser:

<!-- example -->
<div class="placeholder w-20 h-10"></div>

Edit this page