Mixins


Mixins are reusable patterns of property value pairs, that can make designing of your site faster and easier. Groundwork comes with lots of pre-defined mixins. You can also create your own mixins of styles you use frequently.

Using the pre-defined mixins, you can for example style blocks in Sidebar First like this…

#sidebar-first .block {
  .vertical-gradient (@colorWhite, darken(@colorWhite, 5%));
  .border-radius(6px);
  .padding();
  .center();
  h2.block-title {
    .font-size(@msLarger1);
  }
}

With the above, you used the mixins .vertical-gradient(), .border-radius(), .padding(), .center(), and .font-size(). The generated CSS will be:

#sidebar-first .block {
  background: #f2f2f2;
  background: -moz-linear-gradient(top,#ffffff 0%,#f2f2f2 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#ffffff),color-stop(100%,#f2f2f2));
  background: -webkit-linear-gradient(top,#ffffff 0%,#f2f2f2 100%);
  background: -o-linear-gradient(top,#ffffff 0%,#f2f2f2 100%);
  background: -ms-linear-gradient(top,#ffffff 0%,#f2f2f2 100%);
  background: linear-gradient(to bottom,#ffffff 0%,#f2f2f2 100%);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 12px;
  text-align: center;
}
.lt-ie8 #sidebar-first .block,
.ie9 #sidebar-first .block {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#f2f2f2',GradientType=0);
}
.ie8 #sidebar-first .block {
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#f2f2f2',GradientType=0);
}
#sidebar-first .block h2.block-title {
  font-size: 23px;
  font-size: 2.3rem;
}

Pretty neat, huh!

Mixins get copied/inserted to the selectors, thus may tend to cause CSS bloating when the same mixin is used in different selectors excessively. A good practice is to group your selectors that use the same mixin as possible.

Below are the mixins pre-defined in Groundwork:
Helpers | CSS3 | Typography | Icons | Sprites | Grid

Back to top

Helpers

.clear() {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.center() {
  text-align: center;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.ir() {
  border: 0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background-color: transparent;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.hidden() {
  display: none !important;
  visibility: hidden;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.visually-hidden() {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  &.focusable:active,
  &.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.size(@equalsize) {
  width: @equalsize;
  height: @equalsize;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.size(@width, @height) {
  width: @width;
  height: @height;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

Back to top

CSS3

.border-radius(@radius: 4px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.border-radii(@top-left: 4px, @top-right: 4px, @bottom-right: 4px, @bottom-left: 4px) {
  -webkit-border-radius: @top-left @top-right @bottom-right @bottom-left;
  -moz-border-radius: @top-left @top-right @bottom-right @bottom-left;
  border-radius: @top-left @top-right @bottom-right @bottom-left;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.box-sizing(@type: border-box) {
  -webkit-box-sizing: @type;
  -moz-box-sizing: @type;
  box-sizing: @type;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.box-shadow(@shadow-angle: 1px,  @shadow-distance: 2px, @shadow-blur: 2px, @shadow-color: rgba(0,0,0,0.25), @keyword: inset) {
  -webkit-box-shadow: @shadow-angle @shadow-distance @shadow-blur @shadow-color @keyword;
  -moz-box-shadow: @shadow-angle @shadow-distance @shadow-blur @shadow-color @keyword;
  box-shadow: @shadow-angle @shadow-distance @shadow-blur @shadow-color @keyword;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.horizontal-gradient (@start-color, @end-color, @default-color: @end-color) {
  background: @default-color; 
  background: -moz-linear-gradient(left,  @start-color 0%, @end-color 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,@start-color), color-stop(100%,@end-color)); 
  background: -webkit-linear-gradient(left,  @start-color 0%,@end-color 100%);
  background: -o-linear-gradient(left,  @start-color 0%,@end-color 100%); 
  background: -ms-linear-gradient(left,  @start-color 0%,@end-color 100%); 
  background: linear-gradient(to right,  @start-color 0%,@end-color 100%); 
  .lt-ie8 &, .ie9 & {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{start-color}', endColorstr='@{end-color}',GradientType=1 ); 
  }
  .ie8 & {
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{start-color}', endColorstr='@{end-color}',GradientType=1 );
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.vertical-gradient (@start-color, @end-color, @default-color: @end-color) {
  background: @default-color; 
  background: -moz-linear-gradient(top,  @start-color 0%, @end-color 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start-color), color-stop(100%,@end-color)); 
  background: -webkit-linear-gradient(top,  @start-color 0%,@end-color 100%); 
  background: -o-linear-gradient(top,  @start-color 0%,@end-color 100%); 
  background: -ms-linear-gradient(top,  @start-color 0%,@end-color 100%);
  background: linear-gradient(to bottom,  @start-color 0%,@end-color 100%);
  .lt-ie8 &, .ie9 & {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{start-color}', endColorstr='@{end-color}',GradientType=0 );
  }
  .ie8 & {
    -ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='@{start-color}', endColorstr='@{end-color}',GradientType=0 ); 
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.placeholder(@color: rgb(221, 221, 221)) {
  :-moz-placeholder {
    color: @color;
  }
  ::-webkit-input-placeholder {
    color: @color;
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.rotate(@rotation) {
  -webkit-transform: rotate(@rotation);
  -moz-transform: rotate(@rotation);
  -o-transform: rotate(@rotation);
  transform: rotate(@rotation);
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.transition(@transition) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  transition: @transition;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.text-stroke(@stroke: @colorWhite) {
  text-shadow: 1px 0 0 @stroke, -1px 0 0 @stroke, 0 1px 0 @stroke, 0 -1px 0 @stroke, 1px 1px @stroke, -1px -1px 0 @stroke, 1px -1px 0 @stroke, -1px 1px 0 @stroke;
  .lt-ie9 & {
    filter: progid:DXImageTransform.Microsoft.Glow(Color=@stroke,Strength=1); // IE6-8
  }
}

Create text stroke using multiple text shadows. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

Back to top

Typography

.font-size(@fontPx: @msBase) {
  @fontRem: (@fontPx / 10);
  font-size : round(@fontPx * 1px);
  font-size : ~"@{fontRem}rem";
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.line-height(@linePx: (@baseFontSize * @baseLineHeight)) {
  @lineRem: (@linePx / 10);
  line-height: round(@linePx * 1px);
  line-height: ~"@{lineRem}rem";
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.font-face(@family-name, @font-path, @font-style:normal, @font-weight:normal) {
  @font-face {
    font-family: @family-name;
    src: url('/@{themeDirectory}/fonts/@{font-path}.eot');
    src: url('/@{themeDirectory}/fonts/@{font-path}.eot?#iefix') format('embedded-opentype'),
         url('/@{themeDirectory}/fonts/@{font-path}.woff') format('woff'),
         url('/@{themeDirectory}/fonts/@{font-path}.ttf') format('truetype'),
         url('/@{themeDirectory}/fonts/@{font-path}.svg#@{family-name}') format('svg');
    font-weight: @font-weight;
    font-style: @font-style;
    }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.word-wrap (@mode: auto) {
  word-wrap: break-word;
  -webkit-hyphens: @mode;
  -moz-hyphens: @mode;
  -ms-hyphens: @mode;
  -o-hyphens: @mode;
  hyphens: @mode;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.text-justify(@style: newspaper) {
  text-align: justify;
  text-justify: @style;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

Back to top

Icons

In addition to the mixins for icons below, please check out Gwikons, 304 icons built- in in Groundwork.

.prepend-icon( @icon-image, @width, @height, @nudge-left:0, @nudge-top:0, @pad:12px ) {
  position: relative;
  padding-left: @width + @pad;
  &:before {
    ._generated-icon( @width, @height, @icon-image );
    top: @nudge-top;
    left: @nudge-left;
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.append-icon( @icon-image, @width, @height, @nudge-right:0, @nudge-top:0, @pad:12px ) {
  position: relative;
  padding-right: @width + @pad;
  &:before {
    ._generated-icon( @width, @height, @icon-image );
    top: @nudge-top;
    right: @nudge-right;
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.prepend-sprite-icon(@x, @y, @width, @height, @nudge-left:0, @nudge-top:0, @pad:12px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) {
  position: relative;
  padding-left: @width + @pad;
  &:before {
    ._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
    top: @nudge-top;
    left: @nudge-left;
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.append-sprite-icon(@x, @y, @width, @height, @nudge-right:0, @nudge-top:0, @pad:12px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) {
  position: relative;
  padding-right: @width + @pad;
  &:after {
    ._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
    top: @nudge-top;
    right: @nudge-right;
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.prepend-sprite-icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) {
  &:before {
    .sprite-pos(@x, @y, @sprite-grid);
    .nudge-l(@nudge-left);
    .nudge-t(@nudge-top);
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.append-sprite-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) {
  &:after {
    .sprite-pos(@x, @y, @sprite-grid);
    .nudge-r(@nudge-right);
    .nudge-t(@nudge-top);
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.prepend-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) {
  position: relative;
  ._pad-left(@width, @pad);
  &:before {
    position: absolute;
    display: block;
    content: ' ';
    top: 0;
    left: 0;
    ._size(@width, @height);
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.append-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) {
  position: relative;
  ._pad-right(@width, @pad);
  &:after {
    position: absolute;
    display: block;
    content: ' ';
    top: 0;
    right: 0;
    ._size(@width, @height);
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.prepend-icon-image(@icon-image, @width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) {
  ._pad-left(@width, @pad);
  &:before {
    background: url(@icon-image) no-repeat 0 0;
    ._size(@width, @height);
    .nudge-l(@nudge-left);
    .nudge-t(@nudge-top);
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.append-icon-image(@icon-image, @width:0, @height:0, @nudge-right:0, @nudge-top:0, @pad:10px) {
  ._pad-right(@width, @pad);
  &:after {
    background: url(@icon-image) no-repeat 0 0;
    ._size(@width, @height);
    .nudge-r(@nudge-right);
    .nudge-t(@nudge-top);
  }
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

Back to top

Sprites

.sprite(@x, @y, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) {
  .sprite-image(@sprite-image);
  .sprite-pos(@x, @y, @sprite-grid);
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.sprite-sized(@x, @y, @size, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when not (isnumber(@sprite-image)) {
  .sprite(@x, @y, @sprite-image, @sprite-grid);
  .size(@size);
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.sprite-sized(@x, @y, @width, @height, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (isnumber(@height)) {
  .sprite(@x, @y, @sprite-image, @sprite-grid);
  .size(@width,@height);
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.sprite-ir(@x, @y, @size, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when not (isnumber(@sprite-image)) {
  .ir();
  .sprite(@x, @y, @sprite-image, @sprite-grid);
  .size(@size);
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.sprite-ir(@x, @y, @width, @height, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (isnumber(@height)) {
  .ir();
  .sprite(@x, @y, @sprite-image, @sprite-grid);
  .size(@width,@height);
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.sprite-image(@sprite-image:@sprite-image) {
  background-image: url(@sprite-image);
  background-repeat: no-repeat;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.sprite-pos(@x, @y, @sprite-grid:@sprite-grid) {
  background-position: -(@x*@sprite-grid*1px)  -(@y*@sprite-grid*1px);
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.sprite-pos-sized(@x, @y, @size, @sprite-grid:@sprite-grid) when not (isnumber(@sprite-image)) {
  .sprite-pos(@x, @y, @sprite-grid);
  .size(@size);
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.sprite-pos-sized(@x, @y, @width, @height, @sprite-grid:@sprite-grid) when (isnumber(@height)) {
  .sprite-pos(@x, @y, @sprite-grid);
  .size(@width,@height);
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

Back to top

Grid

.padding(@padding: (@gridUnitGutter / 2)){
  padding: @padding;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

.column() {
  display: inline-block;
  float: left;
  margin-left: (@gridUnitGutter / 2);
  margin-right: (@gridUnitGutter / 2);
  position: relative;
}

Explanation will be placed here. Documentation under development. Dummy text follows. Conveniently evisculate enterprise-wide technology with collaborative expertise.

Back to top

You may of course define your own colors and create your own color schemes by creating new color variables

<< Variables

Bundles >>

Table of Contents

Inspiration & credits

Groundwork created and maintained by John Noceda.
Special thanks to all the popular CSS, LESS, SCSS frameworks and boilerplates out there for the inspiration and great ideas

Groundwork Front-End Framework Licenses

Released under the GNU General Public License, version 2.
Fonts included with Groundwork are released under the SIL Open Font License (OFL) version 1.1

Documentation License


Documentation is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Theme powered by Groundwork Front-end Framework for Drupal

Scroll al inicio
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad