Showing posts with label sass. Show all posts
Showing posts with label sass. Show all posts

Wednesday 10 April 2019

Tuesday 12 February 2019

Vanilla JS carousel

I have created a Vanilla JavaScript carousel. This has been built using https://github.com/guitarbeerchocolate/vanilla-js-component and resides at https://github.com/guitarbeerchocolate/vanilla-js-carousel
It employs :

  • HTML5
  • SASS
  • BEM
  • ES6

Vanilla JS component

I'm creating a number of elements using Vanilla JavaScript. They will use :

  • HTML5
  • SASS
  • CSS grid
  • BEM
  • Media queries
  • ES6

In order to put these elements together more efficiently, I have put together a small framework, from which I will fork.
It lies at https://github.com/guitarbeerchocolate/vanilla-js-component

Saturday 24 February 2018

The 2018 Web Developer : Adding node-sass globally

In the previous post I installed node.js (node). This also came bundled with the Node Package Manager (npm). npm allows me to install many packages created by the JavaScript community, both open-source and commercial. Examples include Twitter bootstrap, ReactJS, etc.
In this example I'm going install use node-sass, globally. This will allow us me develop CSS for any project using SASS on my system using.
From the command line type:
npm install -g node-sass
I then test that it has installed using:
node-sass -v

Using node-sass

In this first example, I have a terminal window open and I'm in a directory containing my custom.scss which will need compiling to custom.css in order to be used by my web pages.
node-sass -w custom.scss custom.css
In this second example, I'm in the root directory of my project with a subdirectory of /scss. Here, I am compiling all .scss files to their .css equivalents, in the same directory.
node-sass -w scss/ -o scss/

What next?

Now that I have used npm to install a package globally. I've applied a package, namely node-sass, which will improve my productivity. Now, in the next post, I need to begin a new project and prepare the ground for project specific packages.
I'm also going to use the opportunity to make sure I'm got some tools in place such as the Atom text editor, the slimjet browser and the livestyle plugins.

Wednesday 3 January 2018

Fast lightweight web development on an old laptop

I was given an old laptop. It's quite handy for doing a little development when it comes into my head. Below I explain how I set it up.

OS

The laptop has a 32-bit architecture so I downloaded Lubuntu from https://lubuntu.net and replaced the slow Microsoft Windows installation.
There was one downside to this. Since Microsoft bought Skype, they have stopped supporting it's 32-bit version. Not so much of a problem for me as I have another laptop I use for more serious work, but worth noting.

PHP & Web Server

I installed PHP, but not the rest of the LAMP stack. PHP comes with a lightweight server which you can run from your working directory from the command line with the cli call of:
php -S localhost:8000
After doing that, just open up your favourite web browser and use the address http://localhost:8000

Sass

CSS has become a bit cumbersome now. I use Sass to make the process of producing stylesheets a little easier.
To install this on Lubuntu use:
sudo apt install ruby-sass
Once the install has completed you're ready to use it. First, your terminal change to the directory of your app e.g.
cd /home/mick/htmlstuff/myapp
You'll need at least 2 files for Sass. In this example we'll use custom.scss (the one we'll be editing) and custom.css (the output file which is referred to by your HTML page). Then you want to put a watch on custom.scss to produce custom.css. This again is done from the terminal with the line:
sass --watch custom.scss:custom.css
Now every time you update and save custom.scss, custom.css will be updated.

Editor

I now use Atom as my editor. To install it on Lubuntu, first add the PPA thus:
sudo add-apt-repository ppa:webupd8team/atom
Then do an update and the install through:
sudo apt update; sudo apt install atom
I had a graphic problem with mine at first. It kept flashing. To remedy this I changed the command of my Atom launcher to:
/opt/atom/atom --disable-gpu
Once Atom has been installed successfully it's time to add a few extensions. I recommend the following:
  • browser-plus - This will open up a browser inside the editor and will display changes your project live, on save.
  • file-icons - This provides more informative icons for the various files within your project.
  • platformio-atom-ide-terminal - This will open up a terminal inside the editor. It's quite useful because some commands, such as the sass one above provide you with error messages.
  • remote-sync - This will allow you to edit remote files through ftp etc. It's also particularly good because you can list all the files which shouldn't be synced.