diff options
Updated readme to contain relevant information to the fork
1 files changed, 23 insertions, 75 deletions
| -rw-r--r-- | README.md | 98 |
@@ -4,103 +4,51 @@ ## Spectre.css -Spectre.css is a lightweight, responsive and modern CSS frameworkâNow in Dark. - -- Lightweight (~10KB gzipped) starting point for your projects -- Flexbox-based, responsive and mobile-friendly layout -- Elegantly designed and developed elements and components - -Spectre 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. - -Spectre.css is completely free to use. +Spectre.css is a lightweight, responsive and modern CSS framework. For more information, check out the [upstream repo](https://github.com/picturepan2/spectre) and the [dark-mode upstream](https://github.com/kingajax/Spectre-Dark). +This fork modifies the colors to match the gruvbox style. ## Getting started -There are 5 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower. +The **best** way to get this version of Spectre is to compile it. -### Install manually -Download the compiled and minified [Spectre CSS files](https://github.com/kingajax/Spectre-Dark/tree/master/docs/dist). And include `spectre.css` located in `/docs/dist` in your website or Web app <head> part. +Although, if you only need `spectre.min.css`, you can directly use the one on my website (beware: no warranty about anything): -`<link rel="stylesheet" href="spectre.min.css">` +``` +<link rel="stylesheet" href="https://www.syndamia.com/spectre.min.css"> +``` -### Install from CDN -Alternatively, you can use the [unpkg](https://unpkg.com/) or [cdnjs](https://cdnjs.com/libraries/spectre.css) CDN to load compiled Spectre.css. +## Compiling -`<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">` +### Requirements -### Install with NPM -`$ npm install spectre.css --save` +- `node`, install instructions [here](https://nodejs.org/en/download/) +- `gulp`, you can install it as a global tool with `sudo npm install gulp -g` -### Install with Yarn -`$ yarn add spectre.css` +**Warning:** currently there is an issue with new node versions, if `gulp build` gives you an error, follow these steps: -### Install with Bower -`$ bower install spectre.css --save` +1. Install "n": `sudo npm install -g n` -## Compiling custom version +2. Downgrade node to version 11 (11.15.0): `sudo n 11` -You can compile your custom version of Spectre.css. Read [the documentation](https://kingajax.github.io/Spectre-Dark/getting-started/custom.html). +3. Rebuld sass for the new node version: `npm rebuild node-sass` -## Documentation and examples +### How to build -### Elements +1. Clone the repository -- [Typography](https://kingajax.github.io/Spectre-Dark/elements/typography.html) -- [Tables](https://kingajax.github.io/Spectre-Dark/elements/tables.html) -- [Buttons](https://kingajax.github.io/Spectre-Dark/elements/buttons.html) -- [Forms](https://kingajax.github.io/Spectre-Dark/elements/forms.html) -- [Icons.css](https://picturepan2.github.io/icons.css) - CSS ONLY -- [Labels](https://kingajax.github.io/Spectre-Dark/elements/labels.html) -- [Code](https://kingajax.github.io/Spectre-Dark/elements/code.html) -- [Media](https://kingajax.github.io/Spectre-Dark/elements/media.html) +2. Navigate to the folder of the repository -### Layout -- [Flexbox grid](https://kingajax.github.io/Spectre-Dark/layout/grid.html) -- [Responsive](https://kingajax.github.io/Spectre-Dark/layout/responsive.html) -- [Hero](https://kingajax.github.io/Spectre-Dark/layout/hero.html) -- [Navbar](https://kingajax.github.io/Spectre-Dark/layout/navbar.html) +3. Run `npm install` -### Components -- [Accordions](https://kingajax.github.io/Spectre-Dark/components/accordions.html) -- [Avatars](https://kingajax.github.io/Spectre-Dark/components/avatars.html) -- [Badges](https://kingajax.github.io/Spectre-Dark/components/badges.html) -- [Breadcrumbs](https://kingajax.github.io/Spectre-Dark/components/breadcrumbs.html) -- [Bars](https://kingajax.github.io/Spectre-Dark/components/bars.html) -- [Cards](https://kingajax.github.io/Spectre-Dark/components/cards.html) -- [Chips](https://kingajax.github.io/Spectre-Dark/components/chips.html) -- [Empty states](https://kingajax.github.io/Spectre-Dark/components/empty.html) -- [Menu](https://kingajax.github.io/Spectre-Dark/components/menu.html) -- [Nav](https://kingajax.github.io/Spectre-Dark/components/nav.html) -- [Modals](https://kingajax.github.io/Spectre-Dark/components/modals.html) -- [Pagination](https://kingajax.github.io/Spectre-Dark/components/pagination.html) -- [Panels](https://kingajax.github.io/Spectre-Dark/components/panels.html) -- [Popovers](https://kingajax.github.io/Spectre-Dark/components/popovers.html) -- [Steps](https://kingajax.github.io/Spectre-Dark/components/steps.html) -- [Tabs](https://kingajax.github.io/Spectre-Dark/components/tabs.html) -- [Tiles](https://kingajax.github.io/Spectre-Dark/components/tiles.html) -- [Toasts](https://kingajax.github.io/Spectre-Dark/components/toasts.html) -- [Tooltips](https://kingajax.github.io/Spectre-Dark/components/tooltips.html) +4. Run `gulp build` -### Utilities +5. You're done, the compiled CSS files are in the `dist` folder -- [Utilities](https://kingajax.github.io/Spectre-Dark/utilities.html) - colors, display, divider, loading, position, shapes and text utilities - -### Experimentals -- [360-Degree Viewer](https://kingajax.github.io/Spectre-Dark/experimentals/viewer-360.html) - CSS ONLY -- [Autocomplete](https://kingajax.github.io/Spectre-Dark/experimentals/autocomplete.html) -- [Calendars](https://kingajax.github.io/Spectre-Dark/experimentals/calendars.html) -- [Carousels](https://kingajax.github.io/Spectre-Dark/experimentals/carousels.html) - CSS ONLY -- [Comparison Sliders](https://kingajax.github.io/Spectre-Dark/experimentals/comparison.html) - CSS ONLY -- [Filters](https://kingajax.github.io/Spectre-Dark/experimentals/filters.html) - CSS ONLY -- [Meters](https://kingajax.github.io/Spectre-Dark/experimentals/meters.html) -- [Off-canvas](https://kingajax.github.io/Spectre-Dark/experimentals/off-canvas.html) - CSS ONLY -- [Parallax](https://kingajax.github.io/Spectre-Dark/experimentals/parallax.html) - CSS ONLY -- [Progress](https://kingajax.github.io/Spectre-Dark/experimentals/progress.html) -- [Sliders](https://kingajax.github.io/Spectre-Dark/experimentals/sliders.html) -- [Timelines](https://kingajax.github.io/Spectre-Dark/experimentals/timelines.html) +For more information, refer to [kingajax's documentation](https://kingajax.github.io/Spectre-Dark/getting-started/custom.html). ## Browser support + Spectre 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: - Chrome (LAST 4) |