Front end frameworks
Download as PPTX, PDF0 likes90 views
Foundation is a popular front-end framework for building responsive, mobile-first sites. It includes a grid system, pre-built components, and is designed to be customizable. Developers can integrate Foundation through CSS, Sass, or a Rails gem. Using a framework like Foundation allows developers to build interfaces faster while maintaining quality and flexibility.
Front end frameworks
- 2. 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
- 3. 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
- 4. 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
- 5. ● 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
- 6. ● 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
- 7. ● Grid system and responsive design ● Understanding CSS stylesheet ● Reusable components ● JavaScript components and plugins Structure and function of foundation framework
- 8. There are three levels of integration for Foundation: ● CSS ● SASS ● Foundation Rails Gem Use of Foundation framework
- 9. 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
- 10. 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
- 11. ● 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
- 12. <head> <link rel="stylesheet" href="css/foundation.css"> <!-- This is how you would link your custom stylesheet --> <link rel="stylesheet" href="css/app.css"> <script src="js/vendor/modernizr.js"></script> </head> Code example for css
- 13. 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
- 15. Group Members ● Chamika Lakmali (TG 265) ● Dilshara Samarawickrama (TG 237) ● Kelum Nagodavithana (TG 255) ● Madushani Sandaruwani (TG 233)
- 16. Thank You..