spectre-css-examples/update1.html at master · tomcam/spectre-css-examples · GitHub

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
<!doctype html>
<html lang="en">
<head>
    	<!-- The following 2 meta tags always come first -->
	<!-- Notify browsers this page is in Unicode -->
	<meta charset="utf-8">
	<!-- This site is responsive. Use full screen width. -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Update1 template--Spectre.css</title>
	<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css" />
</head>
<body>
	<div class="container">
		<div class="columns">
			<!-- LEFT COLUMN -->
			<div class="column col-3">
				<h3>News</h3>
				<p>Why not a telling or snarky little quote here?</p>
				<h4>Local</h4>
				<ul class="nav">
					<li class="nav-item"><a href="#">News</a></li>
					<li class="nav-item"><a href="#">Weather</a></li>
					<li class="nav-item"><a href="#">Sports</a></li>
					<li class="nav-item"><a href="#">Classifieds</a></li>
				</ul>
                <br>
				<h4>Site</h4>
				<ul class="nav">
					<li class="nav-item"><a href="#">About</a></li>
					<li class="nav-item"><a href="#">Contact</a></li>
					<li class="nav-item"><a href="#">Privacy</a></li>
					<li class="nav-item"><a href="#">Terms</a></li>
				</ul>
			</div><!-- .column .col-3 -->

			<!-- RIGHT COLUMN -->
			<div class="column col-9 rel">
				<h1>Update1.html news site template using Spectre.css
				</h1>
				<p>Shows how good and very fast a default
                <a href="https://picturepan2.github.io/spectre/index.html#introduction">Spectre.css</a>-based
                HTML template can be. It uses only default styles and is under 70 lines of HTML with content.</p>
                <h2>Notes</h2>
                <ul>
                    <li>View on older browsers: Spectre.css is very small, yet it has a
                        <a href="https://picturepan2.github.io/spectre/experimentals.html">surprisingly rich feature set</a>
                        and works superbly, even on old Android 4.4 phones (and maybe before)
                    </li>
                    <li>This template works as a standalone HTML file.
                        Just download it and try it on your home machine.
                        No other files are required because it uses
                        Spectre.css from a CDN.</li>
                    <li>Try update1.html on your phone, or by resizing the window so it's smaller.
				    See how the left and right columns interact. That's a responsive
				    grid in action.</li>
                </ul>
			</div><!-- .column .col-9 .rel -->
		</div><!-- .columns -->
	</div><!-- .container -->
</body>