{"id":23279255,"url":"https://github.com/maximjsx/DesignGuide","last_synced_at":"2025-08-21T11:31:56.331Z","repository":{"id":188518656,"uuid":"678529860","full_name":"maximjsx/DesignGuide","owner":"maximjsx","description":"🎨 A simple design guide for using Markdown 📄 \u0026 Github/Git 💻 in general","archived":false,"fork":false,"pushed_at":"2024-11-22T12:17:18.000Z","size":82,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T08:14:13.827Z","etag":null,"topics":["design","design-guide","markdown","readme","readme-structure"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maximjsx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2023-08-14T19:08:37.000Z","updated_at":"2025-01-22T08:48:42.000Z","dependencies_parsed_at":"2025-02-18T22:22:43.391Z","dependency_job_id":"290ffbc9-dd76-40d9-a690-e37d42f40daa","html_url":"https://github.com/maximjsx/DesignGuide","commit_stats":null,"previous_names":["maximfiedler/designguide","max1mde/designguide","maximjsx/designguide"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/maximjsx/DesignGuide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximjsx%2FDesignGuide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximjsx%2FDesignGuide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximjsx%2FDesignGuide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximjsx%2FDesignGuide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maximjsx","download_url":"https://codeload.github.com/maximjsx/DesignGuide/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maximjsx%2FDesignGuide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271470171,"owners_count":24765335,"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-21T02:00:08.990Z","response_time":74,"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","design-guide","markdown","readme","readme-structure"],"created_at":"2024-12-19T22:40:56.564Z","updated_at":"2025-08-21T11:31:56.027Z","avatar_url":"https://github.com/maximjsx.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003eThe Design Guide\u003c/h1\u003e\n  \u003cp\u003eA simple design guide for everything related to Git and Github (especially Markdown)\u003c/p\u003e\n  \u003cimg src=\"https://github.com/max1mde/DesignGuide/assets/114857048/1c109e37-3501-4581-8273-2595593b3219\"\u003e\n  \u003cdiv\u003e\n    \u003ca href=\"https://discord.gg/2UTkYj26B4\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/Discord_Server-7289DA?style=flat\u0026logo=discord\u0026logoColor=white\" alt=\"Join Discord Server\" style=\"border-radius: 15px; height: 20px;\"\u003e\u003c/a\u003e\n    \u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/max1mde/DesignGuide\"\u003e\n    \u003cimg alt=\"GitHub forks\" src=\"https://img.shields.io/github/forks/max1mde/DesignGuide\"\u003e\n    \u003cimg alt=\"GitHub contributors\" src=\"https://img.shields.io/github/contributors/max1mde/DesignGuide\"\u003e\n    \u003cimg alt=\"GitHub license\" src=\"https://img.shields.io/github/license/max1mde/DesignGuide\"\u003e\n  \u003c/div\u003e  \n\u003c/div\u003e\n\n# About This Project\n\nThis project is here to help you get inspired and learn how to make your README files and other project content look better. It gives you ideas and tips that can be really helpful, but you don't have to do everything exactly as it says.\n\n**Feel free to:**\n- Use this guide for your own projects\n- Contribute to this project if you see something that can be improved or added\n\n# Table of Contents\n- [Markdown](#markdown)\n  - [Headings](#headings)\n  - [Text Formatting](#text-formatting)\n  - [Colors](#colors)\n  - [Links](#links)\n  - [Lists](#lists)\n  - [TODO Lists](#todo-lists)\n  - [Alerts (Special blockquotes)](#alerts)\n  - [Emojis](#emojis)\n  - [HTML](#html)\n  - [HTML Symbols and Entities](#html-symbols-and-entities)\n\n- [Repository README](#repository-readme)\n  - [Structure](#structure)\n  - [Badges](#badges)\n\n- [Profile README](#profile-readme)\n\n- [Commits](#commits)\n  - [Commit Messages](#commit-messages)\n  - [Emojis in Commit Messages](#emojis-in-commit-messages)\n\n---\n\n# Markdown\n\n\u003ca href=\"https://docs.github.com/de/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax\"\u003eHere is the source\u003c/a\u003e of the following information  \n### Headings\n\u003cpre\u003e  \n# A first-level heading\u003cbr\u003e\n## A second-level heading\u003cbr\u003e\n### A third-level heading\u003cbr\u003e\n\u003ch1\u003eA first-level heading\u003c/h1\u003e\n\u003ch2\u003eA second-level heading\u003c/h2\u003e\n\u003ch3\u003eA third-level heading\u003c/h3\u003e\n\u003c/pre\u003e\n\n### Text formatting\n\n\u003cpre\u003e  \n**This is bold text**\n\u003cb\u003eThis is bold text\u003c/b\u003e\n\u003cbr\u003e\n_This text is italicized_\n\u003ci\u003eThis text is italicized\u003c/i\u003e\n\u003cbr\u003e\n~~This was mistaken text~~\n\u003cstrike\u003eThis was mistaken text\u003c/strike\u003e  \n\u003cbr\u003e  \n\u003e Text that is a quote\n\u003cblockquote\u003eText that is a quote\u003c/blockquote\u003e\n\u003c/pre\u003e  \n\u003ch3\u003eColors\u003c/h3\u003e\n  \n\u003e **Note**  \n\u003e Color visualization is supported only in Issues, Pull Requests and Discussions.\n\u003cpre\u003e\n`#0969DA`\n`rgb(9, 105, 218)`\n`hsl(212, 92%, 45%)`\u003cbr\u003e \n\u003cimg src=\"https://github.com/max1mde/DesignGuide/assets/114857048/765e8bd5-efab-4c51-9c0b-18962cd39c49\" width=\"150\"\u003e\n\u003c/pre\u003e\n\u003ch3\u003eLinks\u003c/h3\u003e\n\u003cpre\u003e  \n[This is a link](https://github.com/max1mde/DesignGuide)\n\u003ca href=\"https://github.com/max1mde/DesignGuide\"\u003eThis is a link\u003c/a\u003e\u003cbr\u003e\n[License of this project](LICENSE)\n\u003ca href=\"LICENSE\"\u003eLicense of this project\u003c/a\u003e\u003cblockquote\u003eRelative link\u003c/blockquote\u003e\u003c/pre\u003e  \n\u003ch3\u003eLists\u003c/h3\u003e\n\u003cpre\u003e    \n- First list item\n- Second list item\n- Third list item\n\u003cul\u003e\n\u003cli\u003eFirst list item\u003c/li\u003e\n\u003cli\u003eSecond list item\u003c/li\u003e\n\u003cli\u003eThird list item\u003c/li\u003e\n\u003c/ul\u003e\u003c/pre\u003e    \n\u003ch3\u003eTODO Lists\u003c/h3\u003e\n\u003cpre\u003e    \n- [x] A todo which is done\n- [ ] An issue https://github.com/max1mde/HologramAPI/issues/1\u003cbr\u003e\n\n- [x] A todo which is done\n- [ ] An issue https://github.com/max1mde/HologramAPI/issues/1\u003c/pre\u003e\n\n### Alerts\n\n```\n\u003e [!NOTE]  \n\u003e Highlights information that users should take into account, even when skimming.\n\n\u003e [!TIP]\n\u003e Optional information to help a user be more successful.\n\n\u003e [!IMPORTANT]  \n\u003e Crucial information necessary for users to succeed.\n\n\u003e [!WARNING]  \n\u003e Critical content demanding immediate user attention due to potential risks.\n\n\u003e [!CAUTION]\n\u003e Negative potential consequences of an action.\n```\n\n\u003e [!NOTE]  \n\u003e Highlights information that users should take into account, even when skimming.\n\n\u003e [!TIP]\n\u003e Optional information to help a user be more successful.\n\n\u003e [!IMPORTANT]  \n\u003e Crucial information necessary for users to succeed.\n\n\u003e [!WARNING]  \n\u003e Critical content demanding immediate user attention due to potential risks.\n\n\u003e [!CAUTION]\n\u003e Negative potential consequences of an action.\n\n### Emojis\n\n| icon | shortcode | icon | shortcode |\n| :-: | - | :-: | - |\n| 😄 | `:grinning:` | 😃 | `:smiley:` |\n| 😄 | `:smile:` | 😁 | `:grin:` |\n| 😆 | `:laughing:` `:satisfied:` | 😅 | `:sweat_smile:` |\n| 🤣 | `:rofl:` | 😂 | `:joy:` |\n| 🙂 | `:slightly_smiling_face:` | 🙃 | `:upside_down_face:` |\n| 😉 | `:wink:` | 😊 | `:blush:` |\n\n\u003ca href=\"https://github.com/ikatyang/emoji-cheat-sheet/blob/master/README.md\"\u003eHere you can find a list of all emojies\u003c/a\u003e\n\n### HTML\nYou might have already seen that you can use HTML tags, like the \u0026lt;a\u0026gt; or \u0026lt;img\u0026gt; tags in a Markdown file.\u003cbr\u003e\nBut there are more tags you can use.\u003cbr\u003e\nYou will probably find a tag for every Markdown feature and even more tags.\u003cbr\u003e\nHTML tags give you more possibilities and control.\u003cbr\u003e\n\u003cbr\u003e\n\nFor example, you can center any element by surrounding it with this div.\u003cbr\u003e\n\u003cpre\u003e\n\u0026lt;div align=\"center\"\u0026gt;\n  \u0026lt;!--- elements to center --\u0026gt;\n\u0026lt;/div\u0026gt;\n\u003c/pre\u003e\n\nMaybe you want to change the size of an image\u003cbr\u003e\n\u003cpre\u003e\n\u0026lt;img src=\"image.png\" width=\"200\"\u0026gt;\n\u003c/pre\u003e\n\nOr create a collapsible section\n\n\u003cpre\u003e\n\u0026lt;details\u003e\n\u0026lt;summary\u0026gt;The title\u0026lt;/summary\u0026gt;\n  \u0026lt;p\u0026gt;And the hidden content\u0026lt;/p\u0026gt;\n\u0026lt;/details\u0026gt;\n\u003c/pre\u003e\n\nWhich would look like this:\n\u003cdetails\u003e\n\u003csummary\u003eThe title\u003c/summary\u003e\n  \u003cp\u003eAnd the hidden content\u003c/p\u003e\n\u003c/details\u003e\n\n### HTML Symbols and Entities\nWhen writing HTML, you might want to display certain symbols, like `\u003c`, `\u003e`, or `\u0026` without having them interpreted as HTML tags. For this, you can use HTML entities, which are special codes that represent characters.\n\nHTML entities always start with an `\u0026` and end with a `;`. Here are some common ones:\n\n* `\u0026lt;` — Represents `\u003c` (less-than symbol)\n* `\u0026gt;` — Represents `\u003e` (greater-than symbol)\n* `\u0026amp;` — Represents `\u0026` (ampersand)\n* `\u0026quot;` — Represents `\"` (double quote)\n* `\u0026#39;` — Represents `'` (single quote)\n\nThese entities are especially useful in documentation or README files where you might want to show code snippets that include HTML tags without them being interpreted as actual HTML.\n\nFor example, if you want to display the text `\u003cdiv align=\"center\"\u003e` without it being treated as an HTML tag, you would write:\u003cbr\u003e\n\n`\u0026lt;div align=\"center\"\u0026gt;`\n\nOther useful HTML entities:\n- `\u0026copy;` — © symbol\n- `\u0026reg;` — ® symbol\n- `\u0026euro;` — € symbol\n- `\u0026yen;` — ¥ symbol\n- `\u0026trade;` — ™ symbol\n\n---\n\n# Repository readme\n\n\u003ch3\u003eStructure\u003c/h3\u003e\n\n\u003cpre\u003e• Badges  (optional)\n• Title\n• Description\n• Banner/Showcase of the project  (optional)\n• Table of Contents (optional but good for big readme's)\n• Installation\n• Usage\n• How to Contribute, Licence, Credits etc  (optional)\u003c/pre\u003e\n--------------------------------------------\n### Badges\nBadges display important details about a project, such as version, license, downloads, and ratings. These badges can be either static or dynamic and also include symbols. These small graphical elements are typically found at the top of your readme and are provided by various services like \u003ca href=\"https://shields.io\"\u003eshields.io\u003c/a\u003e. \n\u003cbr\u003e\n\u003cbr\u003e\n\u003cpre\u003e\u003cb\u003eYou can use the html image tag to display a badge:\u003c/b\u003e\u003cbr\u003e\u003cbr\u003e\u0026lt;img alt=\"GitHub license\" src=\"https://img.shields.io/github/license/max1mde/DesignGuide\"\u0026gt;\u003cbr\u003e\u003cbr\u003e\u003cimg alt=\"GitHub license\" src=\"https://img.shields.io/github/license/max1mde/DesignGuide\"\u003e\u003c/pre\u003e\n\n\u003cpre\u003e\u003cb\u003eYou can also make them clickable by enclosing the \u0026lt;img\u0026gt; element within an \u0026lt;a\u0026gt; element, like this:\u003c/b\u003e\u003cbr\u003e\n\u0026lt;a href=\"https://github.com/max1mde/DesignGuide/blob/main/LICENSE\"\u003e\u003cbr\u003e  \u0026lt;img alt=\"GitHub license\" src=\"https://img.shields.io/github/license/max1mde/DesignGuide\"\u0026gt;\u003cbr\u003e\u0026lt;/a\u0026gt;\u003cbr\u003e\u003cbr\u003e\u003ca href=\"https://github.com/max1mde/DesignGuide/blob/main/LICENSE\"\u003e\u003cimg alt=\"GitHub license\" src=\"https://img.shields.io/github/license/max1mde/DesignGuide\"\u003e\u003c/a\u003e\u003c/pre\u003e\n\n---\n\n# Profile readme\n\n\u003cp\u003eNothing here yet. You can change this by opening a pull request and contributing to this project\u003c/p\u003e\n\n\n---\n\n# Commits\n\n### Commit messages\n\u003cp\u003eWriting clear commit messages is crucial for a clean Git history\u003c/p\u003e\n\u003cul\u003e\n  \u003cli\u003eKeep messages concise.\u003c/li\u003e\n  \u003cli\u003eUse imperative mood.\u003c/li\u003e\n  \u003cli\u003eSeparate subject from body.\u003c/li\u003e\n  \u003cli\u003eReference issues if applicable.\u003c/li\u003e\n  \u003cli\u003eUse emojis wisely.\u003c/li\u003e\n\u003c/ul\u003e\n\n# Emojis in commit messages\n\n\u003cp\u003eEmojis enhance commit messages, conveying change nature visually. They provide a quick understanding.\u003c/p\u003e\n\u003cp\u003eHere's how you can use them for different changes:\u003c/p\u003e\n\u003cul\u003e\n  \u003cli\u003e🐛 Fixing a bug\u003c/li\u003e\n  \u003cli\u003e📝 Updating code/documentation\u003c/li\u003e\n  \u003cli\u003e🚀 Introducing a new feature\u003c/li\u003e\n  \u003cli\u003e🔒 Fixing a security issue\u003c/li\u003e\n  \u003cli\u003e🧹 Refactoring code\u003c/li\u003e\n  \u003cli\u003e📈 Improving performance\u003c/li\u003e\n  \u003cli\u003e🗑️ Removing code\u003c/li\u003e\n  \u003cli\u003e↗️ Upgrading dependencies\u003c/li\u003e\n  \u003cli\u003e↙️ Downgrading dependencies\u003c/li\u003e\n  \u003cli\u003e📋 Adding comments\u003c/li\u003e\n  \u003cli\u003e➕ Adding new code\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eFor more examples of what emojies you can use in your commit messages, \u003ca href=\"https://gitmoji.dev\"\u003echeck out this website.\u003c/a\u003e\u003c/p\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximjsx%2FDesignGuide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaximjsx%2FDesignGuide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaximjsx%2FDesignGuide/lists"}