{"id":29016560,"url":"https://github.com/memgraph/design","last_synced_at":"2025-08-31T16:43:13.828Z","repository":{"id":46527146,"uuid":"113083505","full_name":"memgraph/design","owner":"memgraph","description":null,"archived":false,"fork":false,"pushed_at":"2021-04-28T07:38:48.000Z","size":7177,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-06-25T22:38:12.521Z","etag":null,"topics":["design","fontello","foundation6","memgraph"],"latest_commit_sha":null,"homepage":null,"language":"SCSS","has_issues":true,"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/memgraph.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}},"created_at":"2017-12-04T19:09:10.000Z","updated_at":"2023-10-03T02:21:13.000Z","dependencies_parsed_at":"2022-08-27T18:42:50.388Z","dependency_job_id":null,"html_url":"https://github.com/memgraph/design","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/memgraph/design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/memgraph%2Fdesign","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/memgraph%2Fdesign/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/memgraph%2Fdesign/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/memgraph%2Fdesign/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/memgraph","download_url":"https://codeload.github.com/memgraph/design/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/memgraph%2Fdesign/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273010949,"owners_count":25030368,"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","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["design","fontello","foundation6","memgraph"],"created_at":"2025-06-25T22:30:38.053Z","updated_at":"2025-08-31T16:43:13.796Z","avatar_url":"https://github.com/memgraph.png","language":"SCSS","readme":"# Memgraph Design\n\nThis is a repo containing brand assets for Memgraph:\n\n* Customized ZURB Foundation instance + motion-ui library\n* SASS CSS utilities for easier brand application\n* Fontello custom icon set\n* Brand fonts - Roboto \u0026 Encode Sans Semi Condensed\n\nAdditionally, there's an option to generate the Styleguide from the available\nstyles.\n\n## Generating Styles\n\nRun `gulp default` to generate css styles and assets from `src` to the `_dist`\nfolder.\n\n## Usage in Projects\n\n1. Add `\"memgraph-ui\": \"git+https://github.com/memgraph/design.git\"` as a\n   dependency to your projects' package.json, then run `npm install`\n2. Use [Foundation docs](https://foundation.zurb.com/sites/docs/) or Memgraph\n   styleguide for reference on how to use elements\n\nThe compiled styles and ready-to-use assets are in the `_dist` folder, so you\ncan easily reference them in your project. The structure of the folder is as\nfollows:\n\n```\n\u003cpre\u003e\n_dist\n|-assets\n|  |-fontello\n|  |  |-css\n|  |  |-font\n|  |-fonts\n|  |  |-Encode_Sans_Semi_Condensed\n|  |  |-Roboto\n|  |-img\n|  |-libs\n|  |  |-foundation-sites\n|  |  |-motion-ui\n|-css\n|  |-memgraph-foundation.css\n|  |-memgraph-foundation-app.css\n|  |-memgraph-foundation-web.css\n\u003c/pre\u003e\n```\n\n### Simple Usage\n\nYou can just use compiled css from the `_dist` folder, referencing it like\nthis: `\u003cPATH_TO\u003e/memgraph-foundation/_dist/css/memgraph-foundation-\u003ctype\u003e.css`\n\nYou can add `memgraph-foundation` SCSS files directly to your project. The SCSS\nfiles to include are in `memgraph-foundation/src/scss` folder.\n\nThere are three compiled css files, so use just one of them based on your\nneeds:\n\n* `memgraph-foundation.css` can used as a core stylesheet in general-purpose\n  projects.\n* `memgraph-foundation-app.css` can used as a core stylesheet in apps and\n  demos.\n* `memgraph-foundation-web.css` can used in web projects (landing pages and\n  similar).\n\n### Advanced Usage\n\nYou can add `memgraph-foundation` SCSS files directly to your project. The SCSS\nfiles to include are in `memgraph-foundation/src/scss` folder.\n\n1. Import `memgraph-foundation.scss` to your projects' scss and continue\n   developing from there (change relative paths if needed)\n2. You can comment-out custom theme for demos if they're not needed for your\n   project (`theme/demo-theme`)\n3. To customize the use of certain Foundation components inside your project\n   (this is highly recommended because it will make the build smaller!), copy\nthe `_foundation.scss` and `_settings.scss` from\n`memgraph-foundation/src/scss/memgraph-foundation` folder. Comment out all the\ncomponents you don't need from `_foundation.scss`, and use `_settings.scss` to\ncustomize default styles. Link these settings and foundation files into your\nSCSS workflow if you do this!\n4. You can also customize Foundation JavaScript by only including the plugins\n   you need from the Foundation `dist/js` folder to your build.\n\n## Managing Other Artefacts\n\n### Updating Fontello Font Icons\n\nIcons are defined by using the http://fontello.com/ site. In\n`src/libs/fontello`, take the `config.json` and drag it to the fontello website.\nAfter that you can choose or upload new icons, or remove icons. Once you're\ndone, download the fontello with new configuration and overwrite the old\nfontello assets in the `src` folder. After you put the updated fontello files\nto the `src` folder please run `gulp default` because the command will update\nthe `_dist` folder which is used from some of the dependent projects!\n\n### Memgraph Styleguide\n\nSimple styleguide has been set up by using Foundation's `style-sherpa`. It\nserves for developing and adjusting the global Foundation styles and themes. It\nconsists of the main styles index and general demo template for testing.\nIdeally, every time when basic memgraph-foundation styles are updated, the\nstyleguide should be updated too using `gulp buildStyleguide` (it's published\nonline). This command will create the `_styleguide` folder.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmemgraph%2Fdesign","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmemgraph%2Fdesign","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmemgraph%2Fdesign/lists"}