Top 5 Web Design Frameworks

Articles, Blog

Top 5 Web Design Frameworks

Top 5 Web Design Frameworks

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 make up
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!

20 thoughts on Top 5 Web Design Frameworks

  1. Edreih Aldana, Nice all tutorial thanks for sharing… 🙂 sister i have two question.
     (1) Bootstrap3 and twitter bootstrap both are same?,
     (2) which text-editer is best for framework?
     -Thanks bye tack care 🙂

  2. Your videos are more knowledgeable. But bit upset of very low voice in your video. I am beginner. Thank you.

  3. Крутое видео! О uikit не знал, а на многие с перечисленных никак не мог зайти посмотреть

  4. Edreih, nice. I used to have bootstrap and primeng. But css itself could be utilised to create the responsive layout. Css grid and flexbox are the latest with css3 anims could resolve many requirements that were hard to build before.

  5. 0:11 you copied framework def from here RIGHT!!!!

  6. Sir! I must say, You are the best… I love the way you present.
    Thanx for your time. I became a huge fan.

Leave a Reply

Your email address will not be published. Required fields are marked *