diff --git a/core/modules/grid/config/grid.fluid_12.yml b/core/modules/grid/config/grid.fluid_12.yml new file mode 100644 index 0000000..774b630 --- /dev/null +++ b/core/modules/grid/config/grid.fluid_12.yml @@ -0,0 +1,9 @@ +id: fluid_12 +label: Twelve column fluid +type: equal_column +options: + units: '%' + width: 100 + columns: 12 + padding_width: 1.5 + gutter_width: 2 diff --git a/core/modules/grid/config/grid.fluid_3.yml b/core/modules/grid/config/grid.fluid_3.yml new file mode 100644 index 0000000..7e6a9a6 --- /dev/null +++ b/core/modules/grid/config/grid.fluid_3.yml @@ -0,0 +1,9 @@ +id: fluid_3 +label: Three column fluid +type: equal_column +options: + units: '%' + width: 100 + columns: 3 + padding_width: 1.5 + gutter_width: 2 diff --git a/core/modules/grid/config/grid.fluid_6.yml b/core/modules/grid/config/grid.fluid_6.yml new file mode 100644 index 0000000..1d7fbcb --- /dev/null +++ b/core/modules/grid/config/grid.fluid_6.yml @@ -0,0 +1,9 @@ +id: fluid_6 +label: Six column fluid +type: equal_column +options: + units: '%' + width: 100 + columns: 6 + padding_width: 1.5 + gutter_width: 2 diff --git a/core/modules/grid/config/grid.ninesixty_12.yml b/core/modules/grid/config/grid.ninesixty_12.yml new file mode 100644 index 0000000..5409789 --- /dev/null +++ b/core/modules/grid/config/grid.ninesixty_12.yml @@ -0,0 +1,9 @@ +id: ninesixty_12 +label: '960px wide, 12 column grid' +type: equal_column +options: + units: 'px' + width: 960 + columns: 12 + padding_width: 20 + gutter_width: 10 diff --git a/core/modules/grid/config/grid.ninesixty_16.yml b/core/modules/grid/config/grid.ninesixty_16.yml new file mode 100644 index 0000000..2cd9c65 --- /dev/null +++ b/core/modules/grid/config/grid.ninesixty_16.yml @@ -0,0 +1,9 @@ +id: ninesixty_16 +label: '960px wide, 16 column grid' +type: equal_column +options: + units: 'px' + width: 960 + columns: 16 + padding_width: 20 + gutter_width: 10 diff --git a/core/modules/grid/grid.info b/core/modules/grid/grid.info new file mode 100644 index 0000000..9dd6db4 --- /dev/null +++ b/core/modules/grid/grid.info @@ -0,0 +1,8 @@ +name = Grid +description = Pluggable grid system manager. +package = Core +version = VERSION +core = 8.x +dependencies[] = config +configure = admin/structure/grids + diff --git a/core/modules/grid/grid.module b/core/modules/grid/grid.module new file mode 100644 index 0000000..7d99dc3 --- /dev/null +++ b/core/modules/grid/grid.module @@ -0,0 +1,26 @@ + t('Grid'), + 'entity class' => 'Drupal\grid\Grid', + 'controller class' => 'Drupal\Core\Config\Entity\ConfigStorageController', + 'config prefix' => 'grid', + 'entity keys' => array( + 'id' => 'id', + 'label' => 'label', + 'uuid' => 'uuid', + ), + ); + return $types; +} diff --git a/core/modules/grid/lib/Drupal/grid/Grid.php b/core/modules/grid/lib/Drupal/grid/Grid.php new file mode 100644 index 0000000..af122e5 --- /dev/null +++ b/core/modules/grid/lib/Drupal/grid/Grid.php @@ -0,0 +1,81 @@ +plugin)) { + // Pass on Grid ID as part of the configuration array. + $this->options['id'] = $this->id; + $this->plugin = drupal_container()->get('plugin.manager.grid')->createInstance($this->type, $this->options); + } + return $this->plugin; + } + + /** + * Implements Drupal\grid\Plugin\GridInterface::getGridCss(). + */ + public function getGridCss($wrapper_selector = NULL, $col_selector_prefix = NULL, $skip_spacing = FALSE) { + return $this->getPlugin()->getGridCss($wrapper_selector, $col_selector_prefix, $skip_spacing); + } + +} diff --git a/core/modules/grid/lib/Drupal/grid/GridBundle.php b/core/modules/grid/lib/Drupal/grid/GridBundle.php new file mode 100644 index 0000000..eb5b927 --- /dev/null +++ b/core/modules/grid/lib/Drupal/grid/GridBundle.php @@ -0,0 +1,25 @@ +register('plugin.manager.grid', 'Drupal\grid\Plugin\GridManager'); + } +} diff --git a/core/modules/grid/lib/Drupal/grid/Plugin/GridInterface.php b/core/modules/grid/lib/Drupal/grid/Plugin/GridInterface.php new file mode 100644 index 0000000..ca73fd8 --- /dev/null +++ b/core/modules/grid/lib/Drupal/grid/Plugin/GridInterface.php @@ -0,0 +1,30 @@ +discovery = new AnnotatedClassDiscovery('grid', 'grid'); + $this->factory = new ReflectionFactory($this); + } +} diff --git a/core/modules/grid/lib/Drupal/grid/Plugin/grid/grid/EqualColumn.php b/core/modules/grid/lib/Drupal/grid/Plugin/grid/grid/EqualColumn.php new file mode 100644 index 0000000..a465c2c --- /dev/null +++ b/core/modules/grid/lib/Drupal/grid/Plugin/grid/grid/EqualColumn.php @@ -0,0 +1,173 @@ +id = $id; + $this->columns = $columns; + $this->padding = $padding_width; + $this->gutter = $gutter_width; + $this->width = $width; + $this->units = $units; + } + + /** + * Implements Drupal\grid\Plugin\GridInterface::getGridCss(). + */ + public function getGridCss($wrapper_selector = NULL, $col_selector_prefix = NULL, $skip_spacing = FALSE) { + + // If the wrapper selector was not provided, generate one. This is useful for + // specific administration use cases when we scope the classes by grids. + if (empty($wrapper_selector)) { + $wrapper_selector = '.grid-' . $this->id; + } + + // If the col span selector was not provided, generate one. This is useful + // for the front end to apply varying span widths under different names. + if (empty($col_selector_prefix)) { + $col_selector_prefix = '.grid-col-'; + } + + // If spacing is to be skipped, use 0 instead of the configured values. + if ($skip_spacing) { + $padding = 0; + $gutter = 0; + } + else { + $padding = $this->padding; + $gutter = $this->gutter; + } + + // Because we use the border-box box model, we only need to substract the + // size of margins from the full width and divide the rest by number of + // columns to get a value for column size. + $colwidth = ($this->width - (($this->columns - 1) * $gutter)) / $this->columns; + + $css = array(); + $css[$wrapper_selector . ' .grid-col'] = array( + 'border' => '0px solid rgba(0,0,0,0)', + 'float' => 'left', + '-webkit-box-sizing' => 'border-box', + '-moz-box-sizing' => 'border-box', + 'box-sizing' => 'border-box', + '-moz-background-clip' => 'padding-box', + '-webkit-background-clip' => 'padding-box', + 'background-clip' => 'padding-box', + 'margin-left' => $gutter . $this->units, + 'padding' => '0 ' . $padding . $this->units, + ); + $css[$wrapper_selector . ' .grid-col' . $col_selector_prefix . 'first'] = array( + 'margin-left' => '0', + 'clear' => 'both', + ); + for ($i = 1; $i <= $this->columns; $i++) { + $selector = $wrapper_selector . ' .grid-col' . $col_selector_prefix . $i; + if ($i == 1) { + // The first column does not yet have any margins. + $css[$selector] = array( + 'width' => ($colwidth * $i) . $this->units, + ); + } + elseif ($i == $this->columns) { + // The last column always spans 100%. + $css[$selector] = array( + 'width' => $this->width . $this->units, + 'margin-left' => 0, + ); + } + else { + // Other columns absorb all columns that they need to include and one + // less margin before them. + $css[$selector] = array( + 'width' => (($colwidth * $i) + ($gutter * ($i - 1))) . $this->units, + ); + } + } + + return $this->formatCss($css); + } + + /** + * Returns a CSS string. + * + * @param (array) $css + * A two dimensional array, keyed first on selector, then on property name. + */ + protected function formatCss($css) { + $output = ''; + foreach ($css as $selector => $rules) { + $output .= $selector . "{\n"; + foreach ($rules as $property => $value) { + $output .= ' ' . $property . ': ' . $value . ";\n"; + } + $output .= "}\n"; + } + return $output; + } +}