We can get on with building the layout! Begin the Build I think that is all the file set up for now. Some do this automatically but it's best to check and manually refresh if needed. Make sure you refresh the Sass app you are using so it picks up the new files. Then inside the js folder add a file called app.js. Open up the project in whatever editor you use so we can add a few files.įirst of all under the css directory add a file called style.scss. I like to keep things simple and will normally just check on Autoprefix and an output style of Expanded ( Compressed in production).
#Instafeed js slideshow free#
Feel free to play about with the settings your Sass app provides to get the best set up for you.
![instafeed js slideshow instafeed js slideshow](https://cdn.shopify.com/s/files/1/1804/7229/products/3A429C9F-7483-4106-9BBC-0B0E1B43E40A_1024x1024@2x.jpg)
The next thing I always do when setting things up is look at the Sass compile options and, if available, check the box to use Autoprefixer. This handy addition will parse our Sass file and add any vendor prefixes we need so we don't need to worry about writing them ourselves. I believe it is a similar process for the others as well. In Koala this is a question of dragging the folder into the app window. Now is the time to set our project up in the Sass app you've chosen to use. We just need to set up a few more things before we can begin to build the layout. Good work! Now, find the and Modernizr files you downloaded earlier and copy them into the js folder. Our files and folders should now look like this. Lastly, open the stylesheets directory and copy the bootstrap.scss file and bootstrap folder into the css folder of our project. Open up javascripts and copy the bootstrap.js file into the js folder of our project. Open this folder up and you will see something similar to the following:Ĭopy the fonts directory into the root of the project with the other folders we just created. Inside the extracted folder should be a folder named assets.
#Instafeed js slideshow archive#
Next, find the Bootstrap archive you downloaded earlier and extract it somewhere you can find easily. We need to create some files and folders for our project, so go ahead and create the following in the root directory of the project. Now we have these assets we can begin our build! File and Folder Structure This isn't strictly necessary but I like to include it in projects just to be sure.
#Instafeed js slideshow download#
Lastly, we should download the latest version of Modernizr so, if needed, we can target certain browser features and so we also have the HTML5 shim for older browsers. It's worth noting here that in order to get anything from Instagram you need to provide the plugin with a client ID which can be generated by signing up to Instagram and filling out the form in the developer section. Nearly there! We now need to grab a copy of Instafeed.js which will handle all of the work grabbing photos from Instagram. Go ahead and download the latest version. We specifically want to download the Sass version so we can include it in our own stylesheet and make use of the available variables. We are going to use Bootstrap on a very basic level, to handle some of the responsive elements of the page. They all provide near enough the same functionality so the choice is yours! There are alternatives such as Scout, Prepros and Compass app.
![instafeed js slideshow instafeed js slideshow](https://cdn.shopify.com/s/files/1/1804/7229/products/IMG_7144_14f408a9-dce8-4464-b3a1-29d74d7fda46_1024x1024.jpg)
I am currently using Koala which is cross platform and free so it's a very good option to get up and running quickly. The easiest way to do that is by using one of the excellent apps available to do all of the watching and compiling. They are:įirst of all, you will need to get Sass up and running on your machine.
![instafeed js slideshow instafeed js slideshow](https://cdn.shopify.com/s/files/1/1804/7229/products/IMG_95752_345x@2x.jpg)
There are a few things we need to prepare before starting our build. To make our lives easier we are going to rely on a few tools and libraries so let's begin by taking a look at them. Tomas has done a great job keeping the design simple, spacious and functional so I think it's only fair we do the same when building it.
![instafeed js slideshow instafeed js slideshow](https://cdn.shopify.com/s/files/1/1804/7229/products/IMG_6213_1024x1024@2x.jpg)
In this tutorial I am going to run through the process of creating the simple Instagram-based portfolio as designed in a previous tutorial by Tomas Laurinavicius.