Stylizer Help
Shortcut Properties
Shortcut properties are special CSS properties unique to Stylizer that streamline your development process by generating common CSS patterns. Shortcut properties are prefixed with a + character.
The CSS code generated by shortcut properties is not displayed in the Code Grid; instead, it is sent directly to the browser. When the file is saved, shortcut properties are saved as comments in the CSS, and the code they generate is written as ordinary CSS.
Stylizer provides the following properties:
+align-content
This property represents the CSS align-content property and repeats its value with vendor-prefixed versions.
Code Grid
.selector {
+align-content: flex-start;
}
CSS File
.selector {
-webkit-align-content: flex-start;
-moz-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
}+align-items
This property represents the CSS align-items property and repeats its value with vendor-prefixed versions.
Code Grid
.selector {
+align-items: flex-start;
}
CSS File
.selector {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
align-items: flex-start;
}+align-self
This property represents the CSS align-self property and repeats its value with vendor-prefixed versions.
Code Grid
.selector {
+align-self: flex-start;
}
CSS File
.selector {
-webkit-align-self: flex-start;
-moz-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
}+animation
This property represents the CSS animation property and repeats its value with vendor-prefixed versions.
Code Grid
.selector {
+animation: 5ms fast-animation ease-out infinite;
}
CSS File
.selector {
-webkit-animation: 5ms fast-animation ease-out infinite;
-ms-animation: 5ms fast-animation ease-out infinite;
-o-animation: 5ms fast-animation ease-out infinite;
animation: 5ms fast-animation ease-out infinite;
}
The subproperties of animation are supported as well: +animation-name, +animation-duration, +animation-timing-function, +animation-delay, +animation-interation-count, +animation-direction, +animation-fill-mode, and +animation-play-state.
+border-radius
This property represents the CSS border-radius property and repeats its value with vendor-prefixed versions.
Code Grid
.selector {
+border-radius: 5px;
}
CSS File
.selector {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px 5px 5px 5px;
}
+box-shadow
This property represents the CSS box-shadow property and repeats its value with vendor-prefixed versions.
Code Grid
.selector {
+box-shadow: 1px 2px 5px #222222;
}
CSS File
.selector {
-moz-box-shadow: 1px 2px 5px #222222;
-webkit-box-shadow: 1px 2px 5px #222222;
box-shadow: 1px 2px 5px #222222;
}
+box-sizing
This property represents the CSS box-sizing property and repeats its value with vendor-prefixed versions.
Code Grid
.selector {
+box-sizing: border-box;
}
CSS File
.selector {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
+display
This property repeats the vendor-prefixed versions of its value when the value is flex or inline-flex.
Code Grid
.selector {
+display: flex
}
.selector2 {
+display: inline-flex
}
CSS File
.selector1 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
.selector2 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
+flex
This property represents the CSS flex property and repeats its value with vendor-prefixed versions. Note that some vendor-prefixed versions of this property do not support assigning flex-shrink or flex-basis; in those cases, these values are omitted.
Code Grid
.selector {
+flex: 1 0.5 content;
}
CSS File
.selector {
-webkit-box-flex: 1;
-webkit-flex: 1 0.5 content;
-moz-box-flex: 1;
-moz-flex: 1 0.5 content;
-ms-flex: 1 0.5 content;
flex: 1 0.5 content;
}
The sub-properties of flex are supported as well: +flex-grow, +flex-shrink, and +flex-basis.
+flex-flow
This property represents the CSS flex-flow property and repeats its value with vendor-prefixed versions.
Code Grid
.selector {
+flex-flow: column nowrap;
}
CSS File
.selector {
-webkit-flex-flow: column nowrap;
-moz-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
}
The sub-properties of flex-flow are supported as well: +flex-direction and +flex-wrap.
+justify-content
This property represents the CSS justify-content property and repeats its value with vendor-prefixed versions.
Code Grid
.selector {
+justify-content: flex-start;
}
CSS File
.selector {
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
justify-content: flex-start;
}+min-height
This shortcut property is a workaround for the fact that older versions of Internet Explorer do not support the min-height property, and essentially treat height as though it were min-height.
Code Grid
.selector {
+min-height: 50px;
}
CSS File
.selector {
-height: 50px;
min-height: 50px;
}
+opacity
There are 4 different ways to specify the transparency level of an element, each browser using a different technique.
Code Grid
.selector {
+opacity: 50%;
}
CSS File
.selector {
-filter: alpha(opacity=50);
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
+order
This property represents the CSS order property and repeats its value with vendor-prefixed versions. Note that the -webkit-box-ordinal-group vendor-prefixed property is 1-based whereas all other properties are 0-based.
Code Grid
.selector {
+order: 4;
}
CSS File
.selector {
-webkit-box-ordinal-group: 5;
-webkit-order: 4;
-moz-order: 4;
-ms-flex-order: 4;
order: 4;
}+placement
The +placement shortcut automates the various methods of positioning elements on the page. Further details are discussed in the Placement Modes topic.
+transform
This property represents the CSS transform property and repeats its value with vendor-prefixed versions.
Code Grid
.selector {
+transform: skewx(10deg) translatex(150px);
}
CSS File
.selector {
-webkit-transform: skewx(10deg) translatex(150px);
-moz-transform: skewx(10deg) translatex(150px);
-o-transform: skewx(10deg) translatex(150px);
-ms-transform: skewx(10deg) translatex(150px);
transform: skewx(10deg) translatex(150px);
}
+transition
This property represents the CSS transition property and repeats its value with vendor-prefixed versions.
Code Grid
.selector {
+transition: width 2s, height 2s, background-color 2s;
}
CSS File
.selector {
-webkit-transition: width 2s, height 2s, background-color 2s;
-moz-transition: width 2s, height 2s, background-color 2s;
-o-transition: width 2s, height 2s, background-color 2s;
transition: width 2s, height 2s, background-color 2s;
}
The sub-properties of transition are supported as well: +transition-delay, +transition-duration, +transition-property, and +transition-timing-function.
+user-select
This property represents the CSS user-select property and repeats its value with vendor-prefixed versions.
Code Grid
.selector {
+user-select: text;
}
CSS File
.selector {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
}
Clearfix
If an element is styled as float: left or float: right, it's container does not expand downward to include it in its size, as shown below.
This element is floating.
The quick brown fox jumps over the lazy dog.Unfortunately this is seldom the desired goal. However, it is possible to change the rendering behavior of the containing element, to force it to expand downward, as shown below:
This element is floating.
The quick brown fox jumps over the lazy dog.To change an element to exhibit the behavior featured above, right-click on a rule which targets the element and click Clearfix.
How Stylizer Implements Clearfix
Stylizer essentially automates the industry-standard solution to this problem.
When a CSS file is saved, the selectors of all clearfixed CSS rules are aggregated, and additional rules are inserted at the top of the style sheet that alter the float expansion behavior of all the necessary elements.
For example, given the following 3 clearfixed rules:
/*[clearfix]*/ .a {
}
/*[clearfix]*/ .b, .c {
}
/*[clearfix]*/ .c {
}
The following CSS is generated and inserted at the top of the style sheet when saved:
.a:after, .b:after, .c:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
.a, .b, .c {
display: inline-block;
*height: 1px;
}
With this method, it's possible to change the float expansion behavior quickly right from CSS. You don't need to follow the inconvenient practice of opening the underlying HTML, and appending a class=clearfix attribute to every element that needs to exhibit the expansion behavior.
When rules are nested within conditional rules like @media or @supports, Stylizer will aggregate them separately from other rules. For example, for this set of clearfixed rules:
@media (min-width: 500px) {
/*[clearfix]*/ .d {
}
}
/*[clearfix]*/ .d {
}
The following CSS is generated and inserted at the top of the style sheet when saved:
.d:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
.d {
display: inline-block;
*height: 1px;
}
@media (min-width: 500px) {
.d:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
font-size: 0;
}
.d {
display: inline-block;
*height: 1px;
}
}
Placement Modes
You may be familiar with the the CSS position property and its most widely-supported values: static, relative, and absolute. While the behavior of these values is well-defined in CSS standards, their behavior is not representative—in the practical sense—of the methods web designers typically use to position elements on a page.
Placement modes are represented by the +placement shortcut property in Stylizer, and attempt to package the positioning system into a more intuitive model. There are 3 main placement modes: Anchor, Shift and Displace.
Though Stylizer makes these techniques easier to employ, they are not unique to Stylizer, and some designers may use other names (or no name at all) for the same practice.
Anchor
To Anchor an element is to remove it from the flow of the layout, drawing it on its own layer atop the rest of the page, and then position it a fixed distance away from one of the four corners of its containing element.
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue;
Not Anchored
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue;
anchor-top-right
There are four anchoring modes available, each corresponding to a corner: anchor-top-left, anchor-top-right, anchor-bottom-left, and anchor-bottom-right.
In technical terms, Anchor sets an element as position: absolute, and then uses two of the top, left, right or bottom CSS properties to adjust its position.
IMPORTANT: In order for Anchor to work correctly, the parent element of an anchored element must be marked as either position: relative or position: absolute.
Shift
Shift does not remove an element from the flow of the layout, it only offsets it visually from its original location (and maintains its original space).
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue;
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue;
In technical terms, Shift sets an element to position: relative, and then uses the top and left CSS properties to adjust its location.
Displace
Displace is similar to Shift, except the element is removed from the flow of the layout.
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue;
On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue;
In technical terms, Displace sets the element to position: absolute. When an element is set to position: absolute and none of top, bottom, left, or right are used, the element is remains in its original location, but is removed from the flow of the layout. Displace uses negative and positive values of margin-top and margin-left to offset the element from its original location.
Download your free trial now.
No signup. Installs in seconds. Smooth first run experience.