PHPackages harwinborger/spaceframework - 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. harwinborger/spaceframework ActiveLibrary[Utility & Helpers](/categories/utility) harwinborger/spaceframework =========================== Vertical grid system 1.3.0(5y ago)2313[22 PRs](https://github.com/HarwinBorger/SpaceFramework/pulls)GPL-3.0-only Since Jul 3Compare [ Source](https://github.com/HarwinBorger/SpaceFramework)[ Packagist](https://packagist.org/packages/harwinborger/spaceframework)[ Docs](https://github.com/HarwinBorger/SpaceFramework/)[ RSS](/packages/harwinborger-spaceframework/feed)WikiDiscussions Synced 2w ago READMEChangelog (4)DependenciesVersions (58)Used By (0) [![npm version](https://camo.githubusercontent.com/8c5e09ccb1cec49c229bfdcaf2d79a783dfffdb332a95ed51505fca521bf03a6/68747470733a2f2f62616467652e667572792e696f2f6a732f73706163656672616d65776f726b2e737667)](https://www.npmjs.com/package/spaceframework)[![Bower version](https://camo.githubusercontent.com/d304a6e942d24be315d33a455e76ff782382101a8b41a24f2b40d70b29841d29/68747470733a2f2f62616467652e667572792e696f2f626f2f73706163656672616d65776f726b2e737667)](https://asset-packagist.org/package/bower-asset/spaceframework)[![Bower version](https://camo.githubusercontent.com/39d6d070e6159d3311265f15b2d50a6d9a518c1b3738ea36a92f257a91beefa7/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f68617277696e626f726765722f73706163656672616d65776f726b)](https://github.com/HarwinBorger/SpaceFramework/blob/master/LICENSE)[![NPM Downloads](https://camo.githubusercontent.com/78735d3d1da87866b19ca7dda79f82a018a6be1a961138c880e1b21145ed23a8/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f73706163656672616d65776f726b2e7376673f7374796c653d666c6174)](https://www.npmjs.com/package/spaceframework) SpaceFramework ============== [](#spaceframework) The SpaceFramework is a SCSS framework build for front-end professionals and can be used to align elements pixel perfect on a virtual raster grid. The framework helps you with centralizing typography and the preserving of equivalent spaces between elements. One of the key features is the vertical alignment of typography. You can align text and elements on the baseline, capline and median. This is done by defining x-height and cap-heights of each font. Another large key feature is the measurement unit called 'Space-Unit'. Which is used to define equal steps of space between everything. Knowledge of typography and grids --------------------------------- [](#knowledge-of-typography-and-grids) Extensive knowledge of typography, grids and alignments is required to use the framework optimally. Therefor a good collaboration between UX/UI designers and Front-end developers is advised. How the SpaceFramework differs from common frameworks ----------------------------------------------------- [](#how-the-spaceframework-differs-from-common-frameworks) Most front-end frameworks like Bootstrap and ZURB Foundation focus mostly on the horizontal grid, instead the SpaceFramework does focus on the vertical grid and the vertical rhythms. The SpaceFramework uses advanced methods based on theories from typography and grids to create vertical patterns. As result websites and applications become extremely well aligned and feel pixel perfect balanced. The core of the framework lays in the use of the so called Space-Units and defining the x-height and cap-heights of fonts. With Space-Units, a virtual grid is created on which every element in the website is aligned. Features -------- [](#features) - Fixed units of measurement called 'space-units' - Real vertical text alignment such as align-baseline, align-capline and align-median - Grid - Flex - Centralized typography - Centralized spacing - Trim, Fit and Force utility classes Recommended to use ------------------ [](#recommended-to-use) - SpaceFramework is build on top of Foundation. However we made SpaceFramework to work without Foundation as well, but full power can be unlocked by combining them. () Installation ------------ [](#installation) ### NPM: [](#npm) ``` npm install spaceframework ``` Ecosystem --------- [](#ecosystem) ### Official website & Examples [](#official-website--examples) ### Documentation [](#documentation) ### Calculate X-Height and Capheight [](#calculate-x-height-and-capheight) ### Changelog [](#changelog) Thank you for using the SpaceFramwork ------------------------------------- [](#thank-you-for-using-the-spaceframwork) Made with 👽 from the Netherlands — Harwin Supported by ------------ [](#supported-by) [![JetBrains](./images/jetbrains.svg)](https://www.jetbrains.com/?from=SpaceFramework) ### Health Score 34 — LowBetter than 75% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity14 Limited adoption so far Community9 Small or concentrated contributor base Maturity77 Established project with proven stability Bus Factor1 Top contributor holds 98.8% 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 ~48 days Recently: every ~194 days Total 28 Last Release 1976d ago Major Versions 0.17.2 → 1.0.02020-03-15 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/3984675?v=4)[Harwin Borger](/maintainers/HarwinBorger)[@HarwinBorger](https://github.com/HarwinBorger) --- Top Contributors [![HarwinBorger](https://avatars.githubusercontent.com/u/3984675?v=4)](https://github.com/HarwinBorger "HarwinBorger (553 commits)")[![kevinkiel](https://avatars.githubusercontent.com/u/531113?v=4)](https://github.com/kevinkiel "kevinkiel (6 commits)")[![dannyreinders](https://avatars.githubusercontent.com/u/16878929?v=4)](https://github.com/dannyreinders "dannyreinders (1 commits)") --- Tags sassscssgridfoundationtypography ### Embed Badge ![Health badge](/badges/harwinborger-spaceframework/health.svg) ``` [![Health](https://phpackages.com/badges/harwinborger-spaceframework/health.svg)](https://phpackages.com/packages/harwinborger-spaceframework) ``` ### Alternatives [scssphp/scssphp scssphp is a compiler for SCSS written in PHP. 62929.3M299](/packages/scssphp-scssphp)[ssnepenthe/color-utils A PHP library for performing SASS-like color manipulations. 631.2M16](/packages/ssnepenthe-color-utils)[panique/laravel-sass Compiles your Sass .scss files to .css every time you run your app (in development) 71173.1k1](/packages/panique-laravel-sass)[nizsheanez/yii2-asset-converter Less, Sass, Scss and Phamlp converter for Yii2. No system requires. yii2-composer support, Less autoupdate, customizing of output directory 61169.7k6](/packages/nizsheanez-yii2-asset-converter)[wapplersystems/ws-scss Compiles SCSS to CSS at runtime with caching, TypoScript variables and EXT: import support 11144.8k7](/packages/wapplersystems-ws-scss)[trentrichardson/cakephp-shrink Compiles, combines, and minifies javascript, coffee, less, scss, and css 1619.4k](/packages/trentrichardson-cakephp-shrink) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)