Documentation
Configuration Syntax
stylezero.json, the primary configuration file for the StyleZero framework.
This file allows you to define input/output directories, manage CSS and JavaScript inclusion, set breakpoints, and more.
Options
in_directory (Required) The source directory where you write your templates.
out_directory (Required) The destination directory for compiled templates.
extensions (Required) A list of file extensions for template files.
css_file (Required) The compiled global CSS file.
css_directory (Required) The directory where compiled template-specific CSS files are stored.
js_directory (Required) The directory where compiled template-specific JavaScript files are stored.
css_include (Required) Defines how the template-specific CSS is included.
js_include (Required) Defines how the template-specific JavaScript is included.
signal_file (Optional) The file with the last compile timestamp.
signal_content (Optional) Change the content of signal_file (allowed constants STYLEZERO_TIME and STYLEZERO_PATHS).
exclude (Optional) A list of relative paths to exclude from the in_directory.
breakpoints (Optional) Defines custom named breakpoints.
replacements (Optional) Key-value pairs for replacing text in templates.
attributes (Optional) Defines custom CSS attributes.
Example:
{
"in_directory":"src",
"out_directory":"dist",
"extensions":[".html"],
"css_file":"public/stylezero/stylezero.css",
"css_directory":"public/stylezero",
"js_directory":"public/stylezero",
"css_include":"<link rel=\"stylesheet\" href=\"public/stylezero/STYLEZERO_ID.css\">",
"js_include":"<script src=\"public/stylezero/STYLEZERO_ID.js\"></script>",
"replacements":{
"<stylezero:id>":"STYLEZERO_ID",
"<stylezero:time>":"STYLEZERO_TIME",
"<stylezero:css>":"STYLEZERO_CSS_INCLUDE",
"<stylezero:js>":"STYLEZERO_JS_INCLUDE"
},
"breakpoints":{
"@small-only":"0-640",
"@medium-only":"641-1024",
"@medium":"641",
"@large":"1025"
}
} @import
You can import external dictionaries from json files, by using the special
@import property.
The value must be a string or an array of strings with the files paths relative to your project's directory.
The data will be marged with the dictionary where the
@import resides.
Example:
stylezero.json "breakpoints": {
"@import":"breakpoints.json"
}
breakpoints.json {
"@small-only":"0-640",
"@medium-only":"641-1024",
"@medium":"641",
"@large":"1025"
}
To reload the data of the imported file you have to either save their parent or run the
stylezero --reset config command.
Custom Attributes
The
attributes property allows you to define custom CSS attribute mappings that can be used within your StyleZero declarations and inside the <style zero> tag.
This feature extends the frameworkâs capabilities by letting you introduce custom values or shorthand notations for standard CSS properties.
Creating a Custom Attribute
For example, suppose you want to define a shorthand value
half, which translates to 50% in standard CSS.
You can declare this custom attribute like so:
"attributes": {
"width:half":"width:50%"
}
With this configuration, any occurrence of
width:half in your StyleZero code will be automatically converted to width:50% in the resulting CSS.
Advanced Declarations
You can also use regular expressions for more flexible and dynamic mappings.
"attributes": {
"(width|height):half":"\\1:50%"
}
In this case, both
width:half and height:half will be transformed into width:50% and height:50% respectively.
For even more advanced usage, you can perform sub-matching by using an array.
The first item is an array of dictionaries corresponding to captured groups, and the second is the output pattern.
"attributes": {
"(width|height):(half|full)":[[null,null,{"half":"50","full":"100"}],"\\1:\\2%"]
}