Reboot-Typography.pptx reboot typography to help you in research

reboot typography to help you in research

1. Bootstrap (frontend framework) CSS- based framework HTML , CSS, and JavaScript framework

2. Introduction to Bootstrap Bootstrap is a free and open-source tool collection for creating responsive websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive layout , mobile-first websites. It is a front-end framework used for easier and faster web development. Nowadays, the websites are perfect for all the browsers (IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, and Phones) this is because of Bootstrap and other framework (like Skeleton. Bulma . Groundwork. Cardinal. PowertoCSS . Mueller. Bootflat . And many others. (The most popular framework is Bootstrap).

3. What is Responsive Web Design? Responsive web design is a process of designing and building websites to provide better accessibility and optimal viewing experience to the user by optimizing it for different devices . Responsive layouts automatically adjust and adapts to any device screen size, whether it is a desktop, a laptop, a tablet, or a mobile phone. See the following Illustration .

4. Responsive Design in BootStrap It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

5. Responsive Design in BootStrap Responsive web design makes your web page look good on all devices. Responsive web design uses only HTML and CSS. Responsive web design is not a program or a JavaScript. Designing For The Best Experience For All Users Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device:

6. What is mobile first design? M obile-first design is  an approach in which web designers start product design for mobile devices first . Mobile-first design is a design philosophy that aims to create better user experiences by beginning the design process with mobile devices in mind first, often prioritizing the smallest of screens . B egin with how it will look on a mobile device screen and then move to bigger screens later.

7. History of Bootstrap Twitter Blueprint was the first name for Bootstrap and was developed on Twitter by Mr. Mark Otto and Jacob Thornton. It was released as an open-source product on  GitHub in August 2011. In June 2014 Bootstrap was the No.1 project on GitHub . M ake it simple to create websites compatible with multiple browsers and browser versions . Before its existence, developers used various external libraries to perform responsive web development, leading to incompatibilities in web development and heavy maintenance burdens.

8. Why we use Bootstrap? Open source: It is an open-source framework with web-based customization Browser supportive : Every browser supports this Bootstrap Framework. Responsive design and looks: Web pages designed using the Bootstrap framework have responsive CSS that can adjust to the screen size of large desktops, notebooks, tablets, and mobiles.

9. Why we use Bootstrap? Mobile-first approach: The Bootstrap framework has a preexisting mobile-first style all through the library and not as separate files . Easy customization: It provides some built-in components and functionalities that are easy to customize as per user need. Simple and easy to start: If you know HTML and CSS, you can quickly start working with Bootstrap, and its all documentation is available on the official site- https ://getbootstrap.com.

10. Version of Bootstrap- Bootstrap, from v1 through v5.Current version is version-5 . Bootstrap 3 is the most stable version of Bootstrap. Bootstrap 4, which was released in 2018 is a newer version of Bootstrap; with new components, faster stylesheet and more responsiveness.  Bootstrap 4 supports both IE 10 and 11.   Bootstrap 5 doesn't support IE 10 and 11 . Bootstrap 5  (released 2021)  is the  newest  version of Bootstrap; with a smooth overhaul. However, Internet Explorer 11 and down is not supported, and jQuery is replaced with JavaScript .

11. Bootstrap includes HTML, CSS and JS based design templates for- Layout Containers Breakpoints Grid Columns Gutters Utilities Z-index CSS Grid Content Reboot Typography Images Tables Figures Forms Form control Select Checks & radios Range Input group Floating labels Layout Validation Components Accordion Alerts Badge Breadcrumb Buttons Button group Card Carousel Close button Collapse Dropdowns Navbar Navs & tabs Pagination Placeholders Scrollspy Spinners Tooltips

12. How to use Bootstrap 4 on a webpage? There are two ways to include Bootstrap on the website.- 1 .BootStrap 4 from CDN:  This method of installing Bootstrap is easy. It is highly recommended to follow this method.  2.Download Bootstrap from getbootstrap.com and use it. Go to  www.getbootstrap.com  and click Getting Started. Scroll down and copy the Bootstrap CDN for CSS, JS, Popper.js, and jQuery links.

13. 1.Bootstrap from CDN- Go to  www.getbootstrap.com  and click Getting Started. Scroll down and copy the Bootstrap CDN for CSS, JS, Popper.js, and jQuery links. 1.Bootstrap CSS Library: 2.JQuery Library:

14. JS Library: Latest Compiled JavaScript Library:

15. 2.Download Bootstrap This method of installing bootstrap is also easy, but it can work offline ( doesn’t require an internet connection ) but it might not work for some browsers.  Go to www.getbootstrap.com and click Getting Started. Click on the Download Bootstrap button.

16. Download BootStrap A.zip file would get downloaded. Extract it and go into the distribution folder. It contains two folders named CSS and JS.

17. 1.start working with Bootstrap- Create a new index.html file in your project root . To add Responsive meta tag,we wil have to include-   i . Add the HTML5 doctype Bootstrap 5 uses HTML elements and CSS properties that require the HTML5 doctype . Always include the HTML5 doctype at the beginning of the page, along with the lang attribute and the correct character set. The charset attribute specifies the character encoding for the HTML document. The HTML5 specification encourages web developers to use the UTF-8 character set, which covers almost all of the characters and symbols in the world! <!DOCTYPE html> <html  lang ="en">   <head>     <meta charset="utf-8">   </head> </html >

18. ii. Bootstrap 5 is mobile-first - Bootstrap 5 is designed to be responsive to mobile devices. Mobile-first styles are part of the core framework. The browser's  viewport  is the area of the window in which web content can be seen. Not all devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations . To ensure proper rendering and touch zooming, add the following <meta> tag inside the <head> element: < meta name="viewport" content="width=device-width, initial-scale=1 "> The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

19. To test working of bootstrap- Example - Apply css class from bootstrap and apply in your code <body > <h1>Hello, world!</h1> < button type="button" class=" btn btn -light">Click Me!</button > <button type="button" class=" btn btn -light">Click Me!</button > <button type="button" class=" btn btn -light">Click Me!</button> </body>

20. 1.Breakpoints- Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap. Core concepts Breakpoints are the building blocks of responsive design.   -(sizes of screen) Use media queries to architect your CSS by breakpoint.  Media queries are allow you to conditionally apply styles based on a set of browser and operating system parameters. We most commonly use min-width in our media queries. Mobile first, responsive design is the goal.  Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices.

21. Breakpoints in BootStrap Breakpoints are the triggers in Bootstrap for how your layout responsive changes across device or viewport sizes. Use them to control when your layout can be adapted at a particular viewport or device size. CSS breakpoints, alias media query breakpoints, are different conditions related to the various media features of devices or  viewports . Breakpoints arrange contents according to the size and the screen resolution of the device to provide a better user experience .  Bootstrap commonly uses min-width in its media queries. Bootstrap framework (v5.0) includes six default media query breakpoints or grid tiers for your responsive web designs. 

22. Available breakpoints- Bootstrap includes six default breakpoints, sometimes referred to as  grid tiers , for building responsively. These breakpoints can be customized- Breakpoint Class infix Dimensions X-Small None 0-576px Small sm ≥ 576px Medium md ≥768px Large lg ≥992px Extra large xl ≥1200px Extra extra large xxl ≥1400px

23. 1.Container in BootStrap In Bootstrap, container is used to set the content's margins dealing with the responsive behaviors of your layout. The  container class  is used to create boxed content. It provides margins, padding, alignments, and more, to HTML elements.

24. Container in Bootstrap- There are two container classes in Bootstrap: Container(Fixed Layout): The .container class provides a responsive fixed width container. This uses the bootstrap  .container  class for the layout. Its width (max-width) will change on different screen sizes container-fluid(Fluid Layout): The . container-fluid class provides a full-width container which spans the entire width of the viewport. This uses the bootstrap  .container-fluid  class for the layout.

25. 1. Container(Fixed Layout): - Its width (max-width) will change on different screen sizes. Example- < div class=" container ">   <h1>My First Bootstrap Page</h1>   <p>This is some text.</p> </div >

26. 2. container-fluid(Fluid Layout): Use the .container-fluid class to create a full width container, that will always span the entire width of the screen (width is always 100 %). Example- <div class=" container-fluid ">  <h1>My First Bootstrap Page</h1>  <p>This is some text.</p> </div>

27. The table below illustrates how each container’s max-width compares to the original .container and .container-fluid across each breakpoint . Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px .container 100% 540px 720px 960px 1140px .container- sm 100% 540px 720px 960px 1140px .container-md 100% 100% 720px 960px 1140px .container- lg 100% 100% 100% 960px 1140px .container-xl 100% 100% 100% 100% 1140px .container-fluid 100% 100% 100% 100% 100%

28. 3.Grid System- Introduction : In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.“

29. Components of Grid system- We are having three components of grid- containers , Rows Columns

30. 1.Containers : Bootstrap requires a containing element to wrap site contents and house our grid system. The word ‘container’ is a container of row elements and row elements are ‘containers’ of the column elements. <div class= “container” 2.Rows :  Rows must be placed within a ‘container’ or ‘container-fluid’ for proper alignment and padding. We use rows to create horizontal groups of columns. < div class= "row“ > 3.Columns :  Grid columns are created by specifying the number of twelve available columns you wish to span . <div class= “col-sm-4” >

31. How it works- Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content . The Bootstrap Grid System allows up to 12 columns across the page. You can use all 12 columns individually or you can groups the columns together to create wider columns. You can use all combinations of values summing up to 12. You can use 12 columns each of width 1, or use 4 columns each of width 3 or any other combination.

32. Grid Classes- The Bootstrap grid system has four classes that can be combined to make more flexible layouts: xs (<576px):  For Portrait Mobile Phones. sm (>=576px):  For Landscapes phones md (>=768px):  For Tablets/ Phablets . lg (>=992px):  For Small-sized Desktops/Laptops xl (>=1200px):  For Larger-sized Desktops/Laptops

33. Grid System Basic structure of Grid Layout: First; create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate . col -*-* classes). Note that numbers in . col -*-* should always add up to 12 for each row.

34. Grid System Some Bootstrap grid system rules: Rows must be placed within a  .container (fixed-width ) or  .container-fluid  (full-width) for proper alignment and padding Use rows to create horizontal groups of columns Content should be placed within columns, and only columns may be immediate children of rows Predefined classes like  .row  and  .col-sm-4  are available for quickly making grid layouts Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three  .col-sm-4 Column widths are in percentage, so they are always fluid and sized relative to their parent element

35. 4. Flex- FlexBox CSS Flexible Box Layout, commonly known as Flexbox . The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

36. Enable flex behaviors- Apply  display utilities to create a flexbox container and transform  direct children elements  into flex items. Flex containers and items are able to be modified further with additional flex properties. Example- <div class="d-flex p-2">I'm a flexbox container!</div>

37. Responsive variations also exist for .d-flex and . d-inline-flex- . d-flex .d-inline-flex .d- sm -flex .d- sm -inline-flex .d-md-flex .d-md-inline-flex .d- lg -flex .d- lg -inline-flex .d-xl-flex .d-xl-inline-flex

38. Direction- Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts ).

39. Row - Use  .flex-row to set a horizontal direction (the browser default), or .flex-row-reverse to start the horizontal direction from the opposite side. Example- < div class="d-flex flex-row"> < div class="p-2">Flex item 1</div > <div class="p-2">Flex item 2</div> < div class="p-2">Flex item 3</div> </ div > <div class="d-flex flex-row-reverse "> <div class="p-2">Flex item 1</div > <div class="p-2">Flex item 2</div > <div class="p-2">Flex item 3</div> </ div>

40. Column- Use  .flex-column to set a vertical direction, or .flex-column-reverse to start the vertical direction from the opposite side. Example- <div class="d-flex flex-column"> < div class="p-2">Flex item 1</div> < div class="p-2">Flex item 2</div > <div class="p-2">Flex item 3</div> </ div> < div class="d-flex flex-column-reverse"> < div class="p-2">Flex item 1</div> < div class="p-2">Flex item 2</div> < div class="p-2">Flex item 3</div> </ div>

41. Bootstrap utilities Borders : Use the border classes to add or remove borders from an element: Example: Border Color: Add a color to the border with any of the contextual border color classes: Example:

42. BootStrap utilities Border radius: Add rounded corners to an element with the rounded classes: Example: Float : Float an element to the right with the .float-right class or to the left with .float-left: Example:

43. BootStrap Utilities Responsive Float: Float an element to the left or to the right depending on screen width, with the responsive float classes (.float-*- left|right  - where * is  sm  (>=576px),  md  (>=768px),  lg  (>=992px) or xl (>=1200px)): Example:

44. Bootstrap Utilities Center Align : Center an element with the . mx -auto class (adds margin-left and margin-right: auto): Example: Width: Set the width of an element with the w-* classes (.w-25, .w-50, .w-75, .w-100, .mw-100): Example:

45. Bootstrap Utilities Height: Set the height of an element with the h-* classes (.h-25, .h-50, .h-75, .h-100, .mh-100): Example:

46. Bootstrap Utilities Spacing: Bootstrap 4 has a wide range of responsive margin and padding utility classes. They work for all breakpoints:  xs  (<=576px),  sm  (>=576px),  md  (>=768px),  lg  (>=992px) or xl (>=1200px)): The classes are used in the format: {property}{sides}-{size} for  xs  and {property}{sides}-{breakpoint}-{size} for  sm ,  md ,  lg , and xl. Where  property  is one of: m - sets margin p - sets padding

47. Bootstrap Utilities Where  sides  is one of: t - sets margin-top or padding-top b  - sets margin-bottom or padding-bottom l  - sets margin-left or padding-left r  - sets margin-right or padding-right x  - sets both padding-left and padding-right or margin-left and margin-right y  - sets both padding-top and padding-bottom or margin-top and margin-bottom blank - sets a margin or padding on all 4 sides of the element

48. Bootstrap Utilities Where  size  is one of : 0  - sets margin or padding to 0 1  - sets margin or padding to .25rem (4px if font-size is 16px) 2  - sets margin or padding to .5rem (8px if font-size is 16px) 3  - sets margin or padding to 1rem (16px if font-size is 16px) 4  - sets margin or padding to 1.5rem (24px if font-size is 16px) 5  - sets margin or padding to 3rem (48px if font-size is 16px) auto  - sets margin to auto

49. Bootstrap Utilities Example:

50. Bootstrap Utilities Visible and Invisible: Use the .visible or .invisible classes to control the visibility of elements.  Note:  These classes do not change the CSS display value. They only add  visibility:visible  or  visibility:hidden : Example : Close Icon: Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the &times; symbol to create the actual icon (a better looking "x"). Also note that it floats right by default: Example:

51. Bootstrap Utilities Colors : The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light: Example:

52. Bootstrap Utilities Background Color : The classes for background colors are: . bg -primary, . bg -success, . bg -info, . bg -warning, . bg -danger, . bg -secondary, . bg -dark and . bg -light. Example:

53. Reboot in Bootstrap Reboot  is a collection of element-specific CSS that changes in a single file, kickstart Bootstrap provides an elegant, consistent, and simple baseline to build upon. Reboot Address  element is used to change the font-style from italic to the normal text. It inherits the line-height property and set the margin-bottom property to 1rem. The <address> element is used to represent the contact information to the nearest ancestor. It preserve the formatting of the element by ending the line.

54. Reboot in Bootstrap Reboot Address used Tag: <address>:  This tag is used to add the contact information of a person or an organization.  Syntax:

55. Typography in Bootstrap Introduction to Typography : Typography is a feature for styling and formatting the text content. It is used to create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles and much more. Typography can be used to create:  Headings Subheadings Text and Paragraph font color, font type, and alignment Lists Other inline elements

56. Typography in Bootstrap Classes in Typography: h1 – h6:  To match the font styling of a heading but cannot use the associated HTML element. text-muted : It is used for text color, text-muted fades the text. i.e. text greyed out. display : It is used to create better headings. lead : It is used to make a paragraph stand out i.e. Visually better. mark : It is used to highlight the text. small : It is used to create secondary subheadings. initialism : It is used to render abbreviations in slightly small text size. blockquote : It is used to quote content. blockquote -footer : It is the footer details for identifying the source of the Quote.

57. Typography text-center : It is used to align the text to the center. list-inline : It is used to make the element of the list inline. text-truncate : It is used to shorten the longer text by truncating with an ellipsis. text-uppercase : It is used to transform text to uppercase. text-lowercase : It is used to transform text to lowercase. text-capitalize : It is used to transform text to capitalize the first letter of each word leaving other letters in lowercase. pre-scrollable : Makes a  <pre>  element scrollable. list- unstyled :  the default list-style and left margin on list items are removed. text-right : Depicts right-aligned text. text-left:  Depicts left-aligned text.

58. Images in Bootstrap Introduction: Bootstrap supports for images. There are three classes in Bootstrap that can be used to apply some simple style to the images. Rounded Corners: The . img -rounded class adds rounded corners to an image. Circle: The . img -circle class shapes the image to a circle. Thumbnail: The . img -thumbnail class shapes the image to a thumbnail:

59. GitHub

60. Objectives Version Control Git , Git repository Git vs Github Setup git environment Create a git repository ( adding file, adding folder) Checkout different version/ignore files… Git tools 60

61. 61

62. Why Version Control? Collaboration   Versioning   Rolling Back   Understanding   62 Scenario : Multiple students are doing a project together Question : Why not Google drive & One drive ???? source code management vs file storage management

63. Version Control Systems Some well-known version control systems are CVS, Subversion, Mercurial, and Git 63

64. Why Git? Git :most commonly used software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Git has many advantages over earlier systems such as CVS and Subversion 64 Subversion Git

65. Git History Came out of Linux development community Linus Torvalds, 2005 Initial goals: Speed Support for non-linear development (thousands of parallel branches) Fully distributed Able to handle large projects like Linux efficiently Global Information Tracker ( acronym name) 65

66. What is Github? GitHub was developed by Chris Wanstrath, P. J. Hyett, Tom Preston-Werner and Scott Chacon using Ruby on Rails, and started in February 2008 It is a subsidiary of  Microsoft , which acquired the company in 2018 for $7.5 billion GitHub.com is a site for online storage of Git repositories .   You can get free space for open source projects or you can pay for private projects. Question : Do I have to use Github in order to use Git? Answer : No! you can use Git completely locally for your own purposes, or you or someone else could set up a server to share files, or you could share a repo with users on the same file system. 66

67. Git vs GitHub 67

68. Download and install Git Here’s the standard one: http://git-scm.com/downloads Git Repository is a place where Git can store versions of our files $ cd ~/gitclass $ mkdir demo $ cd demo $ git init $ dir /ah or $ ls -a (* .git directory to store all the tracing info) 68

69. Introduce yourself to Git Enter these lines (with appropriate changes): git config user.name "John Smith" git config user.email [email protected] --global param 69

70. Git Command 70 command description git clone url [dir] copy a git repository so you can add to it git add files adds file contents to the staging area git commit records a snapshot of the staging area git status view the status of your files in the working directory and staging area git diff shows diff of what is staged and what is modified but unstaged git help [command] get help info about a particular command git pull fetch from a remote repo and try to merge into the current branch git push push your new branches and data to a remote repository others: init , reset, branch, checkout, merge, log, tag

71. Adding a file to git repository 71

72. Adding a file to git repository Create a rose.txt file ,copy rose.txt to demo folder $ git checkout -b main Git status $ git status $ git add rose.txt $ git status $ git commit -m “my first file checked in “ $ git log 72

73. Continue… Change rose.txt file $ git status $ git diff $ git commit -a –m “new message….” 73

74. Adding new folder $ mkdir poem copy two text files to that poem folder $ git add poem 74 git diff HEAD~1 mars.txt

75. Adding Multimpule files… 75

76. 76

77. Checking previous version 77 $ git diff HEAD~1 rose.txt $git checkout HEAD~1 rose.txt $ git checkout HEAD rose.txt

78. Ignoring Things Configure Git to ignore specific files. Explain why ignoring files can be useful. Copy results folder with files Create .gitignore file Add *.dat results/ 78

79. Git Tools 79 Windows Git Clients: Sourcetree   GitHub for Windows  . Tortoise Git   Mac Git Clients: GitUp   GitBox   Git-Xdev  

80. Tables in Bootstrap Basic Table: A basic Bootstrap table has a light padding and only horizontal dividers . The  .table  class adds basic styling to a table: Striped Rows: The .table-striped class adds zebra-stripes to a table. Bordered table: The .table-bordered class adds borders on all sides of the table and cells. Hover Rows: The .table-hover class adds a hover effect (grey background color) on table rows. Condensed Table: The .table-condensed class makes a table more compact by cutting cell padding in half. Contextual Classes: Contextual classes can be used to color table rows (< tr >) or table cells (<td>). Responsive Table: The  .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference

81. Figures in BootStrap The figure class adds styling to the default figure elements and displays images with an additional caption. The following elements are used in bootstrap 4 figures classes: .figure:  This class is used to indicate a figure element. .figure- img :  It is used to indicate the image used in the figure element. .figure-caption:  This class is used to display a caption below the figure element.

82. Forms in Bootstrap Bootstrap's Default Settings Form controls automatically receive some global styling with Bootstrap: All textual <input>, < textarea >, and <select> elements with class .form-control have a width of 100%. Bootstrap Form Layouts Bootstrap provides three types of form layouts: Vertical form (this is default) Horizontal form Inline form Standard rules for all three form layouts: Wrap labels and form controls in <div class="form-group"> (needed for optimum spacing) Add class .form-control to all textual <input>, < textarea >, and <select> elements

83. Forms in BootStrap Bootstrap Vertical Form (default) . Bootstrap Inline Form: In an inline form, all of the elements are inline, left-aligned, and the labels are alongside. This only applies to forms within viewports that are at least 768px wide! Additional rule for an inline form: Add class .form-inline to the <form> element

84. Form in Bootstrap Bootstrap supports the following form controls: input textarea checkbox radio select