Top 5 Web Design Frameworks

June 18, 2019

Words for video below for the hearing impaired

Hello friends! In this video I will talk about the top five most used web design frameworks. But first what is a framework? In the world of web design a framework is a package made up of a structure of files and folders of standardized code in that those code files can be in HTML, CSS, JavaScript, or other documents and these can be used to support the development of web sites and as a basis to start building a website. So basically they lay the foundation of beginning a website.

A framework allows you to have everything you need to begin. Now I will talk about the, in my opinion, 5 most popular frameworks that a lot of web designers and developers use. After that, I will demonstrate using one and perhaps later on I will talk... I will make more in-depth videos using these frameworks.

So let's begin! The first framework I will talk about is... Twitter bootstrap. Bootstrap is a responsive framework, it is open source so many people have built upon it and improved it.

And bootstrap has a variety of different templates to get you started.

It is full of features which include jQuery plugins and uses SASS, which is a CSS preprocessor that is faster to use then vanilla CSS and many people prefer it. You can customize what you download by choosing just the components you need for your project or getting the whole package to experiment with it.

Bootstrap is very well documented so if you have any questions, chances are they are addressed on the site, if not, many people use this framework and there are a lot forums where it is a common topic.

And here's the download link for you to visit if you're interested. The next framework I'll talk about is... Foundation 5 by Zurb.

Foundation is responsive and fast in that it loads quickly in a browser. It is open source, they have a selection of templates to get you started, it is based on a mobile-first design in that you design the site for mobile first and build it up from that to end up with a finished desktop site. This is to ensure that the site is ready for any platform that is displayed on. You can customize your build and choose the components you want download for starting your project.

This framework is also very well documented so all of the information on the framework is there if need it and you can download this framework at this URL.

The third web design framework is called... UI kit. This framework is responsive, mobile ready, and fast. It is open source. It has a customizer that allows you to build your project with little to no CSS knowledge if you need that. It also has a good amount of documentation for help on using its various features. You can download this framework by visiting this site which also hosts the customizer.

The next framework I will discuss is called... Ink. This framework is responsive so it is ready for any platform. It provides a selection of templates to get you started, it is very quick and easy to use and you can read it easily.

So it's useful for even a beginner web designer or developer.

It is also very well documented so you have something to refer to if you want to learn how to do something within the framework. This is the website to visit for more information. The fifth framework I'll talk to you about is called Gumby.

Gumby is responsive and ready for any platform or screen size. It is based on a grid system so you can lay out your content any way that you want. It has a UI which stands for User Interface kit to help your project look great and those elements can be changed of course if you are also a graphic designer and if you want to customize your site even more. Gumby is also powered by Sass. And it has many more features.

You can choose the features you want by customizing your build as well.

It is also very well documented and here is the URL to visit if you want download it. As a bonus I'll talk about another one called Semantic UI and this light framework uses easy to understand language to build web sites and here is an example of that in these pictures.

Bootstrap uses more developer oriented syntax in naming the CSS classes used and Semantic UI uses more user-friendly and easier to understand language as you can see in the diagram. Semantic UI has many components and themes to choose from and it has many unique features specific to semantic UI.

It is also very well documented and I encourage you to give these frameworks a try. And here is the website for more information. Now I will demonstrate downloading and using a framework.

The framework I will use is called Foundation 5 which I discussed earlier. First what we'll do is visit the website to download the framework. You can either download their package or customize what you want.

Just click here to go to the download page.

Here you can choose which you want. There is Complete, Essential, Sass, or a custom build. These are the options for the custom package of Foundation 5.

Once you have decided, download it and save it somewhere you want to work on your project. Once you have downloaded it find where you saved it, extract the zip file. And now you can begin working on your project from the foundation. If you'd like you can download a template.

To do so, go back to the site and click here where it says HTML templates. Now choose one that fits your project. Click on HTML and copy all the code go back to the folder that has the foundation framework and open the index.HTML file in your favorite code editor.

I use brackets.

Erase the code within the body tags and paste the code you copied earlier. Now save and preview the page. As you can see it is exactly like the template looked and you know have a basis for your new project if you need it. Now all you do is customize and make it yours. This is the basics of using a framework. Of course, you don't need to use a template.

But if you're beginning to learn how a framework works it is recommended. In the next videos I will show you more in-depth usage of the frameworks I talked about throughout this video. Now I will review some of the key terms used throughout the video.

First word is vanilla and this, besides being a flavor in food, it means the original version without anything added to it. Components are things that make up a whole thing.

For example, the components of a cake would be the ingredients that were put into it. Forums are discussion boards based around a community where you can ask questions and discuss various topics. Documentation is information that provides instructions and explains a product or software.

Elements can be things that makeup something else.

A basis is the underlying support or foundation for an idea, argument, or process. A platform can be a standard for the hardware of a computer system such as Linux, Macintosh, or Windows. It can also be a type of device such as a tablet, a phone, or a desktop PC. User interfaces are what we, as a user, interact with. This can be what we see when we use software and the graphic design elements it uses.

Open source is when the source code of a project is free to modify and redistribute.

Mobile-first design is when you design a site or software for a mobile platform first and build upon that to create the bigger version of it. So that's it for key terms! I hope you enjoyed learning about frameworks in web design. See you next time! .

As found on Youtube

Edmonton AB T6B 2R7 CA
Rated 5/ based on 5 customer reviews.
Google Rating
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram