Beyond the bare HTML
Sure the HTML is a foundation at is desirable to know how it works all it uses and expected and unexpected behaviour. But that is completely beyond the human capabilities. Fortunately the culture have its own memory and experience we can make use of.
As the web is basically the same, it shares the same structure over and over again if we want to write new website no matter if we are skilled or not, we would have to write it over and over again.
What a nonsense! It’s like make a new recording for every new mp3 file…..^$(&*{O*{)&)
Fortunately some people said to them selves “what is enough is enough” let’s step bit further and lets construct a next level foundation of elements we all code like sheep. As there are countless programmers there were countless such ideas but only some of the matured enough to be useable for others. One such foundation is the Bootstrap. Bootstrap has been introduced by people from Twitter which makes it super faithful and people start to expand on it immensely.
What this “next level” means? Ask Ninja.
Example – Minh’s web
For example Minh wants a website with a menu on top that will stay over there the whole time while the content freely scrolls underneath.
So he could write it like so:
<html>
<head>
<style>
.navigation{
position: fixed; // fix me
top:0; // no need to add "px", or "em", or .. zero is zero.
left:0;
z-index: 99; // the layer level. Better give your self some space for later when you would like to add other layer in between
width:100vw; // fancy "vw" stays for "vidow width"
}
</style>
</head>
<body>
<div class="navigation">
<ul>
<li>menu item</li>
<li>menu item</li>
<li>menu item</li>
</ul>
</div>
<div class="normal-scrollable-content">
some content
</div>
</body>
</html>That all looks good, now.
But what if we wanted it to behave the same on all browsers devices and expand its capabilities.
Are you sure that you can really guarantee that it’ll perform the same on all browsers and devices?
Do you really want to repeat your self in every project, do what have you done already?
Do you know all all the last browser changes and code standards?
..
I assume all questions were answered with “no”.
What Bootsrap does for you is that it gives you set of classes such as “.navbar-fixed-top” that turn the element with such class in to the fixed top menu. Only by giving the element a class, how cool is that?
There is even more. Form, tab, button classes you can reuse and tweak to your needs. But most importantly it gives you well thought out grid logic, you find in most website projects. Plus, it has a grate documentation which you can read anytime you are lost or simply don’t know how. Next super cool feature is also the fact that if you end up working on someoneelses project done in Bootstrap you know right away how it is meant because it follows the known logic. If the guy would make the website completely on his own without any reference you might end up completely lost not knowing what he meant by classes such as “.bigger” “._234item” “.wider” “.half_of_the_desert”,…
“So gime me the Boostrap example!”
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<style>
body{
background-color:#222;
}
img{
max-width:100%;
height:auto;
}
.cat{
background-image:url(http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg);
height:300px;
}
</style>
</head>
<body>
<nav class="navbar navbar-fixed-top">
<div class="container">
kajshbvflkjadsflkjb
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8 cat">
<div class="row">
<div class="col-md-4">kjbsdfkbjhvadhgak agd iuh aidug iug asdi giu tgiuag iug iasudg iu taiusdg iug s</div>
<div class="col-md-4">lkabsfdjhvadhgak agd iuh aidug iug asdi giu tgiuag iug iasudg iu taiusdg iug s</div>
<div class="col-md-4">asdasdjhvadhgak agd iuh aidug iug asdi giu tgiuag iug iasudg iu taiusdg iug s</div>
</div>
</div>
<div class="col-md-4 cat">
Charakterizujte na úvod, o jaké produkty se jedná.
KaSL jsou absolutní novinkou vlastního vývoje a výroby v oblasti kartonáže a svou výjimečností a charakteristikami mají předpoklad se uplatnit na trhu s obaly u nás i ve světě. Zkráceně jedná se o lepenky neskonale pevné v obou směrech zatížení, nebývale tenké, nesmírně houževnaté a odolné k mechanickým vlivům i vlivům okolí.
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg">
</div>
<div class="col-md-4">
<img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg">
</div>
<div class="col-md-4">
<img src="http://assets.barcroftmedia.com.s3-website-eu-west-1.amazonaws.com/assets/images/recent-images-11.jpg">
</div>
</div>
</div>
</body>
</html>In this example you see not just the menu but some content divided in to a grid that actually follows the Minhs intention.
To have a menu on top and a box of projects with some images etc.
Let’s get back to the menu case.
As you see there is actually no CSS defining the menu. If you copy&paste the code and create a file.html you’ll the menu magically sticked on top. How’s that?
If you look to the HTML HEAD you’ll se a link to externally located Bootstrap CSS. Since then we can use all the bootstrap logic like if it is ours. And so the common element with class “.navbar-fixed-top” turned to a fixed automagically without need to code.
There can be a book written on this topic, but for now be sure you have checked the Bootstrap website especially its grid system.
See the class “.col-md-6” that is half of 12 :) the default grid structure divided by 12. Seams stupid to you. Well just about the number 12? It is a grate number divisible in to many variations such as “2*6” “3*4”, “4*3”, .. such number can by divided in to many whole numbers/portions which is what you need from grid. Plus it can be nested and multi-combined like (1*1 + 2*5 + 1*1) = 12 …I know Math ;) but Math makes the stuff beautiful .. Hmm I might touch that in next lesson.
Miloš’s Dog game
Another example we might be showing in here is a Milos’s dog game.
This is actually a perfect example of a the 5% web projects that does not need Bootstrap, even more it’ll be stupid to do so.
Milos want’s a build Mario Bros like a game where the character goes from left to right jump, eats, sniffs and all that stuff.
If you remember how such a games look like, the use a lot something that is called Parallax movement (see detailed explanation). Two pictures moving kind of independently to one another which gives a sense of artificial space of the scene. Buildings seams to move faster as they are closer to viewer compared to the sky which is obviously way further etc. Like in real life.
Lets start to build this game from scratch.
<html>
<head>
<style>
body{
background-image: url(http://kingofwallpapers.com/sky/sky-010.jpg);
background-attachment: fixed;
}
/*div, *{
margin: 0;
padding:0;
}*/
.ground{
background-image: url(http://2046.cz/freestuff/desert.png);
background-repeat: no-repeat;
background-size: cover;
width:100vw;
height:100vh;
}
.menu_holder{
width:100vw;
height:10vh;
}
.button{
background-color: orange;
border:2px solid black;
padding:5px;
}
.button.big{
padding:10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="ground">
<div class="playground">
<!-- here will run the dog -->
</div>
<div class="menu_holder">
<a class="button" href="#">play</a>
<a class="button big" href="#">stop</a>
</div>
</div>
</div>
</body>
</html>
Test it your self.
What we have done here is that we use a sky picture as a whole body background and put inside a container with a part transparent picture of a desert with a tree. As the sky background is fixed and the container with the desert background can move it creates the Parallax trick. Isn’t it simple?
What we also added is a box for menu. The menu is flying over the desert and has two kinds of buttons (for now).
More tricks next time.
As always useful links:
And again the frog CSS flex game.. super-useful and funny.