CSCI 1720 W3.CSS – Part 1 East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css So, we’ve looked at Flexbox and Bootstrap As it turns out, W3Schools also has a responsive framework called W3.CSS Much of the same functionality is included as with Bootstrap Less bloat East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

What is W3.CSS? Smaller and faster than other CSS frameworks Easier to learn, and easier to use than other CSS frameworks Uses standard CSS only (No jQuery or JavaScript library) Speeds up and simplifies web development Supports modern responsive design (mobile first) by default Provides CSS equality for all browsers. Chrome, Firefox, IE, Safari, and more Provides CSS equality for all devices. PC, laptop, tablet, and mobile East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

Mobile First Design Methodology Website design first focused on creating the most optimal user experience for the largest screen size a user would be on, such as a desktop screen Responsive web design was born as a solution to having to create multiple web designs – one for desktop, one for mobile, etc. Designing for mobile first takes this one step further, and is based on the idea that the optimal viewing experience should be on a mobile device vs. a desktop device East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

Mobile First Design Methodology There’s a lot of debate over which methodology is superior Mobile friendly - aims to meet the majority of its mobile users’ needs Responsive design - encompasses the idea of a mobile friendly design; a broader term used to define the designing of web pages for a variety of screen sizes and orientations Mobile first design - takes the age old habit of designing for the biggest possible screen first, and designing for the smallest possible screen first East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

Mobile First Design Methodology East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Ease of Use Here, again, we see the importance of CSS classes in design, particularly how they can be combined to create the layout we’re looking for East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Ease of Use East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Adding to Page(s) To use W3.CSS in your web site, just add a link to "w3.css" from your web pages (You could download the stylesheet and add the file to your site, linking to it internally) East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Containers East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Containers The w3-container class is the most important of the W3.CSS classes. It provides equality like: Common margins Common paddings Common vertical alignments Common horizontal alignments Common fonts Common colors The w3-container class is typically used with HTML container elements, like <div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, and more East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Containers East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Containers East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Responsive East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Responsive W3.CSS includes a responsive, mobile-first grid system to handle layout East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Responsive W3.CSS includes a responsive, mobile-first grid system to handle layout East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Responsive W3.CSS's grid system is responsive, and the columns will re- arrange automatically depending on the screen size: w3-half ½ of display (med & lg) w3-third 1/3 of display (med & lg) w3-twothird 2/3 of display (med & lg) w3-quarter ¼ of display (med & lg) w3-threequarter ¾ of display (med & lg) w3-rest The rest of the display w3-col Defines 1 column in 12-col grid w3-mobile Adds mobile-first responsiveness to a column East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Responsive http://www.csci1720.net/examples/w3layout.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Responsive Responsive classes must be placed inside a w3-row class (or w3-row-padding class) to be fully responsive w3-row Container for responsive classes (no padding) w3-row-padding Container for responsive classes (8px L & R) w3-content Container for fixed size centered content w3-hide-small Hides content on small screens (>601px) w3-hide-medium Hides content on med screens w3-hide-large Hides content on large screens ( <992px) East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Responsive Responsive classes must be places inside a w3-row class (or w3-row-padding class) to be fully responsive l1 - l12 Responsive sizes for large screens m1 - m12 Responsive sizes for medium screens s1 - s12 Responsive sizes for small screens East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Responsive Example(s) East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Responsive Example(s) East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Responsive Example(s) East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Responsive Example(s) East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Responsive Example(s) Note that the first column (blue) of the first row is hidden (because of the w3-hide-small class directive East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Nested Rows We can nest rows responsively as well East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Nested Rows We can nest rows responsively as well Row East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout Another w3.css layout feature further eases the pain of achieving a column-like layout using CSS w3-cell-row Container for cells (columns) w3-cell Layout cell (column) w3-cell-top Aligns content at the top of a cell w3-cell-middle Aligns content at the vertical middle of a cell w3-cell-bottom Aligns content at the bottom of a cell w3-mobile Adds mobile-first responsiveness to a cell. Displays elements as block elements on mobile devices East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout Originally, HTML block elements (like <div> elements) display as vertical blocks The w3-cell class redefines block elements to display horizontally (like table cells) East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout The w3-cell-row is a container for cells (columns) The width of the w3-cell-row container defines the total width of all the contained cells The default width is 100% If you change the width of the cell container, it will reduce the total width of the contained cells East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout Display resolution: 550px x 670px East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout The w3-cell class has a very nice built-in self adjusting standard. Side-by-side elements will automatically adjust to the necessary width East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout Display resolution: 796px x 670px East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout Notice from this example that cells automatically adjust to be equal height (a real pain to accomplish with vanilla CSS) Display resolution: 796px x 670px Display resolution: 495px x 670px East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout The w3-mobile class ads mobile first responsiveness to any HTML element Used together with w3-cell it will display the layout columns vertically on small screens/mobile phones and horizontally on medium/large screens East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout Display resolution: 755px x 670px East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout The w3-cell class makes it very easy to align text w3-cell-top (default) w3-cell-middle w3-cell-bottom East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

Notice, no ‘w3-mobile’ class w3.css - Layout East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout Display resolution: 744px x 670px East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout Display resolution: 470px x 670px East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

(Added ‘w3-mobile’ class) w3.css - Layout (Added ‘w3-mobile’ class) East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout Display resolution: 588px x 670px East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout NOTE: Setting up your grid can be greatly facilitated by creating templates, like we did in CSCI 1710 Much of the code is repetitive You can set things up initially so that you don’t have to keep typing the same thing over and over again East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Layout When it’s time to create a new web page, all you have to do is fill in the meta-information and add your content, styling the elements as you go. You can create multiple templates to fit different needs, for example: template-1col.html template-2col.html template-3col.html and so on East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Colors East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Colors The w3-color classes are inspired by modern colors used in marketing, road signs, and sticky notes East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Colors The w3-color and w3-text-color classes can be used to color any HTML element East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Background Colors The w3-color classes set the background color for any HTML element East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Hover Colors The w3-text-color classes set the text color for any HTML element Background Text http://csci1720.net/examples/w3hovercolor.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Panels East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Panels The w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to any HTML element East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Panels The w3-panel class adds a 16px top and bottom margin and a 16px left and right padding to any HTML element East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Panels for Alerts The w3-panel class is perfect for displaying quotes East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Panels for Alerts The w3-panel class is perfect for displaying alerts. Alerts are often displayed using a strong color East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Rounded Panels East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Hiding a Panel Hiding a panel is easy Javascript http://csci1720.net/examples/w3hidepanel.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Showing a Panel Starts out hidden Showing a panel is easy, take this: and add this Javascript http://csci1720.net/examples/w3showpanel.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Borders East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Borders http://csci1720.net/examples/w3borders1.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Border Colors http://csci1720.net/examples/w3borders2.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Thick Borders http://csci1720.net/examples/w3borders3.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design

w3.css - Hoverable Borders http://csci1720.net/examples/w3borders4.php East Tennessee State University Department of Computing CSCI 1720 Intermediate Web Design