Front end frameworks

Introduction of The Framework
Frameworks are basically big bunches of pre-
written code to help you get started on your
projects faster.There are two types of frameworks.
1. Front-end frameworks
2. Back-end frameworks

Back end is more about the “behind the scenes.”
Ex :
● Django (Python)
● Flask (Python)
● Express (Node.js/JavaScript) ...
● Ruby on Rails (Ruby) ...
● ASP.NET. ...
● Mojolicious (Perl)
Back-end frameworks

Front end framework
Front-end development is all about the parts of a website that users see.
Ex :
● Bootstrap
● HTML KickStart
● Responsive Grid System
● Foundation
● MontageJS
● Sencha Touch
● Ionic
● Skeleton
● KUBE
● Essence
● Semantic UI
● Modest Grid
● UIKit

● A superb front end framework designed by ZURB, a
development agency in Silicon Valley.
● It is very much professional in terms of creation and can
be used for web development with multiple devices.
● Foundation as a responsive framework is utilized by
world players like Amazon, Ford and Samsung so on.
Introduction of Foundation Framework

● Foundation was designed for and tested on numerous browsers and devices. It is a mobile first
responsive framework built with Sass/SCSS giving designers best practices for rapid
development. The framework includes most common patterns needed to rapidly prototype a
responsive site. Through the use of Sass mixins, Foundation components are easily styled and
simple to extend.
● Since version 2.0 it also supports responsive design. This means the graphic design of web
pages adjusts dynamically, taking into account the characteristics of the device used (PC, tablet,
mobile phone). Additionally, since 4.0 it has taken a mobile-first approach, designing and
developing for mobile devices first, and enhancing the web pages and applications for larger
screens.
● Foundation is open source and available on GitHub. Developers are encouraged to participate in
the project and make their own contributions to the platform.
Features of Foundation

● Grid system and responsive design
● Understanding CSS stylesheet
● Reusable components
● JavaScript components and plugins
Structure and function of foundation
framework

There are three levels of integration for Foundation:
● CSS
● SASS
● Foundation Rails Gem
Use of Foundation framework

Benefits of using Foundation Framework
● Foundation offer developers finest customization
options
● An extensive set of templates and ready made codes
● Every developer can pick their choice at the time of
downloading it self
● Supports rapid development of projects
● A robust grid system and is superior in many aspects

Brands Using Foundation
● Adobe
● Ebay
● Hp
● Cisco
● Macys
● Disney
● Samsung
● Amazon
● EA
● Pixar
● The North Face
● University of Cambridge
● Ford
● PBS
● National Geographic
● Mozilla
● The washington post
● Los alamos

● First, after you unzip the package, move the folder to your desired
location and open it in a text editor. If you don't have one already, we
use Sublime Text here at ZURB because it's very customizable,
powerful, and simply rocks.
● The index.html is your homepage. It has been linked up with
foundation.css, normalize, and all the necessary JavaScript files for you.
Just add your code between the <body> tags.
● Next, you should create a new stylesheet and link it in the header of
your HTML file.
How to use foundation in css

<head>
<link rel="stylesheet" href="css/foundation.css">

<link rel="stylesheet" href="css/app.css">
<script src="js/vendor/modernizr.js"></script>
</head>
Code example for css

Frameworks are incredibly helpful tools for front-end design,
especially if you have a job where you’re frequently developing that
side. They allow you to speed up your workflow and increase your
productivity without sacrificing quality or functionality, while still
leaving the door open for a unique, customized look. Just remember
to use them as a tool to complement your skills, not as a way to cut
corners—and enjoy!
Conclusion

Group Members
● Chamika Lakmali (TG 265)
● Dilshara Samarawickrama (TG 237)
● Kelum Nagodavithana (TG 255)
● Madushani Sandaruwani (TG 233)

Front end frameworks

More Related Content

Front end frameworks