{"id":13761371,"url":"https://github.com/hibbitts-design/docsify-open-publishing-starter-kit","last_synced_at":"2026-03-11T22:42:11.983Z","repository":{"id":37536245,"uuid":"246157127","full_name":"hibbitts-design/docsify-open-publishing-starter-kit","owner":"hibbitts-design","description":"A ready-to-use template to create a Docsify Markdown-based article, tutorial, portfolio or documentation website. Global navigation elements can be hidden for seamlessly embedding pages into other platforms or shared as standalone pages. Includes an optional \"Edit this Page\" link.","archived":false,"fork":false,"pushed_at":"2025-12-24T00:15:02.000Z","size":8805,"stargazers_count":60,"open_issues_count":0,"forks_count":28,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-02-15T01:54:17.465Z","etag":null,"topics":["docsify","github-pages","markdown"],"latest_commit_sha":null,"homepage":"https://hibbitts-design.github.io/demo-docsify-open-publishing-starter-kit/#/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hibbitts-design.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-03-09T22:42:22.000Z","updated_at":"2026-02-03T09:17:54.000Z","dependencies_parsed_at":"2024-04-22T20:38:53.819Z","dependency_job_id":"624c14f3-1936-4185-8d65-ad617bb48abd","html_url":"https://github.com/hibbitts-design/docsify-open-publishing-starter-kit","commit_stats":null,"previous_names":[],"tags_count":44,"template":true,"template_full_name":null,"purl":"pkg:github/hibbitts-design/docsify-open-publishing-starter-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hibbitts-design%2Fdocsify-open-publishing-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hibbitts-design%2Fdocsify-open-publishing-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hibbitts-design%2Fdocsify-open-publishing-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hibbitts-design%2Fdocsify-open-publishing-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hibbitts-design","download_url":"https://codeload.github.com/hibbitts-design/docsify-open-publishing-starter-kit/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hibbitts-design%2Fdocsify-open-publishing-starter-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30405664,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T22:36:59.286Z","status":"ssl_error","status_checked_at":"2026-03-11T22:36:57.544Z","response_time":84,"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":["docsify","github-pages","markdown"],"created_at":"2024-08-03T13:01:52.111Z","updated_at":"2026-03-11T22:42:11.977Z","avatar_url":"https://github.com/hibbitts-design.png","language":null,"funding_links":[],"categories":["Others","markdown"],"sub_categories":[],"readme":"# Docsify Open Publishing Starter Kit\r\n\r\n[![Docsify](https://img.shields.io/npm/v/docsify?label=docsify)](https://docsify.js.org/)\r\n[![MIT license](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/hibbitts-design/docsify-open-publishing-starter-kit/blob/main/LICENSE)\r\n\u003ca href=\"https://discord.gg/zT8eS8ZG\"\u003e\r\n    \u003cimg src=\"https://img.shields.io/badge/chat-on%20discord-7289DA.svg\" alt=\"Docsify Discord Chat\" /\u003e\r\n\u003c/a\u003e\r\n\r\n\u003e This is a starter kit to quickly create Markdown-based article, tutorial, portfolio and documentation websites with the site generator [Docsify](https://docsify.js.org). Global navigation elements can be hidden for seamlessly embedding pages into other platforms or shared as standalone pages. Includes an optional \"Edit this Page\" link.\r\n\r\nDocsify sites use client-side rendering, which means your content will not be indexed by search engines like Google, Bing, or DuckDuckGo.\r\n\r\n📸 Docsify Open Publishing Screenshots\r\n---\r\n![ Docsify Open Publishing Starter Kit](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/smartmockups_l3dl0det.png)\r\n_Figure 1. Docsify Open Publishing Starter Kit. Explore a demo at [hibbitts-design.github.io/demo-docsify-open-publishing-starter-kit/](https://hibbitts-design.github.io/demo-docsify-open-publishing-starter-kit/#/)_\r\n\r\n🚀 GitHub Pages Quickstart\r\n---\r\n**Pre-flight Checklist**  \r\n\r\n1. GitHub account\r\n\r\n**Installation and Deployment**\r\n\r\n1.  Sign in to [GitHub](https://github.com) if you have not already done so\r\n\r\n2. Tap **Use this template** on the source repository (upper-right green button) and then choose **Create a new repository**\r\n![ Docsify Open Publishing Starter Kit - Install Page 1](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/docsify-op-install-1.png)\r\n\r\n3. Choose the name for your new repository to contain the copied site files and then tap **Create repository from template**\r\n![ Docsify Open Publishing Starter Kit - Install Page 2](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/docsify-op-install-2.png)\r\n\r\n4. Go to **Settings** of your newly created repository, tap the **Pages** tab (on the left-hand side), choose **main branch**, then **docs folder** and finally tap the **Save** button (see more details in the [Docsify documentation](https://docsify.js.org/#/deploy?id=github-pages))\r\n![ Docsify Open Publishing Starter Kit - Install Page 3](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/docsify-op-install-3.png)\r\n\r\n5. And you're done! (view your new site using the provided URL on the **Pages** tab - it can take up to 10 minutes for your site to be initially available)\r\n![ Docsify Open Publishing Starter Kit - Install Page 4](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/docsify-op-install-4.png)\r\n\r\nDo you use GitLab? You can also use Docsify with [GitLab Pages](https://docsify.js.org/#/deploy?id=gitlab-pages)!\r\n\r\n✏️ Editing Your Docsify Site Pages on GitHub\r\n---  \r\n\r\n1. Go to the Docsify Markdown (.md) page in the `docs` folder of your repository you want to edit\r\n![ Editing Your Docsify Site Pages 1](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/docsify-page-edit-1.png)\r\n\r\n2. Tap the **Pencil Icon** (top left-hand toolbar area) to start the editor\r\n![ Editing Your Docsify Site Pages 2](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/docsify-page-edit-2.png)\r\n\r\n3. Scroll down to the bottom of the page and tap the **Commit changes** button to save your changes\r\n![ Editing Your Docsify Site Pages 3](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/docsify-page-edit-3.png)\r\n\r\n[Learn more about creating pages in Docsify.](https://docsify.js.org/#/more-pages)\r\n\r\n🔗 Activating the “Edit this Page” on Your Docsify Site\r\n---   \r\n\r\n1. At the top-level of your GitHub Repository copy the URL\r\n![ Docsify Open Publishing Starter Kit - “Edit this Page” Link 1](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/docsify-op-gitlink-1.png)\r\n\r\n2. Tap on the **docs** folder\r\n![ Docsify Open Publishing Starter Kit - “Edit this Page” Link 2](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/docsify-op-gitlink-2.png)\r\n\r\n2. Tap on the **index.html** file\r\n![ Docsify Open Publishing Starter Kit - “Edit this Page” Link 3](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/docsify-op-gitlink-3.png)\r\n\r\n3. Tap the **Pencil Icon** (top left-hand toolbar area) to start the editor\r\n![ Docsify Open Publishing Starter Kit - “Edit this Page” Link 4](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/docsify-op-gitlink-4.png)\r\n\r\n4. Find the line `var gitLinkRepoURL = '';` and enter the URL of your own GitHub Repository between the two quotes (replace `github.com` with `github.dev` to use the GitHub.dev web-based editor currently in Beta) and then scroll down to the bottom of the page and tap the **Commit changes** button to save your changes\r\n![ Docsify Open Publishing Starter Kit - “Edit this Page” Link 5](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/docsify-op-gitlink-5.png)\r\n\r\nTo remove the “Edit this Page” link on your Docsify site, restore the value of `gitLinkRepoURL` to `''`.\r\n\r\n💻 Locally Editing Your Docsify Site Pages\r\n---  \r\n\r\n**Editing Your Docsify Site Pages on Your Desktop**\r\n1. Tap **Code** on your repository (upper-right green button)\r\n2. Choose **Open Desktop** and follow the prompts, installing [GitHub Desktop](https://desktop.github.com/) if not already present\r\n3. You will now be able to edit your Docsify site (in the `docs` folder) using the desktop editor of your choice (e.g. [Atom](https://atom.io/))\r\n4. Use GitHub Desktop to push any changes to your repository.  \r\n\r\n[Learn more about using GitHub Desktop](https://help.github.com/en/desktop/contributing-to-projects/committing-and-reviewing-changes-to-your-project).\r\n\r\nYou can also clone (i.e download) a copy of your repository to your computer and [run Docsify locally](https://docsify.js.org/#/quickstart) to preview your site. See the below video for details.\r\n\r\n🧩 Using your Docsify Page Content with Other Systems\r\n---  \r\n\r\n![ Docsify Open Publishing Page Ready for Embedding](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/docsify-op-ready-for-embedding.png)\r\n_Figure 2. Docsify Open Publishing page ready for embedding or linking as standalone content_\r\n\r\nThe optional `embedded` (all lowercase) URL parameter hides a site’s sidebar for seamlessly embedding Docsify page content within another platform such as Canvas LMS, Moodle, Microsoft Teams or being displayed in an existing or new Browser tab. The parameter `standalone` is supported as an alias for `embedded`.\r\n\r\nTo only display Docsify page content, add the following to a Docsify page URL:\r\n\r\n`?embedded=true`\r\n\r\nExample standard Docsify page:  \r\nhttps://hibbitts-design.github.io/demo-docsify-open-publishing-starter-kit/#/  \r\n\r\nExample Docsify page displaying only page content (i.e., no sidebar is shown):  \r\nhttps://hibbitts-design.github.io/demo-docsify-open-publishing-starter-kit/#/?embedding=true  \r\n\r\nTo optionally show a page Table of Contents (based on included Headers), use the following:\r\n\r\n`?embedded=true\u0026toc=true`\r\n\r\nExample Docsify page displaying only page content:  \r\nhttps://hibbitts-design.github.io/demo-docsify-open-publishing-starter-kit/#/introduction?embedding=true  \r\n\r\nExample Docsify page displaying only page content with a page Table of Contents included:  \r\nhttps://hibbitts-design.github.io/demo-docsify-open-publishing-starter-kit/#/introduction?embedding=true\u0026toc=true  \r\n\r\nTo optionally override the hiding of the navbar when displaying only page content, use the following:\r\n\r\n`?embedded=true\u0026navbar=true`\r\n\r\nExample Docsify page displaying only page content:  \r\nhttps://hibbitts-design.github.io/demo-docsify-open-publishing-starter-kit/#/introduction?embedded=true  \r\n\r\nExample Docsify page displaying only page content with the navbar still displayed:  \r\nhttps://hibbitts-design.github.io/demo-docsify-open-publishing-starter-kit/#/introduction?embedded=true\u0026navbar=true  \r\n\r\nTo optionally hide the 'Edit this Page' link, use the following:\r\n\r\n`?embedded=true\u0026hidegitlink=true`\r\n\r\nExample Docsify page displaying only page content:  \r\nhttps://hibbitts-design.github.io/demo-docsify-open-publishing-starter-kit/#/introduction?embedding=true  \r\n\r\nExample Docsify page displaying only page content with the 'Edit this Page' link hidden:  \r\nhttps://hibbitts-design.github.io/demo-docsify-open-publishing-starter-kit/#/introduction?embedding=true\u0026hidegitlink=true  \r\n\r\nTo optionally show the footer ('_footer.md' file), use the following:\r\n\r\n`?embedded=true\u0026footer=true`\r\n\r\nExample Docsify page without footer:  \r\nhttps://hibbitts-design.github.io/demo-docsify-open-publishing-starter-kit/#/introduction?embedded=true  \r\n\r\nExample Docsify page with footer shown:  \r\nhttps://hibbitts-design.github.io/demo-docsify-open-publishing-starter-kit/#/introduction?embedded=true\u0026footer=true  \r\n\r\n🖼 Presenting your Docsify Page Content as Standalone Webpages\r\n---  \r\n\r\nIn addition to using URL parameters when embedding Docsify page content into other systems, it is possible to permanently display all pages as standalone, and to also always display a page Table of Contents.\r\n\r\n**To Display all Pages as Standalone**\r\n1. Open the `index.html` file for editing.\r\n2. Locate the line `var standalone = false;` and change it to `var standalone = true;`.\r\n3. Save the `index.html` file and reload site.\r\n\r\n**To Display Page Table of Contents**\r\n1. Open the `index.html` file for editing.\r\n2. Locate the line `var ToC = false;` and change it to `var showToC = true;`.\r\n3. Save the `index.html` file and reload site.\r\n\r\nPlease note a page must have a series of Headings (#, ##, ###) for the Table of Contents to be displayed correctly.\r\n\r\n❛❜ Setting the Name of your Docsify Site \r\n---  \r\n\r\n1. Open the `index.html` file for editing.\r\n2. Locate the line `\u003ctitle\u003eDocsify Open Publishing Starter Kit\u003c/title\u003e` and change the text between the title tags to be displayed as the site name on the Browser tab\r\n3. Locate the line `name: 'Docsify Open Publishing Starter Kit',` and change the text between the quotes to be displayed as the site name at the top of the Docsify Sidebar\r\n4. Save the `index.html` file and reload site.\r\n\r\n📚 Docsify and Markdown Resources\r\n---\r\n**Docsify**  \r\n[Docsify Documentation](https://docsify.js.org/#/?id=docsifyg)  \r\n[Docsify Basics by MichaelCurrin](https://michaelcurrin.github.io/docsify-js-tutorial/#/?id=docsify-basics)  \r\n\r\n**Docsify Themable**  \r\n[Docsify Themeable Documentation](https://jhildenbiddle.github.io/docsify-themeable/#/introduction)  \r\n[Docsify Themeable GitHub](https://github.com/jhildenbiddle/docsify-themeable)  \r\n\r\n**Markdown**  \r\n[Markdown Here Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Here-Cheatsheet)  \r\n[Markdown Guide](https://www.markdownguide.org/)  \r\n\r\n💡 Content Display Tips and Techniques\r\n---\r\n**Including Code Blocks**  \r\nUsing [Prismjs](https://prismjs.com/) code blocks with syntax highlighting is supported for the languages [included with Docsify](https://docsify.js.org/#/language-highlight?id=language-highlighting) and as well Bash, Go, Java, Kotlin, PHP, Python and Swift. To embed a code block use the Markdown standard of triple backticks and start the block with the name of the language, for example to embed a block of Javascript code with syntax highlight the following would be used:\r\n\r\n\u003cpre\u003e\r\n```javascript\r\nfunction test() {\r\n  console.log(\"Hello world!\");\r\n}\r\n```\r\n\u003c/pre\u003e\r\nWhich would then appear as:\r\n```javascript\r\nfunction test() {\r\n  console.log(\"Hello world!\");\r\n}\r\n```\r\n\r\n**Displaying Images in a Grid**  \r\n3 or more images can be transformed into a responsive grid gallery by including them in lists. For example:\r\n```markdown\r\n- ![image1](path/to/image1.jpg)\r\n- ![image2](path/to/image2.jpg)\r\n- ![image3](path/to/image3.jpg)\r\n```\r\n\r\n🧰 Useful Markdown CSS Classes\r\n---\r\n\r\n`accordion`\r\n\r\n```html\r\n\u003cdiv class=\"accordion\"\u003e\r\n\r\n\u003cdetails\u003e\r\n  \u003csummary\u003eTopic One\u003c/summary\u003e\r\n  \r\n  Topic one details here.\r\n  \r\n\u003c/details\u003e\r\n\r\n\u003cdetails\u003e\r\n  \u003csummary\u003eTopic Two\u003c/summary\u003e\r\n  \r\n  Topic two details here.\r\n  \r\n\u003c/details\u003e\r\n\r\n\u003c/div\u003e\r\n```\r\n\r\n`badge`  \r\n\r\n```html\r\n\u003cspan class='badge'\u003e Tue Jun 12th 11:59pm PDT\u003c/span\u003e\r\n```\r\n\r\n```html\r\n\u003cspan class='badge' style='--badge-bg-color: #0164db;'\u003e Tue Jun 12th 11:59pm PDT\u003c/span\u003e\r\n```\r\n\r\n```html\r\n\u003cspan class='badge' style='--badge-bg-color: #e7c500; --badge-text-color: #000;'\u003e Tue Jun 12th 11:59pm PDT\u003c/span\u003e\r\n```\r\n\r\n```html\r\n\u003cspan class='badge'\u003e [Tue May 16 2:30pm PT](https://www.timeanddate.com/worldclock/fixedtime.html?msg=CMPT-363+Blackboard+Mini-lectures+and+Activities\u0026iso=20220516T1430\u0026p1=256\u0026ah=1\u0026am=50)\u003c/span\u003e  \r\n```\r\n\r\n`banner-image` (cropped to height of 250px on large screens, 125px on small screens)  \r\n\r\n```markdown\r\n![UX - User Experience](images/12650723674_d5c85af332_k.jpg ':class=banner-image')\r\n```\r\n\r\n`banner-tall-image` (cropped to height of 350px on large screens, 175px on small screens)  \r\n\r\n```markdown\r\n![UX - User Experience](images/12650723674_d5c85af332_k.jpg ':class=banner-tall-image')\r\n```\r\n\r\n`button`  \r\n\r\n```markdown\r\n[Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=button')\r\n```\r\n\r\n`button-rounded`  \r\n\r\n```markdown\r\n[Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=button-rounded')\r\n```\r\n\r\n`button-secondary`  \r\n\r\n```markdown\r\n[Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=button-secondary')\r\n```\r\n\r\n`button-rounded-secondary`  \r\n\r\n```markdown\r\n[Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=button-rounded-secondary')\r\n```\r\n\r\n`card`\r\n\r\n```html\r\n\u003cdiv class=\"card\"\u003e\r\n\r\n  ## [Card Title](#)\r\n  ![Card Image](images/example.jpg)\r\n  Card content goes here.\r\n\r\n\u003c/div\u003e\r\n```\r\n\r\n`card-list`\r\n\r\n```html\r\n\u003cdiv class=\"card-list\"\u003e\r\n \u003cdiv class=\"card\"\u003e\r\n\r\n ## [Blog Post Title Link](#)\r\n ![Blog Post Image](images/mountain.jpg)\r\n\r\n Blog post preview text goes here with more details about the content.  \r\n\r\n Jan 1, 1970. \r\n\r\n [Read More](# \":class=navpill\")\r\n\r\n \u003c/div\u003e\r\n \u003cdiv class=\"card\"\u003e\r\n\r\n ## [Another Blog Post](#)\r\n ![Blog Post Image](images/forest.jpg)\r\n\r\n Another blog post preview with different content.  \r\n\r\n Jan 1, 1970. \r\n\r\n [Read More](# \":class=navpill\")\r\n    \r\n \u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n`card-rounded`\r\n\r\n```html\r\n\u003cdiv class=\"card-rounded\"\u003e\r\n\r\n  ## [Card Title](#)\r\n  ![Card Image](images/example.jpg)\r\n  Card content goes here.\r\n\r\n\u003c/div\u003e\r\n```\r\n\r\n`embedly-card` (for linked article previews, embedded slides/videos, etc.)  \r\n\r\n```markdown\r\n\u003ca class=\"embedly-card\" data-card-controls=\"0\" data-card-align=\"left\" href=\"https://blog.prototypr.io/defining-usability-e7bf42e8abd0\"\u003eDefining usability\u003c/a\u003e\r\n```\r\n\r\n`header-image-fade` (suggested width of 1200px to 2000px)  \r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg ':class=header-image-fade')\r\n```\r\n\r\n`header-image-fade-full-width` (suggested size of 1200px to 2000px, and display of Table of Contents is not available)  \r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg ':class=header-image-fade-full-width')\r\n```\r\n\r\n`header-image-full-width` (suggested size of 1200px to 2000px width and 400px to 600px height, and display of Table of Contents is not available)  \r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg ':class=header-image-full-width')\r\n```\r\n\r\n`header-tall-image-full-width` (suggested size of 1200px to 2000px width and 400px to 600px height, and display of Table of Contents is not available)  \r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg ':class=header-tall-image-full-width')\r\n```\r\n\r\n`header-image-full-width-headings-overlay` (Suggested size of 1200px to 2000px width and 400px to 600px height, and display of Table of Contents is not available)\r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg \":class=header-image-full-width-headings-overlay\")\r\n\r\n# Page Title\r\n```\r\n\r\n`header-tall-image-full-width-headings-overlay` (Suggested size of 1200px to 2000px width and 400px to 600px height, and display of Table of Contents is not available)\r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg \":class=header-tall-image-full-width-headings-overlay\")\r\n\r\n# Page Title\r\n```\r\n\r\n`image-75` (scale image to 75%)\r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg ':class=image-75')\r\n```\r\n\r\n`image-50` (scale image to 50%)\r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg ':class=image-50')\r\n```\r\n\r\n`image-25` (scale image to 25%)\r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg ':class=image-25')\r\n```\r\n\r\n`image-75-border`\r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg ':class=image-75-border')\r\n```\r\n\r\n`image-50-border`\r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg ':class=image-50-border')\r\n```\r\n\r\n`image-25-border`\r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg ':class=image-25-border')\r\n```\r\n\r\n`image-border`\r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg ':class=image-border')\r\n```\r\n\r\n`image-border-rounded`\r\n\r\n```markdown\r\n![Photo of Mountain](images/mountain.jpg ':class=image-border-rounded')\r\n```\r\n\r\n`navpill`\r\n\r\n```markdown\r\n[GitHub](https://github.com/hibbitts-design/docsify-this ':class=navpill')\r\n```\r\n\r\n```html\r\n\u003ca class=\"navpill\" href=\"https://github.com\" target=\"_blank\"\u003e\u003ci class=\"fab fa-github fa-fw\"\u003e\u003c/i\u003eGitHub\u003c/a\u003e\r\n```\r\n\r\n`responsive`\r\n\r\n```html\r\n\u003cimg src=\"https://raw.githubusercontent.com/hibbitts-design/publishing-with-docsify-this/main/images/docsify-this-web-page-builder.jpg\" width=\"910\" height=\"682\" class=\"responsive image-border\" alt=\"Docsify-This Web Page Builder\"\u003e\r\n```\r\n\r\n`row` \u0026 `column`  \r\n\r\n```html\r\n\u003cdiv class=\"row\"\u003e\r\n\u003cdiv class=\"column\"\u003e\r\n\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n\r\n\u003c/div\u003e\r\n\u003cdiv class=\"column\"\u003e\r\n\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n\r\n\u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n```html\r\n\u003cdiv class=\"row reverse-columns\"\u003e\r\n\u003cdiv class=\"column\"\u003e\r\n\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n\r\n\u003c/div\u003e\r\n\u003cdiv class=\"column\"\u003e\r\n\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n\r\n\u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n```html\r\n\u003cdiv class=\"row\"\u003e\r\n\u003cdiv class=\"column\"\u003e\r\n\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n\r\n\u003c/div\u003e\r\n\u003cdiv class=\"column-right\"\u003e\r\n\r\nLorem ipsum dolor sit amet, consectetur adipiscing elit.\r\n\r\n\u003c/div\u003e\r\n\u003c/div\u003e\r\n```\r\n\r\n`video-container-4by3`  \r\n\r\n```html\r\n\u003cdiv class=\"video-container-4by3\"\u003e\u003cdiv class=\"video-container-16by9\"\u003e\u003ciframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/lJIrF4YjHfQ\"\u003e\u003c/iframe\u003e\u003c/div\u003e\r\n```\r\n\r\n`video-container-16by9`  \r\nAutomatically added to all iFrames with the source domains 'youtube.com' or 'docs.google.com'.  \r\n```html\r\n\u003cdiv class=\"video-container-16by9\"\u003e\u003ciframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/lJIrF4YjHfQ\"\u003e\u003c/iframe\u003e\u003c/div\u003e\r\n```\r\n\r\n🎨 Visual Customization\r\n---\r\n\r\nA Docsify Open Publishing Starter Kit site can be visually customized using CSS within the `custom.css` file located in the folder `docs/assets/css`. Using this file new Markdown CSS classes can be defined.\r\n\r\nCSS:  \r\n```css\r\n.markdown-section .mybutton, .markdown-section .mybutton:hover {\r\n  cursor: pointer;\r\n  color: #CC0000;\r\n  height: auto;\r\n  display: inline-block;\r\n  border: 2px solid #CC0000;\r\n  border-radius: 4rem;\r\n  margin: 2px 0px 2px 0px;\r\n  padding: 8px 18px 8px 18px;\r\n  line-height: 1.2rem;\r\n  background-color: white;\r\n  font-family: -apple-system, \"Segoe UI\", \"Helvetica Neue\", sans-serif;\r\n  font-weight: bold;\r\n  text-decoration: none;\r\n}\r\n```\r\n\r\nMarkdown:  \r\n```markdown\r\n[Required Reading Quiz due Jun 4th](https://canvas.sfu.ca/courses/44038/quizzes/166553 ':class=mybutton')\r\n```\r\n\r\n[Docsify Themeable CSS settings](https://jhildenbiddle.github.io/docsify-themeable/#/customization?id=base) can also be configured, as seen in the examples provided in the default `custom.css` file.\r\n\r\nCSS:  \r\n```css\r\n:root {\r\n    --link-color: #0F6CBF!important;\r\n}\r\n*/\r\n```\r\n\r\nIt is also possible for dual CSS styling to be configured, with CSS applied to when viewing the site (with overriding custom CSS included in a `STYLE` tag in the `_sidebar.md` file) and then other CSS settings within the `custom.css` file applied to when viewing standalone pages (i.e. `?embedded=true`)\r\n\r\nCSS in Sidebar file (`_sidebar.md`):  \r\n```css\r\n\u003cstyle\u003e\r\n  :root {\r\n    --link-color: #CC0633;\r\n    --link-text-decoration: none;\r\n    --link-text-decoration--hover: underline;\r\n  }\r\n\u003c/style\u003e\r\n```\r\n\r\n🌐 Using MAMP to View Docsify Sites Locally\r\n---\r\n\r\nAn alternative to installing Docsify locally (as described following this section) is to use MAMP to view your Docsify sites locally on your own computer.\r\n\r\n1. Download [MAMP](https://www.mamp.info/)\r\n2. Move your local Docsify site to the **htdocs** folder of MAMP\r\n3. Turn MAMP on, tap **WebStart** and then tap **My Website**\r\n4. Tap on the folder containing your local Docsify site and then tap on the **docs** folder\r\n\r\n📼 Video Walkthrough of Local Docsify Install/Config\r\n---\r\n[![Generating Documentation Sites with GitHub and Docsify - Alysson Alvaran](https://raw.githubusercontent.com/paulhibbitts/github-repo-images/master/youtube.png)](https://www.youtube.com/watch?v=TV88lp7egMw)  \r\n_Video 1. Generating Documentation Sites with GitHub and Docsify - Alysson Alvaran_\r\n\r\n🙇‍Credits and Special Thanks\r\n---\r\n[Docsify Themeable](https://github.com/jhildenbiddle/docsify-themeable)  \r\n[Beau Shaw](https://github.com/DaddyWarbucks) for his [Remote Docsify](https://github.com/DaddyWarbucks/remote-docsify) example.  \r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhibbitts-design%2Fdocsify-open-publishing-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhibbitts-design%2Fdocsify-open-publishing-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhibbitts-design%2Fdocsify-open-publishing-starter-kit/lists"}