Bootstrap question


#1

I was looking at your bootstrap sample code under examples/js/bootstrap and I was curious about how to go about learning the different features offered by these themes. For example, in this sample code, you use the following:

  1. class=“jumbotron”
  2. class=“btn btn-primary btn-lg”
  3. class=“row” ----> to place Stanley’s pics

You also mention that bootstrap offers javascript for interactive experience. Is there documentation specific to each theme? Also, what is your preference between using jekyll and bootstrap?

Kf


#2

Different themes don’t give you different components. They just make the existing components look different. Bootstrap is a collection of components with a default style. You use themes to change that style, but they don’t add any new components, if that makes sense.

(Well, technically it’s possible for a theme to add stuff, but none of the examples I used do that.)

But if you want to learn about the different components available in Bootstrap, the Bootstrap components page should be your first stop. W3Schools is also a great resource.

As for Jekyll and Bootstrap, they’re different tools for different jobs. Jekyll turns markdown into HTML. Bootstrap styles the HTML. You don’t have to choose between them. In fact, this site uses both Jekyll and Bootstrap!


#3

Great, I see what you mean. I was thinking about themes because I was exploring the jekyll themes available in GitHub. I thought bootstrap and jekyll were providing the same functionality but now I see I was wrong. So can we say boostrap is like a fancy pre-designed CSS sheet? Jekyll on the other hand, it is still a black box to me. I haven’t seen any samples of using markdown to write pages. I read that jekyll is good for static webpages. I understand that with jekyll, you write your markdown and jekyll produces the html for you. Would that be like through a compilation process? Jekyll can also serve your webpages in your local machine. Could you use a local host (like apache or wamp) to see your page?

Related to the compilation process… I can see you need to install some other programs to make it work. I think I saw RoR?

Related to static pages, you can still use js, right? A dynamic page is one that uses php or does DB operations? (I don’t know much about php… except I used it to do my first get/post webpage…)

Btw, are you a linux or windows user?

Kf


#4

Lots of good questions! Let me try to reply to all of them:

That’s half of it, yeah. Bootstrap is a bunch of CSS that styles components a certain way. The other half is the JavaScript library that makes those components interactive.

You wouldn’t really know as a user whether Jekyll was being used behind the scenes. It would all just look like HTML and JavaScript in the end. For example, every page on this site (not the forum, but the regular site) uses markdown! Scroll down to the bottom of the page for a link to the original markdown in GitHub.

Yep, you can compile and server your Jekyll pages locally, or you can publish them on something like GitHub pages. I do both.

Yeah, you need a few other things. But most of that is just a one-time installation that you never have to worry about again.

Sure, JavaScript is fine. Static can mean quite a few different things. But in this context a “static” file is just any regular file that looks the same whenever you open it. More specifically, you don’t need any server-side code for it to work (other than a basic file server).

I use both! I generally prefer Windows though.


#5

So is this markdown?

---
layout: default
title: Happy Coding
meta-title: Happy Coding
meta-description: You can code. HappyCoding.io is a collection of tutorials and examples that start at the absolute basics and take you through advanced coding techniques.
meta-image: /images/random-walkers-1.png
---
<div class="jumbotron">
	<h1>You can code.</h1>
	<p>Code is more than just ones and zeroes. Code is a <strong>creative process</strong> that allows you to express yourself, reach other people, generate art, and make stuff in new ways every day.</p>
	<p>Happy Coding is a collection of tutorials and examples that start at the absolute basics and take you through advanced coding techniques.</p>
	<p>So far we have tutorials for <a href="/tutorials/processing">Processing</a>, <a href="/tutorials/java">Java</a>, <a href="/tutorials/html">HTML</a>, and <a href="/tutorials/javascript">JavaScript</a>. P5.js, Android, and server development tutorials are coming soon!</p>
	<p>We also have <a href="/examples">example programs</a> that you can build from, as well as <a href="/teaching">teaching guides</a> if you want to use the site in your classroom.</p>
	<p><a class="btn btn-primary btn-lg" href="/tutorials" role="button">Start coding!</a></p>
</div>
<hr />

I have the impression this is just HTML except you are not using head and body tags… or I am just seeing the HTML generated by jekyll?

Interesting you are becoming Windows… I was using linux a lot before but I find I am able to run everything in Windows so linux is taking the backstage. However, is it common to use linux to work with server material?

Kf


#6

No, that’s HTML. The homepage uses HTML just because it’s mostly HTML and not mostly content. Check out any of the tutorials to see markdown.

For example, here’s the Bootstrap tutorial: https://github.com/KevinWorkman/HappyCoding/blob/gh-pages/tutorials/javascript/_posts/2017-01-15-bootstrap.md


#7

As for Window vs Linux, I usually test locally on my Windows machine, but then host it in a cloud solution like AWS or App Engine. Those are mostly running Linux. But really it doesn’t matter what’s running underneath, since I don’t work with the underlying filesystem at all. Everything is abstracted away, so you don’t have to care whether it’s Windows or Linux behind the scenes.


#8

I can see the pages side by side now and I understand what you mean with markdown. You also have some commands to execute bootstrap code, like running the codePen consoles. You see, going through this example and I got one of your tutorials down. Bang!

Thanks for your comments. I will stop bothering you for a while as I have more of your tutorials to work on and hopefully they will address some of my questions.

Kf


#9

Haha, it’s no bother. Good luck!