-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
94 lines (83 loc) · 4.42 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
<link rel="stylesheet" href="themes/midnight-green.css">
<link rel="shortcut icon" href="fevicon.png" type="image/x-icon">
<title>AttriCSS - A classless css Framework for beautiful websites</title>
</head>
<body>
<!--Navbar-->
<nav>
<header><a href="#">AttriCSS</a> <label for="nav"><i class="fas fa-bars"></i></label></header>
<input type="checkbox" id="nav" hidden checked>
<div overflow>
<ul>
<!--active link in navbar with active attribute-->
<li active><a href="#">Home</a></li>
<li><a href="https://github.com/raj457036/attriCSS/tree/master/themes">Download</a></li>
<li><a href="https://github.com/raj457036">About</a></li>
<li><a href="https://github.com/raj457036">Contact</a></li>
</ul>
</div>
</nav>
<!--Container attribute-->
<section container>
<h3>Introduction</h3>
<img src="logo.png" alt="AttriCSS a classless css framework.">
<p><b>AttriCSS</b> is a <mark>classless</mark> css framework that style normal ugly html to beautiful website.</p>
<h6>Why?</h6>
<p>For faster prototyping of backend logic on front end without any use of classes and just using html.</p>
<ol>
<li>For blogging websites just add attriCSS to site and it will turn a ugly site into a beauty.</li>
<li>For backend developer who do not want to dig into css classes.</li>
<li>For faster prototyping.</li>
<li>No use of classes. still responsive and still have almost all the features you need.</li>
<li>Create your own theme by just changing some variables.</li>
</ol>
<h3>Available Themes</h3>
<ol>
<li><a href="./templates/notheme.html">No Theme</a></li>
<li><a href="./templates/brightlight-green.html">Bright Light green</a></li>
<li><a href="./templates/midnight-green.html">Midnight Green</a></li>
<li><a href="./templates/darkforest-pink.html">Dark Forest Green</a></li>
<li><a href="./templates/darkfairy-pink.html">Dark Fairy Pink</a></li>
<li><a href="./templates/lightfairy-pink.html">Light Fairy Pink</a></li>
</ol>
<h3>Installation</h3>
<p><b>Predefined Themes</b></p>
<ol>
<li>Download the theme you want to use.</li>
<a href="https://github.com/raj457036/attriCSS/tree/master/themes">Visit Themes From <i class="fab fa-github"></i></a>
<li>
add link to you <code><head></code> tag
<pre><code><link rel="stylesheet" href="path_to_attricss_file.css" type="text/css"></code></pre>
</li>
</ol>
<p><b>Custom Theme</b></p>
<ol>
<li>Download the pre-compiled SCSS files from <a href="https://github.com/raj457036/attriCSS/tree/master/Scss">here</a></li>
<li>Open the <mark> _variable.scss </mark> file
it has 8 variables</li>
<pre><code>
$navtext-color: #fff; <-- This is for navbar text color
$font-family: "Nunito", sans-serif; <-- This is Font Family for the theme
$text-color: #000; <-- This is the text color on the body
$body-bg: white; <-- This is body's background color (choose this color with text-color in mind to make it visible)
$code-bg-color: #eeeeee; <-- This is code blocks background color
$tertiary-color: #bdbdbd; <-- Tertiary color for theme theme
$secondary-color: #212121; <-- Secondary color for the theme
$primary-color: #00c853; <-- Primary color for the theme
</code></pre>
<li>Change these value with whatever theme you want to make.</li>
<li>Recompile the AttriCSS.scss file make the custom theme is ready. <a href="http://sass-lang.com/install">How to compile SCSS file to CSS.</a></li>
</ol>
</section>
<footer>
visit <i class="fab fa-github"></i> <a href="https://github.com/raj457036/attriCSS">github.com</a> btw this is footer.
</footer>
</body>
</html>