Core Variables

These variables are controlled by the users set Color Options in Wordpress admin. Example Use: color:@pl-text;

@pl-text Body text color
@pl-link Link text color
@pl-header Heading color
@plHeaderFont Heading font family
@plHeaderWeight Heading font weight
@pl-footer Footer text color
@font-size Default font size
@line-height Default line height
@plBaseFont Font family
@plBaseWeight Font weight
@plAltFont Alternative font
@plAltWeight Alternative font weight
Layout Variables

These variables are built upon the users layout settings in Layout Editor, in Wordpress admin. Example Use: max-width:@pl-sdebar-width;

@pl-base Page background color
@pl-page-width User set page width
@pl-content-width Uset set content width
@pl-responsive-width User set responsive width
@pl-sidebar-width User set sidebar width
@pl-secondary-width User set secondary sidebar width
Color Variables

Note: Values change dynamically using different shades of the users set background color in Color Control. Here's an example of these variables used with a white background. Here's an example of those same variables, used on a black background. And, here's a final example of those same variables again, used on a blue background.

@dark-base
@light-base
@baseContrastSlight
@baseContrast
@baseContrastMore
@baseContrastDark
@baseContrastDarkMore
@baseLighter
@baseLighterMore
@baseLighterMost
@baseDarker
@baseDarkerMore
Path Variables
@{plChildRoot} Used to specify root Child theme URL
@{plRoot} Used to set Parent theme dir
@{plSectionsRoot} Used to specify /sections dir
@{plExtendRoot} Used to specify section root in pagelines-sections plugin
@{plPluginsRoot} Used to specify base plugin path directory
@black #000
@grayDarker #222
@grayDark #333
@gray #555
@grayLight #999
@grayLighter #eee
@white #fff
@blue #049cdb
@green #46a546
@red #9d261d
@yellow #ffc40d
@orange #f89406
@pink #c3325f
@purple #7a43b6
@btnBackground @white
@btnBackgroundHighlight darken(@white, 10%)
@btnBorder darken(@white, 20%)
@btnPrimaryBackground @linkColor
@btnPrimaryBackgroundHighlight spin(@btnPrimaryBackground, 15%)
@btnInfoBackground #5bc0de
@btnInfoBackgroundHighlight #2f96b4
@btnSuccessBackground #62c462
@btnSuccessBackgroundHighlight 51a351
@btnWarningBackground lighten(@orange, 15%)
@btnWarningBackgroundHighlight @orange
@btnImportantBackground #ee5f5b
@btnImportantBackgroundHighlight #bd362f
@btnInverseBackground @gray
@btnInverseBackgroundHighlight @grayDarker
@warningText #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

Note: This is a partial listing. Visit this page to see the entire variable library.

Mixins
.border-radius() Round the corners of an element. Can be a single value or four space-separated values
.box-shadow() Add a drop shadow to an element
.transition() Add CSS3 transition effect (e.g., all .2s linear)
.box-sizing() Change the box model for an element (e.g., border-box for a full-width input)
#translucent > .background() Give an element a translucent background color
#translucent > .border() Give an element a translucent border color
#gradient > .vertical() Create a cross-browser vertical background gradient
#gradient > .horizontal() Create a cross-browser horizontal background gradient
#gradient > .directional() Create a cross-browser directional background gradient
#gradient > .vertical-three-colors() Create a cross-browser three-color background gradient
#gradient > .radial() Create a cross-browser radial background gradient
#gradient > .striped() Create a cross-browser striped background gradient
#gradientBar() Used for buttons to assign a gradient and slightly darker border

Note: This is a partial listing. Visit this page to see the entire mixins library.

Gradient Mixins

When using a gradient mixin, the use of background: is not needed. The mixin will draw out all the appropriate markup.

.foo {
  #gradient > .vertical (#000000,#333333);
}
Images Paths

When using image paths within custom child themes or sections, use the PageLines Path Variables listed above. Here, an example using a custom section for sale in the store.

.foo {
  background: url(@{plExtendRoot}/yoursection/img.png);
}
Multiple Box Shadows

Using multiple box-shadow effects takes a slightly different approach, in that we have to escape the styles.

.foo {
  .box-shadow(~"inset 0 -1px 0 @white,0 1px 0 @black");
}

Get PageLines Framework Now →