Skip to content

Commit 76d1e29

Browse files
HolmesMatthewHolmesMatthew
committed
adding framework notes
1 parent 123587e commit 76d1e29

File tree

5 files changed

+132
-0
lines changed

5 files changed

+132
-0
lines changed

‎Code/matthew/html_css/lectures/6_frameworks/bootstrap.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Bootstrap Example</title>
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
9+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
10+
11+
</head>
12+
<body>
13+
<div class="accordion" id="accordionExample">
14+
<div class="accordion-item">
15+
<h2 class="accordion-header" id="headingOne">
16+
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
17+
Accordion Item #1
18+
</button>
19+
</h2>
20+
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
21+
<div class="accordion-body">
22+
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
23+
</div>
24+
</div>
25+
</div>
26+
<div class="accordion-item">
27+
<h2 class="accordion-header" id="headingTwo">
28+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
29+
Accordion Item #2
30+
</button>
31+
</h2>
32+
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
33+
<div class="accordion-body">
34+
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
35+
</div>
36+
</div>
37+
</div>
38+
<div class="accordion-item">
39+
<h2 class="accordion-header" id="headingThree">
40+
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
41+
Accordion Item #3
42+
</button>
43+
</h2>
44+
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
45+
<div class="accordion-body">
46+
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
52+
<button class="btn btn-primary">Click me</button>
53+
<a href="">Link here</a>
54+
<h1>This is the title</h1>
55+
<h2>This is not</h2>
56+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, at! Soluta quas sapiente eveniet. Officia placeat error alias itaque. Veritatis, aut animi! Iusto odit eaque voluptatum autem ipsa, explicabo ratione?</p>
57+
</body>
58+
</html>

‎Code/matthew/html_css/lectures/6_frameworks/materialize/materialize.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Materialize Example</title>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
9+
<!-- Your style sheet should come after any Third-Party .css files -->
10+
<link rel="stylesheet" href="style.css">
11+
12+
</head>
13+
<body>
14+
<nav class="blue lighten-2">
15+
<div class="nav-wrapper ">
16+
<a href="#" class="brand-logo">Logo</a>
17+
<ul id="nav-mobile" class="right hide-on-med-and-down">
18+
<li><a href="">Home</a></li>
19+
<li><a href="">About</a></li>
20+
<li><a href="">GitHub</a></li>
21+
<li><a href="">Login</a></li>
22+
</ul>
23+
</div>
24+
</nav>
25+
26+
<button class="waves-effect waves-light btn blue darken-1">Click me</button>
27+
<a href="#">Random link</a>
28+
<h1>Hello there</h1>
29+
<h2>Hello people</h2>
30+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse commodi explicabo suscipit, error sequi tempore soluta cupiditate voluptatum. Reprehenderit saepe error aliquam corporis laudantium minus perferendis animi voluptatum pariatur perspiciatis!</p>
31+
32+
</body>
33+
</html>

‎Code/matthew/html_css/lectures/6_frameworks/pico.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Pico Example</title>
8+
<link rel="stylesheet" href="https://unpkg.com/@picocss/pico@latest/css/pico.min.css">
9+
</head>
10+
<body>
11+
<button>Click me</button>
12+
<a href="">Link here</a>
13+
<h1>This is a title</h1>
14+
<h3>Something else</h3>
15+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus quod ab aut! Perferendis minus voluptas voluptatem voluptatibus corrupti magni architecto ea fugit reiciendis magnam provident aliquam, laboriosam ducimus sint corporis.</p>
16+
17+
</body>
18+
</html>

‎Code/matthew/html_css/lectures/6_frameworks/style.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.btn {
2+
text-transform: lowercase;
3+
}

‎Code/matthew/html_css/lectures/6_frameworks/tailwind.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Tailwind Example</title>
9+
<script src="https://cdn.tailwindcss.com"></script>
10+
11+
</head>
12+
<body>
13+
<button class="bg-emerald-300 p-1 rounded-md drop-shadow-md">Click me</button>
14+
<a href="">Link here</a>
15+
<h1 class="text-4xl">This is a title</h1>
16+
<h3>Something else</h3>
17+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus quod ab aut! Perferendis minus voluptas voluptatem voluptatibus corrupti magni architecto ea fugit reiciendis magnam provident aliquam, laboriosam ducimus sint corporis.</p>
18+
19+
</body>
20+
</html>

0 commit comments

Comments
 (0)