{"id":47592059,"url":"https://github.com/deskpro/messenger-style","last_synced_at":"2026-04-01T17:37:11.610Z","repository":{"id":39182681,"uuid":"141991007","full_name":"deskpro/messenger-style","owner":"deskpro","description":"UI library used by the legacy Deskpro Messenger","archived":false,"fork":false,"pushed_at":"2024-12-17T14:38:02.000Z","size":2718,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":24,"default_branch":"master","last_synced_at":"2024-12-17T15:38:23.102Z","etag":null,"topics":["legacy","library","product"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/deskpro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2018-07-23T09:18:36.000Z","updated_at":"2024-12-17T14:37:20.000Z","dependencies_parsed_at":"2024-03-19T10:49:47.040Z","dependency_job_id":"a0a26756-6dd6-4773-acea-2253de806deb","html_url":"https://github.com/deskpro/messenger-style","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/deskpro/messenger-style","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deskpro%2Fmessenger-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deskpro%2Fmessenger-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deskpro%2Fmessenger-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deskpro%2Fmessenger-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/deskpro","download_url":"https://codeload.github.com/deskpro/messenger-style/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/deskpro%2Fmessenger-style/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31290537,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-01T13:12:26.723Z","status":"ssl_error","status_checked_at":"2026-04-01T13:12:25.102Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["legacy","library","product"],"created_at":"2026-04-01T17:37:11.005Z","updated_at":"2026-04-01T17:37:11.598Z","avatar_url":"https://github.com/deskpro.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"Deskpro Apps\n============\n\nCSS Styling for Deskpro Messenger.\n\n**[View Documentation and Examples](https://deskpro.github.io/messenger-style/)**\n\nDevelopment\n-----------\n\nSummary:\n\n* Run `npm install`\n* Run `npm run dev`\n* Open `http://localhost:3000/messenger-style/` in your browser\n* Edit CSS files in `src/` and docs in `docs/`. As you edit files, the docs site above will live reload.\n\n### Prepare\n\n* You need `node` and `npm` installed on your computer\n* Run `npm install` to initialize dependencies\n\n### Development\n\nTo start with, run `npm run dev` to start the built-in dev server. This should open your browser at `http://localhost:3000/messenger-style/` with the documentation site.\n\nAs you modify CSS files in `src/` and markdown documentation files in `docs/`, your browser will live relaod. This makes for a really fast and smooth dev experience.\n\nProject Structure\n-----------------\n\nCSS is being post-processed with [PostCSS](https://postcss.org/) with the [postcss-preset-env](https://preset-env.cssdb.org/) which enables a bunch of proposed CSS features like variables. We use [Stage 0 features](https://preset-env.cssdb.org/features).\n\nThe general idea is to stay as close to \"normal CSS\" as we can. i.e. we want to avoid using programming logic like loops, which is why we have avoided SASS or LESS. PostCSS offers just enough convenience (e.g. nested selectors) without going overboard.\n\nThis project is linted with [stylelint](https://stylelint.io/) and a [SUIT linter plugin](https://github.com/postcss/postcss-bem-linter). Refer to the documentation if you run into issues or need to tweak the config in some way.\n\n### Conventions\n\n* You MUST use [SUIT nameing conventions](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) in this project.\n* You MUST use the `dpmsg-` namespace on all components.\n  * Modifiers on the component don't include the namespace. E.g. it would be `.dpmsg-Button.Button--warning`.\n* You MUST NOT define global styles or global resets.\n* You MUST define 1 CSS file per element or component. The goal is to design components that can be used as-is in isolation.\n* Each component MUST be completely self-defined. i.e. 1 component (aka 1 CSS file) MUST contain ALL the code necessary for that specific component. In other words, your component must not rely on external CSS code from other files or global styles.\n* Each component MUST include basic styles such as fonts, sizes, etc. This project uses an auto-reset plugin which resets style properties on all components to defaults. This reduces the chance of some rogue global CSS elsewhere on the page causing a visual glitch in our components.\n* Each component MUST have documentation in `docs/` that describe and demonstrate the component and any of its modifiers.\n\nDocumentation Files\n-------------------\n\nThe documentation pages in `docs/` serve as your \"development playground\" while you make changes to CSS, but by the time you finish a component, it should also serve as real documentation too.\n\nDocumentation is written in Markdown. There are two special bit of fenced HTML:\n\n* Fenced code with the language `html @preview` will render the HTML code to the browser screen and show a \"toggle code\" button that you can click to show the source code. **This is what your examples should be written in**.\n* Fenced code with the language `html @render` is similar, except there is no button to show the source code. So this is an escape-hatch for (rare) cases you need to render arbitrary HTML.\n\nMost of your documentation will be written with examples in `html @preview` fenced blocks. For example:\n\n```markdown\n    ```html @preview\n    \u003cbutton class=\"dp-Button\"\u003eDefault\u003c/button\u003e\n    \u003cbutton class=\"dp-Button Button--primary\"\u003ePrimary\u003c/button\u003e\n    \u003cbutton class=\"dp-Button Button--warning\"\u003eWarning\u003c/button\u003e\n    ```\n```\n\nThis results in three buttons being rendered to the page with \"toggle code\" button that will reveal that exact source code. So this is perfect for documentation to show off how to use code.\n\n### Creating new docs\n\nWhen you start a new component you'll need to create a new docs file for it:\n\n1) Create a new Markdown file in `docs/components/my-component.md`. Here's an example:\n\n```markdown\n    ---\n    title: My Component\n    ---\n\n    # My Component\n\n    This is my great component.\n\n    ```html @preview\n    \u003cdiv class=\"dp-MyComponent\"\u003e\n        Here's an example!\n    \u003c/div\u003e\n    ```\n```\n\nThis new file maps directly to the URL `http://localhost:3000/apps-style/docs/components/my-component.html`\n\n2) To have the file listed in the sidebar, modify `website/sidebars.json` and add it.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeskpro%2Fmessenger-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeskpro%2Fmessenger-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeskpro%2Fmessenger-style/lists"}