PHPackages                             outeredge/sass - 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. outeredge/sass

ActiveLibrary[Utility & Helpers](/categories/utility)

outeredge/sass
==============

SASS library by outer/edge

v3.0.1(8y ago)06.6kCSS

Since Jan 13Pushed 8y ago6 watchersCompare

[ Source](https://github.com/outeredge/sass)[ Packagist](https://packagist.org/packages/outeredge/sass)[ RSS](/packages/outeredge-sass/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (2)DependenciesVersions (14)Used By (0)

outer/edge SASS
===============

[](#outeredge-sass)

[![Build Status](https://camo.githubusercontent.com/5378e0c27c281631fb480db50ac33b6b5a9c3d76957c3272d615934b5b03281f/68747470733a2f2f7472617669732d63692e6f72672f6f75746572656467652f736173732e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/outeredge/sass)

Uses [gulp](https://gulpjs.com/) to build css

### Settings

[](#settings)

To add specific colour palette for each site, create a `$siteColours` map (name: hex, name: hex) which will be automatically added to the base colours.

#### Devices

[](#devices)

- `$devices`: (tablet: 541px, desktop: 1025px)

#### Grid

[](#grid)

- `$grid-width`: 1280px
- `$grid-columns`: 12

#### Global

[](#global)

- `$global-line-height`: 100%
- `$body-background-colour`: map-get($colours, white)
- `$body-text-colour`: map-get($colours, darkgrey)
- `$body-font-size`: 12px
- `$body-font-family`: Arial, Helvetica, sans-serif

#### Class Names

[](#class-names)

- `$class-left`: left
- `$class-right`: right
- `$class-top`: top
- `$class-bottom`: bottom
- `$class-vertical`: vertical
- `$class-horizontal`: horizontal
- `$class-middle`: middle
- `$class-center`: center

#### Padding / Margin

[](#padding--margin)

- `$padding-class`: padding
- `$padding`: (tiny: 6px, small: 12px, default: 18px, large: 24px, none: 0)
- `$margin-class`: margin
- `$margin`: (tiny: 6px, small: 12px, default: 18px, large: 24px, none: 0)

#### Border

[](#border)

- `$border-class`: border
- `$border-width`: 1px
- `$border-style`: solid
- `$border-colour`: #cccccc
- `$border-radius-size`: 5px

#### Typography

[](#typography)

- `$titles`: (h1: 40px, h2: 32px, h3: 24px, h4: 16px)
- `$weights`: (light: 300, not-bold: 500, bold: 700)

#### Forms

[](#forms)

- `$button-background-colour`: $primary-colour
- `$button-text-colour`: map-get($colours, white)
- `$button-border`: 1px solid $primary-colour
- `$button-padding`: map-get($padding, small)
- `$button-background-colour-hover`: darken($button-background-colour, 10)
- `$button-text-colour-hover`: darken($button-text-colour, 10)
- `$button-border-hover`: 1px solid darken($primary-colour, 10)
- `$field-background-colour`: map-get($colours, whitesmoke)
- `$field-text-colour`: map-get($colours, darkgrey)
- `$field-border`: 1px solid map-get($colours, lightgrey)
- `$field-padding`: map-get($padding, tiny)
- `$field-width`: 100%
- `$label-display`: block

#### CSS 3

[](#css-3)

- `$transition-duration`: .5s

#### Colours

[](#colours)

- `$white`: #ffffff
- `$black`: #000000
- `$red`: #990000
- `$green`: #009900
- `$blue`: #000099
- `$yellow`: #999900
- `$cyan`: #009999
- `$magenta`: #990099
- `$grey`: #666666
- `$darkgrey`: #333333
- `$lightgrey`: #999999
- `$whitegrey`: #eeeeee
- `$whitesmoke`: #f5f5f5
- `$primary-colour`: map-get($colours, darkgrey)

### Icons

[](#icons)

Includes some basic icons in SVG format

- info.svg
- search.svg

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity21

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity70

Established project with proven stability

 Bus Factor1

Top contributor holds 50% 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 ~97 days

Recently: every ~125 days

Total

13

Last Release

2975d ago

Major Versions

v1.0.0 → 2.0.02016-04-18

2.2.0 → 3.0.02017-09-14

### Community

Maintainers

![](https://www.gravatar.com/avatar/1860caf77d9ad2a652f889890911b695bbc63db970b03cd53c4c52aa5c922f8f?d=identicon)[outeredge](/maintainers/outeredge)

---

Top Contributors

[![minlare](https://avatars.githubusercontent.com/u/1862882?v=4)](https://github.com/minlare "minlare (7 commits)")[![davidwindell](https://avatars.githubusercontent.com/u/1720090?v=4)](https://github.com/davidwindell "davidwindell (5 commits)")[![digiltd](https://avatars.githubusercontent.com/u/5680968?v=4)](https://github.com/digiltd "digiltd (2 commits)")

### Embed Badge

![Health badge](/badges/outeredge-sass/health.svg)

```
[![Health](https://phpackages.com/badges/outeredge-sass/health.svg)](https://phpackages.com/packages/outeredge-sass)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)