Skip to content

Instantly share code, notes, and snippets.

@amelieykw

amelieykw/00 - HOME.md

Last active April 10, 2018 08:09
Show Gist options
  • Save amelieykw/16870484e46403b40332a1a51878bea7 to your computer and use it in GitHub Desktop.
Save amelieykw/16870484e46403b40332a1a51878bea7 to your computer and use it in GitHub Desktop.
Download ZIP
[W3.CSS Tutorial] #W3.CSS #tutorial #responsive #CSS #HTML #colors #background-color #text-color #hover-color #Sidebar
Raw
00 - HOME.md

Faster and Better

Fully Responsive CSS

What is W3.CSS?

W3.CSS is a modern CSS framework with built-in responsiveness:

Smaller and faster than any other CSS frameworks. Easier to learn, and easier to use than any other CSS frameworks. Better cross-browser compatibility than any other CSS frameworks. Uses standard CSS only (No jQuery or JavaScript library). Supports modern responsive mobile first design by default. Provides CSS equality for all browsers: Chrome, Firefox, Edge, IE, Safari, Opera, ... Provides CSS equality for all devices: desktop, laptop, tablet, and mobile. Speeds up and simplifies web development

Easy to use :

<div class="w3-container w3-teal">
  <h1>My Header</h1>
</div>

<img src="img_car.jpg" alt="Car">

<div class="w3-container">
  <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p>
</div>

<div class="w3-container w3-teal">
  <p>My Footer</p>
</div>

W3.CSS is Free

W3.CSS is free to use. No license is necessary.

Raw
01 - How To to use W3.CSS.md

To use W3.CSS in your web site, just add a link to "w3.css" from your web pages:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Or download w3.css from w3css_downloads and add a link to w3.css:

<link rel="stylesheet" href="w3.css">
Raw
02 - W3.CSS Intro.md
  1. W3.CSS Colors
  2. W3.CSS Containers
  3. W3.CSS Panels, Notes, and Quotes
  4. W3.CSS Alerts
  5. W3.CSS Cards
  6. W3.CSS Tables
  7. W3.CSS Lists
  8. W3.CSS Buttons
  9. W3.CSS Tags, Labels; Badges, And Signs
  10. W3.CSS Responsive
  11. W3.CSS Display
  12. W3.CSS Modals
  13. W3.CSS Progress Bars
  14. W3.CSS Dropdowns
  15. W3.CSS Accordions
  16. W3.CSS Tabs
  17. W3.CSS Navigation
  18. W3.CSS Sidebar
  19. W3.CSS Pagination
Raw
03 - Colors.md

Coloring HTML Elements

The w3-color and w3-text-color classes can be used to color any HTML element:

1 - Background colors

The w3-color classes set the background color for any HTML element:

<div class="w3-red">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="w3-yellow">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="w3-gray">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

2 - Text Colors

The w3-text-color classes set the text color of any HTML element:

<div class="w3-text-red">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

3 - Hover Colors

The w3-hover-color classes define the background hover color for any HTML element:

<div class="w3-container w3-orange w3-hover-yellow">
  <h2>London</h2>
  <p)>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>

The w3-hover-text-color classes define the text hover color for any HTML element:

<div class="w3-container w3-orange w3-hover-text-white">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>

Color libraries

In addition to standard W3.CSS colors, W3.CSS can also use colors from a lot of different color libraries:

  • Windows Colors
  • Fashion Colors
  • Highway Colors
Raw
18 - Vertical Navigation Sidebar.md

With side navigation, you have several options:

  1. Always display the navigation pane to the left of the page content
  2. Use a collapsible, "fully automatic" responsive side navigation
  3. Open navigation pane over the left part of the page content
  4. Open navigation pane over all of the page content
  5. Slide the page content to the right when opening the navigation pane
  6. Display the navigation pane on the right side instead of the left side

1. Always Display the Sidebar

(w3-sidebar w3-bar-block)

<div class="w3-sidebar w3-bar-block" style="width:25%"> 
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  <a href="#" class="w3-bar-item w3-button">Link 2</a>
  <a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>

<div style="margin-left:25%">
... page content ...
</div>

EXample :

<!DOCTYPE html>
<html>
  <title>W3.CSS</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

  <!-- Sidebar -->
  <div class="w3-sidebar w3-light-grey w3-bar-block" style="width:25%">
    <h3 class="w3-bar-item">Menu</h3>
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    <a href="#" class="w3-bar-item w3-button">Link 2</a>
    <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>

  <!-- Page Content -->
  <div style="margin-left:25%">

  <div class="w3-container w3-teal">
    <h1>My Page</h1>
  </div>

  <img src="img_car.jpg" alt="Car" style="width:100%">

  <div class="w3-container">
  <h2>Sidebar Navigation Example</h2>
  <p>The sidebar with is set with "style="width:25%".</p>
  <p>The left margin of the page content is set to the same value.</p>
  </div>

  </div>
      
</body>
</html>

2. Open the Sidebar Navigation Over a Part of the Content

(w3-sidebar w3-bar-block & display:none & function w3_open())

function w3_open() {
    document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
}

Example :

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

  <!-- Sidebar -->
  <div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="mySidebar">
      <button onclick="w3_close()" class="w3-bar-item w3-large">Close &times;</button>
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>

  <!-- Page Content -->
  <div class="w3-teal">
      <button class="w3-button w3-teal w3-xlarge" onclick="w3_open()">☰</button>
      <div class="w3-container">
        <h1>My Page</h1>
      </div>
  </div>

  <img src="img_car.jpg" alt="Car" style="width:100%">

  <div class="w3-container">
      <p>This sidebar is hidden by default, (style="display:none")</p>
      <p>You must click on the "hamburger" icon (top left) to open it.</p>
      <p>The sidebar will hide a part of the page content.</p>
  </div>

  <script>
      function w3_open() {
          document.getElementById("mySidebar").style.display = "block";
      }
      function w3_close() {
          document.getElementById("mySidebar").style.display = "none";
      }
  </script>
     
</body>
</html>

3. Open the Sidebar Navigation Over the Content

(w3-sidebar w3-bar-block & display:none & function w3_open())

function w3_open() {
    document.getElementById("mySidebar").style.width = "100%";
    document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
}

4. Collapsible Responsive Side Navigation

(w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left & width:200px; & "w3-main" style="margin-left:200px")

This Sidebar is always displayed on screens wider than 992px, and hidden on small screens (replaced with a clickable menu icon (☰).

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

  <div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-left" style="width:200px;" id="mySidebar">
      <button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close &times;</button>
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
  </div>

  <div class="w3-main" style="margin-left:200px">
      <div class="w3-teal">
          <button class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">&#9776;</button>
          <div class="w3-container">
            <h1>My Page</h1>
          </div>
      </div>

      <div class="w3-container">
          <h3>Responsive Sidebar</h3>
          <p>The sidebar in this example will always be displayed on screens wider than 992px, and hidden on tablets or mobile phones (screens less than 993px wide).</p>
          <p>On tablets and mobile phones the sidebar is replaced with a menu icon to open the sidebar.</p>
          <p>The sidebar will overlay of the page content.</p>
          <p><b>Resize the browser window to see how it works.</b></p>
      </div>

  </div>

  <script>
      function w3_open() {
          document.getElementById("mySidebar").style.display = "block";
      }
      function w3_close() {
          document.getElementById("mySidebar").style.display = "none";
      }
  </script>
     
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment