Let’s keep the web design simple!
With just the right amount of everything, Pico is great starting point for a clean and lightweight design system.
More Code, More Problems
A great design should be minimal, fast and maintainable.
- Most popular CSS frameworks are bulky, overkill and hard to customize without hyper-overriding styles.
- Huge stackings of wrappers and CSS classes are unnecessary for semantics elements.
- Large and complex CSS file increase memory usage and cause longer style calculations.
- Basics HTML elements should not require packaging large amount of dependencies.
Customization
You can customize XCL themes with variables, by editing the CSS custom properties of
/theme-name/css/_ui_root.css
For example --primary: var(--red);
Pick a color!
Overriding CSS variables
The XCL Theme includes some components of X-layout and the CSS overrides some elements that are listed below.
First of all, Pico's styles and colors are set with CSS custom properties (variables). Just override the CSS variables to customize your version of theme PicoCSS.
/* Lime Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
--primary: #c0ca33;
--primary-hover: #afb42b;
--primary-focus: rgba(192, 202, 51, 0.125);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
/* Lime Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--primary: #c0ca33;
--primary-hover: #cddc39;
--primary-focus: rgba(192, 202, 51, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
}
/* Lime Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
--primary: #c0ca33;
--primary-hover: #cddc39;
--primary-focus: rgba(192, 202, 51, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
/* Lime (Common styles) */
:root {
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
}
You can find all the PicoCSS variables used in the default theme here: css/themes/default.css
CSS Variables and Components
CSS overrides and components implemented in XCL Theme PicoCSS.
Blockquote
Use blockquote with footer cite.
“What you leave behind is not what is engraved in stone monuments, but what is woven into the lives of others.”
Figure and Caption
Use figure tag to wrap an image, and figcaption to provide a caption.
Example SVG placeholder.
Button Group - primary
Group is used with <div role="group"> for class="action-control" and style of ui-tabs.
Button Group - secondary
Button Group - outline
Dropdown
This component of X-layout requires jQuery and it is used to render action-control.
Main Menu
Grid
The default grid creates a column for each child div in the parent element.
div 1
div 2
div 3
div 4
Grid-2
The class "grid-2" creates two columns, each occupying 50% of a parent element.
div 1
div 2
div 3
div 4
Grid-3
The class "grid-3" creates three columns for all child divs.
div 1
div 2
div 3
div 4
Grid-left
The class "grid-left" creates a first column width 1fr and second 3fr.
div 1
div 2
div 3
div 4
Grid-right
The class "grid-right" creates a first column width 3f and second 3fr.
div 1
div 2
div 3
div 4
Pagination
The Smarty plugin automatically generates the page navigation. Thus allowing to use a CSS container class "pagination" and to easily customize the generated list "pagenavi".
<ul class="pagenavi">
<li>---<li>
</ul>