Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
@midcamp/hatter
Advanced tools
Readme
Pattern Lab version of The Hatter style-guide for MidCamp.org
Prerequisite: NodeJS - https://nodejs.org/en/
Install dependencies:
npm install
Run Pattern Lab in watch mode (watches for changes in patterns and scss):
npm start
Pattern Lab can then be viewed at http://127.0.0.1:3000
The bulk of the code lives in the appropriately named source
directory. Within sourcethe _patterns
directory
contains the elements, components, and templates that make up this style guide.
source/scss
contains the main scss file for the project (styles.scss) and any scss partials not directly related to
patterns in the system. Long term, most of the remaining partials in source/scss/components
should be moved alongside
a related pattern in _patterns
Image and svg assets are contained in source/imgs
and source/svg
respectively.
Compiled assets land in the dist
directory. At the moment this is ignored by version control. Depending on the build
process for the theme that uses this as a dependency, we may want to change that.
If for example we wanted to make adjustments to the news teaser component, we'd edit the source files in
source/_patterns/01-components/news-teaser
_c-news-teaser.scss
is a sass partial containing styles related to this component. The leading c- is namespacing to
indicate that is a component.
c-news-teaser.md
is a markdown file containing documentation for the component.
c-news-teaser.twig
contains markup for the component.
To create a new pattern, create a new subdirectory in the appropriate top level pattern directory (01-components for example.)
A pattern must at least have a pattern-name.twig
file containing markup for the pattern.
The following optional files can also be included:
pattern-name.md
- Documentation for the pattern
_pattern-name.scss
- sass partial for the pattern (it should automatically be detected when compining the main sass file.)
pattern-name.(yml/json)
- Data for the pattern
npm start
- launch Pattern Lab and Webpack in watch mode.npm run watch
- run Webpack in watch modenpm run dist
- build pattern library assets in producion modenpm run pl:serve
- run Pattern Lab in development modenpm run pl:build
- build static version of pattern library.npm run pl:deploy
- build static version of pattern library and deploys to GitHub Pages.https://patternlab.io/docs/index.html
FAQs
The Hatter style-guide for MidCamp.org
The npm package @midcamp/hatter receives a total of 13 weekly downloads. As such, @midcamp/hatter popularity was classified as not popular.
We found that @midcamp/hatter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.