Befriending Sapper and Spectre.css

Today I would like to share how to add Spectre.css to Sapper 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

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

Open up the newly created folder

cd sapper-spectrecss

Install the Sapper dependencies

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

<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

npm i node-sass svelte-preprocess autoprefixer -D

And the actual Spectre.css

npm i spectre.css 

Now your package.json file should look something like this

{
  "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

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

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

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

@import "./theme.scss";

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

// 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

<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

npm run dev

With a bit of tweaking, you should see a greeting on your localhost:3000

Here is a link 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 and install the dependencies. That's it

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