8 #frontpack Frontpack (optional)

Frontpack comes with pre-built starter components to help speed up theming for common projects.

Source: global.scss, line 39

8.1 #frontpack.common Common

Optional common classes. All classes here are also available as a extendable.

Source: frontpack/_common.scss, line 1

8.1.1 #frontpack.common.container Container

Examples

Default styling

Container content

.container

Creates a max width container, designed to house your grid content.

Container content

Markup

<div class="container">
  Container content
</div>

Source: frontpack/_common.scss, line 7

8.1.2 #frontpack.common.css-grid CSS Grid

Examples

Default styling

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

.css-grid

Sets up a CSS grid container. View in Firefox inspector to see a grid overlay.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Markup

<div class="css-grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

Source: frontpack/_common.scss, line 21

8.2 #frontpack.drupal Drupal (optional)

Optional styles if your application is using Drupal.

Source: global.scss, line 50

8.2.1 #frontpack.drupal.drupal7 Drupal 7

Drupal 7 optional styles.

Source: frontpack/drupal/_drupal.scss, line 1

8.2.1.1 #frontpack.drupal.drupal7.components Frontend Build Drupal Components

Frontend Build optional components for default Drupal output.

Source: frontpack/drupal/drupal7/_drupal.scss, line 8

8.2.1.1.1 #frontpack.drupal.drupal7.components.admin-menu Admin Menu

Themes the Drupal admin menu.

Parameters:

#admin-menu

Styles the Drupal admin menu component.

Source: frontpack/drupal/drupal7/components/_admin-menu.scss, line 1

8.2.1.1.1.1 #frontpack.drupal.drupal7.components.admin-menu.variables Variables

Admin Menu 1 component variables. To add/edit component variables, use scss/_variables.scss.

Parameters:

$admin-menu-background

Admin menu background. Default: #000
$admin-menu-size

Admin menu font size. Default: 12px
$admin-menu-font-family

Admin menu font family. Default: inherit
$admin-menu-line-height

Admin menu line height. Default: 1.4

Source: frontpack/drupal/drupal7/components/_admin-menu.scss, line 11

8.2.1.2 #frontpack.drupal.drupal7.messages Messages

Examples

Default styling

Curabitur rutrum, diam vel tempor commodo, augue nunc viverra risus, in pellentesque neque justo eget dolor.

.messages

Drupal's default message markup styling.

Curabitur rutrum, diam vel tempor commodo, augue nunc viverra risus, in pellentesque neque justo eget dolor.

.status

Status styling.

Curabitur rutrum, diam vel tempor commodo, augue nunc viverra risus, in pellentesque neque justo eget dolor.

.warning

Warning styling.

Curabitur rutrum, diam vel tempor commodo, augue nunc viverra risus, in pellentesque neque justo eget dolor.

.error

Error styling.

Curabitur rutrum, diam vel tempor commodo, augue nunc viverra risus, in pellentesque neque justo eget dolor.

Markup

<div class="messages [modifier class]">
  Curabitur rutrum, diam vel tempor commodo, augue nunc viverra risus, in pellentesque neque justo eget dolor.
</div>

Source: frontpack/drupal/drupal7/components/_messages.scss, line 1

8.2.1.2.1 #frontpack.drupal.drupal7.messages.variables Variables

Drupal 7 message component variables. To add/edit component variables, use scss/_variables.scss.

Parameters:

$message-background

Message background. Default:
$message-border

Message border. Default:
$message-margin

Message margin. Default: 1rem
$message-padding

Message padding. Default: 1rem
$message-radius

Message radius. Default: 0
$message-status-background

Message status background. Default: #dff0d8
$message-status-border

Message status border. Default: 1px solid #d6e9c6
$message-status-color

Message status color. Default: #3c763d
$message-warning-background

Message warning background. Default: #fcf8e3
$message-warning-border

Message warning border. Default: #faebcc
$message-warning-color

Message warning color. Default: #8a6d3b
$message-error-background

Message error background. Default: #f2dede
$message-error-border

Message error border. Default: 1px solid #ebccd1
$message-error-color

Message error color. Default: #a94442

Source: frontpack/drupal/drupal7/components/_messages.scss, line 17

8.2.1.3 #frontpack.drupal.drupal7.modules Drupal Modules

Source: frontpack/drupal/drupal7/_drupal.scss, line 1

8.2.1.3.1 #frontpack.drupal.drupal7.modules.panels-in-place-editor Panels In-Place Editor

Contains default Panels In-Place Editor module styles.

Source: frontpack/drupal/drupal7/modules/_panels-in-place-editor.scss, line 1

8.2.1.3.1.1 #frontpack.drupal.drupal7.modules.panels-in-place-editor.variables Variables

Panels In-Place Editor component variables. To add/edit component variables, use scss/_variables.scss.

Parameters:

$ipe-control-container-background

Background for the IPE control container. Default: #000
$ipe-control-container-padding

Padding for the IPE control container. Default: 1rem
$ipe-control-container-shadow

Shadow for the IPE control container. Default: none
$ipe-button-background

Button background for IPE. Default: #1779ba
$ipe-button-background-hover

Button hover background for IPE. Default: #767676
$ipe-button-radius

Button radius for IPE. Default: 0
$ipe-button-color

Button color for IPE. Default: #fff
$ipe-button-color-hover

Button hover color for IPE. Default: #fff
$ipe-button-padding

Button padding for IPE. Default: .5em
$ipe-button-font-family

Button font family for IPE. Default: inherit
$ipe-button-font-size

Button font size for IPE. Default: inherit
$ipe-button-line-height

Button line height for IPE. Default: 1
$ipe-button-height

Button height for IPE. Default: 33px
$ipe-button-margin

Button margin for IPE. Default: 0 1rem
$ipe-button-weight

Button weight for IPE. Default: normal

Source: frontpack/drupal/drupal7/modules/_panels-in-place-editor.scss, line 9

8.2.1.3.2 #frontpack.drupal.drupal7.modules.styleguide Style Guide

Contains default Style Guide module styles.

Source: frontpack/drupal/drupal7/modules/_styleguide.scss, line 1

8.2.1.3.2.1 #frontpack.drupal.drupal7.modules.styleguide.variables Variables

Style Guide component variables. To add/edit component variables, use scss/_variables.scss.

Source: frontpack/drupal/drupal7/modules/_styleguide.scss, line 7

8.2.1.4 #frontpack.drupal.drupal7.pager Pager

Examples

Default styling

.pager

Drupal's default pager markup styling.

Markup

<ul class="pager"><li class="pager-first first"><a title="Go to first page" href="#">« first</a></li>
  <li class="pager-previous"><a title="Go to previous page" href="#">‹ previous</a></li>
  <li class="pager-ellipsis">…</li>
  <li class="pager-item"><a title="Go to page 5" href="#">5</a></li>
  <li class="pager-item"><a title="Go to page 6" href="#">6</a></li>
  <li class="pager-item"><a title="Go to page 7" href="#">7</a></li>
  <li class="pager-item"><a title="Go to page 8" href="#">8</a></li>
  <li class="pager-current">9</li>
  <li class="pager-item"><a title="Go to page 10" href="#">10</a></li>
  <li class="pager-item"><a title="Go to page 11" href="#">11</a></li>
  <li class="pager-item"><a title="Go to page 12" href="#">12</a></li>
  <li class="pager-item"><a title="Go to page 13" href="#">13</a></li>
  <li class="pager-ellipsis">…</li>
  <li class="pager-next"><a title="Go to next page" href="#">next ›</a></li>
  <li class="pager-last last"><a title="Go to last page" href="#">last »</a></li>
</ul>

Source: frontpack/drupal/drupal7/components/_pager.scss, line 1

8.2.1.5 #frontpack.drupal.drupal7.search-results Search Results

Examples

Default styling

In faucibus feugiat urna sit amet elementum.

sed egestas elit duis turpis orci luctus egestas cras aliquam ut est neque consectetur felis ac luctus erat elit felis consectetur velit ante viverra in

bmarshall - 09/20/2017 - 09:20 - magna viverra

.search-results

Drupal's default search results markup styling.

In faucibus feugiat urna sit amet elementum.

sed egestas elit duis turpis orci luctus egestas cras aliquam ut est neque consectetur felis ac luctus erat elit felis consectetur velit ante viverra in

bmarshall - 09/20/2017 - 09:20 - magna viverra

Markup

<ol class="search-results">
  <li class="search-result">
    <h3 class="title">In faucibus feugiat urna sit amet elementum.</h3>
    <div class="search-snippet-info">
      <p class="search-snippet">sed egestas elit duis turpis orci luctus egestas cras aliquam ut est neque consectetur felis ac luctus erat elit felis consectetur velit ante viverra in</p>
      <p class="search-info"><a href="#" class="username">bmarshall</a> - 09/20/2017 - 09:20 - magna viverra</p>
    </div>
  </li>
</ol>

Source: frontpack/drupal/drupal7/components/_search-results.scss, line 1

8.2.1.6 #frontpack.drupal.drupal7.tabs Tabs

Examples

Default styling

.primary

Drupal's default tab markup styling.

Markup

<ul class="primary">
  <li><a href="#">Tab 1</a></li>
  <li class="active"><a href="#" class="active">Tab 1</a></li>
  <li><a href="#">Tab 1</a></li>
</ul>

Source: frontpack/drupal/drupal7/components/_tabs.scss, line 1

8.2.1.6.1 #frontpack.drupal.drupal7.tabs.variables Variables

Tab component variables. To add/edit component variables, use scss/_variables.scss.

Parameters:

$tab-border-width

Tab border width. Default: 1px
$tab-active-border-width

Active tab border width. Default: 2px
$tab-border-color

Tab border color. Default: #cacaca
$tab-active-border-color

Active tab border color. Default: #1779ba
$tab-margin

Tab margin. Default: 0 0 1rem
$tab-padding

Tab padding. Default: .9em 1.6em
$tab-weight

Tab weight. Default: normal
$tab-color

Tab color. Default: #cacaca
$tab-active-color

Active tab color. Default: #000
$tab-color-hover

Tab hover color. Default: #8a8a8a
$tab-background

Tab background. Default: #fff
$tab-background-hover

Tab hover background. Default: #fff

Source: frontpack/drupal/drupal7/components/_tabs.scss, line 16

8.3 #frontpack.extendables Extendables

Custom Frontpack Build extendables.

Source: frontpack/_extendables.scss, line 1

8.4 #frontpack.functions Functions

These are the default Frontpack functions. Frontpack uses Foundation by default and if enabled provides a wide range of other functions not listed below.

Source: frontpack/_functions.scss, line 1

8.4.1 #frontpack.functions.precent-size str-replace($string, $search, $replace: "")

Find and replace a string.

Compatible in IE6+, Firefox 2+, Safari 4+, Chrome 49+.

Parameters:

$string

String to search.
$search

String to find.
$replace

String to replace. Default: ''

Source: frontpack/_functions.scss, line 21

8.4.1 #frontpack.functions.precent-size precent-size($num)

Outputs a percetage relative to the browsers default text size (normally 16px) and the desired px.

Compatible in IE6+, Firefox 2+, Safari 4+, Chrome 49+.

Parameters:

$num

Defines the font size.
$base

Override the browser's default font size. Default: 16

Source: frontpack/_functions.scss, line 7

8.5 #frontpack.mixins Mixins

These are the default Frontpack mixins. Frontpack uses Foundation by default and if enabled provides a wide range of other mixins not listed below.

Source: frontpack/_mixins.scss, line 1

8.5.1 #frontpack.mixins.container container($width)

Creates a max width container, designed to house your grid content.

Compatible in IE6+, Firefox 2+, Safari 4+, Chrome 49+.

Parameters:

$width

Defines the container max width. Default: $global-width

Source: frontpack/_mixins.scss, line 35

8.5.2 #frontpack.mixins.font-face font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg)

A mixin for writing @font-face rules. See https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6.

Compatible in IE6+, Firefox 2+, Safari 4+, Chrome 49+.

Parameters:

$name

Defines the font name.
$path

Path to the font.
$weight

Font weight. Default: null
$style

Font style. Default: null
$exts

Allowed extensions. Default: eot woff2 woff ttf svg

Source: frontpack/_mixins.scss, line 156

8.5.3 #frontpack.mixins.grid css-grid($columns, $rows, $column-gaps, $grid-row-gaps, $type)

Creates a CSS grid container. To debug, view in Firefox inspector and enable the grid overlay.

Compatible in IE11+, Firefox 54+, Safari 10.1+, Chrome 59+.

Parameters:

$columns

Defines the number of grid columns. Default: $css-grid-columns
$rows

Defines the number of grid rows. Default: (small: none, medium: none)
$column-gaps

Specifies the size of the grid lines between the columns. Default: $css-grid-column-gaps
$row-gaps

Specifies the size of the grid lines between the rows. Default: $css-grid-row-gaps
$type

Defines the grid formatting context. Default: grid

Source: frontpack/_mixins.scss, line 51

8.5.4 #frontpack.mixins.grid-item css-grid-item($column-start, $column-end, $row-start, $row-end)

Creates a CSS grid container item. View in Firefox inspector to see a grid overlay.

Compatible in IE11+, Firefox 54+, Safari 10.1+, Chrome 59+.

Parameters:

$column-start

Defines which column the grid item should start at. Default: (small: auto, medium: auto)
$column-end

Defines which column the grid item should end at. Default: (small: auto, medium: auto)
$row-start

Defines which row the grid item should start at. Default: (small: auto, medium: auto)
$row-end

Defines which row the grid item should end at. Default: (small: auto, medium: auto)

Source: frontpack/_mixins.scss, line 79

8.5.5 #frontpack.mixins.throbber throbber($style)

Styles a throbber element.

Compatible in IE11+, Firefox 54+, Safari 10.1+, Chrome 49+.

Parameters:

$width

Defines the throbber width. Default: rem-calc(40)
$height

Defines the throbber height. Default: rem-calc(40)
$color

Defines the throbber color. Default: $primary-color
$opacity

Defines the throbber opacity. Default: $opacity
$radius

Defines the throbber radius. Default: $global-radius
$animation

Defines the throbber animation (keyframes available: throbber-rotateplane|throbber-scaleout). Default: throbber-rotateplane 1.2s infinite ease-in-out

Source: frontpack/_mixins.scss, line 105

8.5.6 #frontpack.mixins.variables Variables

Mixin default variables. To add/edit component variables, use scss/_variables.scss.

Parameters:

$primary-color

Primary application color.
$global-width

Application global width.
$global-radius

Application global radius.
$css-grid-columns

Responsive list for the number of columns at each breakpoint.
$css-grid-column-gaps

Responsive list for the size of column gaps at each breakpoint.
$css-grid-row-gaps

Responsive list for the size of row gaps at each breakpoint.

Source: frontpack/_mixins.scss, line 7

8.6 #frontpack.wordpress WordPress (optional)

Optional styles if your application is using WordPress.

Source: global.scss, line 58

8.6.1 #frontpack.wordpress.wysiwyg WYSIWYG Editor

When you are working with WordPress’ WYSIWYG Editor in the Edit Post screen, WordPress applies context-specific CSS attributes to certain elements when they are included in your post. For example, when inserting images, you can specify whether the images are floated left, right, or even centered. To do this, WordPress applies classes such as alignleft, alignright, or aligncenter. Without defining styles for WordPress’ default hooks, images and other elements may not display as intended.

Thus, at a bare minimum, if you are building a theme that will be used by the general public, it is wise to include the following basic styles for the items attributed via the WYSIWYG Editor.

Thanks to Jeff Starr for his WordPress Default Styles post.

Source: frontpack/wordpress/_wordpress.scss, line 1

8.6.1.1 #frontpack.wordpress.wysiwyg.variables Variables

WYSIWYG Editor default variables. To add/edit component variables, use scss/_variables.scss.

Parameters:

$global-margin

Application global margin.
$global-padding

Application global paddding.
$global-lineheight

Application global line height.
$small-font-size

Application small font size.

Source: frontpack/wordpress/_wordpress.scss, line 12