{"id":22468102,"url":"https://github.com/patternslib/patterns","last_synced_at":"2025-05-15T04:05:42.550Z","repository":{"id":1581779,"uuid":"2066292","full_name":"Patternslib/Patterns","owner":"Patternslib","description":"Library for quickly applying rich interaction patterns without the need to write any JavaScript.","archived":false,"fork":false,"pushed_at":"2025-05-14T21:00:58.000Z","size":60514,"stargazers_count":105,"open_issues_count":98,"forks_count":42,"subscribers_count":20,"default_branch":"master","last_synced_at":"2025-05-15T04:05:36.279Z","etag":null,"topics":["hacktoberfest","javascript","patternslib","ui-components"],"latest_commit_sha":null,"homepage":"http://patternslib.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Patternslib.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2011-07-18T13:05:37.000Z","updated_at":"2025-05-13T10:06:52.000Z","dependencies_parsed_at":"2024-01-04T10:36:07.769Z","dependency_job_id":"ebec7951-9d97-4425-a1d4-63e9a017c382","html_url":"https://github.com/Patternslib/Patterns","commit_stats":{"total_commits":5833,"total_committers":42,"mean_commits":"138.88095238095238","dds":0.7107834733413338,"last_synced_commit":"fa870d18eff6e25cfe84a498fdc913110d0d3100"},"previous_names":[],"tags_count":225,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Patternslib%2FPatterns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Patternslib%2FPatterns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Patternslib%2FPatterns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Patternslib%2FPatterns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Patternslib","download_url":"https://codeload.github.com/Patternslib/Patterns/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270645,"owners_count":22042859,"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":["hacktoberfest","javascript","patternslib","ui-components"],"created_at":"2024-12-06T11:15:07.080Z","updated_at":"2025-05-15T04:05:37.537Z","avatar_url":"https://github.com/Patternslib.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Patterns\n\n[![Build Status](https://github.com/Patternslib/Patterns/workflows/test/badge.svg?branch=master)](https://travis-ci.org/Patternslib/Patterns)\n\nPatterns is a toolkit that enables designers to build rich interactive prototypes without the need for writing any JavaScript.\nAll functionality is triggered by classes and other attributes in the HTML, without abusing the HTML as a programming language.\nAccessibility, SEO and well structured HTML are core values of Patterns.\n\n\n## Changelog\n\nSee the [Changelog at GitHub](https://github.com/Patternslib/Patterns/blob/master/CHANGES.md).\n\n\n## Browser support\n\nPatterns aims to support at least the two latest major versions of all popular browsers:\n\n- Apple Safari\n- Google Chrome\n- Firefox\n\nOther browser version may work too, but are not actively tested against.\n\n\n## Development installation requirements\n\nMake sure, you have these requirements installed:\n\n    - Node.js ( https://nodejs.org/en/ )\n    - yarn ( https://yarnpkg.com/ )\n    - make\n    - git\n\nOn OSX you need `gnu-tar` instead of tar (GNU tar supports the `--transform` option).\nPlease install it with e.g. `brew install gnu-tar`.\n\n\n## Development installation\n\nThe following commands will generate a `bundle.min.js` file in the `dist` directory\nwhich contains Patterns and all its dependencies:\n\n    git clone git://github.com/Patternslib/Patterns.git\n    cd Patterns\n    make\n\nAlternatively, you can [download a bundle at patternslib.com](http://patternslib.com/download.html).\n\nTo start the development server, use `make serve` or `npx yarn start` and access the demo pages via [http://localhost:3001/](http://localhost:3001/).\nThe files are watched and the bundle re-built on changes.\nYou can access the bundle directly at [http://localhost:3001/bundle.min.js](http://localhost:3001/bundle.min.js).\n\n\n## Layout\n\nThe individual patterns are located in their own folders in `./src/pat/`.\n\nEach pattern folder contains some or all of the following files:\n\n-   _index.html_ which contains HTML markup that shows a demonstration of the pattern.\n-   _documentation.md_ which is a Markdown file that documents the pattern's purpose, how to use it and how to configure it.\n-   A javascript file which implements the pattern's functionality.\n-   A Sass (.scss) file which provides the CSS associated with the pattern.\n\nTo generate CSS files from the pattern's included Sass files, type `make all_css`\nand the css files will be generated in the same location as the Sass files.\n\nYou'll need to have a Sass compiler installed.\n\n\n## How to demo patterns\n\nTo demo the patterns, simply type `make serve` to install the necessary\ndependencies and to start a simple Node.js HTTP server.\n\nYou can then visit http://localhost:3001 to see a site with demos.\n\nAlternatively, patterns can also be demoed through the\n[Patternslib.com](http://patternslib.com) website, which is open-source. The\ncode and setup instructions are [here](https://github.com/patternslib/Patterns-site).\n\n\n## Contributing fixes\n\nTo develop on Patterns, clone the repository and set it's push-url to your fork:\n\n    git remote set-url --push origin \u003curl_to_your_fork\u003e\n\nCreate a branch for the feature/bug you are working on:\n\n    git checkout -b \u003cfeature\u003e\n\nFor inclusion use either a GitHub pull request or create a ticket with\na url to your external repository.\n\nPlease read our [contribution notes](CONTRIBUTING.md) and read our [code style guide](docs/developer/styleguide.md).\n\n\n### Running tests\n\nThe simplest way to run the tests are to use make:\n\n    make check\n\nThis will install all required npm and bower packages and run the tests.\n\n\n### Debugging tests\n\nEventually add to tests:\n\n    import \"core-js/stable\";\n    import \"regenerator-runtime/runtime\";\n\nThen:\n\n    node --inspect-brk node_modules/.bin/jest --runInBand ./src/pat/tooltip/tooltip.test.js\n\nConnect in chrome via:\n\n    chrome://inspect\n\nYou can pass Jest any parameter it accepts, like `-t TESTPATTERN`::\n\n    node --inspect-brk node_modules/.bin/jest --runInBand ./src/pat/tooltip/tooltip.test.js -t will.be.closed.when\n\n\n### Enabling log messages\n\nTo facilitate debugging you can change the default log level through the URL query string by adding `loglevel` options.\n\n- `http://www.example.com/?loglevel=DEBUG` changes the default log level to `DEBUG`.\n- `http://www.example.com/?loglevel-inject=DEBUG` changes the log level for just the inject pattern to `DEBUG`.\n- `http://www.example.com/?loglevel=ERROR\u0026loglevel-inject=INFO` changes the standard log level error, but enables messages at the `INFO` level for the inject pattern.\n\n### Patternslib global variables\n\nThere are some global variables that are available and can be used to make\nglobal settings or access otherwise hidden objects.\n\n| Global variable | Purpose | Default |\n| --------------- | ------- | ------ |\n| window.__patternslib_import_styles | Whether to import pattern-specific styles | false |\n| window.__patternslib_patterns_blacklist | A list of patterns that should not be loaded. | [] |\n| window.__patternslib_registry | Global access to the Patternslib registry object. | - |\n| window.__patternslib_registry_initialized | True, if the registry has been initialized. | false |\n| window.__patternslib_disable_modernizr (Deprecated) | Disable modernizr, but still write the js/no-js classes to the body. | undefined |\n\n### Bundle build analyzation\n\nhttps://survivejs.com/webpack/optimizing/build-analysis/\nhttps://formidable.com/blog/2018/finding-webpack-duplicates-with-inspectpack-plugin/\n\nBuild the stats.json file:\n\n    yarn build:stats\n\nCheck dependency tree and why which package was included:\nhttps://www.npmjs.com/package/whybundled\n\n    whybundled stats.json\n\nVisualize dependency tree and analyze bundle size:\nhttps://www.npmjs.com/package/webpack-bundle-analyzer\n\n    webpack-bundle-analyzer stats.json\n\n\n### Organisations and projects which use Patternslib\n\n-   [Overstroom ik?](http://www.overstroomik.nl), a website which informs Dutch citizens of their risk of flooding. It was introduced and highly praised by the Dutch minister of infrastructure and environment, Melanie Schultz.\n-   [OiRA](https://client.oiraproject.eu/), an online risk assessment tool, created for the Occupational Health and Safety Agency (OSHA) of the European Union.\n-   [Staralliance](https://www.staralliance.com) uses Patternslib in their intranet.\n-   [Plone](https://plone.com) CMS via [Mockup](https://github.com/plone/mockup/), which is built upon Patternslib.\n-   [Quaive Intranet](https://quaivecloud.com/) uses Patternslib.\n\n\n### Interactive HTML/CSS prototypes made with Patternslib\n\n-   The [Patternslib.com](http://patternslib.com) website uses Patternslib and is based upon a prototype, which can be found [here](https://github.com/patternslib/Patterns-site).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternslib%2Fpatterns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpatternslib%2Fpatterns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpatternslib%2Fpatterns/lists"}