We are currently getting ten posts on our Sapper homepage, however in the real world that number would most probably be much higher, our WordPress site might have even hundreds or thousands of posts, and of course, we don't want to show all of those posts on our homepage. So, best way to handle that would be pagination, and that is what we are going to be doing in this episode of creating Svelte, Sapper and WordPress site.

Also I'm going to show you how you can add Scss/Sass support to your Sapper project.

In this episode we are going to learn how to paginate our post list and how to add Sass support to our Svelte, Sapper and WordPress application.

Pagination And Sass Support

Webpack is used to bundle your .js modules into a single file, and you can think of modules as files. 

JavaScript does not natively support file includes like some other languages. So that is where Webpack comes in, it will bundle your files so that almost all browsers can read them.

It also helps us organise our JavaScript app into multiple files. Which we can then import and use them when needed. 

Webpack is also much more than just module bundler, it could also be used as task runner, and some developers are using it exactly like that. Although in this video we are not going to go into detail about Webpacks capabilities,  I will show you an example of how you can compile scss files with Webpack, so that you can get a taste of what Webpack can do.

In this episode we are going to cover basics of Webpack module bundler.

Webpack

Sass is a CSS extension language that shares some similarities with "normal" programming languages in that you can use variables, arrays (which are called maps in Sass), functions, mixins etc. of course since the browsers can't interpret SCSS files you have to compile them down to normal CSS. We have set up our task runner to do just that in the [previous episode](http://watch-learn.com/video-tutorials/basic-frontend-tools-gulp) so be sure to check that out.

In this episode I'm going to go over the basics of Sass and what it can do, this is in no way, shape or form everything the Sass can do, because I would need to create a whole series of videos to cover everything. But I think I covered most used things for Sass that you would find in th wild and they are a good starting point for you to start learnig Sass for yourself.

In this episode I'm going to show you how you can supercharge your CSS development by using CSS extension language called Sass.

Sass

Since October CMS is based on Laravel I thought it would be fitting to set it up with our installation of October CMS, since Laravel itself uses it out of the box. Laravel Elixir is a kind of a wrapper over Gulp task runner and it lets you write much less code to do your basic compilation of Sass and JavaScript files then you would write using vanilla Gulp.

In this episode we are going to set it up so that it compiles our `.scss` files and our ``.js` files, and it is also going to watch them an compile them every time we hit save. And on top of that it's going to automatically refresh our page when ever we do so using Livereload plugin.

In this episode we are going to set up Laravel Elixir to with our October CMS installation. Also we are going to enable Livereload, so that we can see the changes on our site whenever we save a file.

Setting Up Laravel Elixir

If you ever used Laravel framework for development you must have heard about [Laravel Elixir](https://laravel.com/docs/5.0/elixir). It is an abstraction layer for gulp.js which makes writing your basic gulp tasks super easy. Since it was made for Laravel, it works out of the box with that framework.

Wouldn't it be nice if we could have the power of Elixir on WordPress. Yes, it would you might say. And that is what we are going to be doing in this episode.

First we are going to install Laravel Elixir, then we are going to do some basic tasks with it, like compiling our `.scss` files. Then I'm going to show you how to use LiveReload with it. And finally how to prepare your files for production.

The result of all of this will be Elixir enabled theme which you can download from the link below.

### Download Elixir Theme

[Download it here](https://github.com/ivandoric/elixir)

In this episode of Frontend Tips I'm going to show you how you can use Laravel Elixir in your WordPress workflow, and also how to use it with LiveReload.

Using Laravel Elixir With WordPress

In this episode we are going to setup our Drupal 8 theme to work with Gulp.js task runner and make it compile our sass files, minify our JavaScript files and watch for changes that we do and automatically refresh the browser for us.

This theme is going to do pretty much the same thing as the Olympos theme for WordPress. You can check out the [video about that here](http://watch-learn.com/video-tutorials/using-and-installing-new-olympos-theme/).

In this episode of Drupal 8 Theming tutorial series we are going to setup our theme to work with Sass, Gulp.js and Live Reload.

Gulp.js, Sass, LiveReload

I really like the stuff you get out of the box with Middleman, like LiveReload, JavaScript minification and Sass compilation. But I like Gulp.js more. I think its LiveReload plugin works much faster than what you get with Middleman.

In this episode I will show you how you can setup LiveReload, Sass compilation and image optimisation in Gulp.js to work with Middleman.

We are going to use existing [Olympos](http://watch-learn.com/video-tutorials/using-and-installing-new-olympos-theme/) theme's gulpfile and configure it to be used with Middleman.

In this episode we are going setup our Middleman project so that it works with Gulp.js.

Setting up Gulp.js With Middleman

The theme is optimised to load very quickly and to give you very fast development environment.

It's completely free and you can use it however you want.

It's a developers theme, so if you don't like being bogged down by all unnecessary css and js you can use this.

You can [download it here](https://github.com/ivandoric/olympos).

Olympos is a starter theme for your WordPress projects, it doesn't have any fancy CSS in it but it will get you WordPress development going very, very fast.

Using and installing new Olympos theme

In this video I'm going to talk about WordPress development, actually about first steps that I take when WordPress is installed.

I'm going to talk about Sublime Text and the plugins I'm using for it.

I'm also going to present my [clean starter theme called "Olympos"](https://github.com/ivandoric/olympos).

Also you will see how to use Olympos theme and how it works with [Compass](http://compass-style.org/), [Sass](http://sass-lang.com/) and [Gulp.js](http://gulpjs.com/).

In the part two of this series I'ma talking about my development setup and software technologies I'm using.

Tutorials tagged with: sass

Get in touch