{"id":22097331,"url":"https://github.com/itobuztech/html-style-guide","last_synced_at":"2026-02-23T07:03:51.745Z","repository":{"id":130583689,"uuid":"326703362","full_name":"itobuztech/html-style-guide","owner":"itobuztech","description":"HTML Styleguide for HTML","archived":false,"fork":false,"pushed_at":"2021-01-05T06:03:11.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-25T22:27:23.786Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"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/itobuztech.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-01-04T14:06:36.000Z","updated_at":"2021-01-05T06:03:13.000Z","dependencies_parsed_at":"2023-06-02T17:15:43.954Z","dependency_job_id":null,"html_url":"https://github.com/itobuztech/html-style-guide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/itobuztech/html-style-guide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itobuztech%2Fhtml-style-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itobuztech%2Fhtml-style-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itobuztech%2Fhtml-style-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itobuztech%2Fhtml-style-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itobuztech","download_url":"https://codeload.github.com/itobuztech/html-style-guide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itobuztech%2Fhtml-style-guide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29739024,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-23T04:51:08.365Z","status":"ssl_error","status_checked_at":"2026-02-23T04:49:15.865Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: 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":[],"created_at":"2024-12-01T04:14:54.938Z","updated_at":"2026-02-23T07:03:51.740Z","avatar_url":"https://github.com/itobuztech.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML Style Guide for Itobuz HTML Project\n\n## Library you can include\nYou can only use bootstrap 4. \n\n## Code pattern\n- [Code reuse](#code-1)\n- [No global CSS](#code-2)\n- [Use two spacing for indentation and commented code ](#code-3)\n- [Mobile first responsive pattern](#code-4)\n- [Avoid float for layout](#code-5)\n- [Avoid pseudo element for icon and background preview](#code-6)\n- [Code splitting for stylesheet](#code-7)\n\n## SEO and page speed\n- [H1 tag per page only once](#seo-1)\n- [Use Svg image](#seo-2)\n\n## Browser support\nAll HTML need to be checked with Chrome, Firefox, Safari Edge, Native Edge\n\n### Code reuse  \u003ca id=\"code-1\"\u003e\u003c/a\u003e\nWhere you want to code re-use you can split into module specific style sheet. like for button button.css, for form you can use form.css. But do not make them global css\n\n##### Bad \n```\nbutton {}\n```\n\n##### good \n```\n.button-large {}\n.button-dark {}\n```\n\n### No global CSS  \u003ca id=\"code-2\"\u003e\u003c/a\u003e\nWe can not use global css. That can conflict with existing style. You can use normalize but that is already include with bootstrap.\n\n##### Bad \n```\nbody {}\np {}\nbutton {}\n```\n\n##### good \n```\n.font-roboto {\n}\n.section-1 p {}\n.button-style-v1 {}\n```\n\n### Use two spacing for indentation \u003ca id=\"code-3\"\u003e\u003c/a\u003e\nFor indentation we will use two spacing indentation. And add comment for section wise to easier understand. Avoid 4 space and tav indentation\n\n\n### Mobile first responsive pattern \u003ca id=\"code-4\"\u003e\u003c/a\u003e\nMobile first responsive pattern is mandatory. See it's importance https://medium.com/@Vincentxia77/what-is-mobile-first-design-why-its-important-how-to-make-it-7d3cf2e29d00\n\n### Avoid float for layout \u003ca id=\"code-5\"\u003e\u003c/a\u003e\nAvoid float based layout. Bootstrap has powerful grid layout concept and they are using with flex. Flex has some better than float. We will use that. Also float have some buggy effect until you are not using clear:both :)\n### Avoid pseudo element for icon and background preview \u003ca id=\"code-6\"\u003e\u003c/a\u003e\nThis is required for lazy loading. you can not use pseudo element for icon and background preview. With pseudo element lazy load can not be implement. You can use extra dom element instead.\n\n### Code splitting for stylesheet \u003ca id=\"code-7\"\u003e\u003c/a\u003e\nCode splitting is very important for re-use and maintain large codebase. So for that purpose we will use section specific styles into different stylesheet.\n\n### H1 tag per page only once  \u003ca id=\"seo-1\"\u003e\u003c/a\u003e\n\nIt is mandatory to use h1 tag only once per page. So it is good practice to avoid nested h1 styles. So that someone can alter with different heading tag when needed.\n\n##### Bad \n```\n.section h1 {}\n```\n\n##### good \n```\n.section .title {}\n```\n\n### Use svg image  \u003ca id=\"seo-2\"\u003e\u003c/a\u003e\nWhen we are using Figma, we can export image as svg image. Where SVG **export applicable** use SVG image. We can export image as SVG if those graphics are vector. We can not export Raster image as SVG. Because of file size will be larger and that can not scalable.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitobuztech%2Fhtml-style-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitobuztech%2Fhtml-style-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitobuztech%2Fhtml-style-guide/lists"}