What is a framework?
From the very early tutorials, we’ve met many free & cool stuff: Atom Editor, Github Pages, Free Images Hosting, etc… And now, we’re gonna add some more things to the list. :D
A framework is free code that is shared by skilled developers to help us build
things easier. Just imagine that you were the code star, you’d have created
common components: navigation bar, dropdown, image slider, etc… And now, you
want to share your code by allowing me to download your CSS file and a document
to show me examples about those components. So, I can use your components by
embedding your CSS file to my HTML documents and copy/paste some HTML snippets
from your examples.
It does not mean that my website will have the same look as yours. I can add my
own CSS file to override the outlook of any component and my website still look
very personalized.
HTML code:
In the HTML snippet above, let’s assume that the .navbar is a component that
was pre-styled in your-framework.css with nice paddings, responsive ready and
light background. Now, I want to override its background to Black to fit my
taste. I only need to write a single CSS rule in my personalized.css.
CSS code
That is the idea how we share and use a framework. It’s quite simple, isn’t it? :D
Which framework to start with?
There are many CSS frameworks out there, maybe thousands of them. You can start with the most popular one - Bootstrap. This framework provides common components that help you quickly build responsive websites. After getting familiar with using document and applying the framework to create some websites, you can try other frameworks to find the one which really touch the bottom of your heart.
You can learn Bootstrap yourself using its official website
http://getbootstrap.com/. My blog also has
Bootstrap tutorials but I’m not gonna create another Bootstrap document; My
purpose is to share the most simple way to apply Bootstrap to create a website.
Hopefully that you will join me in learning Bootstrap the simple way.
You can start learning Bootstrap right now even though our CSS series will be continued with few more tutorials to cover basic knowledge about creating transition effects for interactive components and animations.
Start learning Bootstrap here!
Using icons
People also love Font Awesome - a CSS framework and iconic font. This framework can help us to quickly insert nice icons into user interface components like buttons, social links, etc…
Using Font Awesome is so simple and explainable in just a single section; So, we’re gonna make an example for it right now.
Firstly, we need to add Font Awesome’s CSS file into our document using this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Inside body of the document, whenever you want to insert an icon, just create an
element using <i> tags with provided class names from
Font Awesome homepage:
<i class="fa fa-facebook"></i>
Let’s create a simple footer with some social links to use on your website.
HTML code:
CSS code:
Result:
See the Pen Somewhere by Kei Nart (@codenart) on CodePen.
Our tutorial about Frameworks & Icons has finished. In the next tutorial, we’ll talk about creating transition effects for interactive components.