- #Scss prepros comments stay in compressed archive#
- #Scss prepros comments stay in compressed download#
- #Scss prepros comments stay in compressed free#
** Custom variables*/$main-font: 'Lato', sans-serif $sub-font: 'Montserrat', sans-serif $fancy-font: 'Kaushan Script', cursive $font-size: 16px $black: #000 $white: #FFF $grey: #585c65 $mediumgrey: #9b9b9b $lightgrey: #eeeeee $blue: #3466a1 $padding: 10px $margin: 10px /** Override Bootstrap variables*/$font-family-sans-serif: 'bootstrap'
We have our basic building blocks so let's continue by setting up our style.scss file a bit. These tags point toour various JavaScript libraries including jQuery from Google's CDN which is required by Bootstrap. Referencing JavaScript FilesĪdd the following snippet below the footer-bottom section: I have applied some descriptive classes to the elements so we can clearly see what they will be used for. The element contains fourother elementsto hold each of the bands which appear on the design. The next line may seem strange because we haven't created a style.css file yet, but generating that filewill behandled by our Sass compiler. The fonts here are based on those used in the design by Thomas. Next, we give the page a title and include a tag for the various Google fonts we want to use. The section contains the necessary viewport tag so our media queries work correctly. We have our first bit of code! Let's break it down. Open up index.htmland enter (or copy/paste) the following base HTML: Instagram Portfolio 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 jsfolder add a file called app.js. We just need to set up a few more things before we can begin to build the layout.įirst of all under the css directory add a file called style.scss. Good work! Now, find the 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.
#Scss prepros comments stay in compressed 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.
#Scss prepros comments stay in compressed download#
Lastly, we should download the latest version of Modernizr so, if needed, we can target certain browser features and so wealsohave 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 versionso 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.
#Scss prepros comments stay in compressed free#
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. 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.
In this tutorial I am going to run through the process of creating the simple Instagram-based portfolio as designed in aprevious tutorial by Tomas Laurinavicius.
0 kommentar(er)
