Befriending Sapper and Spectre.css
Tags: sapper, svelte, spectre, css
Published: 2020-08-25 05:55:17

Today I would like to share how to add [Spectre.css](https://picturepan2.github.io/spectre/) to [Sapper](https://sapper.svelte.dev/) the right way.

If you are reading this, then chances are that you have already heard of these frameworks or maybe you are just a curious person. Both are light, simple and straightforward tools that make web-development quick and easy. For those who don't know about them, head over to the links above and acquaint yourself with them. You might find them interesting as I did.

In short, I could describe Spectre.css as a light replacement for frameworks like Bootstrap or Bulma. Sane defaults for up-and-running projects with deadlines. No endless classes like in Tailwind (even though, I do enjoy Tailwind.css for its granular control).

So let's get started.

## Create a new Sapper project
First of all, you will need to create a new Sapper project.
So open up your favourite terminal and get your default Sapper template

```bash
npx degit "sveltejs/sapper-template#rollup" sapper-spectrecss
```

Open up the newly created folder

```bash
cd sapper-spectrecss
```
Install the Sapper dependencies

```bash
npm i
```
## Add Spectre.css dependencies

Now, of course, you could just link in the head of your template file `/src/template.html` the Spectre.css CDNs like so

```html
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
```
However, that's not what we really want. Since we can't tweak Spectre.css pragmatically and create a custom version of it for our needs. So skip the previous step unless you want to check it out really quick.

Alright, now let's add the following npm packages.
Svelte preprocessor and SASS as development dependencies

```bash
npm i node-sass svelte-preprocess autoprefixer -D
```
And the actual Spectre.css

```bash
npm i spectre.css 
```
Now your `package.json` file should look something like this

```javascript
{
  "name": "sapper-spectrecss-template",
  "description": "A light and beautiful template for Sapper with Spectre.css",
  "version": "0.0.1",
  "scripts": {
    "dev": "sapper dev",
    "build": "sapper build --legacy",
    "export": "sapper export --legacy",
    "start": "node __sapper__/build",
    "cy:run": "cypress run",
    "cy:open": "cypress open",
    "test": "run-p --race dev cy:run"
  },
  "dependencies": {
    "compression": "^1.7.1",
    "polka": "next",
    "sirv": "^1.0.0",
    "spectre.css": "^0.5.9"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/runtime": "^7.0.0",
    "@rollup/plugin-babel": "^5.0.0",
    "@rollup/plugin-commonjs": "^14.0.0",
    "@rollup/plugin-node-resolve": "^8.0.0",
    "@rollup/plugin-replace": "^2.2.0",
    "autoprefixer": "^9.8.6",
    "node-sass": "^4.14.1",
    "npm-run-all": "^4.1.5",
    "rollup": "^2.3.4",
    "rollup-plugin-svelte": "^5.0.1",
    "rollup-plugin-terser": "^6.1.0",
    "sapper": "^0.28.0",
    "svelte": "^3.17.3",
    "svelte-preprocess": "^4.1.1"
  }
}
```
## Edit config files

Open your `rollup.config.js` and add the following right under your imports

```javascript
import sveltePreprocess from 'svelte-preprocess';

const preprocess = sveltePreprocess({
	scss: {
	  includePaths: ['src'],
	},
	postcss: {
	  plugins: [require('autoprefixer')],
	},
});
```
Also, make sure that you add `preprocess` to your svelte plugins in client and server like so

```javascript
svelte({
	dev,
	hydratable: true,
	emitCss: true,
	preprocess
 }),
```

Let's create a new file called `svelte.config.js` in the root of your project template. We will setup svelte-preprocess so it can work with autoprefixer
```javascript

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess({
    scss: {
      includePaths: ['src'],
    },
    postcss: {
      plugins: [require('autoprefixer')],
    },
  }),
};
```
## Customize your styles

Finally, we can proceed and delete all the unnecessary css styling from the default Sapper template. Delete everything that is between `<style></style>` tags in every `.svelte` file that is located in `/src/routes` and in `/src/components`. You could empty out the contents of `global.css` file in `/static` folder as well.

While we are in `static` folder, let's create a new folder here, called `styles`

In newly created `static` create a file called `global.scss`

```scss
@import "./theme.scss";
```

And create the actual `theme.scss` where all the Spectre.css variables could be modified to our liking

```scss
// Define variables to override default ones
$primary-color: rgb(255,62,0);
$error-color: #c02020;
$font-size: 0.9rem;
$font-size-sm: .8rem;
$font-size-lg: 1rem;

// Import full Spectre source code
@import "../../node_modules/spectre.css/src/spectre";
```

Add this to your `_layout.svelte`

```html
<style lang="scss" global>
	 @import "../../static/styles/global.scss";
</style>
```

## Get back to code

We are all set, we can start our project from its root folder by running
```bash
npm run dev
```
With a bit of tweaking, you should see a greeting on your `localhost:3000`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5ppd00ti9sd6tuez3zq7.png)

Here is a [link](https://sapper-spectrecss-template.surge.sh) to the final result in action.

Now if you are short on time you can just skip everything up until now. Clone the [github repo](https://github.com/gevera/sapper-spectrecss-template) and install the dependencies. That's it

```bash
git clone https://github.com/gevera/sapper-spectrecss-template
cd sapper-spectrecss-template
npm i
npm run dev
```
Hopefully, you found this tutorial useful.
Let me know in the comments below if you stumble upon issues integrating these awesome frameworks.

Oh, and I am just curious, what is your CSS framework to go and how easy is to integrate it with Sapper?

Cheers