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.
exclude (Optional) A list of relative paths to exclude from the in_directory.
breakpoints (Optional) Defines custom named breakpoints.
replace (Optional) Key-value pairs for replacing text in templates.
attributes (Optional) Defines custom CSS attributes.
Example:
{
"in_directory":"view",
"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>",
"replace":{
"<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"
}
} Custom Attributes
In the
attributes property, you can define custom CSS attributes that will be available in your StyleZero declarations.
This allows you to extend the functionality of the framework and introduce custom values or shorthand for CSS properties.
Creating a Custom Attribute
For instance, let's say you want to define a custom value
half, which corresponds to 50% in standard CSS.
You can define this custom attribute as follows:
"attributes": {
"width:half":"width:50%"
}
In this example, whenever you use
width:half in your StyleZero code, it will be interpreted as width:50% in CSS.
Dynamic Properties
Wildcards provide a way to apply the same value across multiple properties dynamically.
For example, if you want to set both the
width and height attributes to the value half, you can define it like this:
"attributes": {
"{prop:width|height}:half":"{prop}:50%"
}
In this case,
prop is a wildcard that represents both the width and height properties.
The wildcard allows you to apply the value
50% to both properties dynamically, using prop to match the attribute name.
Typed Values
Wildcards allow you to match different types of values or CSS properties, making your custom attributes more flexible.
The available wildcard types are:
Any – Matches any value.
Word – Matches words (without digits).
Alnum – Matches alphanumeric values.
Name – Matches any name , similar to Alnum but including dashes.
Number – Matches numeric values.
Hex – Matches hexadecimal values.
For example, if you want to automatically convert numeric values for the
width property into percentages, you can define it as follows:
"attributes": {
"width:{prop:Number}":"width:{prop}%"
}
This configuration will convert any plain number assigned to the
width property into a percentage.
If you also want to allow specific custom values (like
full) along with numeric values, you can include them using the | operator:
"attributes": {
"width:{prop:Number|full}":"width:{prop}%"
}
This setup ensures that numeric values are converted to percentages, while still allowing the exact value
full to be used for the width property.
Conditional Operator
The conditional operator enables dynamic configurations based on specified conditions.
By using conditional logic, you can apply values or behaviors depending on the context of the matched properties or attributes.
Below are examples and explanations derived from various conditional use cases.
Check if property exists
{prop?{true_result}:{false_result}} Example
"attributes": {
"display:{prop:|Any}":"display:{prop?{{prop}}:{none}}"
}
In this example, if the property
prop exists, its value is used for the display property. Otherwise, none is applied to display.
Check type
{prop:Type?{true_result}:{false_result}} Example
"attributes": {
"display:{prop:Word|Number}":"display:{prop:Word?{{prop}}:{none}}"
}
In this example, if the property
prop is a Word, its value is used for the display property. Otherwise, if it's a number, none is applied to display.
Check if both properties exist with specific Type
{prop1:Type1&prop2:Type2?{true_result}:{false_result}} Example
"attributes": {
"display:{prop1:Word}{:| }{prop2:Number}":"display:{prop1:Word&prop2:Number?{{prop1}}:{none}}"
}
In this example, the display property will use the value of
prop1 if prop1 exists as a Word and prop2 exists as a Number. If these conditions are not met, none will be applied to display.