PHPackages grrr-amsterdam/garp3-scaffold - 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. grrr-amsterdam/garp3-scaffold AbandonedArchivedLibrary[Utility & Helpers](/categories/utility) grrr-amsterdam/garp3-scaffold ============================= This is the PHP dependency package setup for a Garp 3 project. v1.0.11(9y ago)3271[2 PRs](https://github.com/grrr-amsterdam/garp_scaffold/pulls)BSD-3-ClauseJavaScript Since Mar 17Pushed 8y ago10 watchersCompare [ Source](https://github.com/grrr-amsterdam/garp_scaffold)[ Packagist](https://packagist.org/packages/grrr-amsterdam/garp3-scaffold)[ RSS](/packages/grrr-amsterdam-garp3-scaffold/feed)WikiDiscussions master Synced 4w ago READMEChangelogDependencies (5)Versions (18)Used By (0) [![Build Status](https://camo.githubusercontent.com/020ee789056d26cca06201b91913d154ed7116d8839c76989b57415e06f73498/68747470733a2f2f7472617669732d63692e6f72672f677272722d616d7374657264616d2f676172705f73636166666f6c642e737667)](https://travis-ci.org/grrr-amsterdam/garp_scaffold) Readme for Garp Scaffold ======================== [](#readme-for-garp-scaffold) This is a scaffold set to initiate [Garp 3](https://github.com/grrr-amsterdam/garp3) projects. Getting started --------------- [](#getting-started) Use [Composer](https://getcomposer.org/) to create a Garp3 scaffolded project: ``` composer create-project grrr-amsterdam/garp3-scaffold ``` Next update/install all dependencies by running: ``` composer update npm install ``` Create an Apache vhost pointing to the `public` folder. This should always be the preferred webroot of any Garp project. Building assets --------------- [](#building-assets) You can start a frontend build and watch by running: ``` gulp watch ``` or alternatively via: ``` npm start ``` You should now be able to visit [localhost:3000](http://localhost:3000) and get to your site. ### Building assets for different environments [](#building-assets-for-different-environments) You can generate builds for different environments by running either: ``` gulp --e=[development/staging/production] ``` or: ``` npm run build npm run build:staging npm run build:production ``` CSS --- [](#css) We use [Sass](http://sass-lang.com/) for css compilation. However we prefer to stick as closely to vanilla css as possible. Definitely make use of variables, but try to limit your use of mixins and loops. Also never use extend. We have a bunch more conventions for writing CSS. **Please heed these conventions**, they lead to more consistent and maintainable code. See the [css coding standards](https://github.com/grrr-amsterdam/garp3/wiki/coding-standards-html-css)for more info. JavaScript ---------- [](#javascript) JavaScript is transpiled from ES6 to ES5 with [Babel](https://babeljs.io/). We also use [Browserify](http://browserify.org/) to allow you to import modules. ES6 writing style is preferred, so please take full advantage of constants, arrow functions, modules, template literals and all that goodness. That being said, there are some features that can’t be properly transpiled. Make sure you load the appropriate Babel polyfills for those. You can [include just the polyfills you need](https://github.com/zloirock/core-js#commonjs). Modernizr --------- [](#modernizr) We use [Modernizr](https://modernizr.com/) to test browser support for certain features. We can then use progressive enhancement to leverage those features for supported browsers. Usage of `Modernizr.feature` in JS, or `.feature-class .selector` in CSS will automatically be detected and Gulp will make sure the appropriate tests are included. **Note**: this detection isn’t run when you’re using `gulp watch`, see `gulp watch` task below for more details. Building with Gulp ------------------ [](#building-with-gulp) [Gulp](http://gulpjs.com) is our task runner of choice. It takes care of building CSS, compiling JavaScript, and much more. Gulp takes most of it’s configuration values—such as where to put build files, or which cdn to use—from `app.ini`. Gulp will tell you which values it uses when you start a build. Although you can run all Gulp tasks from the command line, only a subset is actually suited for individual use. These are the tasks you can run: ### Building [](#building) ``` gulp ``` Builds everything. Defaults to a development build, use `--e=[staging/production]` for generating a staging or production build. ### Watching [](#watching) ``` gulp watch ``` Runs a build and watches for file changes in CSS and JavaScript, as well as php/phtml files in the `application/modules` directory. **BrowserSync** `gulp watch` Also fires up a [BrowserSync](https://www.browsersync.io/) instance which proxies the domain set in `app.ini`. This instance is accessible through both `localhost:3000` as well as `localhost.example.com:3000`. Browsersync also comes in handy for checking your work on other devices connected to the same local network, such as mobile phones. Fire up a browser and point it to `[local ip address]:3000` to access the site on your local machine. ### Generating a Modernizr file [](#generating-a-modernizr-file) ``` gulp modernizr ``` Modernizr is run on build, checks your CSS and JS, and includes the appropriate feature tests. The only caveat of this soluation is that **Modernizr doesn’t account for inline CSS/JS**. You will need to explicitely include these tests in the Gulp Modernizr task. Also, we don’t re-run Modernizr when watching, so if you add a test while running `gulp watch`, so will either need to manually run `gulp modernizr`, or restart that watch task. Using icons ----------- [](#using-icons) You can place all svg icons in the `public/css/img/icons` folder, and they will be transformed into a sprite automatically. In your views you can render an icon via the SVG helper as such, whereby \[icon-name\] is taken from the filename of the SVG: ``` $this->svg('[icon-name]') ``` Coloring icons is as easy as using `fill: #f00` in css. **Note**If your icons are not changing color, it is most likely because there are inline `fill`attributes on your SVG. Open up the SVG in your text editor and remove all `fill` attributes to make it colorable through CSS. Preloading webfonts ------------------- [](#preloading-webfonts) Your browser will only load a font once it has downloaded your css and finds an element which uses the font. By using the `` syntax you can tell the browser to start loading the font immediately, leading to faster render times. See `layout.phtml` for an example. ### Health Score 32 — LowBetter than 69% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity11 Limited adoption so far Community16 Small or concentrated contributor base Maturity72 Established project with proven stability Bus Factor1 Top contributor holds 53.1% 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 ~25 days Recently: every ~63 days Total 12 Last Release 3338d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/803176?v=4)[Harmen Janssen](/maintainers/harmenjanssen)[@harmenjanssen](https://github.com/harmenjanssen) --- Top Contributors [![harmenjanssen](https://avatars.githubusercontent.com/u/803176?v=4)](https://github.com/harmenjanssen "harmenjanssen (245 commits)")[![aapit](https://avatars.githubusercontent.com/u/6367669?v=4)](https://github.com/aapit "aapit (137 commits)")[![schoenkaft](https://avatars.githubusercontent.com/u/1607628?v=4)](https://github.com/schoenkaft "schoenkaft (78 commits)")[![PieturP](https://avatars.githubusercontent.com/u/5648325?v=4)](https://github.com/PieturP "PieturP (1 commits)") ### Code Quality TestsPHPUnit Code StylePHP\_CodeSniffer ### Embed Badge ![Health badge](/badges/grrr-amsterdam-garp3-scaffold/health.svg) ``` [![Health](https://phpackages.com/badges/grrr-amsterdam-garp3-scaffold/health.svg)](https://phpackages.com/packages/grrr-amsterdam-garp3-scaffold) ``` PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)