PHPackages                             wearebase/web-front-end-utilities - 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. wearebase/web-front-end-utilities

AbandonedArchivedLibrary

wearebase/web-front-end-utilities
=================================

Useful Front End Utilities

v2.0.3(8y ago)045.2k↓100%MITCSS

Since Nov 27Pushed 8y ago6 watchersCompare

[ Source](https://github.com/wearebase/web-front-end-utilities)[ Packagist](https://packagist.org/packages/wearebase/web-front-end-utilities)[ RSS](/packages/wearebase-web-front-end-utilities/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (4)Dependencies (1)Versions (16)Used By (0)

Info
====

[](#info)

This project is a collection of useful utilities, applicable to any web project. This includes Sass mixins.

Install
=======

[](#install)

Then include it in your composer:

```
"require": {
  "wearebase/web-front-end-utilities" : "*"
}

```

And specify a version or minimum version.

Configure where you want the package to go
==========================================

[](#configure-where-you-want-the-package-to-go)

If you want to install somewhere other than `vendor`, in your `composer.json` add the following:

```
"extra": {
  "installer-paths": {
    "wp-content/themes/timber/packages/{$name}": ["wearebase/web-front-end-utilities"]
  }
}

```

Enabling
========

[](#enabling)

Sass
----

[](#sass)

### Enabling Sass

[](#enabling-sass)

Add the package to your Compass build path. In this example, I've imported all of the packages for this project.

```
add_import_path "wp-content/themes/timber/packages"

```

### Using Sass

[](#using-sass)

- In your project variables, you can optionally add the following to override default values:
    - $grid-gutter-width
    - $magic-gutter
    - $magic-margin-gutters
    - $magic-padding-gutters
    - $magic-tablet-margin-gutters
    - $magic-tablet-padding-gutters
    - $magic-mobile-margin-gutters
    - $magic-mobile-padding-gutters

Order of files:

- Font Stack
- - Your project setup file -
- - Your bootstrap variables -
- Responsive
- Mixins
- - Your Sass code -
- Magic Margins

### Sass: What's included

[](#sass-whats-included)

#### Mixins

[](#mixins)

Provides a huge array of includes that will assist you in writing your CSS.

Highlights include:

- Pseudo-Element Generation
- Magical Vertical-Align
- hocus (hover + focus in one rule)
- Proportion generator
- Responsive font sizer - requires "responsive" file
- Sprite mixins
- Bonus Bootstraps!

#### Responsive

[](#responsive)

Responsive includes a bunch of responsive utilities for targeting bootstrap breakpoints - mobile, tablet, desktop, and large desktop. These will change based on your bootstrap config but will default to the bootstrap defaults if not provided.

Also provides mixins for retina devices, retina-sm, retina-xs, and iPhone 5's.

Include this file *after* your bootstrap variables.

#### Font-Stack

[](#font-stack)

Include this file first in your Sass and you can use a whole load of font stacks. Totally optional but may be useful.

#### Magic Margins

[](#magic-margins)

Use classes like `mt4` to quickly add a margin top of 4 gutters to your item. The gutter is automatically pulled in if you're using bootstrap but defaults to 10px.

Examples of classes:

- `[type][direction][x]`: `type: p or m`, `direction: t r b l` of `x` gutters
    - Examples: `pt2`, `mb0`, `mt2`, `pl2`
- If direction is left empty then padding or margin will apply to all directions
    - Examples: `m0`, `p1`, `p4`
- Append `t-` to apply to tablets only (requires import of "responsive")
- Append `m-` to apply to mobile only (requires import of "responsive")

If you're referencing a gutter size that isn't being generated, simply adjust the variable for the amount of gutters you want. Gutters are generated from 0 up to the amount you specify.

###  Health Score

35

—

LowBetter than 80% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity25

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity71

Established project with proven stability

 Bus Factor1

Top contributor holds 100% 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 ~63 days

Recently: every ~114 days

Total

15

Last Release

2936d ago

Major Versions

0.4.1 → 1.0.02016-06-06

1.1 → 2.02017-01-25

### Community

Maintainers

![](https://www.gravatar.com/avatar/a450103bae0408522e011a167ba85c6f67ae325fe7ffcca894e86ab2487daccc?d=identicon)[wearebase](/maintainers/wearebase)

---

Top Contributors

[![jonginn](https://avatars.githubusercontent.com/u/1779310?v=4)](https://github.com/jonginn "jonginn (7 commits)")

### Embed Badge

![Health badge](/badges/wearebase-web-front-end-utilities/health.svg)

```
[![Health](https://phpackages.com/badges/wearebase-web-front-end-utilities/health.svg)](https://phpackages.com/packages/wearebase-web-front-end-utilities)
```

###  Alternatives

[elgg/elgg

Elgg is an award-winning social networking engine, delivering the building blocks that enable businesses, schools, universities and associations to create their own fully-featured social networks and applications.

1.7k15.7k4](/packages/elgg-elgg)[pressbooks/pressbooks

Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS.

44643.1k1](/packages/pressbooks-pressbooks)[johnbillion/user-switching

Instant switching between user accounts in WordPress and WooCommerce.

19768.3k2](/packages/johnbillion-user-switching)[rainlab/blog-plugin

Blog plugin for October CMS

17257.7k](/packages/rainlab-blog-plugin)[rainlab/user-plugin

User plugin for October CMS

11954.3k13](/packages/rainlab-user-plugin)[starcitizentools/citizen-skin

A beautiful, usable, responsive MediaWiki skin with in-depth extension support. Originally developed for the Star Citizen Wiki.

3164.5k](/packages/starcitizentools-citizen-skin)

PHPackages © 2026

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