Syntax – Encoded Class Formatting Rules¶
Dissecting a CSS Statement¶
.margin-10 { margin: 10px !important; }
Format | Property Name | Property Value | Priority |
---|---|---|---|
CSS | .margin-10 | margin: 10px | !important |
Dissecting Encoded CSS Classes¶
Encoded Class | Property Name or Alias | Property Value | CSS Rule Output |
---|---|---|---|
font-size-25 | font-size- | 25 | .font-size-25 { font-size: 25px } |
green | color- | green | .green { color: green } |
p-70-10 | p- | 70px 10px | .p-70-10 { padding: 70px 10px } |
Dashes separate words in multi-word property names and aliases.¶
A Property Names is a valid CSS property name in accordance with the W3C Full CSS property table
font-weight, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse
Dashes are placed at the end of aliases to indicate that it’s an alias and not a css property name.¶
Aliases for property names.
f-weight-, bg-c-, bg-color-, t-align-
Property names may be encoded as an alias.¶
Consider this dictionary key, value pair found in datalibrary.py
dictionary DataLibrary.self.custom_property_alias_dict
.
'font-weight': {'fweight-', 'lighter', 'fw-', 'bolder', 'f-weight-', 'font-w-', 'bold'},
It maps the alias set
{'fweight-', 'lighter', 'fw-', 'bolder', 'f-weight-', 'font-w-', 'bold'}
to the property name font-weight
. Meaning that any of the values in
the set can be substituted for font-weight
.
The full property name can also be used directly in the encoded class
i.e. font-weight-
.
Dashes separate CSS property name/alias from property value¶
Encoded Class Format | CSS Rule Output |
---|---|
property-name-value | .property-name-value { property-name: value } |
alias-value | .alias-value { property-name: value } |
font-weight-700 | .font-weight-700 { font-weight: 700 } |
fw-700 | .fw-700 { font-weight: 700 } |
Dashes separate multiple values for properties that take multiple values.¶
Encoded Class Format | CSS Rule Output |
---|---|
alias-value-value-valu e-value | .alias-value-va lue-value-value { property-name: value value value value } |
padding-10-20-10-10 | .padding-10-20- 10-10 { padding: 10px 20px 10px 10px } |
p-10-20-10-10 | .p-10-20-10-10 { padding: 10px 20px 10px 10px } |
Dashes separate !important
priority indicator '-i'
(append to the end of the string)¶
Encoded Class Format | CSS Rule Output |
---|---|
alias-value-i | .alias-value-i { property-name: value !important } |
font-weight-bold-i | .font-weight-bold-i { font-weight: bold !important } |
Shorthand can be used in cases where the alias is unambiguously the css property value.¶
Applicable properties include: color
, font-weight
,
font-style
, text-decoration
, and text-transform
.
Encoded Class Format | CSS Rule Output |
---|---|
alias | .alias { property-name: alias } |
purple | .purple { color: purple } |
bold | .bold { font-weight: bold } |
lighter | .lighter { font-weight: lighter } |
underline | .underline { text-decoration: underline } |
italic | .italic { font-style: italic } |
lowercase | .lowercase { text-transform: lowercase } |
Built-in CSS Property Values containing ‘-‘ are now valid.¶
- Implemented: 11/29/2015 version: 0.0.2
See custom_property_alias_dict
in datalibrary.py
for a
comprehensive list of usable aliases. Note that not every built-in CSS
property value defined
here is implemented. The
reason is that some values like ‘right’ and ‘left’ are used for more
than one property name. Also, in the case of font-weight
numbers are
defined like ‘100’, ‘200’, and so on. Encoded CSS classes are not
permitted begin with a number and are therefore excluded.
Value Encoding Format | CSS Property Value Output |
---|---|
sans-serif | font-family: sans-serif |
x-large | font-size: x-large |
CSS Web Safe Font Fallbacks are now Auto-Generated for font-family
¶
- Implemented: 11/29/2015 version: 0.0.2
Per w3schools.com > The font-family property should hold several font names as a “fallback” system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font.
Font Name as Alias | CSS Rule Output |
---|---|
arial | .arial { font-family: arial, sans-serif } |
papyrus | .papyrus { font-family: papyrus, fantasy } |
Color Declarations¶
Color Format | Encoded Class Format | CSS Rule Output |
---|---|---|
keyword | color-silver (most efficient) | .color-silver
{ color: silver }
|
rgb | color-rgb-0-255-0 | .color-rgb-0-255-0
{ color: rgb(0, 255, 0) }
|
rgba | color-rgba-255-0-0-0_5 | .color-rgba-255-0-0-0_5
{ color: rgba(255, 0, 0, 0.5) }
|
hex6 | color-h0ff23f
(prepend h ) |
.color-h0ff23f
{ color: #0ff23f }
|
hex6 | h0ff23f (no property name) | .h0ff23f
{ color: #0ff23f }
|
hex3 | color-h03f
(prepend h ) |
.color-h03f
{ color: #03f }
|
hex3 | hfd4 | .hfd4
{ color: #fd4 }
|
hsl | color-hsl-120-60p-70p | .color-hsl-120-60p-70p
{ color: hsl(120, 60%, 70%) }
|
hsla | color-hsla-120-60p-70p-0_3 | .color-hsla-120-60p-70p-0_3
{ color: hsl(120, 60%, 70%, 0.3) }
|
Negative Values¶
A -n
prefix for a number becomes a minus sign -
, and creates a negative value.
Value Encoding Format | CSS Property Value Output |
---|---|
top-n48 | top: -48px |
margin-n5cm-n6cm | margin: -5cm -6cm |
height-n9in | height: -9in |
Note
The 'n'
in margin
and -9in
are unaffected.
Use underscores to indicate Decimal point.¶
Decimal points are substituted for all underscores.
Value Encoding Format | CSS Property Value Output |
---|---|
margin-1_32rem | margin: 1.32rem |
left-n4_2rem | left: -4.2rem |
Note
Underscores can only be used as decimal points.
Other usage of underscores will invalidate the class. e.g. padding_1
,
*padding-1
, or padding-1*
are considered invalid and will not be
decoded. Classes may still be defined with these names, but CSS would
not be generated by this tool.
Using Percentages ‘p’ becomes ‘%’¶
Use a suffix of p
to indicated a percentage value.
Value Encoding Format | CSS Property Value Output |
---|---|
margin-1p-10p-3p-1p | margin: 1% 10% 3% 1% |
right-n3_2p | right: -3.2% |
Default Units:¶
If units are not provided in the class name, then default units were
applicable. The default units are defined in
UnitParser.default_property_units_dict
inside unitparser.py
.
This makes it possible to easily change the default units for a
particular property name.
Value Encoding Format | CSS Property Value Output |
---|---|
padding-50 | padding: 50px |
elevation-20 | elevation: 20deg |
Optional Unit Conversion¶
- Implemented: 11/28/2015 in version: 0.0.2
To enable ‘px’ to ‘em’ unit conversion open blowdrycss.py
and set
use_em = True
Explicitly Encoding Units in Class Name¶
Value Encoding Format | CSS Property Value Output |
---|---|
padding-50cm | padding: 50cm |
width-120vmin | width: 120vmin |
Pseudo Class and Pseudo Element Selectors¶
- Implemented as of version: 0.2.0
Pseudo classes and pseudo elements are documented here.
Examples:
'color-blue-hover', 'padding-10rem-i-active', 'bgc-h048-visited',
'color-red-after', 'padding-20rem-i-before', 'bgc-h096-selection'
Note
Pseudo classes with parenthesis are excluded. Also, chaining pseudo items together is not implemented. Replaced the print statements in FileHandler with logging.debug to increase efficiency.
Value Encoding Format | CSS Rule Output |
---|---|
pink-hover | .pink-hover:hover { color: pink } |
Media Queries using Breakpoints¶
Implemented: 1/2/2016 in version: 0.0.6
Valid Formats
# General case 'property name/alias' + 'breakpoint_key' + 'limit_key' # Special case -- Implied property_name is 'display'. # Allows elements to be visible or hidden. 'breakpoint_key' + 'limit_key'
Breakpoint keys – See
blowdrycss_settings.py
if you want to customize these.'xxsmall-', 'xsmall-', 'small-', 'medium-', 'large-', 'xlarge-', 'xxlarge-', 'giant-', 'xgiant-', 'xxgiant-'
Limit keys
'only', 'down', 'up'
Breakpoints and limits combined. CSS property name defaults to
display
.xxsmall-up medium-only xxlarge-down
Custom CSS Property with breakpoint and limit suffix.
bold-small-only color-hfff-giant-down text-align-center-large-up
Set Custom Breakpoints 4/1/2016 as of version 0.1.8. Breakpoints can now be set by specifying a screen width as a custom breakpoint before the limit key
-up
or-down
. The-only
limit key is excluded since it would only apply when the width is an exact match. Units default to pixels if not specified. Unit conversion still applies ifuse_em = True
in blowdrycss_settings.py.padding-25-820-up display-480-down margin-5-2-5-2-1000-up display-960-up-i display-3_2rem-down
Value Encoding Format
display-medium-up
CSS Media Query Output
@media only screen and (max-width: 30.0625em) {
.display-medium-up { display: none }
}
Value Encoding Format
large-up
– Property name 'display-'
is optional.
CSS Media Query Output
@media only screen and (max-width: 45.0625em) {
.large-up { display: none }
}
Value Encoding Format
giant-down
– Property name 'display-'
is optional.
CSS Media Query Output
@media only screen and (min-width: 160.0em) {
.giant-down { display: none }
}
Value Encoding Format
padding-100-large-only
CSS Media Query Output
@media only screen and (min-width: 45.0625em) and (max-width: 64em) {
.padding-100-large-only { padding: 6.25em }
}
Media Queries using Scaling Flag¶
- Implemented: 1/2/2016 in version: 0.0.6
- Allows scaling of
'font-size'
or other pixel–based CSS property as the screen width is reduced. - Just add
'-s'
or'-s-i'
to the end of your encoded class selector.
Value Encoding Format
font-size-48-s
CSS Media Query Output
.font-size-48-s { font-size: 3em }
@media only screen and (max-width: 45em) {
.font-size-48-s { font-size: 2.6667em }
}
@media only screen and (max-width: 30em) {
.font-size-48-s { font-size: 2.4em }
}
Value Encoding Format
font-size-16-s-i
– !important global override case
CSS Media Query Output
.font-size-16-s-i { font-size: 1em !important }
@media only screen and (max-width: 45em) {
.font-size-16-s-i { font-size: 0.8889em !important }
}
@media only screen and (max-width: 30em) {
.font-size-16-s-i { font-size: 0.8em !important }
}