{"id":13393041,"url":"https://github.com/picturepan2/spectre","last_synced_at":"2025-05-07T11:51:18.479Z","repository":{"id":5505674,"uuid":"53321815","full_name":"picturepan2/spectre","owner":"picturepan2","description":"Spectre.css - A Lightweight, Responsive and Modern CSS Framework","archived":false,"fork":false,"pushed_at":"2024-04-11T16:20:19.000Z","size":6514,"stargazers_count":11344,"open_issues_count":194,"forks_count":801,"subscribers_count":227,"default_branch":"master","last_synced_at":"2025-04-18T11:14:35.978Z","etag":null,"topics":["css","css-framework","flexbox","lightweight","modern","responsive-grid","spectre","utilities"],"latest_commit_sha":null,"homepage":"https://picturepan2.github.io/spectre/","language":"CSS","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/picturepan2.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}},"created_at":"2016-03-07T11:53:15.000Z","updated_at":"2025-04-18T07:20:52.000Z","dependencies_parsed_at":"2024-05-03T10:00:27.414Z","dependency_job_id":"2b34f65f-b79e-46fe-9e6b-da2901c51bae","html_url":"https://github.com/picturepan2/spectre","commit_stats":{"total_commits":645,"total_committers":30,"mean_commits":21.5,"dds":"0.058914728682170514","last_synced_commit":"8847251d71b4dac27e8407cbdb71ae89ce156a43"},"previous_names":[],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picturepan2%2Fspectre","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picturepan2%2Fspectre/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picturepan2%2Fspectre/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/picturepan2%2Fspectre/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/picturepan2","download_url":"https://codeload.github.com/picturepan2/spectre/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249565262,"owners_count":21292427,"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","css-framework","flexbox","lightweight","modern","responsive-grid","spectre","utilities"],"created_at":"2024-07-30T17:00:41.507Z","updated_at":"2025-04-22T17:55:57.921Z","avatar_url":"https://github.com/picturepan2.png","language":"CSS","funding_links":["https://www.paypal.me/picturepan2","https://www.patreon.com/spectrecss"],"categories":["CSS","HTML","Stalled Development","Frameworks / Resources","4. ui组件库(CSS Framework)","Web Development","Tools","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["S","WebTools"],"readme":"\u003ca href=\"https://picturepan2.github.io/spectre\"\u003e\n  \u003cimg src=\"https://picturepan2.github.io/spectre/img/spectre-logo.svg\" width=\"72\" height=\"72\"\u003e\n\u003c/a\u003e\n\n## Spectre.css\n\n[![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](https://houndci.com)\n\nSpectre.css is a lightweight, responsive and modern CSS framework.\n\n- Lightweight (~10KB gzipped) starting point for your projects\n- Flexbox-based, responsive and mobile-friendly layout\n- Elegantly designed and developed elements and components\n\nSpectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.\n\nSpectre.css is completely free to use. If you enjoy it, please consider [donating via Paypal](https://www.paypal.me/picturepan2) or [via Patreon](https://www.patreon.com/spectrecss) for the further development. ♥ \n\n\n## Getting started\n\nThere are 5 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower.\n\n### Install manually\nDownload the compiled and minified [Spectre CSS files](https://github.com/picturepan2/spectre/tree/master/docs/dist). And include `spectre.css` located in `/docs/dist` in your website or Web app \u0026lt;head\u0026gt; part.\n\n`\u003clink rel=\"stylesheet\" href=\"spectre.min.css\"\u003e`\n\n### Install from CDN\nAlternatively, you can use the [unpkg](https://unpkg.com/) or [cdnjs](https://cdnjs.com/libraries/spectre.css) CDN to load compiled Spectre.css.\n\n`\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/spectre.css/dist/spectre.min.css\"\u003e`\n\n### Install with NPM\n`$ npm install spectre.css --save`\n\n### Install with Yarn\n`$ yarn add spectre.css`\n\n### Install with Bower\n`$ bower install spectre.css --save`\n\n## Compiling custom version\n\nYou can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/getting-started/custom.html).\n\n## Documentation and examples\n\n### Elements\n\n- [Typography](https://picturepan2.github.io/spectre/elements/typography.html)\n- [Tables](https://picturepan2.github.io/spectre/elements/tables.html)\n- [Buttons](https://picturepan2.github.io/spectre/elements/buttons.html)\n- [Forms](https://picturepan2.github.io/spectre/elements/forms.html)\n- [Icons.css](https://picturepan2.github.io/icons.css) - CSS ONLY\n- [Labels](https://picturepan2.github.io/spectre/elements/labels.html)\n- [Code](https://picturepan2.github.io/spectre/elements/code.html)\n- [Media](https://picturepan2.github.io/spectre/elements/media.html)\n\n### Layout\n- [Flexbox grid](https://picturepan2.github.io/spectre/layout/grid.html) \n- [Responsive](https://picturepan2.github.io/spectre/layout/responsive.html)\n- [Hero](https://picturepan2.github.io/spectre/layout/hero.html)\n- [Navbar](https://picturepan2.github.io/spectre/layout/navbar.html)\n\n### Components\n- [Accordions](https://picturepan2.github.io/spectre/components/accordions.html)\n- [Avatars](https://picturepan2.github.io/spectre/components/avatars.html)\n- [Badges](https://picturepan2.github.io/spectre/components/badges.html)\n- [Breadcrumbs](https://picturepan2.github.io/spectre/components/breadcrumbs.html)\n- [Bars](https://picturepan2.github.io/spectre/components/bars.html)\n- [Cards](https://picturepan2.github.io/spectre/components/cards.html)\n- [Chips](https://picturepan2.github.io/spectre/components/chips.html)\n- [Empty states](https://picturepan2.github.io/spectre/components/empty.html)\n- [Menu](https://picturepan2.github.io/spectre/components/menu.html)\n- [Nav](https://picturepan2.github.io/spectre/components/nav.html)\n- [Modals](https://picturepan2.github.io/spectre/components/modals.html)\n- [Pagination](https://picturepan2.github.io/spectre/components/pagination.html)\n- [Panels](https://picturepan2.github.io/spectre/components/panels.html)\n- [Popovers](https://picturepan2.github.io/spectre/components/popovers.html)\n- [Steps](https://picturepan2.github.io/spectre/components/steps.html)\n- [Tabs](https://picturepan2.github.io/spectre/components/tabs.html)\n- [Tiles](https://picturepan2.github.io/spectre/components/tiles.html)\n- [Toasts](https://picturepan2.github.io/spectre/components/toasts.html)\n- [Tooltips](https://picturepan2.github.io/spectre/components/tooltips.html)\n\n### Utilities\n\n- [Utilities](https://picturepan2.github.io/spectre/utilities.html) - colors, display, divider, loading, position, shapes and text utilities\n\n### Experimentals\n- [360-Degree Viewer](https://picturepan2.github.io/spectre/experimentals/viewer-360.html) - CSS ONLY\n- [Autocomplete](https://picturepan2.github.io/spectre/experimentals/autocomplete.html)\n- [Calendars](https://picturepan2.github.io/spectre/experimentals/calendars.html)\n- [Carousels](https://picturepan2.github.io/spectre/experimentals/carousels.html) - CSS ONLY\n- [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals/comparison.html) - CSS ONLY\n- [Filters](https://picturepan2.github.io/spectre/experimentals/filters.html) - CSS ONLY\n- [Meters](https://picturepan2.github.io/spectre/experimentals/meters.html)\n- [Off-canvas](https://picturepan2.github.io/spectre/experimentals/off-canvas.html) - CSS ONLY\n- [Parallax](https://picturepan2.github.io/spectre/experimentals/parallax.html) - CSS ONLY\n- [Progress](https://picturepan2.github.io/spectre/experimentals/progress.html)\n- [Sliders](https://picturepan2.github.io/spectre/experimentals/sliders.html)\n- [Timelines](https://picturepan2.github.io/spectre/experimentals/timelines.html)\n\n## Browser support\nSpectre uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make most styles compatible with earlier browsers and [Normalize.css](https://necolas.github.io/normalize.css/) for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:\n\n- Chrome (LAST 4)\n- Microsoft Edge (LAST 4)\n- Firefox (EXTENDED SUPPORT RELEASE)\n- Safari (LAST 4)\n- Opera (LAST 4)\n- Internet Explorer 10+\n\nSpectre supports Internet Explorer 10+, but some HTML5 and CSS3 features are not perfectly supported by Internet Explorer.\n\nDesigned and built with ♥ by [Yan Zhu](https://twitter.com/picturepan2). Feel free to submit a pull request. Help is always appreciated.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicturepan2%2Fspectre","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpicturepan2%2Fspectre","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpicturepan2%2Fspectre/lists"}