PHPackages webfactory/raster.gs - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. webfactory/raster.gs AbandonedArchivedLibrary[Utility & Helpers](/categories/utility) webfactory/raster.gs ==================== Raster.gs is a SCSS based grid system 3.0.0(11y ago)81441[1 issues](https://github.com/webfactory/Raster.gs/issues)GPL-2.0CSS Since Nov 12Pushed 11y ago3 watchersCompare [ Source](https://github.com/webfactory/Raster.gs)[ Packagist](https://packagist.org/packages/webfactory/raster.gs)[ Docs](http://www.raster.gs)[ RSS](/packages/webfactory-rastergs/feed)WikiDiscussions master Synced 3d ago READMEChangelog (4)DependenciesVersions (12)Used By (0) Raster.gs [![Build Status](https://camo.githubusercontent.com/e81a0a9859ff6e8d33c299c77153fc5b3960d7a79c97cc2e93ef6cc3014f4d1c/68747470733a2f2f7472617669732d63692e6f72672f776562666163746f72792f5261737465722e67732e737667)](https://travis-ci.org/webfactory/Raster.gs) ========================================================================================================================================================================================================================================================================= [](#rastergs-) Raster.gs is an SCSS based grid system with the following features: - you can use more than one grid and choose different grids for different devices - nest grids as deep as you want - create grids with uniform-width columns or completely weird ratio-based ones - leave columns out, no need for `offset`-classes - independence of any frameworks - toggle different options to avoid creation of unneeded classes - clever extends avoid messing up compiled css - support for older browsers Demo ---- [](#demo) Play with it on \[codepen\] (). Or see some prepared demos in `demos/`. Requirements ------------ [](#requirements) Sass > 3.4.5 Installation ------------ [](#installation) ### Download [](#download) You can just \[download\] () the files, but I recommend you to use \[bower\] () for that! ### Package manager [](#package-manager) Raster.gs is registered in Packagist and Bower. #### Install via Bower [](#install-via-bower) Go to your project folder and type the following command in your console ``` bower install raster.gs ``` #### Install via Composer [](#install-via-composer) Add this line to your requirements in composer.json ``` "webfactory/raster.gs": "dev-master" ``` ### Get into your project [](#get-into-your-project) Import the `_raster.scss` file into your Sass files to import the needed mixins and start creating your own grids. ``` @import 'PATH/raster.gs/dist/_raster.scss'; ``` Using the grid -------------- [](#using-the-grid) ### Create a new grid system [](#create-a-new-grid-system) Include the mixin `raster()` in your Sass to generate a new grid. Raster.gs uses \[configuration objects\] (). ``` $conf: ( columns: 12, prefix: 'column', gutter: 4, combinations: true, helpers: true ); @include raster($conf); ``` ##### `$columns` [](#columns) This defines the number of your columns which must be either a number or a list of percentages (remember: do not go higher than 100%). `$columns: 4` means that you want a grid with 4 columns with equal widths. You could express the same with a list of ratios `$columns: (1,1,1,1)`. `$columns: (75,25)` means that you want a grid with 2 columns where first column makes three quarters and the second one makes one quarter. ##### `$prefix` [](#prefix) This is a prefix for the CSS classes that are created, it must be a string. The default is `'column'`. ``` $conf: ( columns: 4, prefix: 'test' ); @include raster($conf); ``` The code above creates the following CSS classes which present columns from 1 to 4: - test-1 - test-2 - test-3 - test-4 - and their combinations (more on this below) Giving your grids unique names makes it possible to generate an infinite number of grids, that way you can even use them in your mediaqueries like this: ``` @media (max-width:768px){ $tablet: ( columns: 4, prefix: 'tablet' ); @include raster($tablet); } @media (min-width:769px){ $desktop: ( columns: 8, prefix: 'desktop' ); @include raster($desktop); } ``` Because of that you could even use a grid for different purposes, maybe one grid for layout and another one for a gallery. ``` $layout: ( columns: 4, $prefix: layout ); @include raster($layout); $gallery: ( columns: 8, prefix: gallery ); @include raster($gallery); ``` ##### `$gutter` [](#gutter) This is the width of your gutters between your columns. It must be a number. ``` $conf: ( columns: 4, gutter: 10 ); @include raster($conf); ``` The code above creates a grid with four columns where the gutters are 10% width. ##### `$combinations` [](#combinations) This decides whether to create CSS classes with combinations of your columns or not. It must be a boolean (true or false). By default this is set to true. ``` $conf: ( columns: 4, combinations: true ); @include raster($conf); ``` Additionally to the generated CSS classes mentioned before the above code creates the following classes: - test-1-2 - test-1-3 - test-1-4 - test-2-3 - test-2-4 - test-3-4 These classes represent the combinations of your columns. For example: test-1-2 fills the space of the first two columns, test-1-4 fills the space of all four columns. If you have many columns this option could blow up your css file size. So turn it off, if you don't need them. ##### `$helpers` [](#helpers) Every grid that is generated brings the following helper classes - raster: this is a wrapper for your columns (it will only be generated once) - PREFIX-pad: apply a padding that fits your grid gutters to column - PREFIX-hidden: hides an element - PREFIX-full: sets an element to full width - PREFIX-first: clears the floating of an element. Use this if you want a row to start at another column instead of column one ##### Nesting [](#nesting) As all grid classes are based on relative units (percentages) you can simply nest them. ``` ``` You can also nest different grids ``` ``` ### Use standalone mixins [](#use-standalone-mixins) Want to create a more semantic layout without generation of unneeded grid classes? I've prepared some mixins for you! ##### `row` [](#row) This creates a new row which contains columns. ``` .example { @include row; } ``` ##### `column($conf, $column, $span)` [](#columnconf-column-span) Create a new column. ``` $conf: ( columns: 4, gutter: 10 ); aside { @include column($conf, 1) //this is placed in the first column } main { @include column($conf, 2, 4) //this goes from the first to the fourth column } ``` ##### `pad($conf)` [](#padconf) This adds a padding which fits the gutter of the grid system. ``` $conf: ( columns: 4, gutter: 10 ); .example { @include pad($conf) } ``` ##### `full` [](#full) Creates a column filling the full width of its parent. ``` .example { @include full; } ``` ##### `hidden` [](#hidden) This hides a column. ``` .example { @include hidden; } ``` Settings -------- [](#settings) The following variables can be overwritten in your project: ``` $rgs-grid-row: 'grid-row'; //set the name of a row ``` Use in your framework --------------------- [](#use-in-your-framework) Raster.gs is splitted in two parts: public and private. The public parts can be used by anyone without any dependency, These have *human-readable* names and include things like parameter validation and so forth. If you want to use your own names and don't want or need parameter validation you can use the files in the private dir. I only recommend this for experienced users. Browsersupport -------------- [](#browsersupport) Raster.gs works from Internet Explorer 8 and up. Todo ---- [](#todo) Want to help? Got some things to do! - include SassDoc Changelog --------- [](#changelog) ### 3.0.0 [](#300) - $gutter default is now 4 (was 2 before) - replaced $quiet mode with column mixins - removed `first` helper - cleaned the code up - introduced configuration objects - create percentage based ratios (was factor based before) - fixed width bug with combined columns - splitted code in private and public parts - included pad classes - `.grid-row` is now `.raster` - added some demos ### 2.1.0 [](#210) - $gutterWidth is now $gutter - gutters are now two paddings ### 2.0 [](#20) - mixin `grid` is now `raster` - introduced `$quiet` mode - prefixed private functions with underscore - improved documentation - docblock documentation - testing - input validation and error messages - bootcamp unit testing - continuous integration with travis ci - css linting - concatenated main file for bower - extracted functions in partials - improved performance - cleaner code - clever use of placeholders ### Health Score 32 — LowBetter than 72% of packages Maintenance18 Infrequent updates — may be unmaintained Popularity17 Limited adoption so far Community11 Small or concentrated contributor base Maturity70 Established project with proven stability Bus Factor1 Top contributor holds 95.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~31 days Recently: every ~40 days Total 11 Last Release 4249d ago Major Versions 1.1.7 → 2.0.02014-09-04 2.0.1 → 3.0.02014-09-25 ### Community Maintainers ![](https://www.gravatar.com/avatar/d4ed0a0f5a1c56f7df31bb8c854a2ad99d24281dc8df4b4d3dd986a9e84b7a24?d=identicon)[webfactory](/maintainers/webfactory) --- Top Contributors [![mmintel](https://avatars.githubusercontent.com/u/4574612?v=4)](https://github.com/mmintel "mmintel (61 commits)")[![mpdude](https://avatars.githubusercontent.com/u/1202333?v=4)](https://github.com/mpdude "mpdude (3 commits)") --- Tags csssassscssgrid ### Embed Badge ![Health badge](/badges/webfactory-rastergs/health.svg) ``` [![Health](https://phpackages.com/badges/webfactory-rastergs/health.svg)](https://phpackages.com/packages/webfactory-rastergs) ``` ### Alternatives [scssphp/scssphp scssphp is a compiler for SCSS written in PHP. 62827.7M220](/packages/scssphp-scssphp)[panique/laravel-sass Compiles your Sass .scss files to .css every time you run your app (in development) 73171.8k1](/packages/panique-laravel-sass)[efficiently/larasset Larasset is a library for Laravel 5 which manage assets in an easy way. 684.8k](/packages/efficiently-larasset)[trentrichardson/cakephp-shrink Compiles, combines, and minifies javascript, coffee, less, scss, and css 1619.3k](/packages/trentrichardson-cakephp-shrink) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)