DEV Community

Cover image for Befriending Sapper and Spectre.css
Denis Donici
Denis Donici

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

Open up the newly created folder

cd sapper-spectrecss
Enter fullscreen mode Exit fullscreen mode

Install the Sapper dependencies

npm i
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

And the actual Spectre.css

npm i spectre.css 
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

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')],
    },
});
Enter fullscreen mode Exit fullscreen mode

Also, make sure that you add preprocess to your svelte plugins in client and server like so

svelte({
    dev,
    hydratable: true,
    emitCss: true,
    preprocess
 }),
Enter fullscreen mode Exit fullscreen mode

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')],
    },
  }),
};
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

Add this to your _layout.svelte

<style lang="scss" global>
     @import "../../static/styles/global.scss";
</style>
Enter fullscreen mode Exit fullscreen mode

Get back to code

We are all set, we can start our project from its root folder by running

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)