-
Notifications
You must be signed in to change notification settings - Fork 0
/
september_24.html
97 lines (88 loc) · 6.04 KB
/
september_24.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
<head>
<title>Jarod Reichel's Web Dev Blog</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo&family=Roboto&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<h1>CS 347 Blog Entry - September 24, 2021</h1>
</header>
<main>
<h2>Part I: CSS Grid Display</h2>
<p>One thing I read about this week is how to use CSS to lay a page out as a grid, rather than using flexbox or media queries. This is helpful when you want to avoid using a lot of floats and positioning. In order to use the grid layout with CSS, you give the container element or class the <span class="code_inline">display: grid;</span> or <span class="code_inline">display: inline-grid;</span> property. Then, in the child elements or classes you can set the <span class="code_inline">grid-column-start</span> or <span class="code_inline">grid-row-start</span> properties to refer to the row line or column line you want the element to start at. Column lines refer to the lines between columns, and row lines, likewise. Of course, there are also corresponding end properties you can set to determine which row/column the element ends at.</p>
<h3>Sample Code</h3>
<pre>
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
</style>
</head>
<body>
<h1>Grid Lines</h1>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
<p>You can refer to line numbers when placing grid items.</p>
</body>
</html>
</pre>
<p>The above code and information was sourced from <a href="https://www.w3schools.com/css/css_grid.asp">W3Schools.com</a>.</p>
<h2>Part II: CSS Frameworks (Bootstrap)</h2>
<p>While using media queries is helpful for understanding responsive web design as a beginner, developers often like to avoid "<a href="https://xkcd.com/927/">reinventing the wheel</a>". One other, and often simpler way to do responsive web design and development is to use a CSS framework. The most common CSS framework is Bootstrap, made by the Developers of Twitter. Bootstrap provides lots of different CSS classes designed to help make responsive web development easier. To include bootstrap in your site, you can simply use a <span class="code_inline"><link></span> tag with the href attribute pointing to the CSS file hosted on Bootstrap's Content Delivery Network (CDN). Additionally, you can also download and host Bootstrap yourself, but this may increase load times for your site. In addition, you must also include the jQuery and Popper libraries if you wish to use certain Bootstrap components.</p>
<h3>Sample Code</h3>
<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 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/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
</body>
</html>
</pre>
<p>The above code and information was sourced from <a href="https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp">W3Schools.com</a>.</p>
</main>
<footer>
<p>Site by Jarod Reichel</p>
</footer>
</body>
</html>