From c477b8675f4a3d74be6f1a12fa2d4cf033597f30 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 28 Dec 2020 21:47:10 +0200 Subject: Updated readme to contain relevant information to the fork --- README.md | 126 ++++++++++++++++++-------------------------------------------- 1 file changed, 37 insertions(+), 89 deletions(-) diff --git a/README.md b/README.md index 07eeaa6..1d9abb2 100644 --- a/README.md +++ b/README.md @@ -4,103 +4,51 @@ ## Spectre.css -Spectre.css is a lightweight, responsive and modern CSS framework—Now in Dark. +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). -- Lightweight (~10KB gzipped) starting point for your projects -- Flexbox-based, responsive and mobile-friendly layout -- Elegantly designed and developed elements and components +This fork modifies the colors to match the gruvbox style. -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. +## Getting started -Spectre.css is completely free to use. +The **best** way to get this version of Spectre is to compile it. +Although, if you only need `spectre.min.css`, you can directly use the one on my website (beware: no warranty about anything): -## Getting started +``` + +``` + +## Compiling + +### Requirements + +- `node`, install instructions [here](https://nodejs.org/en/download/) +- `gulp`, you can install it as a global tool with `sudo npm install gulp -g` + +**Warning:** currently there is an issue with new node versions, if `gulp build` gives you an error, follow these steps: + +1. Install "n": `sudo npm install -g n` + +2. Downgrade node to version 11 (11.15.0): `sudo n 11` -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. - -### 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. - -`` - -### 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. - -`` - -### Install with NPM -`$ npm install spectre.css --save` - -### Install with Yarn -`$ yarn add spectre.css` - -### Install with Bower -`$ bower install spectre.css --save` - -## Compiling custom version - -You can compile your custom version of Spectre.css. Read [the documentation](https://kingajax.github.io/Spectre-Dark/getting-started/custom.html). - -## Documentation and examples - -### Elements - -- [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) - -### 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) - -### 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) - -### Utilities - -- [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) +3. Rebuld sass for the new node version: `npm rebuild node-sass` + +### How to build + +1. Clone the repository + +2. Navigate to the folder of the repository + +3. Run `npm install` + +4. Run `gulp build` + +5. You're done, the compiled CSS files are in the `dist` folder + +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) -- cgit v1.3.1-23-gd82d