Wrapper()

• Overview
• Parameters
• Group Alias

Overview

The wrapper() mixin allows you to wrap a module (or a collection of the same module) within a wrapper element. This element acts as a Cell module, and is passed a modifier corresponding to the name of the wrapped module.

@include wrapper($namespace, $scope);

Example

<div class="wrapper--header">
  <div class="header">...</div>
</div>

@include module('header') {
  ...
  @include wrapper {
    position: relative;
  }
}

CSS Output

.header, [class*="header--"] {
  ...
}

[class*="wrapper--"][class*="--header"] {
  position: relative;
}

Parameters

• $namespace
• $scope

$namespace

Type	string
Description	[required] the module name to use when rendering the wrapper
Default	'wrapper'

$scope

Type	string
Description	[required] the scope/modifier to use when rendering the wrapper
Default	$module

Group Alias

For semantic purposes, Cell offers a group alias for the wrapper mixin:

<div class="group--button">
  <div class="button">...</div>
  <div class="button">...</div>
  <div class="button">...</div>
</div>

@include module('button') {
  ...
  @include group {
    margin-bottom: 20px;
  }
}