First Impressions of Bootstrap & SASS

Hi! I really quickly wanted to write down exactly what I’m learning today, which is Bootstrap & SASS.

I am FINALLY getting my grubby, little hands on Bootstrap and learning how to make it my own! I am going to make a fabulous, live web dev portfolio so soon. And I want to use Bootstrap to make it, so that I can learn how and also because I think it’ll just be the fastest option for me to get it done.

So far I have learned how to link up Bootstrap as a CDN. Great, quick option. And now I’m also downloading it to my machine as a learning tool for learning SASS. I’m finally learning SASS! You can create like a billion snippets of CSS, and then compile it into one crisp, cute file. I’m already ALL OVER THIS.

So real quick notes for me:

TO INSTALL SASS

Learning Bootstrap & SASS

gem install sass (on the command line)

You will probably get an error saying something like, “You don’t have write permissions for ….” This is because you are using the version of Ruby that MAC automatically comes with. But don’t fret! The fix is super simple!

sudo gem install sas

then type

sass -v

to double check that it worked! You should be given the version of sass that you are now running.

Then to actually use your sass files… Again with sass you basically make a bunch of partial css files, using the .scss filename. Then you will compile all of those (on the command line) and they will compile into one master css file that you will link to your header, like normal CSS. YES, EASY MODE!

HOW TO COMPILE:

sass –watch scss:compiled

In this example I’m just compiling the Bootstrap files that I downloaded. All of the partial SASS files live in the /scss file folder (or directory-remember they are the same thing!), so I am calling for SASS to watch this directory and compile it into a new directory called compiled. When I open /compiled I’ll see some .css files that are giant css files calling for all of the individual partials that exist in /scss.

I hope that kind of makes sense… Also! When you call SASS to do something on the command line like watch, SASS will continue watching for files/file changes to compile until you tell it to stop. So hit CTRL+C whenever you’re done, or whenever you need to get back to your command line for a new command.

 

Git Branches: Where have they been all my life??

Let’s quickly chat about Git and Github. And then we’ll get to those lovely Git Branches.

Now I learned a while while ago, just how important it is to use Git. It’s a form of version control that developers use for their code. It’s important because they can keep track of when certain changes were made, and (god forbid) they can go back to an earlier version of their code if an error occurs with a change. Also Github is important because it acts as a backup for any code projects, while making it really easy to share projects with team members or just the general public.

Unfortunately I haven’t been using Git for about 2 months. First because I am just out of practice and haven’t been using the command line like I should be (ideally I’d be using it daily just to stay familiar..). Second I have not been on my computer, since the screen is broken. I have been on my husband’s home computer (which has a dual monitor set up, it’s dope). So I needed to download Git and reset up everything on his computer. So no excuses! I’m doing it now!

Now let me introduce a project I’ve been working on and why I would’ve use Git Branches from the beginning had I understood it.

I have this “digital bulletin board” project that I have been working on for a church. It’s a website that will be projected on the monitors in the vestibules at church. The first draft of this is just a javascript slideshow, that the staff at church can upload photos too to keep it current. The church already posts similar slides (photos) on their website and their actual bulletin, so this is just an extension of that and should be fairly easy to incorporate into their communication routine.

The javascript slideshow is running, and it works. But as a developer, I know how much better it could be. My wishlist is that I’ll write code that’ll make any sized image uploaded look full size on any sized monitor. The tv screens they are using are not all the same size, since most have been donated, so making everything responsive is very important!

Most recently I am developing a “welcome slide.” I want this to look very professional, to fill up the whole screen, and ideally have all dynamic content, meaning that I won’t have to go in and update it every week. I’m thinking it’ll post the current date, a current scripture reading, current mass times, etc. This same design is going to be used in the parish office, the church office, and the gym, so once I get something I’ll like, I’ll start tweaking it and adding different functionality for different purposes.

While developing this “welcome slide,” I have been creating different versions of my slideshow project, so that I can make changes without messing with my project code that already works. This is basically exactly what Git Branches are for! Instead of creating a new file every time and copying and pasting when something I works, I could create a new branch in Git, experiment until I have code I like, and then merge the branches to commit that code to the main project!

Seriously where have git branches been all my life?

Below I’m just going to document my steps using Git:

First I’m going to create a repository (since I haven’t been using Git already–oops!)

Create Repo in Git

 

  1. Using command line (terminal-Mac) navigate to the correct directory
  2. Initialize repo: type git init in terminal to create an empty Git repository (/sites/hs/slideshow)
    1. type git status just to make sure you’re in the right place and to see all the files available to commit
  3. Add each file individually by name with git add (+insert name!) OR use git add . to add everything listed in red
    1. I’m going to add individually because I only want to save my original slideshow project
    2. type git status to confirm you’ve add everything you want for this commit
  4. Time to commit changes!
      1. type git commit -m “insert your own comment here!” obviously writing your own appropriate comment here

     

    1. type git status just to make sure your files were committed. My working tree will not be clean since I did not commit all of my files

Now that my repo is set up, I want to start working on my more experimental code. So I am going to create a branch to do so.

Create a branch in Git

  1. Create and check out a new branch on the command line
    1. type git checkout -b welcome (welcome is just the name of my new branch—feel free to sub your own name!)
    2. type git branch just to confirm what branch you’re working in
  2. Use open . to open this branch in finder
  3. Now you can make whatever changes you want to your files and it will only affect this branch and not the master branch
    1. type git branch whenever you need to confirm you’re in the right branch
    2. use git checkout master when you need to switch back to the master or git checkout welcome to switch to the welcome branch
  4. Whenever you’ve made a significant change or are reaching a stopping point, remember to commit changes!! That’s the whole point of this!
    1. remember to first git add the files that have changed
    2. then git commit -m “comment about change” to commit the change
    3. and for peace of mind git status to make sure your working tree is clean 🙂

Develop(her): Simple Sticky Navigation

How to set up a simple sticky navigation or navbar using CSS.

Put everything that you want to “stick” to the top of the page in div class=navbar or fixed or whatever you want to call it.

.navbar {
height: 80px;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: white;
}

Silly issues you may encounter

The rest of the content on your page may show up in front of your navigation bar. OH NO! This is not pretty. This is not good show.

You can add

z-index:999;

to you navbar css code to fix this. I will research why this works later.

Adding video to a slideshow

Ok! Update already. On the wishlist for this slideshow project is to also include a video as well. And it was much easier than expected!

I’m quite confident that there is a better way to do this, but this is working currently.

If you check out my last post about the slideshow, you’ll see that each element has the class of “mySlides,” so I embedded a YouTube video, gave it the same class, and then set it up to autoplay. This is what that code looks like.

<iframe class=”mySlides” width=”560″ height=”315″ src=”https://www.youtube.com/embed/Okc8iSzPWRA?autoplay=1″ frameborder=”0″ gesture=”media” allow=”encrypted-media” allowfullscreen></iframe>

The “?autoplay=1” tells the youtube url to play as soon as the page loads. Only issue here is that the video starts playing long before you can see the video. This is probably not going to be an issue, since there will be no audio with this slideshow.

If you remember in my last post about the slideshow, you’ll remember that I had that page set to refresh every 70 seconds. So I will have to update that refresh time if I want to play through the entire video. And basically every time the video comes up in the slideshow, it’ll just show which ever part is happening since the video is constantly playing.

 

Online Slideshow

OK! Today for work I have been tasked to make a simple slideshow that will show each slide for about 9 seconds and will refresh regularly. The goal is to use this webpage to project onto the monitors at our church and regularly broadcast important information as well as a friendly greeting.

Simple enough. Just about a dozen steps to put together. Let’s do it.

Step 1

I began by making a quick website, so for me that typically means a new folder with an images folder, a new index.html, style.css, and script.js. We WILL be using JavaScript and Jquery for this simple set up. I also had to find the images I was going to use and place those in the images folder. Done!

Step 2

I made sure my site worked/linked correctly. That means I need a link to my stylesheet, my javascript file, and the jquery library. I also added the 3 sample photos I was using and made sure that the addresses for each was accurate (remember to start address assuming you’re not yet in the correct folder /hs/slideshow/images as opposed to /images/slideshow.png, etc <–yes, that’s a note specifically for me!).

A new thing that I also added was a meta tag which asks the page to refresh every 70 seconds

<meta http-equiv=”.mySlides {
display:none;
}refresh” content=”70″>

Step 3

$(document).ready(function(){
var slideIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName(“mySlides”);
for (i = 0; i < x.length; i++) {
x[i].style.display = “none”;
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = “block”;
setTimeout(carousel, 9000); // Change image every 9 seconds?
}
});

This is the jquery code I am using to create my slide show. So it will figure out how many images there are, rotate through each showing them for 9 seconds, and then do it again! For this to work I also had to add the class mySlides to my images:

<img class=”mySlides” src=”/hs/slideshow/images/slideshow01.png” width=80%>

Like so and I also added this attribute in the stylesheet

.mySlides {.mySlides { display:none;}

Since I don’t want them displayed until the code decides it’s the photos turn in the slideshow.

 

I hope that made a little bit of sense! I’m going to look into how to display my code on the page better because right now, I don’t like to include too much code because it just looks messy! I’ll work on it!

Happy coding!