[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70867":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":20,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},70867,"spectre","picturepan2\u002Fspectre","picturepan2","Spectre.css - A Lightweight, Responsive and Modern CSS Framework","https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002F",null,"CSS",11316,785,219,164,0,3,43.69,"MIT License",false,"master",true,[24,25,26,27,28,29,5,30],"css","css-framework","flexbox","lightweight","modern","responsive-grid","utilities","2026-06-12 02:02:44","\u003Ca href=\"https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\">\n  \u003Cimg src=\"https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fimg\u002Fspectre-logo.svg\" width=\"72\" height=\"72\">\n\u003C\u002Fa>\n\n## Spectre.css\n\n[![Reviewed by Hound](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FReviewed_by-Hound-8E64B0.svg)](https:\u002F\u002Fhoundci.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\u002FScss compiler.\n\nSpectre.css is completely free to use. If you enjoy it, please consider [donating via Paypal](https:\u002F\u002Fwww.paypal.me\u002Fpicturepan2) or [via Patreon](https:\u002F\u002Fwww.patreon.com\u002Fspectrecss) 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:\u002F\u002Fgithub.com\u002Fpicturepan2\u002Fspectre\u002Ftree\u002Fmaster\u002Fdocs\u002Fdist). And include `spectre.css` located in `\u002Fdocs\u002Fdist` in your website or Web app &lt;head&gt; part.\n\n`\u003Clink rel=\"stylesheet\" href=\"spectre.min.css\">`\n\n### Install from CDN\nAlternatively, you can use the [unpkg](https:\u002F\u002Funpkg.com\u002F) or [cdnjs](https:\u002F\u002Fcdnjs.com\u002Flibraries\u002Fspectre.css) CDN to load compiled Spectre.css.\n\n`\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Funpkg.com\u002Fspectre.css\u002Fdist\u002Fspectre.min.css\">`\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:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fgetting-started\u002Fcustom.html).\n\n## Documentation and examples\n\n### Elements\n\n- [Typography](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Felements\u002Ftypography.html)\n- [Tables](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Felements\u002Ftables.html)\n- [Buttons](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Felements\u002Fbuttons.html)\n- [Forms](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Felements\u002Fforms.html)\n- [Icons.css](https:\u002F\u002Fpicturepan2.github.io\u002Ficons.css) - CSS ONLY\n- [Labels](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Felements\u002Flabels.html)\n- [Code](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Felements\u002Fcode.html)\n- [Media](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Felements\u002Fmedia.html)\n\n### Layout\n- [Flexbox grid](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Flayout\u002Fgrid.html) \n- [Responsive](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Flayout\u002Fresponsive.html)\n- [Hero](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Flayout\u002Fhero.html)\n- [Navbar](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Flayout\u002Fnavbar.html)\n\n### Components\n- [Accordions](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Faccordions.html)\n- [Avatars](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Favatars.html)\n- [Badges](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Fbadges.html)\n- [Breadcrumbs](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Fbreadcrumbs.html)\n- [Bars](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Fbars.html)\n- [Cards](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Fcards.html)\n- [Chips](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Fchips.html)\n- [Empty states](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Fempty.html)\n- [Menu](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Fmenu.html)\n- [Nav](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Fnav.html)\n- [Modals](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Fmodals.html)\n- [Pagination](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Fpagination.html)\n- [Panels](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Fpanels.html)\n- [Popovers](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Fpopovers.html)\n- [Steps](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Fsteps.html)\n- [Tabs](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Ftabs.html)\n- [Tiles](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Ftiles.html)\n- [Toasts](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Ftoasts.html)\n- [Tooltips](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fcomponents\u002Ftooltips.html)\n\n### Utilities\n\n- [Utilities](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Futilities.html) - colors, display, divider, loading, position, shapes and text utilities\n\n### Experimentals\n- [360-Degree Viewer](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fexperimentals\u002Fviewer-360.html) - CSS ONLY\n- [Autocomplete](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fexperimentals\u002Fautocomplete.html)\n- [Calendars](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fexperimentals\u002Fcalendars.html)\n- [Carousels](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fexperimentals\u002Fcarousels.html) - CSS ONLY\n- [Comparison Sliders](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fexperimentals\u002Fcomparison.html) - CSS ONLY\n- [Filters](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fexperimentals\u002Ffilters.html) - CSS ONLY\n- [Meters](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fexperimentals\u002Fmeters.html)\n- [Off-canvas](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fexperimentals\u002Foff-canvas.html) - CSS ONLY\n- [Parallax](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fexperimentals\u002Fparallax.html) - CSS ONLY\n- [Progress](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fexperimentals\u002Fprogress.html)\n- [Sliders](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fexperimentals\u002Fsliders.html)\n- [Timelines](https:\u002F\u002Fpicturepan2.github.io\u002Fspectre\u002Fexperimentals\u002Ftimelines.html)\n\n## Browser support\nSpectre uses [Autoprefixer](https:\u002F\u002Fgithub.com\u002Fpostcss\u002Fautoprefixer) to make most styles compatible with earlier browsers and [Normalize.css](https:\u002F\u002Fnecolas.github.io\u002Fnormalize.css\u002F) 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:\u002F\u002Ftwitter.com\u002Fpicturepan2). Feel free to submit a pull request. Help is always appreciated.\n","Spectre.css 是一个轻量级、响应式且现代化的CSS框架。其核心功能包括基于Flexbox的响应式布局系统，以及优雅设计的元素和组件，压缩后大小仅约10KB，非常适合快速启动项目。该框架提供了丰富的CSS组件与实用工具类，并支持通过Sass\u002FScss编译器进行自定义修改。适用于需要构建简洁美观界面的各种Web应用开发场景，尤其是对性能要求较高或希望减少加载时间的移动优先网站。",2,"2026-06-11 03:34:37","high_star"]