PHPackages phonon-framework/phonon - 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. [Framework](/categories/framework) 4. / 5. phonon-framework/phonon ActiveLibrary[Framework](/categories/framework) phonon-framework/phonon ======================= Phonon is an open source HTML, CSS and JavaScript agnostic framework that allows to create a website or a hybrid Web app. v2.0.0-alpha.2(6y ago)4252101[22 issues](https://github.com/phonon-framework/phonon/issues)[80 PRs](https://github.com/phonon-framework/phonon/pulls)MITCSS Since Jul 17Pushed 3y ago23 watchersCompare [ Source](https://github.com/phonon-framework/phonon)[ Packagist](https://packagist.org/packages/phonon-framework/phonon)[ Docs](https://phonon-framework.github.io)[ RSS](/packages/phonon-framework-phonon/feed)WikiDiscussions master Synced 2mo ago READMEChangelog (10)DependenciesVersions (82)Used By (0) [Phonon](https://phonon-framework.github.io) ============================================ [](#phonon) > Phonon is a responsive front-end framework with a focus on simplicity and flexibility [![TypeScript](https://camo.githubusercontent.com/81d486f164baea27656bcadd57f445ca927a0ec07e234a8746bcc10614cdd76e/68747470733a2f2f6261646765732e66726170736f66742e636f6d2f747970657363726970742f636f64652f747970657363726970742e7376673f763d313031)](https://github.com/ellerbrock/typescript-badges/)[![Dependency Status](https://camo.githubusercontent.com/c6330f6fa1e818ef1bf6f642c2166d6c45295fc8d029a8dedd17a5733315dfa7/68747470733a2f2f64617669642d646d2e6f72672f70686f6e6f6e2d6672616d65776f726b2f70686f6e6f6e2e737667)](https://david-dm.org/phonon-framework/phonon)[![devDependencies Status](https://camo.githubusercontent.com/1fd8b675a4e6fbb04b09627eddf0995cdad077bd11dfc05953bc64ef85695f87/68747470733a2f2f64617669642d646d2e6f72672f70686f6e6f6e2d6672616d65776f726b2f70686f6e6f6e2f6465762d7374617475732e737667)](https://david-dm.org/phonon-framework/phonon)[![Build Status](https://camo.githubusercontent.com/9965a62d5446586080866edf742742e56fc86c2a4c17e6bcb94a68b1f5c608af/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f70686f6e6f6e2d6672616d65776f726b2f70686f6e6f6e2e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/phonon-framework/phonon.svg?branch=master)[![Codecov](https://camo.githubusercontent.com/a39c21d630cc8c305eaa7b72c58115adebde094a24733f839966104fccaeb629/68747470733a2f2f636f6465636f762e696f2f67682f70686f6e6f6e2d6672616d65776f726b2f70686f6e6f6e2f6272616e63682f6d61737465722f67726170682f62616467652e737667)](https://codecov.io/gh/phonon-framework/phonon)![npm](https://camo.githubusercontent.com/fe0f883b75f46e78fca933d44347192605c7b0590a168c22bab55bf15a1ed887/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f70686f6e6f6e2e7376673f7374796c653d666c61742d737175617265)![license](https://camo.githubusercontent.com/e673e85f787b5268b9ab6d813c73828d9e3d5ab423cff7138918bdf570c55adc/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f717561726b2d6465762f70686f6e6f6e2e7376673f7374796c653d666c61742d737175617265) Starting with v2, Phonon is written in [Sass](https://sass-lang.com) and [TypeScript](https://www.typescriptlang.org). Installation ------------ [](#installation) You have the following options to install Phonon v2: - Install with [npm](https://www.npmjs.com/package/phonon) `npm install phonon@2.0.0-alpha.1` - Install with [Yarn](https://yarnpkg.com/en/package/phonon) `yarn add phonon@2.0.0-alpha.1` - Install with [Composer](https://packagist.org/packages/phonon-framework/phonon) `composer require phonon-framework/phonon` - Deliver CDN cached version of Phonon compiled [CSS](https://unpkg.com/phonon@2.0.0-alpha.1/dist/css/) and [JavaScript](https://unpkg.com/phonon@2.0.0-alpha.1/dist/js/) to your project by using [UNPKG](https://unpkg.com/phonon@2.0.0-alpha.1/) - Clone the repository to get all source files and compile Phonon by using the scripts: `git clone https://github.com/phonon-framework/phonon.git` - Download the [latest release](https://github.com/phonon-framework/phonon/releases) and use compiled CSS and JavaScript files available in the dist folder Framework compatibility ----------------------- [](#framework-compatibility) Phonon uses a DOM [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) which enables to react to DOM changes. This explains the ease of use of Phonon with Angular, React and Vue, etc. Please see [Examples](https://github.com/phonon-framework/phonon/tree/master#examples) for more information. Examples -------- [](#examples) We have several examples to share with you to show you how easy it is to integrate Phonon for your project. All examples are available in `examples/`. - [Phonon and React](https://github.com/phonon-framework/phonon/tree/master/examples/react-example) - [Phonon and Vue](https://github.com/phonon-framework/phonon/tree/master/examples/vue-example) - [Phonon and Webpack](https://github.com/phonon-framework/phonon/tree/master/examples/webpack-example) Versioning ---------- [](#versioning) Phonon Framework is maintained under the [Semantic Versioning guidelines](http://semver.org/). Contributing ------------ [](#contributing) **Don't hesitate** to contribute to this project! The Phonon team is completely open to any suggestions or improvements. Please, go to the [issues page](https://github.com/phonon-framework/phonon/issues) to open an issue. Moreover, if your pull request contains JavaScript patches or features, you must include relevant unit tests. Editor preferences are available in the [editor config](https://github.com/phonon-framework/phonon/blob/master/.editorconfig) for easy use in common text editors. Copyright and license --------------------- [](#copyright-and-license) Code released under the [MIT License](https://github.com/phonon-framework/phonon/blob/master/LICENSE). ### Health Score 33 — LowBetter than 75% of packages Maintenance19 Infrequent updates — may be unmaintained Popularity25 Limited adoption so far Community21 Small or concentrated contributor base Maturity60 Established project with proven stability Bus Factor1 Top contributor holds 91.2% 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 Unknown Total 1 Last Release 2493d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/2eeec60ea4deb110277c16825a55025cc1951fd80b51ee678880b6fea5dd8099?d=identicon)[qathom](/maintainers/qathom) --- Top Contributors [![qathom](https://avatars.githubusercontent.com/u/5703536?v=4)](https://github.com/qathom "qathom (103 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (10 commits)") --- Tags cssframeworkframework-agnosticfront-end-developmentfrontend-frameworkhybrid-appsjavascriptlightmobile-webphonontypescriptwebwebsiteframeworkwebcsssassmobiledesktopresponsivefront-end ### Embed Badge ![Health badge](/badges/phonon-framework-phonon/health.svg) ``` [![Health](https://phpackages.com/badges/phonon-framework-phonon/health.svg)](https://phpackages.com/packages/phonon-framework-phonon) ``` ### Alternatives [twbs/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 174.1k17.6M327](/packages/twbs-bootstrap)[twitter/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 174.1k1.7M27](/packages/twitter-bootstrap)[coreui/coreui The most popular front-end framework for developing responsive, mobile-first projects on the web rewritten and maintain by the CoreUI Team 873111.6k4](/packages/coreui-coreui)[components/bootstrap The most popular front-end framework for developing responsive, mobile first projects on the web. 932.8M63](/packages/components-bootstrap)[orange-opensource/orange-boosted-bootstrap Orange Boosted with Bootstrap is a Bootstrap based, Orange branded accessible and ergonomic components library. 2148.7k](/packages/orange-opensource-orange-boosted-bootstrap) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)