├── LICENSE ├── README.md ├── index.html └── style.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Andy Brewer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # TutCSS.css — Minimalist stylesheet for HTML elements 4 | 5 | Out of the box CSS styling for HTML elements. No class names, no framework to learn. 6 | 7 | `` 8 | 9 | Live demo: https://lco.dev/tutcss/ 10 | 11 | 12 | 13 | ## Versions 14 | 15 | ### v1.1 16 | * Modification in colors, elements and lot of revamping 17 | 18 | 19 | ## Moving towards TuTCSS 20 | * [Hitesh Choudhary](https://HiteshChoudhary.com) 21 | 22 | ## Contributors for base project 23 | * [andybrewer](https://github.com/andybrewer) 24 | * [nikolai-cc](https://github.com/nikolai-cc) 25 | * [aembleton](https://github.com/aembleton) 26 | * [simonw](https://github.com/simonw) 27 | * [cfv1984](https://github.com/cfv1984) 28 | * [irfaardy](https://github.com/irfaardy) 29 | * [ruudud](https://github.com/ruudud) 30 | * [edlinkiii](https://github.com/edlinkiii) 31 | * [DiemenDesign](https://github.com/DiemenDesign) 32 | * [thedamon](https://github.com/thedamon) 33 | * [hongsw](https://github.com/hongsw) 34 | * [ericwbailey](https://github.com/ericwbailey) 35 | * [martin-v](https://github.com/martin-v) 36 | * [GrosSacASac](https://github.com/GrosSacASac) 37 | * [afeld](https://github.com/afeld) 38 | * [ScottGuthart](https://github.com/ScottGuthart) 39 | * [ctp52](https://github.com/ctp52) 40 | 41 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | TutCSS for teachers and code related youtubers 11 | 12 | 13 | 14 | 15 | 29 |
Welcome to a HTML page
30 |
31 |

TutCSS was created with just 1 goal in mind. It should be easier to teach DOM manipulation and Javascript. 32 | Creators and youtubers should not spend a long time to write css, just create HTML elements and start 33 | teaching. It will look good right out of the box. No need to add any class or id to your html element. 34 |

35 |
36 |

Get started with Javascript, it's a nice language

37 |

Or you can go with python

38 |

Golang seems to be a nice option

39 |

Or got with classic php

40 | 41 | 42 |
43 | 44 |
Caption for image
45 |
46 |

A simple code snippet to JS map

47 | 
 48 |         
 49 |             const map1 = new Map();
 50 | 
 51 |             map1.set('a', 1);
 52 |             map1.set('b', 2);
 53 |             map1.set('c', 3);
 54 | 
 55 |             console.log(map1.get('a'));
 56 |             // expected output: 1
 57 | 
 58 |             map1.set('a', 97);
 59 | 
 60 |             console.log(map1.get('a'));
 61 |             // expected output: 97
 62 | 
 63 |         
 64 |
65 | 66 | Maths can be very interesting 67 | Depends on teacher 68 |
69 | 79 |
80 |
81 | FAQ 1 - Why Tut CSS exists? 82 |

Just to make life easier for folks who create amazing tutorials

83 |
84 |
85 | FAQ 2 - When common sense will become common 86 |

I don't have answer to everything.

87 |
88 |
89 |
This is main section
90 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat voluptates consectetur suscipit 91 | molestiae 92 | quod quisquam maxime eveniet fugiat aspernatur iusto incidunt ipsa atque, aut architecto placeat vel 93 | iure 94 | molestias vero reprehenderit quidem tenetur error modi nihil! Dolor voluptate rerum ipsa, odio enim 95 | consequuntur tempora aliquid quod autem earum maiores necessitatibus, accusamus adipisci esse in 96 | veritatis 97 | modi! Beatae corporis temporibus voluptatem officia nulla in quia iste repellendus obcaecati quas 98 | commodi 99 | omnis illo, illum rem fugiat dolorum est nihil tempora magni ipsa adipisci praesentium? Aliquid nobis 100 | ipsum 101 | laboriosam, rerum illo deleniti quod eaque facere veniam temporibus delectus assumenda libero doloremque 102 | perspiciatis beatae impedit minima maxime natus iste quasi itaque quam? Veritatis tenetur corporis, 103 | cumque 104 | autem sint fuga quos illo asperiores quam molestiae? Magni magnam cumque illum iusto numquam, soluta 105 | excepturi deleniti harum obcaecati distinctio, qui fuga dolor sapiente velit iste. Beatae porro atque 106 | consequuntur, officiis voluptas eaque eveniet eos minus consequatur maxime iusto doloremque dolores esse 107 | est 108 | at non modi laboriosam quo nobis quam sit iste. Voluptate aliquam eum incidunt velit ducimus voluptatum 109 | omnis odit nostrum quidem, id temporibus maxime amet consequatur cumque. Cupiditate sapiente quos rerum 110 | porro. Blanditiis eum accusamus tenetur officia ullam delectus doloribus, sed nam eius perspiciatis 111 | explicabo quos!

112 |
113 |
114 |
Contact us
115 |
116 |
login form
117 | 118 | 119 | 120 | 121 | 122 |

Choose your favorite Programming language:

123 | 124 |
125 | 126 |
127 | 128 | 129 | 130 |
131 |
132 | 133 | 134 |
135 | hello_world.c: 12 Errors, 18 Warnings. 136 | 137 |
138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 153 | 154 | 155 | 156 | 157 | 158 | 161 | 162 | 163 | 164 | 165 | 166 | 169 | 170 | 171 | 172 | 173 | 174 | 177 | 178 |
FirstnameLastnameEmailAccount link
DevrimDemirdevrim1demir@gmail.com 151 | 152 |
EnesPehlivanenesphlvn@gmail.com 159 | 160 |
OsmanGültekinosmangul@gmail.com 167 | 168 |
MansurLavaşmansurlavas@gmail.com 175 | 176 |
179 |
180 |
181 | 182 | 
183 |             Text in a pre element
184 |             is displayed in a fixed-width
185 |             font, and it preserves
186 |             both      spaces and
187 |             line breaks
188 |
189 |
190 |
191 | 197 |
198 |
199 | 203 | 207 |
208 | 213 | 214 | 215 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* TutCSS for teachers 2 | - Hitesh 3 | - LearnCodeOnline.in 4 | */ 5 | 6 | @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); 7 | 8 | :root { 9 | --border-radius: 3px; 10 | --box-shadow: 2px 2px 10px; 11 | --color: #118bee; 12 | --color-accent: #118bee15; 13 | --color-bg: #fff; 14 | --color-bg-secondary: #e9e9e9; 15 | --color-secondary: #FF6666; 16 | --color-secondary-accent: #920de90b; 17 | --color-shadow: #f4f4f4; 18 | --color-text: #000; 19 | --color-text-secondary: #999; 20 | --hover-brightness: 1.2; 21 | --justify-important: center; 22 | --justify-normal: left; 23 | --line-height: 1.5; 24 | --width-card: 285px; 25 | --width-card-medium: 460px; 26 | --width-card-wide: 800px; 27 | --width-content: 1080px; 28 | } 29 | 30 | 31 | @media (prefers-color-scheme: dark) { 32 | :root { 33 | --color: #1FAA59; 34 | --color-accent: #38CC77; 35 | --color-bg: #333; 36 | --color-bg-secondary: #555; 37 | --color-secondary: #E8BD0D; 38 | --color-secondary-accent: #E07C24; 39 | --color-shadow: #bbbbbb20; 40 | --color-text: #f7f7f7; 41 | --color-text-secondary: #aaa; 42 | --font-family: 'Montserrat', sans-serif; 43 | 44 | } 45 | } 46 | 47 | 48 | /* Layout */ 49 | article aside { 50 | background: var(--color-secondary-accent); 51 | border-left: 8px solid var(--color-text); 52 | padding: 0.01rem 0.8rem; 53 | } 54 | 55 | body { 56 | background: var(--color-bg); 57 | color: var(--color-text); 58 | font-family: var(--font-family); 59 | line-height: var(--line-height); 60 | margin: 0; 61 | overflow-x: hidden; 62 | padding:3%; 63 | } 64 | 65 | header{ 66 | background-color: var(--color-bg-secondary); 67 | max-width: 100vw; 68 | height: 4rem; 69 | display: flex; 70 | justify-content: center; 71 | align-items: center; 72 | font-size: 1.5rem; 73 | font-weight: bold 74 | 75 | } 76 | 77 | 78 | main { 79 | margin: 0 auto; 80 | max-width: var(--width-content); 81 | padding: 3rem 1rem; 82 | 83 | } 84 | 85 | footer{ 86 | margin-top: 2rem; 87 | background-color: var(--color-bg-secondary); 88 | padding: .1rem; 89 | border-top-style: solid; 90 | border-top-color: var(--color-text-secondary); 91 | border-top-width: 2px; 92 | padding: .2rem 1rem; 93 | 94 | } 95 | 96 | hr { 97 | background-color: var(--color-secondary); 98 | border: none; 99 | height: 1px; 100 | margin: 4rem 0; 101 | width: 100%; 102 | } 103 | 104 | section { 105 | display: flex; 106 | flex-wrap: wrap; 107 | justify-content: var(--justify-important); 108 | } 109 | 110 | section img, 111 | article img { 112 | max-width: 100%; 113 | border-radius: .4rem; 114 | margin: .4rem .2rem; 115 | } 116 | 117 | section pre { 118 | overflow: auto; 119 | color: var(--color-accent); 120 | } 121 | 122 | section aside { 123 | border: 1px solid var(--color-bg-secondary); 124 | border-radius: var(--border-radius); 125 | box-shadow: var(--box-shadow) var(--color-shadow); 126 | margin: 1rem; 127 | padding: 1.25rem; 128 | width: var(--width-card); 129 | } 130 | 131 | section aside:hover { 132 | box-shadow: var(--box-shadow) var(--color-bg-secondary); 133 | background-color: var(--color-bg-secondary); 134 | } 135 | 136 | [hidden] { 137 | display: none; 138 | } 139 | 140 | /* Headers */ 141 | article header, 142 | div header, 143 | main header { 144 | padding-top: 0; 145 | } 146 | 147 | header { 148 | text-align: var(--justify-important); 149 | } 150 | 151 | header a b, 152 | header a em, 153 | header a i, 154 | header a strong { 155 | margin-left: 0.5rem; 156 | margin-right: 0.5rem; 157 | } 158 | 159 | header nav img { 160 | margin: 1rem 0; 161 | } 162 | 163 | section header { 164 | padding-top: 0; 165 | width: 100%; 166 | } 167 | 168 | /* Nav */ 169 | nav { 170 | align-items: center; 171 | display: flex; 172 | font-weight: bold; 173 | justify-content: space-between; 174 | margin-bottom: 3rem; 175 | background-color: var(--color-text-secondary); 176 | padding: 0 0.5rem; 177 | } 178 | 179 | nav ul { 180 | list-style: none; 181 | padding: 0; 182 | } 183 | 184 | nav ul li { 185 | display: inline-block; 186 | margin: 0 0.5rem; 187 | position: relative; 188 | text-align: left; 189 | background-color: var(--color); 190 | padding: .2rem .8rem; 191 | border-radius: 3px; 192 | 193 | } 194 | 195 | /* Nav Dropdown */ 196 | nav ul li:hover ul { 197 | display: block; 198 | } 199 | 200 | nav ul li ul { 201 | background: var(--color-bg); 202 | border: 1px solid var(--color-bg-secondary); 203 | border-radius: var(--border-radius); 204 | box-shadow: var(--box-shadow) var(--color-shadow); 205 | display: none; 206 | height: auto; 207 | left: -2px; 208 | padding: .5rem 1rem; 209 | position: absolute; 210 | top: 1.7rem; 211 | white-space: nowrap; 212 | width: auto; 213 | z-index: 1; 214 | 215 | } 216 | nav ul li ul li{ 217 | margin-top: .3rem; 218 | } 219 | 220 | nav ul li ul::before { 221 | /* fill gap above to make mousing over them easier */ 222 | content: ""; 223 | position: absolute; 224 | left: 0; 225 | right: 0; 226 | top: -0.5rem; 227 | height: 0.5rem; 228 | } 229 | 230 | nav ul li ul li, 231 | nav ul li ul li a { 232 | display: block; 233 | } 234 | 235 | /* Typography */ 236 | code, 237 | samp { 238 | background-color: var(--color-secondary-accent); 239 | border-radius: var(--border-radius); 240 | color: var(--color-text); 241 | display: inline-block; 242 | margin: 0 0.1rem; 243 | padding: 0 0.5rem; 244 | } 245 | 246 | details { 247 | margin: 1.3rem 0; 248 | } 249 | 250 | details summary { 251 | font-weight: bold; 252 | cursor: pointer; 253 | } 254 | 255 | h1, 256 | h2, 257 | h3, 258 | h4, 259 | h5, 260 | h6 { 261 | line-height: var(--line-height); 262 | } 263 | 264 | mark { 265 | padding: 0.1rem; 266 | } 267 | 268 | ol li, 269 | ul li { 270 | padding: 0.2rem 0; 271 | } 272 | 273 | p { 274 | margin: 0.75rem 0; 275 | padding: 0; 276 | } 277 | 278 | pre { 279 | margin: 1rem 0; 280 | max-width: var(--width-card-wide); 281 | padding: 1rem 0; 282 | } 283 | 284 | pre code, 285 | pre samp { 286 | display: block; 287 | max-width: var(--width-card-wide); 288 | padding: 0.5rem 1rem; 289 | white-space: pre-wrap; 290 | font-size: .9rem; 291 | } 292 | 293 | small { 294 | color: var(--color-text-secondary); 295 | } 296 | 297 | sup { 298 | background-color: var(--color-secondary); 299 | border-radius: var(--border-radius); 300 | color: var(--color-bg); 301 | font-size: xx-small; 302 | font-weight: bold; 303 | margin: 0.2rem; 304 | padding: 0.2rem 0.3rem; 305 | position: relative; 306 | top: -2px; 307 | } 308 | 309 | /* Links */ 310 | a { 311 | color: var(--color); 312 | display: inline-block; 313 | font-weight: bold; 314 | text-decoration: none; 315 | } 316 | 317 | a:hover { 318 | filter: brightness(var(--hover-brightness)); 319 | text-decoration: underline; 320 | } 321 | 322 | a b, 323 | a em, 324 | a i, 325 | a strong, 326 | button { 327 | border-radius: var(--border-radius); 328 | display: inline-block; 329 | font-size: medium; 330 | font-weight: bold; 331 | line-height: var(--line-height); 332 | margin: 0.5rem 0; 333 | padding: 0.3rem 4rem; 334 | } 335 | 336 | button { 337 | font-family: var(--font-family); 338 | } 339 | 340 | button:hover { 341 | cursor: pointer; 342 | filter: brightness(var(--hover-brightness)); 343 | } 344 | 345 | a b, 346 | a strong, 347 | button { 348 | background-color: var(--color); 349 | border: 2px solid var(--color); 350 | color: var(--color-bg); 351 | } 352 | 353 | a em, 354 | a i { 355 | border: 2px solid var(--color); 356 | border-radius: var(--border-radius); 357 | color: var(--color); 358 | display: inline-block; 359 | padding: 1rem 2rem; 360 | } 361 | 362 | article aside a { 363 | color: var(--color-text); 364 | } 365 | 366 | /* Images */ 367 | figure { 368 | margin: 0; 369 | padding: 0; 370 | } 371 | 372 | figure img { 373 | max-width: 100%; 374 | border-radius: .5rem; 375 | } 376 | 377 | figure figcaption { 378 | color: var(--color-text-secondary); 379 | } 380 | 381 | /* Forms */ 382 | 383 | button:disabled, 384 | input:disabled { 385 | background: var(--color-bg-secondary); 386 | border-color: var(--color-bg-secondary); 387 | color: var(--color-text-secondary); 388 | cursor: not-allowed; 389 | } 390 | 391 | button[disabled]:hover { 392 | filter: none; 393 | } 394 | 395 | form { 396 | border: 1px solid var(--color-bg-secondary); 397 | border-radius: var(--border-radius); 398 | box-shadow: var(--box-shadow) var(--color-shadow); 399 | display: block; 400 | max-width: var(--width-card-wide); 401 | min-width: var(--width-card); 402 | padding: 1.5rem; 403 | text-align: var(--justify-normal); 404 | } 405 | form:hover{ 406 | box-shadow: var(--box-shadow) var(--color-bg-secondary); 407 | background-color: var(--color-bg-secondary); 408 | } 409 | 410 | form header { 411 | margin: .3rem 0; 412 | padding: .1rem 0; 413 | border-radius: 2rem; 414 | background-color: var(--color); 415 | } 416 | 417 | input, 418 | label, 419 | select, 420 | textarea { 421 | display: block; 422 | font-size: inherit; 423 | max-width: var(--width-card-wide); 424 | } 425 | 426 | input[type="checkbox"], 427 | input[type="radio"] { 428 | display: inline-block; 429 | } 430 | 431 | input[type="checkbox"]+label, 432 | input[type="radio"]+label { 433 | display: inline-block; 434 | font-weight: normal; 435 | position: relative; 436 | top: 1px; 437 | } 438 | 439 | input, 440 | select, 441 | textarea { 442 | border: 1px solid var(--color-bg-secondary); 443 | border-radius: var(--border-radius); 444 | margin-bottom: 1rem; 445 | padding: 0.4rem 0.8rem; 446 | } 447 | 448 | input[readonly], 449 | textarea[readonly] { 450 | background-color: var(--color-bg-secondary); 451 | } 452 | 453 | label { 454 | font-weight: bold; 455 | margin-bottom: 0.2rem; 456 | } 457 | 458 | /* Tables */ 459 | table { 460 | border: 1px solid var(--color-bg-secondary); 461 | border-radius: var(--border-radius); 462 | border-spacing: 0; 463 | display: inline-block; 464 | max-width: 100%; 465 | overflow-x: auto; 466 | padding: 0; 467 | white-space: nowrap; 468 | } 469 | 470 | table{ 471 | margin-top: .6rem; 472 | } 473 | 474 | table td, 475 | table th, 476 | table tr { 477 | 478 | padding: 0.4rem 0.8rem; 479 | text-align: var(--justify-important); 480 | } 481 | 482 | table thead { 483 | background-color: var(--color-secondary); 484 | border-collapse: collapse; 485 | border-radius: var(--border-radius); 486 | color: var(--color-bg); 487 | margin: 0; 488 | padding: 0; 489 | } 490 | 491 | table thead th:first-child { 492 | border-top-left-radius: var(--border-radius); 493 | } 494 | 495 | table thead th:last-child { 496 | border-top-right-radius: var(--border-radius); 497 | } 498 | 499 | table thead th:first-child, 500 | table tr td:first-child { 501 | text-align: var(--justify-normal); 502 | } 503 | 504 | table tr:nth-child(even) { 505 | background-color: var(--color-accent); 506 | } 507 | 508 | /* Quotes */ 509 | blockquote { 510 | display: block; 511 | font-size: x-large; 512 | line-height: var(--line-height); 513 | margin: 1rem auto; 514 | max-width: var(--width-card-medium); 515 | padding: 1.5rem 1rem; 516 | text-align: var(--justify-important); 517 | color: var(--color-secondary-accent); 518 | } 519 | 520 | blockquote footer { 521 | color: var(--color-text-secondary); 522 | display: block; 523 | font-size: small; 524 | line-height: var(--line-height); 525 | padding: .5rem 1.5rem; 526 | text-align: end; 527 | } --------------------------------------------------------------------------------