{"id":13629262,"url":"https://github.com/csswizardry/csscv","last_synced_at":"2025-04-22T13:31:54.908Z","repository":{"id":11289251,"uuid":"13700716","full_name":"csswizardry/csscv","owner":"csswizardry","description":"A simple, opinionated stylesheet for formatting semantic HTML to look like a CSS file.","archived":false,"fork":false,"pushed_at":"2017-04-17T23:44:29.000Z","size":261,"stargazers_count":204,"open_issues_count":1,"forks_count":31,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-17T23:37:46.435Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://csswizardry.com/csscv","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/csswizardry.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-19T12:45:43.000Z","updated_at":"2025-02-27T07:16:55.000Z","dependencies_parsed_at":"2022-08-30T16:11:28.848Z","dependency_job_id":null,"html_url":"https://github.com/csswizardry/csscv","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csswizardry%2Fcsscv","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csswizardry%2Fcsscv/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csswizardry%2Fcsscv/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/csswizardry%2Fcsscv/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/csswizardry","download_url":"https://codeload.github.com/csswizardry/csscv/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250248718,"owners_count":21399325,"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","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-08-01T22:01:06.016Z","updated_at":"2025-04-22T13:31:54.682Z","avatar_url":"https://github.com/csswizardry.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"#CSSCV\n\n**CSSCV is a simple, opinionated stylesheet for formatting semantic HTML to look\nlike a CSS file.**\n\n## Getting started\n\nThe simplest way to get started with CSSCV is to dive right into the HTML and\nget editing! There is nothing in the Sass that isn’t used in the HTML, so the\n`index.html` file acts as a comprehensive, real-world demo of what CSSCV can do.\n\nBelow is a more detailed overview of the ins-and-outs of the way CSSCV works.\n\n## Opinionated?\n\nCSSCV matches my own personal style of writing CSS, and uses a specific colour\nscheme, [\u003ccite\u003eSolarized\u003c/cite\u003e](http://ethanschoonover.com/solarized). Some of\nits other more opinionated features:\n\n* [Only single classes are allowed as selectors](http://csswizardry.com/2012/05/keep-your-css-selectors-short/)\n* [It uses a BEM-style naming convention](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)\n* [Rulesets are spaced by five carriage returns](https://github.com/csswizardry/CSS-Guidelines#section-titles)\n* [Quasi-nested rulesets are indented](https://github.com/csswizardry/CSS-Guidelines#anatomy-of-rulesets)\n* [All indents are four spaces](https://github.com/csswizardry/CSS-Guidelines#anatomy-of-rulesets)\n\n## Enabling\n\nCSSCV comes with the option to [en|dis]able its styling. This is so that you can\nquickly and easily remove CSSCV’s unconventional look, and instead expose\nunstyled HTML in case you ever need to provide a more standard format of CV to\nrecruiters or HR teams. Boring, but often vital. Enabling CSSCV is as simple as\nadding a class of `.csscv` the the `html` element; all of CSSCV’s styles are\nscoped to this namespace.\n\n## Making stuff work\n\nThere are a series of simple yet strict rules to follow in order to use CSSCV.\nRulesets are built using definition lists and comments and selectors are usually\nconstructed using headings. Below is a simple example that we will deconstruct:\n\n    \u003cdiv class=\"ruleset\"\u003e\n\n        \u003ch3 class=\"selector\"\u003eMe\u003c/h3\u003e\n\n        \u003cdl class=\"declarations\"\u003e\n\n            \u003cdt class=\"property\"\u003eName\u003c/dt\u003e\n            \u003cdd class=\"value\"\u003e\u003cspan class=\"string\"\u003eHarry Roberts\u003c/span\u003e\u003c/dd\u003e\n\n            \u003cdt class=\"property\"\u003eJob\u003c/dt\u003e\n            \u003cdd class=\"value\"\u003e\u003cspan class=\"string\"\u003eConsultant Front-end Architect\u003c/span\u003e\u003c/dd\u003e\n\n            \u003cdt class=\"property\"\u003eLocation\u003c/dt\u003e\n            \u003cdd class=\"value\"\u003e\u003cspan class=\"string\"\u003eLeeds, UK\u003c/span\u003e\u003c/dd\u003e\n\n            \u003cdt class=\"property\"\u003eSkills\u003c/dt\u003e\n            \u003cdd class=\"value\"\u003e\n                \u003cul class=\"value-list\"\u003e\n                    \u003cli\u003e\u003cspan class=\"string\"\u003eFront-end Architecture\u003c/span\u003e\u003c/li\u003e\n                    \u003cli\u003eDesign\u003c/li\u003e\n                    \u003cli\u003eDevelopment\u003c/li\u003e\n                    \u003cli\u003eOOCSS\u003c/li\u003e\n                    \u003cli\u003ePerformance\u003c/li\u003e\n                    \u003cli\u003e\u003cspan class=\"string\"\u003eResponsive Web Design\u003c/span\u003e\u003c/li\u003e\n                    \u003cli\u003eGit\u003c/li\u003e\n                    \u003cli\u003eVim\u003c/li\u003e\n                    \u003cli\u003eAgile\u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/dd\u003e\n\n        \u003c/dl\u003e\n\n    \u003c/div\u003e\n\nLet’s take a look at what this does:\n\n* We wrap each ruleset in a container with a `.ruleset` class.\n* The title, or _selector_, of that ruleset is a heading which carries the\n  `.selector` class.\n* The declarations that make up the ruleset are marked up in a `dl` which has a\n  class of `.declarations`.\n* Each property/value pair are marked up with `dt`s and `dd`s respectively.\n  These, respectively, carry classes of `.property` and `.value`.\n* Any strings that would require quoting in CSS (e.g. `\"Comic Sans MS\"`) can\n  be wrapped in a `span` with a class of `string`. This colours them differently\n  and applies opening and closing quote marks.\n* Lists of values (e.g. `font-family: \"Comic Sans MS\", cursive;`) are marked up\n  as either ordered- or unordered-lists which carry a class of `.value-list`.\n\nAs we can see, the rulesets are formed of semantic HTML elements and heavy use\nof CSS pseudo-elements are used to apply CSS-like syntax (braces, (semi-)colons,\nquotes, etc).\n\n## What the classes do\n\n### `.csscv`\n\nThis class gets applied to the `html` element and enables CSSCV\n\n### `.spaced`\n\nThis class forces all elements which carry it to have one carriage return’s\nspace between itself and the following element.\n\n#### `.spaced--large`\n\nThis increases the spacing from one to five carriage returns.\n\n### `.indented`\n\nAnything carrying this class will be indented by your chosen tab size amount\n(defined in `$tab-size`).\n\n### `.ruleset`\n\nThis class is applied to an element which wraps each whole ruleset. It spaces\nrulesets apart from each other, and can also carry the `.spaced--large` or\n`.indented` classes.\n\n### `.selector`\n\nThis class is applied to headings which introduce each ruleset. It adds a period\nbefore, and an opening brace after, the title of the ruleset.\n\n### `.selector__delimiter`\n\nThis class is applied to an empty span in order to hyphen-delimit multi-word\nselectors. For example:\n\n    \u003ch2 class=\"selector\"\u003eAbout\u003cspan class=\"selector__delimiter\"\u003e \u003c/span\u003eme\u003c/h2\u003e\n\n### `.declarations`\n\nThis class is applied to the definition list that will form the body of the\nruleset. It adds a closing brace after the final declaration.\n\n### `.property`\n\nThis class is applied to each `dt` element which is a declaration’s property. It\nindents the declaration as per your chosen tab size and adds a trailing colon\nand space.\n\n### `.value`\n\nThis is applied to each `dd` element which becomes a declaration’s value. It\nadds a trailing semi-colon.\n\n### `.string`\n\nCSS often has values which contain spaces which need quoting, wrap these strings\nin a `span` that carries the `.string` class.\n\n### `.number`\n\nThis class simply colours any number-like values (e.g. `34px`, `#f00`).\n\n### `.url`\n\nAny URL-like values can have the `.url` class applied to them to prepend `url(`\nand append `)` to it.\n\n### `.value-list`\n\nCSS often contains comma-delimited lists of values. In CSSCV we mark these up\nas `ul`s and `li`s. The `ul` take the `.value-list` class.\n\n### `.element` and `.modifier`\n\nThese two classes allow you to use\n[BEM-style naming](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)\nwithout polluting your markup. To signify an element or modifier, use the\ncorresponding class. You need to also use the `data-namespace` attribute in\norder to prepend the class with the correct block name, e.g.:\n\n    \u003ch3 class=\"selector\"\u003eJob\u003c/h3\u003e\n\n    ...\n\n    \u003ch4 class=\"selector\"\u003e\u003cspan class=\"modifier\" data-namespace=\"job\"\u003eCompany\u003c/span\u003e\u003c/h4\u003e\n\n### `.comment`, `.comment-block` and `.comment-block__line`\n\nThese classes, unsurprisingly, style markup to look like comments. The `.comment`\nclass gives an inline comment, whilst `.comment-block` gives us a DocBlock\nstyle comment:\n\n    \u003cp class=\"comment-block\"\u003e\n        \u003cspan class=\"comment-block__line\"\u003eFoo\u003c/span\u003e\n        \u003cspan class=\"comment-block__line\"\u003eBar\u003c/span\u003e\n        \u003cspan class=\"comment-block__line\"\u003eBaz\u003c/span\u003e\n    \u003c/p\u003e\n\n### `.notice`\n\nThis is the attribution message that appears at the bottom of the CSSCV page.\nIncluding the message is not mandatory, but is appreciated.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsswizardry%2Fcsscv","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcsswizardry%2Fcsscv","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcsswizardry%2Fcsscv/lists"}