{"id":15171004,"url":"https://github.com/platframe/platframe","last_synced_at":"2025-09-09T11:06:05.412Z","repository":{"id":48020450,"uuid":"125228009","full_name":"platframe/platframe","owner":"platframe","description":"Structured, scalable and modular frontend development platform.","archived":false,"fork":false,"pushed_at":"2023-01-24T01:57:15.000Z","size":3300,"stargazers_count":37,"open_issues_count":18,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-07T10:46:04.603Z","etag":null,"topics":["architecture","framework","frontend","javascript","modular","platform","pug","stylus"],"latest_commit_sha":null,"homepage":"https://platframe.com","language":"Stylus","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/platframe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-03-14T14:45:19.000Z","updated_at":"2024-01-03T14:15:35.000Z","dependencies_parsed_at":"2023-02-13T10:31:19.176Z","dependency_job_id":null,"html_url":"https://github.com/platframe/platframe","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/platframe/platframe","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/platframe%2Fplatframe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/platframe%2Fplatframe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/platframe%2Fplatframe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/platframe%2Fplatframe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/platframe","download_url":"https://codeload.github.com/platframe/platframe/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/platframe%2Fplatframe/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262788708,"owners_count":23364396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["architecture","framework","frontend","javascript","modular","platform","pug","stylus"],"created_at":"2024-09-27T08:42:49.970Z","updated_at":"2025-06-30T14:07:35.267Z","avatar_url":"https://github.com/platframe.png","language":"Stylus","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\" xmlns=\"http://www.w3.org/1999/html\"\u003e\n    \u003ca href=\"https://platframe.com\"\u003e\n        \u003cimg src=\"https://platframe.com/assets/images/external/_linked/platframe.svg\" width=100 height=100\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003ePlatframe\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    Modular platform for structured and scalable frontend development.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://travis-ci.org/platframe/platframe\"\u003e\u003cimg src=\"https://travis-ci.org/platframe/platframe.svg?branch=master\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.codacy.com/app/platframe/platframe?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=platframe/platframe\u0026amp;utm_campaign=Badge_Grade\"\u003e\u003cimg src=\"https://api.codacy.com/project/badge/Grade/e2faa208e2b94932b4612df9cf306bd5\"/\u003e\u003c/a\u003e\n    \u003ca href=\"https://david-dm.org/platframe/platframe?type=dev\"\u003e\u003cimg src=\"https://david-dm.org/platframe/platframe/dev-status.svg\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://app.netlify.com/sites/platframe-branch-master/deploys\"\u003e\u003cimg src=\"https://api.netlify.com/api/v1/badges/2ba198a8-5364-4a8d-b660-81c4ac0f2225/deploy-status\" alt=\"Netlify Status\"\u003e\u003c/a\u003e\n    \u003c!-- \u003ca href=\"http://t.me/platframe\"\u003e\u003cimg src=\"https://img.shields.io/badge/telegram-chat-30A7DE.svg\"\u003e\u003c/a\u003e --\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    Build and deploy your new project in one go:\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://app.netlify.com/start/deploy?repository=https://github.com/platframe/platframe\"\u003e\n        \u003cimg src=\"https://www.netlify.com/img/deploy/button.svg\" alt=\"Take Platframe for a spin on Netlify\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## Table of contents\n- [Overview](#overview)\n- [Getting started](#getting-started)\n- [Documentation](#documentation)\n- [Contributing](#contributing)\n\n## Overview\nPlatframe is a structured and modular frontend development platform suitable for building both multi (MPA) and single page applications (SPA) that are backend agnostic.\n\n### Purpose\nTo provide a sound development platform with constructs that enhance developer efficiency and tooling that supports the frontend workflow.\n\nThis is achieved through the following key objectives:\n\n- An architecture that is semantic, modular and scalable\n- Consistent patterns for structuring source code and common assets\n- A workflow strategy that facilitates both the development and production phase\n- A component implementation to modularize discrete UI concerns and optimize reuse\n- A collection of defaults that address common markup, style and logic concerns\n- A base template for use as a springboard in new projects\n\n#### Notes\nCSS development methodology and coding style is beyond the framework's purview.\nThe primary concern is not to expose a collection of predefined styles, but rather to allow the preference of the developer/team and requirements of the project to determine the most suitable approach to styling.\n\nAs the framework remains minimally prescriptive on the methodology you use for authoring CSS, the usage scope of the class selector is largely a decision you get to make. A notable exception is components, which for consistency should be ID'd with a class as [described](http://platframe.com/docs/components/#create-style) in the documentation.\n\n### Stack\n[Pug](https://pugjs.org), [Stylus](http://stylus-lang.com) and JavaScript\n\n### Ulterior functions\nBeyond the scope of its core functions, Platframe may also be used as a static site generator or a structural blueprint for new frontends.\n\n#### Generator\nUsing the framework as a static site generator lends its core benefits to your project, regardless of size.\nThis facilitates projects with less complex requirements.\nPut the platform in development mode to start adding content and optionally customize the default template.\nRefer to [Getting started](#getting-started).\n\n#### Blueprint\nFrontend architecture is often an afterthought, resulting in a maintenance burdern down the line.\nYou may be able to avoid this by modelling your frontend's structure on Platframe's architecture.\nHere's an outline of how your project could benefit:\n\n- Consistent patterns for asset structuring\n- Facilitates growth as the structure scales predictively\n- Exposes a structural hierarchy that optimizes efficiency through inheritance\n- A modular design that keeps your code \u003cabbr title=\"don't repeat yourself\"\u003eDRY\u003c/abbr\u003e\n- Reduce or eliminate dev time spent on architectural decisions\n\nRefer to the section on [architecture](https://platframe.com/docs/#architecture) in the docs for more detail.\nWhen using Platframe solely as a blueprint for structuring a new frontend, it becomes largely stack-agnostic.\nThe only prerequisite is that the chosen stack should have sufficient feature parity with the respective language features of *Pug*, *Stylus* and JavaScript employed by the framework in order to  abide by the requirements of the architecture.\n\n## Getting started\n\n### 1. Prerequisites\n\n- Node.js\u0026nbsp; `≥ v8.0`\n- NPM\u0026nbsp; `≥ v5.2`\n\n##### Optional:\n- Yarn\n- Node Version Manager (nvm)\n\n### 2. Get the source\n\n- Option 1: `npx degit platframe/new my-app`\n- Option 2: [download](https://github.com/platframe/platframe/releases/latest) the latest release\n\n### 3. Install\n\nYou may run [nvm](http://nvm.sh) to ensure you use the recommended Node version:\n- `cd my-app \u0026\u0026 nvm use`\n\nInstall the dependencies:\n- `cd my-app \u0026\u0026 yarn install`\n\nAlternatively, setup your VCS as part of the installation run:\n- `cd my-app \u0026\u0026 git init \u0026\u0026 yarn`\n\nIf you intend to use `.env`, remove its `.sample` extension.  \nChange the default metadata in `package.json` to reflect your project.  \n\n### Develop\nSpin up the development environment by running `yarn develop`  \nBy default, the build will be served at `localhost:3000`  \nThe build system takes care of transpiling modified sources and triggering client updates\n\n### Test\nRun your test suite\\* with `npm test`  \nBuild, test and serve a production build for inspection with `npm run preflight`.  \nIn addition to hosting the build on your local machine, the `preflight` task will also provision a tunneled, public URL for previewing the build outside your local network.\n\n\\* Currently, only linting for JavaScript is wired to the test task. You are responsible for integrating additional testing mechanisms as required.\n\n### Deploy\nFor an optimized, production-targeted build, run `yarn build`  \nYou can optionally wire your deployment logic to `yarn deploy`\n\n## Documentation\nThe documentation can be found at [platframe.com/docs](https://platframe.com/docs)\n\n## Contributing\nRefer to the contribution [guidelines](.github/CONTRIBUTING.md) on how to get started.\n\n---\n\n## Meta\n\u0026#169; 2018 [Cygnul](https://cygnul.com).\nAuthored by [@gidhon](https://github.com/gidhon).\nReleased under the [MIT](LICENSE) license.\n\n\n[http://nvm.sh]: http://nvm.sh\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplatframe%2Fplatframe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplatframe%2Fplatframe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplatframe%2Fplatframe/lists"}