CSS framework By Palash
- 2. . A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language.In its simplest form, a CSS framework is a collection of CSS stylesheets that are prepped and ready to use. INTRODUCTION INTRODUCTION
- 3. CSS allows you to create rules that specify how the content of an element should appear Cascading style sheet is a web page derived from multiple sources with a defined order of precedence where the definition of any style element conflict. What is ?
- 4. Problems in css development Code reuse Coding takes too long No standard Long Debugging Special code for different size screen
- 5. CSS frameworks are tools used by UI developers to make their job easier. Rather than reinventing the wheel each time a new project comes up; frameworks give developers the tools to quickly spin-up user interfaces that can be tweaked and iterated on throughout a project instead of spending time starting from a blank document. In its simplest form, a CSS framework is a collection of CSS stylesheets that are prepped and ready to use. CSS CSS CSS FRAMEWORKS FRAMEWORKS FRAMEWORKS
- 6. How do CSS frameworks work? CSS framework gives web developers a basic structure, which includes grid, interactive UI patterns, web typography, tooltips, buttons, form elements, icons. This structure helps web developers to start quickly and efficiently when they are designing a website or web applications. That means developers can free themselves from starting everything from scratch. CSS framework will create a solid foundation for them. Besides, developers can also reuse code in all projects they work on.
- 7. Need of CSS FRAMEWORKS They provide code that you just don’t need to write from scratch every time, like resets They encourage grid based design They come with documentation They relieve cross-browser concerns. They can help you learn CSS.
- 8. 1. Bootstrap 6. Tailwind 2. Foundation 7. Picnic CSS 3. UIkit 8. PaperCSS 4. Semantic UI 9. NES .css 5. Bulma 10. Animated.css TOP CSS FRAMEWORKS 2020
- 9. BOOTSTRAP 1. Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
- 10. <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="jumbotron text-center"> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3>Column 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> <div class="col-sm-4"> <h3>Column 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p> </div> </div> </div> </body> </html> SAMPLE BOOTSTRAP CODE { Bootstrap CDN OUTPUT
- 11. 2. FOUNDATION Foundation is a responsive front-end framework. Foundation provides a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions. Foundation is modular and consists essentially of a series of Sass stylesheets that implement the various components of the toolkit.
- 12. Live Demo <!DOCTYPE html> <html> <head> <title>Foundation Template</title> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256- 1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous"> <!-- Compressed JavaScript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256- WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384- 53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512- X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"> </script> </head> <body> <h1>Hello, world!</h1> </body> </html> SAMPLE FOUNDATION CODE Hello, world! OUTPUT
- 13. 3. UIKIT The UIKit framework is lightweight, easy to customize, and easy to append. It’s follows a modular structure where you’ll build page elements with reusable classes. It’s perfect for structuring a new page without having to code your own grid or roll your own font stacks. This framework even comes with a unique icon set you can add into your page using a web font.
- 14. <!DOCTYPE html> <html> <head> <title>Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device- width, initial-scale=1"> <link rel="stylesheet" href="css/uikit.min.css" /> <script src="js/uikit.min.js"></script> <script src="js/uikit-icons.min.js"></script> </head> <body> <h1 class="uk-heading-divider">Heading Divider</h1> </body> </html> Once you have included UIkit into your document, take a look at the available components and create your own markup inside the <body> element of your page. SAMPLE FOUNDATION CODE OUTPUT
- 15. 4. SEMANTIC UI Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices. Semantic is written in LESS.
- 16. SAMPLE FOUNDATION CODE <div class="ui labeled button" tabindex="0"> <div class="ui red button"> <i class="heart icon"></i> Like </div> <a class="ui basic red left pointing label"> 1,048 </a> </div> <div class="ui labeled button" tabindex="0"> <div class="ui basic blue button"> <i class="fork icon"></i> Forks </div> <a class="ui basic left pointing blue label"> 1,048 </a> </div> <div class="ui three buttons"> <button class="ui active button">One</button> <button class="ui button">Two</button> <button class="ui button">Three</button> </div> OUTPUT OUTPUT
- 17. The Bulma framework is a free CSS solution based on the Flexbox layout. With Bulma, the extensive range of built-in features means faster turnaround and less CSS code writing. Bulma is an exclusively CSS framework; the only output is one CSS file (bulma.css). 5. BULMA
- 18. <div class="card"> <div class="card-content"> <p class="title"> “There are two hard things in computer science: cache invalidation, naming things, and off-by-one errors.” </p> <p class="subtitle"> Jeff Atwood </p> </div> <footer class="card-footer"> <p class="card-footer-item"> <span> View on <a href="https://twitter.com/codinghorror/status/506010907021828096">Twitter</a> </span> </p> <p class="card-footer-item"> <span> Share on <a href="#">Facebook</a> </span> </p> </footer> </div> SAMPLE FOUNDATION CODE OUTPUT
- 19. H O W T O D E C I D E W H I C H H O W T O D E C I D E W H I C H H O W T O D E C I D E W H I C H F R A M E W O R K T O U S E F R A M E W O R K T O U S E F R A M E W O R K T O U S E There's more to choosing a framework than just knowing the options it offers. You'll need to consider factors like these: • What type of framework your site needs • Framework language • Framework features • Whether the framework is customizable and modular
- 20. SOME DISADVANTAGES OF CSS FRAMWORKS It changes the way you write your HTML They can be bloat-y In order to really benefit, and actually save time, you’ll need to use one framework over and over.
- 21. Book - HTML & CSS Design and Build Websites Jon Ducket https://medium.com/html-all-the-things/what-is-a-css-framework- f758ef0b1a11 https://www.tutorialspoint.com/css/what_is_css.htm https://en.wikipedia.org/wiki/Foundation_(framework) https://cssframeworks.org/ References https://www.mockplus.com/blog/post/css-framework Thank Thank Thank you! you! you!