{"id":18829412,"url":"https://github.com/teshanecrawford/tc-css-starter","last_synced_at":"2025-06-14T23:04:31.835Z","repository":{"id":238945007,"uuid":"798066589","full_name":"TeshaneCrawford/tc-css-starter","owner":"TeshaneCrawford","description":"An opinionated CSS starter","archived":false,"fork":false,"pushed_at":"2024-05-09T03:42:42.000Z","size":102,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-29T15:21:25.306Z","etag":null,"topics":["css-flexbox","css-grid","css3","cssreset","learn","nuxt3","starter-kit"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/TeshaneCrawford.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}},"created_at":"2024-05-09T03:02:55.000Z","updated_at":"2024-05-09T03:42:46.000Z","dependencies_parsed_at":"2024-05-09T03:31:11.975Z","dependency_job_id":"0924c01b-4c19-4d06-b51e-b210b1d57bd4","html_url":"https://github.com/TeshaneCrawford/tc-css-starter","commit_stats":null,"previous_names":["teshanecrawford/tc-css-starter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TeshaneCrawford/tc-css-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeshaneCrawford%2Ftc-css-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeshaneCrawford%2Ftc-css-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeshaneCrawford%2Ftc-css-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeshaneCrawford%2Ftc-css-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TeshaneCrawford","download_url":"https://codeload.github.com/TeshaneCrawford/tc-css-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TeshaneCrawford%2Ftc-css-starter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259896126,"owners_count":22928330,"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":["css-flexbox","css-grid","css3","cssreset","learn","nuxt3","starter-kit"],"created_at":"2024-11-08T01:44:43.239Z","updated_at":"2025-06-14T23:04:31.803Z","avatar_url":"https://github.com/TeshaneCrawford.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Starter Kit\n\nA simple CSS starter kit to get you started with your next project. It includes a basic CSS reset, css custom properties, typography, media queries, few components, dark mode, a grid system, and more.\n\n## Features\n\n- CSS Reset\n- CSS Custom Properties\n- Typography\n- Media Queries\n- Components\n- Dark Mode\n- Grid System\n\n## Components\n\n- Alert\n- Badge\n- Button\n- Card\n- Dropdown\n- Form\n- Modal\n- Navbar\n- Pagination\n- Progress\n- Table\n- Tabs\n- Toast\n\n## Grid System\n\nThe grid system is based on the 12-column grid system. It uses CSS custom properties to define the grid layout.\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-12\"\u003e12\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-6\"\u003e6\u003c/div\u003e\n  \u003cdiv class=\"col-6\"\u003e6\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-4\"\u003e4\u003c/div\u003e\n  \u003cdiv class=\"col-4\"\u003e4\u003c/div\u003e\n  \u003cdiv class=\"col-4\"\u003e4\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-3\"\u003e3\u003c/div\u003e\n  \u003cdiv class=\"col-3\"\u003e3\u003c/div\u003e\n  \u003cdiv class=\"col-3\"\u003e3\u003c/div\u003e\n  \u003cdiv class=\"col-3\"\u003e3\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Dark Mode\n\nThe dark mode is implemented using CSS custom properties and JavaScript. It uses the `prefers-color-scheme` media feature to detect the user's preferred color scheme.\n\n```css\n:root {\n  --\n    color-scheme: light dark;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --color-scheme: dark light;\n  }\n}\n\nbody {\n  color-scheme: var(--color-scheme);\n}\n```\n\n```vue\n\u003ctemplate\u003e\n  \u003cbutton @click=\"toggleDarkMode\"\u003eToggle Dark Mode\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst toggleDarkMode = () =\u003e {\n  document.documentElement.classList.toggle('dark');\n};\n\u003c/script\u003e\n```\n\n## Typography\n\nThe typography is based on the `Inter` font family. It includes the following font weights:\n\n- 300\n- 400\n- 500\n- 600\n- 700\n\n```css\nbody {\n  font-family: 'Inter', sans-serif;\n  font-weight: 400;\n  font-size: 1rem;\n  line-height: 1.5;\n}\n```\n\n```html\n    \u003ch1\u003eHeading 1\u003c/h1\u003e\n    \u003ch2\u003eHeading 2\u003c/h2\u003e\n    \u003ch3\u003eHeading 3\u003c/h3\u003e\n    \u003ch4\u003eHeading 4\u003c/h4\u003e\n    \u003ch5\u003eHeading 5\u003c/h5\u003e\n    \u003ch6\u003eHeading 6\u003c/h6\u003e\n    \u003cp\u003eParagraph\u003c/p\u003e\n    \u003ca href=\"#\"\u003eLink\u003c/a\u003e\n    \u003cbutton\u003eButton\u003c/button\u003e\n    \u003clabel\u003eLabel\u003c/label\u003e\n    \u003cinput type=\"text\" placeholder=\"Input\" /\u003e\n    \u003ctextarea placeholder=\"Textarea\"\u003e\u003c/textarea\u003e\n```\n\n## Media Queries\n\nThe media queries are based on the following breakpoints:\n\n- 576px\n- 768px\n- 992px\n- 1200px\n\n```css\n@media (min-width: 576px) {\n  /* Styles */\n}\n\n@media (min-width: 768px) {\n  /* Styles */\n}\n\n@media (min-width: 992px) {\n  /* Styles */\n}\n\n@media (min-width: 1200px) {\n  /* Styles */\n}\n```\n\n```html\n\u003cdiv class=\"d-none d-sm-block\"\u003eHidden on mobile\u003c/div\u003e\n\u003cdiv class=\"d-block d-sm-none\"\u003eHidden on desktop\u003c/div\u003e\n```\n\n## CSS Custom Properties\n\nThe CSS custom properties are used to define the color scheme, grid layout, and spacing.\n\n```css\n:root {\n  -- primary-color: #007bff;\n    --secondary-color: #6c757d;\n    --success-color: #28a745;\n    --info-color: #17a2b8;\n    --warning-color: #ffc107;\n    --danger-color: #dc3545;\n    --light-color: #f8f9fa;\n    --dark-color: #343a40;\n    --gray-color: #6c757d;\n    --white-color: #fff;\n    --black-color: #000;\n    --grid-gap: 1rem;\n    --container-max-width: 1140px;\n}\n\nbody {\n  color: var(--black-color);\n  background-color: var(--white-color);\n}\n```\n\n```html\n\u003cdiv class=\"container\"\u003eContainer\u003c/div\u003e\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-6\"\u003eColumn\u003c/div\u003e\n  \u003cdiv class=\"col-6\"\u003eColumn\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## CSS Reset\n\nThe CSS reset is based on the `normalize.css` library. It includes the following styles:\n\n- Box-sizing\n- Margin\n- Padding\n- List\n- Table\n- Form\n- Button\n- Image\n- Typography\n\n```css\nhtml {\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: inherit;\n}\n\nul[class],\nol[class] {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  padding: 0;\n  margin: 0;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  color: inherit;\n}\n```\n\n```html\n\u003cul\u003e\n  \u003cli\u003eItem\u003c/li\u003e\n  \u003cli\u003eItem\u003c/li\u003e\n  \u003cli\u003eItem\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## Setup\n\nMake sure to install the dependencies:\n\n```bash\n# npm\nnpm install\n\n# pnpm\npnpm install\n\n# yarn\nyarn install\n\n# bun\nbun install\n```\n\n## Development Server\n\nStart the development server on `http://localhost:3000`:\n\n```bash\n# npm\nnpm run dev\n\n# pnpm\npnpm run dev\n\n# yarn\nyarn dev\n\n# bun\nbun run dev\n```\n\n## Production\n\nBuild the application for production:\n\n```bash\n# npm\nnpm run build\n\n# pnpm\npnpm run build\n\n# yarn\nyarn build\n\n# bun\nbun run build\n```\n\nLocally preview production build:\n\n```bash\n# npm\nnpm run preview\n\n# pnpm\npnpm run preview\n\n# yarn\nyarn preview\n\n# bun\nbun run preview\n```\n\nCheck out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteshanecrawford%2Ftc-css-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteshanecrawford%2Ftc-css-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteshanecrawford%2Ftc-css-starter/lists"}