├── .editorconfig ├── .gitignore ├── README.md ├── bower.json ├── buttons.html ├── dist └── tseczka.css ├── extensions.html ├── form.html ├── grid.html ├── gulpfile.js ├── index.html ├── less ├── .DS_Store ├── buttons.less ├── extensions │ └── lists.less ├── footer.less ├── form.less ├── functions.less ├── grid.less ├── info.less ├── mediaqueries.less ├── nav.less ├── tseczka.less ├── typography.less └── vars.less ├── menus.html ├── package.json └── tseczka-css-logo.png /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*.less] 5 | indent_style = space 6 | indent_size = 2 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | bower_components 3 | node_modules 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![tseczka css logo](tseczka-css-logo.png) 2 | #Tseczka CSS Framework 3 | A CSS framework meant to compete with Foundation and Bootstrap. 4 | 5 | ##Purpose 6 | Tseczka came into creation to satisfy several requirements, many of which are personal. 7 | 8 | * create a new class of UI buttons and indicators unlike others 9 | * supply a lightweight framework for multiple purposes. Primary of which will be the development of my Tseczka WP Theme 10 | * help me get better at designing stuff ;) 11 | 12 | 13 | ##Features 14 | What are the features that I'd like to include? 15 | 16 | * removable Grid 17 | * removable Typography with a "grid" class to show vertical rhythm 18 | * basic styling for forms, tables etc. 19 | * buttons ;) 20 | * different UI elements 21 | * extras/features not available in regular build but available in an expanded build. 22 | 23 | ##Log 24 | 25 | * 0.1.4 - Media query adjustment - menu break 26 | * 0.1.3 - Media query fix for navigation, pre and code styling 27 | * 0.1.2 - padding to mediaqueries etc. 28 | * 0.1.1 - progress 29 | * 0.1 - Basic media queries, all basic functionality included and extras as well. First formal production-ready release 30 | * <0.1 Alpha version meant for testing on various projects 31 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tseczka-css", 3 | "version": "0.1.5", 4 | "homepage": "https://github.com/AntJanus/tseczka-CSS-framework", 5 | "authors": [ 6 | "Antonin Januska " 7 | ], 8 | "description": "Modular css framework meant to serve as a starter/boilerplate in development as well as a prototypical tool", 9 | "main": "dist/tseczka.css", 10 | "keywords": [ 11 | "css", 12 | "framework", 13 | "less", 14 | "grid" 15 | ], 16 | "license": "MIT", 17 | "private": false, 18 | "ignore": [ 19 | "node_modules", 20 | "bower_components", 21 | "**.html", 22 | "**/.**" 23 | ], 24 | "dependencies": { 25 | "normalize.css": "~3.0.x" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Testing 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Nav Title 18 | 35 |
36 |
37 |
38 |
39 |

40 | Buttons 41 |

42 |
43 | 54 |

Buttons used in a Sentence. And in another Sentence.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla neque libero, rhoncus sed velit vel, iaculis viverra ante. Suspendisse vitae ipsum euismod, hendrerit arcu laoreet, ullamcorper nunc. Phasellus posuere rhoncus est, posuere bibendum dui hendrerit non. Etiam accumsan nec sapien sit amet rutrum. Vestibulum sed lacus porta, pulvinar est eu, consequat est. Donec feugiat ligula quis c

55 |

Make sure you sign up!

56 |

Sign up! Or Don't!

57 |
58 |
59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /dist/tseczka.css: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Tseczka Framework 4 | * 5 | */ 6 | /* 7 | * Variables 8 | * 9 | */ 10 | .inline { 11 | display: inline-block; 12 | vertical-align: top; 13 | } 14 | .block { 15 | display: block; 16 | } 17 | .fill { 18 | display: block; 19 | width: 100%; 20 | } 21 | .animate-all { 22 | transition: all 1.4s linear; 23 | } 24 | .emboss { 25 | text-shadow: -1px -1px rgba(0, 0, 0, 0.5); 26 | } 27 | .emboss:hover { 28 | text-shadow: 0 0 ; 29 | } 30 | .pull-right { 31 | float: right; 32 | } 33 | /** 34 | TYPOGRAPHY 35 | ---- 36 | This section describes the base type elements 37 | including type modifiers. Some of the styling 38 | has been borrowed from Bootstrap and Foundation. 39 | 40 | TODO: 41 | 42 | * media queries 43 | * expand "other elements" 44 | 45 | **/ 46 | *, 47 | *:before, 48 | *:after { 49 | -moz-box-sizing: border-box; 50 | -webkit-box-sizing: border-box; 51 | box-sizing: border-box; 52 | } 53 | body { 54 | color: #222222; 55 | font-size: 1em; 56 | line-height: 1.5em; 57 | font-family: 'Segoe UI', Verdana, Arial, sans-serif; 58 | } 59 | a { 60 | text-decoration: none; 61 | color: #b5512d; 62 | } 63 | a.secondary { 64 | color: #4965d6; 65 | } 66 | a.secondary:hover { 67 | color: #3453d1; 68 | } 69 | a.muted { 70 | color: #222222; 71 | } 72 | a.muted:hover { 73 | color: #58595b; 74 | } 75 | a.no-underline:hover { 76 | text-decoration: none; 77 | } 78 | a:hover { 79 | text-decoration: underline; 80 | color: #a14828; 81 | } 82 | h1, 83 | h2, 84 | h3, 85 | h4, 86 | h5, 87 | h6 { 88 | margin: 0.75em 0; 89 | line-height: 1.5em; 90 | font-weight: bold; 91 | color: #b5512d; 92 | text-rendering: optimizelegibility; 93 | font-family: Georgia, serif; 94 | } 95 | h1 .sub-header, 96 | h2 .sub-header, 97 | h3 .sub-header, 98 | h4 .sub-header, 99 | h5 .sub-header, 100 | h6 .sub-header { 101 | font-weight: normal; 102 | font-size: .75em; 103 | line-height: 1em; 104 | color: #58595b; 105 | } 106 | h1, 107 | h2 { 108 | margin-bottom: 0.75em; 109 | } 110 | h1 { 111 | font-size: 2em; 112 | line-height: 1.03125em; 113 | } 114 | h2 { 115 | font-size: 1.75em; 116 | line-height: 1.125em; 117 | } 118 | h3 { 119 | font-size: 1.5em; 120 | line-height: 1.6875em; 121 | } 122 | h4 { 123 | font-size: 1.25em; 124 | line-height: 1.04166667em; 125 | } 126 | h5 { 127 | font-size: 1em; 128 | } 129 | h6 { 130 | font-size: 0.75em; 131 | line-height: 0.375em; 132 | } 133 | p { 134 | margin: 0 0 1.5em; 135 | } 136 | ul, 137 | ol { 138 | padding: 0; 139 | margin: 0 0 0.75em 20px; 140 | } 141 | ul ul, 142 | ul ol, 143 | ol ol, 144 | ol ul { 145 | margin-bottom: 0; 146 | } 147 | li { 148 | line-height: 1.5em; 149 | } 150 | .square-list { 151 | list-style-type: square; 152 | } 153 | .circle-list { 154 | list-style-type: circle; 155 | } 156 | .disc-list { 157 | list-style-type: disc; 158 | } 159 | .no-bullet { 160 | list-style-type: none; 161 | margin-left: 0; 162 | } 163 | .inline-list { 164 | margin-left: 0; 165 | list-style: none; 166 | } 167 | .inline-list > li { 168 | display: inline-block; 169 | vertical-align: top; 170 | padding-left: 0; 171 | padding-right: 5px; 172 | } 173 | hr { 174 | margin: 1.5em 0; 175 | border: 0; 176 | border-top: 1px solid #58595b; 177 | border-bottom: 1px solid #b1b2b4; 178 | clear: both; 179 | } 180 | hr.hr-highlight { 181 | border-top: 1px solid #b5512d; 182 | } 183 | hr.hr-dark { 184 | border-top: 1px solid #222222; 185 | border-bottom: 1px solid #58595b; 186 | } 187 | hr.hr-simple { 188 | border-bottom: 0; 189 | border-top: 1px solid #b1b2b4; 190 | } 191 | blockquote { 192 | margin: 0 0 1.5em; 193 | padding: 0 0 0 15px; 194 | border-left: 5px solid #e6e6e6; 195 | } 196 | blockquote cite { 197 | display: block; 198 | color: #b1b2b4; 199 | } 200 | blockquote cite:before { 201 | content: "\2014 \0020"; 202 | } 203 | blockquote cite a, 204 | blockquote cite a:visited { 205 | color: #000000; 206 | } 207 | blockquote.bq-aside { 208 | max-width: 25%; 209 | float: left; 210 | margin: 0.75em 1.5em; 211 | margin-left: 0; 212 | font-size: 1.25em; 213 | font-weight: bold; 214 | } 215 | pre { 216 | margin: 1.5em 0; 217 | padding: .75em 1.5em; 218 | background: #fafafa; 219 | font-family: monospace; 220 | border: 1px solid #b1b2b4; 221 | border-radius: 3px; 222 | overflow: auto; 223 | } 224 | code { 225 | padding: 3px; 226 | background: #fafafa; 227 | border: 1px solid #b1b2b4; 228 | border-radius: 3px; 229 | } 230 | img { 231 | max-width: 100%; 232 | } 233 | .warning { 234 | color: #ff0000; 235 | } 236 | .success { 237 | color: #008000; 238 | } 239 | .container { 240 | max-width: 62.5em; 241 | display: block; 242 | margin: 0 auto; 243 | } 244 | .row { 245 | width: 100%; 246 | padding: 0 0.9375em; 247 | } 248 | .row:before, 249 | .row:after { 250 | display: table; 251 | line-height: 0; 252 | content: ""; 253 | } 254 | .row:after { 255 | clear: both; 256 | } 257 | .col-1, 258 | .col-2, 259 | .col-3, 260 | .col-4, 261 | .col-5, 262 | .col-6, 263 | .col-7, 264 | .col-8, 265 | .col-9, 266 | .col-10, 267 | .col-11, 268 | .col-12 { 269 | margin: 0 3% 0 0; 270 | display: block; 271 | float: left; 272 | } 273 | .last { 274 | margin: 0%; 275 | } 276 | .shaded { 277 | background-color: rgba(0, 0, 0, 0.3); 278 | height: 15px; 279 | } 280 | .col-1 { 281 | width: 5.5%; 282 | } 283 | .col-2 { 284 | width: 14%; 285 | } 286 | .col-3 { 287 | width: 22.5%; 288 | } 289 | .col-4 { 290 | width: 31%; 291 | } 292 | .col-5 { 293 | width: 39.5%; 294 | } 295 | .col-6 { 296 | width: 48%; 297 | } 298 | .col-7 { 299 | width: 56.5%; 300 | } 301 | .col-8 { 302 | width: 65%; 303 | } 304 | .col-9 { 305 | width: 73.5%; 306 | } 307 | .col-10 { 308 | width: 82%; 309 | } 310 | .col-11 { 311 | width: 90.5%; 312 | } 313 | .col-12 { 314 | width: 99%; 315 | margin: 0; 316 | } 317 | /* All Mobile Sizes (devices and browser) */ 318 | @media only screen and (max-width: 767px) { 319 | .col-1, 320 | .col-2, 321 | .col-3, 322 | .col-4, 323 | .col-5, 324 | .col-6, 325 | .col-7, 326 | .col-8, 327 | .col-9, 328 | .col-10, 329 | .col-11, 330 | .col-12 { 331 | margin: 0 3% 0 0; 332 | display: block; 333 | float: none; 334 | width: 95%; 335 | padding-left: 2%; 336 | padding-right: 2%; 337 | } 338 | } 339 | /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 340 | /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 341 | /* 342 | * Buttons 343 | * 344 | */ 345 | .button { 346 | display: inline-block; 347 | margin-bottom: 0; 348 | text-align: center; 349 | vertical-align: middle; 350 | border: 0; 351 | font-size: 1em; 352 | line-height: 1.5em; 353 | cursor: pointer; 354 | background: #222222; 355 | color: #ffffff; 356 | text-decoration: none; 357 | padding: .25em .75em; 358 | } 359 | .button.secondary { 360 | background: #4965d6; 361 | color: #ffffff; 362 | } 363 | .button.secondary:hover { 364 | background: #3453d1; 365 | color: #ffffff; 366 | } 367 | .button.main { 368 | color: #ffffff; 369 | background: #b5512d; 370 | } 371 | .button.main:hover { 372 | background: #a14828; 373 | } 374 | .button:hover { 375 | text-decoration: none; 376 | color: #ffffff; 377 | background: #222222; 378 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); 379 | transition: all 1.4s linear; 380 | text-shadow: -1px -1px rgba(0, 0, 0, 0.5); 381 | } 382 | .button.block { 383 | display: block; 384 | } 385 | /* 386 | * Navbar 387 | * 388 | * structure: 389 | * 390 | * .nav-container 391 | * .nav 392 | * ul 393 | * li 394 | * a 395 | */ 396 | .nav-container .nav { 397 | height: 3em; 398 | width: 62.5em; 399 | margin: 0 auto; 400 | padding: 0 0.9375em; 401 | max-width: 100%; 402 | } 403 | .nav-main { 404 | background: #b5512d; 405 | } 406 | .nav-main li a { 407 | color: #ffffff; 408 | } 409 | .nav-main .nav-title { 410 | color: #ffffff; 411 | } 412 | .nav-logo img { 413 | max-height: 100%; 414 | } 415 | .nav-secondary { 416 | background: #4965d6; 417 | } 418 | .nav-secondary li a { 419 | color: #e6e6e6; 420 | } 421 | .nav-secondary .nav-title { 422 | color: #e6e6e6; 423 | } 424 | .nav-grey { 425 | background: #58595b; 426 | } 427 | .nav-grey li a { 428 | color: #e6e6e6; 429 | } 430 | .nav-grey .nav-title { 431 | color: #e6e6e6; 432 | } 433 | .nav-white { 434 | background: #ffffff; 435 | } 436 | .nav-white li a { 437 | color: #b5512d; 438 | } 439 | .nav-white .nav-title { 440 | color: #b5512d; 441 | } 442 | .nav ul { 443 | padding: 0; 444 | margin: 0; 445 | display: inline-block; 446 | vertical-align: top; 447 | float: right; 448 | } 449 | .nav ul li { 450 | display: inline-block; 451 | vertical-align: top; 452 | margin-left: -3px; 453 | } 454 | .nav ul li:first-child { 455 | margin-left: 0; 456 | } 457 | .nav ul li a { 458 | display: block; 459 | line-height: 3em; 460 | text-decoration: none; 461 | padding: 0 15px; 462 | } 463 | .nav ul li:hover ul { 464 | display: block; 465 | } 466 | .nav ul li ul { 467 | display: none; 468 | position: absolute; 469 | z-index: 9; 470 | } 471 | .nav ul li ul li { 472 | display: block; 473 | margin-left: 0; 474 | text-align: center; 475 | background: #ffffff; 476 | border: 1px solid #b5512d; 477 | margin-top: -1px; 478 | } 479 | .nav ul li ul li a { 480 | color: #b5512d; 481 | display: block; 482 | } 483 | .nav ul li:hover a:hover { 484 | background: rgba(0, 0, 0, 0.1); 485 | box-shadow: 0 0 2px rgba(0, 0, 0, 0.1) inset; 486 | transition: all 1.4s linear; 487 | } 488 | .nav ul li:hover ul { 489 | display: block; 490 | } 491 | .nav-title { 492 | display: inline-block; 493 | vertical-align: top; 494 | font-weight: bold; 495 | line-height: 2em; 496 | font-size: 1.5em; 497 | text-decoration: none; 498 | } 499 | .nav-right ul { 500 | text-align: right; 501 | display: block; 502 | width: auto; 503 | position: relative; 504 | } 505 | .nav-right .nav-title { 506 | position: absolute; 507 | } 508 | .nav-side { 509 | position: fixed; 510 | background-color: transparent !important; 511 | } 512 | .nav-side .nav ul li { 513 | display: block; 514 | margin-left: 0; 515 | margin-bottom: 5px; 516 | } 517 | .nav-side .nav ul li a { 518 | width: 105px; 519 | height: 3em; 520 | } 521 | .nav-side .nav-sub { 522 | left: 105px; 523 | padding-left: 5px; 524 | margin-top: -3em; 525 | } 526 | .nav-side-main ul li { 527 | background: #b5512d; 528 | } 529 | .nav-side-main ul li a { 530 | color: #ffffff; 531 | } 532 | .pagination { 533 | padding: .75em; 534 | } 535 | @media only screen and (max-width: 959px) { 536 | .nav-right ul { 537 | text-align: left; 538 | } 539 | .nav ul { 540 | clear: both; 541 | } 542 | } 543 | @media only screen and (max-width: 479px) { 544 | .nav ul li { 545 | display: block; 546 | } 547 | } 548 | /* All Mobile Sizes (devices and browser) */ 549 | @media only screen and (max-width: 600px) { 550 | .nav-container { 551 | height: auto; 552 | } 553 | .nav-container .nav { 554 | height: auto; 555 | } 556 | .nav-container .nav-title { 557 | display: block; 558 | position: static; 559 | } 560 | .nav-container ul { 561 | float: none; 562 | display: block; 563 | } 564 | .nav-container ul li { 565 | display: block; 566 | } 567 | } 568 | /* 569 | * Footer 570 | * 571 | */ 572 | .footer { 573 | background: #222222; 574 | color: #e6e6e6; 575 | padding: .75em 0; 576 | } 577 | .footer a { 578 | color: #e6e6e6; 579 | } 580 | /* 581 | * Form 582 | * 583 | */ 584 | form { 585 | margin: 0 0 1.5em; 586 | } 587 | fieldset { 588 | padding: 0; 589 | margin: 0; 590 | border: 0; 591 | } 592 | legend { 593 | display: block; 594 | width: 100%; 595 | padding: 0; 596 | margin-bottom: 1.5em; 597 | font-size: 1.5em; 598 | line-height: 3em; 599 | color: #222222; 600 | border: 0; 601 | } 602 | label, 603 | input, 604 | button, 605 | select, 606 | textarea { 607 | font-size: 1em; 608 | font-family: 'Segoe UI', Verdana, Arial, sans-serif; 609 | line-height: 1.5em; 610 | } 611 | input, 612 | textarea { 613 | border: 1px solid #b1b2b4; 614 | } 615 | input[type=text], 616 | input[type=password] { 617 | width: 205px; 618 | } 619 | textarea { 620 | width: 203px; 621 | } 622 | .form-group { 623 | margin-bottom: 0.75em; 624 | } 625 | .form-vertical input, 626 | .form-vertical label, 627 | .form-vertical textarea { 628 | display: block; 629 | } 630 | .form-warning { 631 | border-color: #ff0000; 632 | } 633 | .form-success { 634 | border-color: #008000; 635 | } 636 | .form-message { 637 | display: block; 638 | } 639 | /* 640 | * Media Queries 641 | * 642 | */ 643 | /* Smaller than standard 960 (devices and browsers) */ 644 | /* Tablet Portrait size to standard 960 (devices and browsers) */ 645 | /* All Mobile Sizes (devices and browser) */ 646 | /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 647 | /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 648 | /* 649 | * Lists 650 | * 651 | */ 652 | .block-list { 653 | display: block; 654 | width: 100%; 655 | padding: 0; 656 | margin: 0; 657 | } 658 | .block-list > li { 659 | display: block; 660 | width: 100%; 661 | box-sizing: border-box; 662 | } 663 | .comment-block > li { 664 | border: 1px solid #b1b2b4; 665 | padding: 0.75em; 666 | border-top-width: 0; 667 | } 668 | .comment-block > li:first-child { 669 | border-top-width: 1px; 670 | } 671 | .list-meta { 672 | display: block; 673 | padding: 0; 674 | margin: 0; 675 | } 676 | .list-meta li { 677 | display: inline-block; 678 | vertical-align: top; 679 | font-size: .9em; 680 | } 681 | .feed-list > li { 682 | border-top-width: 0; 683 | margin: 1em 0; 684 | } 685 | .feed-item { 686 | padding-right: .75em; 687 | padding-bottom: 1em; 688 | border-bottom: 3px solid #b5512d; 689 | } 690 | .feed-item .feed-thumb { 691 | float: left; 692 | box-sizing: content-box; 693 | margin-right: 15px; 694 | margin-bottom: 2em; 695 | box-shadow: 0 0 1px #999; 696 | margin-top: 5px; 697 | } 698 | .feed-item .feed-content { 699 | min-height: 150px; 700 | } 701 | .widget-list h4 { 702 | margin-bottom: 0; 703 | line-height: 1; 704 | font-size: 1.1em; 705 | text-transform: uppercase; 706 | margin-left: 5px; 707 | } 708 | .widget-list ul { 709 | list-style: none; 710 | margin-left: 0; 711 | padding: .25 0 1em; 712 | } 713 | .widget-list ul > li:last-child { 714 | border-bottom: 0; 715 | } 716 | .widget-list ul li { 717 | padding: .25em; 718 | border-bottom: 1px solid #b1b2b4; 719 | } 720 | .widget-list ul li span { 721 | font-size: 0.9em; 722 | color: #b1b2b4; 723 | } 724 | .widget-list ul li a { 725 | color: #58595b; 726 | font-weight: bold; 727 | font-size: 0.95em; 728 | } 729 | -------------------------------------------------------------------------------- /extensions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Testing 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Nav Title 18 | 35 |
36 |
37 |
38 |
39 |

Extensions

40 |
41 |

Lists

42 |

Block List

43 |
    44 |
  • in semper est imperdiet. Nullam eget tellus scelerisque, hendrerit libero et, eleifend lacus. Ut cursus ligula a aliquet luctus. Nam aliquet elit accumsan quam porta, eget adipiscing eros commodo. Sed aliquet felis sed nisi gravida, ac malesuada ante tempor. Read More
    • 45 |
  • Donec ante metus, faucibus nec tincidunt nec, porttitor tincidunt justo. Read More
    • 46 |
  • Curabitur ac tristique libero, a vehicula neque. Aliquam est diam, tincidunt quis quam in, varius egestas augue. Read More
    • 47 |
48 |
49 |

Comments

50 |
    51 |
  • in semper est imperdiet. Nullam eget tellus scelerisque, hendrerit libero et, eleifend lacus. Ut cursus ligula a aliquet luctus. Nam aliquet elit accumsan quam porta, eget adipiscing eros commodo. Sed aliquet felis sed nisi gravida, ac malesuada ante tempor. 52 | 57 |
    • 58 |
  • Donec ante metus, faucibus nec tincidunt nec, porttitor tincidunt justo. Read More
    • 59 |
  • Curabitur ac tristique libero, a vehicula neque. Aliquam est diam, tincidunt quis quam in, varius egestas augue. Read More
    • 60 |
61 |
62 |

Feed List

63 |
    64 |
  • Omfg! My status is right here! Whoa, so crazy, right? 65 | 70 |
    71 |
    72 |
      73 |
    • Comments 1
      • 74 |
    • Comments 2
      • 75 |
    • 76 |
      • 77 |
    78 |
    79 |
    • 80 |
  • 81 |
    82 | Omfg! My status is right here! Whoa, so crazy, right? 83 | 88 |
    89 |
    90 |
      91 |
    • Comments 1
      • 92 |
    • Comments 2
      • 93 |
    94 |
    95 |
    • 96 |
97 |
98 |
99 |
100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Testing 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | Nav Title 19 | 36 |
37 |
38 |
39 |
40 |

41 | Forms 42 |

43 |
44 |
45 |

Basic Form Elements

46 |
47 | 48 |
49 | 50 |
51 | 52 |
53 | 54 |
55 | 56 | 57 |
58 |
59 |
60 |
61 |

Horizontal Form

62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
Can't be empty!
70 |
71 |
72 |
73 |
Correst pass format
74 |
75 |
76 |
77 |
78 |
79 |
80 |
 
81 |
82 |
83 |
84 |
85 |
86 |

Vertical Form

87 |
88 |
89 | 90 | 91 |
92 |
93 | 94 | 95 |
96 |
97 | 98 | 99 |
100 |
101 | 102 | 103 |
104 |
105 | 106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Testing 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 | Nav Title 18 | 35 |
36 |
37 |
38 |

39 | Two Col 40 |

41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |

56 | Three Col 57 |

58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |

69 | Nested 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 | 98 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var autoprefix = require('gulp-autoprefixer'); 3 | var less = require('gulp-less'); 4 | 5 | gulp.task('styles', function() { 6 | gulp.src(['./less/tseczka.less']) 7 | .pipe(less()) 8 | .pipe(gulp.dest('./dist/')) 9 | ; 10 | }); 11 | 12 | gulp.task('default', ['styles'], function(){ 13 | gulp.watch('./less/*.less', ['styles']); 14 | }); 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Testing 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | Nav Title 19 | 36 |
37 |
38 |
39 |
40 |

41 | Testing Typography 42 |

43 |
44 |

45 | Headings: 46 |

47 |
48 |

49 | Head1 50 | 51 | Test 52 | 53 |

54 |

55 | Head2 56 | 57 | Test 58 | 59 |

60 |

61 | Head3 62 | 63 | Test 64 | 65 |

66 |

67 | Head4 68 | 69 | Test 70 | 71 |

72 |
73 | Head5 74 | 75 | Test 76 | 77 |
78 |
79 | Head6 80 | 81 | Test 82 | 83 |
84 |
85 |
86 |
87 |

88 | Anchors: 89 |

90 |
91 | Test 92 |
93 | Secondary 94 |
95 | Muted 96 |
97 | No underline 98 |
99 |
100 |
101 |

102 | Lists 103 |

104 |
105 |

106 | Basic Lists 107 |

108 |
    109 |
  • 110 | basic list 111 |
    • 112 |
  • 113 | another item 114 |
    • 115 |
  • 116 | third item 117 |
    • 118 |
119 |
    120 |
  1. 121 | basic list 122 |
    2. 123 |
  2. 124 | another item 125 |
    3. 126 |
  3. 127 | third item 128 |
    4. 129 |
130 |

131 | Types of Lists 132 |

133 |

134 | Square 135 |

136 |
    137 |
  • 138 | basic list 139 |
    • 140 |
  • 141 | another item 142 |
    • 143 |
  • 144 | third item 145 |
    • 146 |
147 |

148 | Circle 149 |

150 |
    151 |
  • 152 | basic list 153 |
    • 154 |
  • 155 | another item 156 |
    • 157 |
  • 158 | third item 159 |
    • 160 |
161 |

162 | Disc 163 |

164 |
    165 |
  • 166 | basic list 167 |
    • 168 |
  • 169 | another item 170 |
    • 171 |
  • 172 | third item 173 |
    • 174 |
175 |

176 | No-Bullet 177 |

178 |
    179 |
  • 180 | basic list 181 |
    • 182 |
  • 183 | another item 184 |
    • 185 |
  • 186 | third item 187 |
    • 188 |
189 |

190 | Inline 191 |

192 |
    193 |
  • 194 | basic list 195 |
    • 196 |
  • 197 | another item 198 |
    • 199 |
  • 200 | third item 201 |
    • 202 |
203 |
204 |
205 |
206 |

207 | Other Elements: 208 |

209 |
210 |

211 | Lines 212 |

213 |

214 | Normal 215 |

216 |
217 |

218 | Highlight 219 |

220 |
221 |

222 | Dark 223 |

224 |
225 |

226 | Simple 227 |

228 |
229 |

230 | Blockquotes 231 |

232 |
233 | Sample blockquote text meant to demonstrate how our blockquote will work. 234 | Hope it works well! 235 | 236 | Simple citation 237 | 238 |
239 |

240 | Aside 241 |

242 |

243 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor interdum 244 | commodo. Nunc risus sapien, porttitor porttitor dignissim non, dignissim 245 | vel tortor. Mauris ligula massa, rhoncus sed bibendum vitae, elementum 246 | sodales risus. Nunc nunc nisl, rhoncus vitae rhoncus eget, aliquam a nisl. 247 | Praesent tellus ipsum, pretium vel congue nec, dignissim non sem. 248 |

249 |
250 | Testing the aside blockquote 251 |
252 |

253 | Aliquam erat volutpat. Etiam ultricies vulputate consequat. Morbi eu ultrices 254 | ligula. Nunc non lacus a tortor ullamcorper lobortis a non elit. Sed at 255 | nisl metus. Maecenas blandit quam et orci aliquet bibendum. Donec cursus 256 | mattis lorem, iaculis accumsan turpis euismod id. 257 |

258 |
259 |
260 |
261 |

Pre and code

262 | 
$('#something').hide().show().parent().click(function(e){
263 |                         e.preventDefault();
264 |                         //some stuff here
265 |                     });
266 |
267 |

268 | It's sometimes difficult to place random code into a sentence. Sometimes it's not. 269 |

270 |
271 |
272 |
273 | 299 | 300 | 301 | -------------------------------------------------------------------------------- /less/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AntJanus/tseczka-CSS-framework/9778bf512c2b57dd793318011d6a339e26dceb0d/less/.DS_Store -------------------------------------------------------------------------------- /less/buttons.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Buttons 3 | * 4 | */ 5 | 6 | .button{ 7 | display: inline-block; 8 | margin-bottom: 0; 9 | text-align: center; 10 | vertical-align: middle; 11 | border: 0; 12 | font-size: @font-size; 13 | line-height: @baseline-height; 14 | cursor: pointer; 15 | background: @base-dark-grey; 16 | color: @base-white; 17 | text-decoration: none; 18 | padding: .25em .75em; 19 | 20 | &.secondary{ 21 | background: @secondary-color; 22 | color: @base-white; 23 | &:hover{ 24 | background: @secondary-color-dark; 25 | color: @base-white; 26 | } 27 | } 28 | 29 | &.main{ 30 | color: @base-white; 31 | background: @main-color; 32 | &:hover{ 33 | background: @main-color-dark; 34 | } 35 | } 36 | 37 | &:hover{ 38 | text-decoration: none; 39 | color:@base-white; 40 | background: @base-dark-grey; 41 | box-shadow: 0 0 2px rgba(0,0,0,.2); 42 | .animate-all; 43 | text-shadow: -1px -1px rgba(0,0,0,.5); 44 | } 45 | 46 | &.block{ 47 | display: block; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /less/extensions/lists.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Lists 3 | * 4 | */ 5 | 6 | 7 | //basic "block" style list 8 | .block-list{ 9 | display: block; 10 | width: 100%; 11 | padding: 0; 12 | margin: 0; 13 | 14 | &>li{ 15 | display:block; 16 | width: 100%; 17 | box-sizing: border-box; 18 | } 19 | } 20 | 21 | //comments 22 | .comment-block{ 23 | 24 | &>li{ 25 | border: 1px solid @base-light-grey; 26 | padding: @baseline-height / 2; 27 | border-top-width: 0; 28 | 29 | &:first-child{ 30 | border-top-width: 1px; 31 | } 32 | } 33 | } 34 | 35 | .list-meta{ 36 | display: block; 37 | padding: 0; 38 | margin: 0; 39 | li{ 40 | .inline; 41 | font-size: .9em; 42 | } 43 | } 44 | 45 | //feed list 46 | 47 | .feed-list{ 48 | &>li{ 49 | border-top-width: 0; 50 | margin: 1em 0; 51 | } 52 | } 53 | 54 | .feed-item{ 55 | padding-right: .75em; 56 | padding-bottom: 1em; 57 | border-bottom: 3px solid @main-color; 58 | 59 | .feed-thumb { 60 | float: left; 61 | box-sizing: content-box; 62 | margin-right: 15px; 63 | margin-bottom: 2em; 64 | box-shadow: 0 0 1px #999; 65 | margin-top: 5px; 66 | } 67 | 68 | .feed-content { 69 | min-height: 150px; 70 | } 71 | } 72 | 73 | //widget style list 74 | .widget-list { 75 | h4 { 76 | margin-bottom: 0; 77 | line-height: 1; 78 | font-size: @font-size * 1.1; 79 | text-transform: uppercase; 80 | margin-left: 5px; 81 | } 82 | 83 | ul { 84 | list-style: none; 85 | margin-left: 0; 86 | padding: .25 0 1em; 87 | 88 | &>li:last-child { 89 | border-bottom: 0; 90 | } 91 | 92 | li { 93 | padding: .25em; 94 | border-bottom: 1px solid @base-light-grey; 95 | span { 96 | font-size: @font-size * .90; 97 | color: @base-light-grey; 98 | } 99 | a { 100 | color: @base-grey; 101 | font-weight: bold; 102 | font-size: @font-size * .95; 103 | } 104 | } 105 | } 106 | } 107 | 108 | -------------------------------------------------------------------------------- /less/footer.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Footer 3 | * 4 | */ 5 | 6 | .footer{ 7 | background: @base-dark-grey; 8 | color: @base-off-white; 9 | padding: .75em 0; 10 | 11 | a{ 12 | color: @base-off-white; 13 | } 14 | } 15 | 16 | -------------------------------------------------------------------------------- /less/form.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Form 3 | * 4 | */ 5 | 6 | form { 7 | margin: 0 0 @baseline-height; 8 | } 9 | 10 | fieldset { 11 | padding: 0; 12 | margin: 0; 13 | border: 0; 14 | } 15 | 16 | legend { 17 | display: block; 18 | width: 100%; 19 | padding: 0; 20 | margin-bottom: @baseline-height; 21 | font-size: @font-size * 1.5; 22 | line-height: @baseline-height * 2; 23 | color: @base-dark-grey; 24 | border: 0; 25 | } 26 | 27 | label, 28 | input, 29 | button, 30 | select, 31 | textarea { 32 | font-size: @font-size; 33 | font-family: @font-family-sans; 34 | line-height: @baseline-height; 35 | } 36 | 37 | input, textarea{ 38 | border: 1px solid @base-light-grey; 39 | } 40 | 41 | //widths 42 | input[type=text], input[type=password] { 43 | width: 205px; 44 | } 45 | 46 | textarea { 47 | width: 203px; 48 | } 49 | 50 | //forms 51 | 52 | .form-horizontal { 53 | 54 | } 55 | 56 | .form-group { 57 | margin-bottom: @baseline-height / 2; 58 | } 59 | 60 | .form-vertical { 61 | input, label, textarea{ 62 | display: block; 63 | } 64 | } 65 | 66 | //warnings 67 | 68 | .form-warning { 69 | border-color: @warning; 70 | } 71 | 72 | .form-success { 73 | border-color: @success; 74 | } 75 | 76 | //messages 77 | 78 | .form-message { 79 | display: block; 80 | } 81 | -------------------------------------------------------------------------------- /less/functions.less: -------------------------------------------------------------------------------- 1 | .inline{ 2 | display: inline-block; 3 | vertical-align: top; 4 | } 5 | 6 | .block{ 7 | display: block; 8 | } 9 | 10 | .fill{ 11 | display: block; 12 | width: 100%; 13 | } 14 | .animate-all{ 15 | transition: all 1.4s linear; 16 | } 17 | 18 | .emboss{ 19 | text-shadow: -1px -1px rgba(0,0,0,.5); 20 | 21 | &:hover{ 22 | text-shadow: 0 0 ; 23 | } 24 | } 25 | 26 | .pull-right{ 27 | float:right; 28 | } 29 | -------------------------------------------------------------------------------- /less/grid.less: -------------------------------------------------------------------------------- 1 | //setting up grid 2 | // witht he help of One%CSS 3 | 4 | .container{ 5 | max-width: @container-width; 6 | display: block; 7 | margin: 0 auto; 8 | } 9 | 10 | .row{ 11 | width: 100%; 12 | padding: 0 0.9375em; 13 | } 14 | .row:before, 15 | .row:after { 16 | display: table; 17 | line-height: 0; 18 | content: ""; 19 | } 20 | 21 | .row:after { 22 | clear: both; 23 | } 24 | 25 | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{ 26 | margin: 0 3% 0 0; 27 | display: block; 28 | float: left; 29 | } 30 | 31 | .last{ 32 | margin: 0%; 33 | } 34 | 35 | .shaded{ 36 | background-color: rgba(0,0,0, .3); 37 | height: 15px; 38 | } 39 | 40 | .col-1 { width: 5.5%; } 41 | .col-2 { width: 14%; } 42 | .col-3 { width: 22.5%; } 43 | .col-4 { width: 31%; } 44 | .col-5 { width: 39.5%; } 45 | .col-6 { width: 48%; } 46 | .col-7 { width: 56.5%; } 47 | .col-8 { width: 65%; } 48 | .col-9 { width: 73.5%; } 49 | .col-10 { width: 82%; } 50 | .col-11 { width: 90.5%; } 51 | .col-12 { width: 99%; margin: 0; } 52 | 53 | /* All Mobile Sizes (devices and browser) */ 54 | @media only screen and (max-width: 767px) { 55 | .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12{ 56 | margin: 0 3% 0 0; 57 | display: block; 58 | float: none; 59 | width: 95%; 60 | padding-left: 2%; 61 | padding-right: 2%; 62 | } 63 | } 64 | 65 | /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 66 | @media only screen and (min-width: 480px) and (max-width: 767px) {} 67 | 68 | /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 69 | @media only screen and (max-width: 479px) { 70 | 71 | } 72 | -------------------------------------------------------------------------------- /less/info.less: -------------------------------------------------------------------------------- 1 | /** 2 | * 3 | * Tseczka Framework 4 | * 5 | */ 6 | -------------------------------------------------------------------------------- /less/mediaqueries.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Media Queries 3 | * 4 | */ 5 | 6 | /* Smaller than standard 960 (devices and browsers) */ 7 | @media only screen and (max-width: 959px) { 8 | 9 | } 10 | /* Tablet Portrait size to standard 960 (devices and browsers) */ 11 | @media only screen and (min-width: 768px) and (max-width: 959px) {} 12 | 13 | /* All Mobile Sizes (devices and browser) */ 14 | @media only screen and (max-width: 767px) { 15 | 16 | } 17 | 18 | /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ 19 | @media only screen and (min-width: 480px) and (max-width: 767px) {} 20 | 21 | /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ 22 | @media only screen and (max-width: 479px) { 23 | 24 | } 25 | -------------------------------------------------------------------------------- /less/nav.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Navbar 3 | * 4 | * structure: 5 | * 6 | * .nav-container 7 | * .nav 8 | * ul 9 | * li 10 | * a 11 | */ 12 | 13 | .nav-container{ 14 | 15 | .nav{ 16 | height: @baseline-height * 2; 17 | width: @container-width; 18 | margin: 0 auto; 19 | padding: 0 0.9375em; 20 | max-width: 100%; 21 | } 22 | } 23 | 24 | //nav colors 25 | .nav-main{ 26 | background: @main-color; 27 | li a{ 28 | color: @nav-main-font-color; 29 | } 30 | 31 | .nav-title{ 32 | color: @nav-main-font-color; 33 | } 34 | } 35 | 36 | .nav-logo { 37 | img { 38 | max-height: 100%; 39 | } 40 | } 41 | 42 | .nav-secondary{ 43 | background: @secondary-color; 44 | li a{ 45 | color: @nav-second-font-color; 46 | } 47 | 48 | .nav-title{ 49 | color: @nav-second-font-color; 50 | } 51 | } 52 | 53 | .nav-grey{ 54 | background: @base-grey; 55 | li a { 56 | color: @nav-grey-font-color; 57 | } 58 | 59 | .nav-title{ 60 | color: @nav-grey-font-color; 61 | } 62 | } 63 | 64 | .nav-white{ 65 | background: @base-white; 66 | li a{ 67 | color: @nav-white-font-color; 68 | } 69 | 70 | .nav-title{ 71 | color: @nav-white-font-color; 72 | } 73 | } 74 | 75 | .nav ul{ 76 | padding: 0; 77 | margin: 0; 78 | .inline; 79 | float: right; 80 | 81 | li{ 82 | display: inline-block; 83 | vertical-align: top; 84 | margin-left: -3px; 85 | &:first-child{ 86 | margin-left: 0; 87 | } 88 | 89 | a{ 90 | display: block; 91 | line-height: 3em; 92 | text-decoration: none; 93 | padding: 0 15px; 94 | } 95 | 96 | &:hover ul { 97 | display: block; 98 | } 99 | 100 | ul { 101 | display: none; 102 | position: absolute; 103 | z-index: 9; 104 | 105 | li { 106 | display: block; 107 | margin-left: 0; 108 | text-align: center; 109 | background: @base-white; 110 | border: 1px solid @main-color; 111 | margin-top: -1px; 112 | 113 | a { 114 | color: @main-color; 115 | display: block; 116 | } 117 | } 118 | } 119 | } 120 | } 121 | 122 | //effects 123 | .nav ul li:hover { 124 | a:hover{ 125 | background: rgba(0,0,0,.1); 126 | box-shadow: 0 0 2px rgba(0,0,0,.1) inset; 127 | .animate-all; 128 | } 129 | 130 | ul { 131 | display: block; 132 | } 133 | } 134 | 135 | //nav title 136 | .nav-title{ 137 | .inline; 138 | font-weight:bold; 139 | line-height: 2em; 140 | font-size: 1.5em; 141 | text-decoration: none; 142 | } 143 | 144 | .nav-right{ 145 | ul{ 146 | text-align: right; 147 | display: block; 148 | width: auto; 149 | position: relative; 150 | } 151 | 152 | .nav-title{ 153 | position: absolute; 154 | } 155 | } 156 | 157 | .nav-side { 158 | position: fixed; 159 | background-color: transparent !important; 160 | 161 | .nav ul li { 162 | display: block; 163 | margin-left: 0; 164 | margin-bottom: 5px; 165 | 166 | a { 167 | width: 105px; 168 | height: @baseline-height * 2; 169 | } 170 | } 171 | 172 | .nav-sub { 173 | left: 105px; 174 | padding-left: 5px; 175 | margin-top: -@baseline-height * 2; 176 | } 177 | } 178 | 179 | .nav-side-main ul li { 180 | background: @main-color; 181 | a { 182 | color: @base-white; 183 | } 184 | } 185 | //pagination 186 | .pagination { 187 | padding: .75em; 188 | 189 | } 190 | 191 | @media only screen and (max-width: 959px) { 192 | .nav-right ul { 193 | text-align: left; 194 | } 195 | 196 | .nav ul { 197 | clear: both; 198 | } 199 | } 200 | 201 | @media only screen and (max-width: 479px) { 202 | .nav ul li { 203 | display: block; 204 | } 205 | } 206 | 207 | /* All Mobile Sizes (devices and browser) */ 208 | @media only screen and (max-width: 600px) { 209 | .nav-container { 210 | height: auto; 211 | 212 | .nav { 213 | height: auto; 214 | } 215 | 216 | .nav-title { 217 | display: block; 218 | position: static; 219 | } 220 | 221 | ul { 222 | float: none; 223 | display: block; 224 | 225 | li { 226 | display: block; 227 | } 228 | } 229 | } 230 | 231 | } 232 | -------------------------------------------------------------------------------- /less/tseczka.less: -------------------------------------------------------------------------------- 1 | //imports all of the other files 2 | @import "info.less"; 3 | @import "vars.less"; 4 | @import "functions.less"; 5 | @import "typography.less"; 6 | @import "grid.less"; 7 | @import "buttons.less"; 8 | @import "nav.less"; 9 | @import "footer.less"; 10 | @import "form.less"; 11 | @import "mediaqueries.less"; 12 | 13 | //extensions 14 | @import "extensions/lists.less"; 15 | -------------------------------------------------------------------------------- /less/typography.less: -------------------------------------------------------------------------------- 1 | /** 2 | TYPOGRAPHY 3 | ---- 4 | This section describes the base type elements 5 | including type modifiers. Some of the styling 6 | has been borrowed from Bootstrap and Foundation. 7 | 8 | TODO: 9 | 10 | * media queries 11 | * expand "other elements" 12 | 13 | **/ 14 | 15 | *, 16 | *:before, 17 | *:after { 18 | -moz-box-sizing: border-box; 19 | -webkit-box-sizing: border-box; 20 | box-sizing: border-box; 21 | } 22 | 23 | //body 24 | body { 25 | color: @font-color; 26 | font-size: @font-size; 27 | line-height: @baseline-height; 28 | font-family: @font-family-sans; 29 | } 30 | 31 | // typography test for webkit ONLY! 32 | body { 33 | } 34 | 35 | // anchors 36 | a { 37 | text-decoration: none; 38 | color: @font-highlight; 39 | 40 | &.secondary{ 41 | color: @secondary-color; 42 | &:hover{ 43 | color: @secondary-color-dark; 44 | } 45 | } 46 | &.muted{ 47 | color: @base-dark-grey; 48 | &:hover{ 49 | color: @base-grey; 50 | } 51 | } 52 | &.no-underline{ 53 | &:hover{ 54 | text-decoration: none; 55 | } 56 | } 57 | 58 | &:hover{ 59 | text-decoration:underline; 60 | color: @font-highlight-hover; 61 | } 62 | } 63 | 64 | // headings 65 | h1, h2, h3, h4, h5, h6 { 66 | margin: (@baseline-height / 2) 0; 67 | line-height: @baseline-height; 68 | font-weight: bold; 69 | color: @font-header; 70 | text-rendering: optimizelegibility; 71 | font-family: @font-family-serif; 72 | .sub-header{ 73 | font-weight: normal; 74 | font-size: .75em; 75 | line-height: 1em; 76 | color: @base-grey; 77 | } 78 | } 79 | 80 | h1, h2{ 81 | margin-bottom: (@baseline-height / 2); 82 | } 83 | 84 | h1{ 85 | font-size: @font-size * 2; 86 | line-height: ((@font-size * 2.75)/(@baseline-height * 4 )) * (@font-size * 2.25); 87 | } 88 | 89 | h2{ 90 | font-size: @font-size * 1.75; 91 | line-height: ((@font-size * 2.25)/(@baseline-height * 3 )) * (@font-size * 2.25); 92 | } 93 | 94 | h3{ 95 | font-size: @font-size * 1.5; 96 | line-height: ((@font-size * 2.25)/(@baseline-height * 2 )) * (@font-size * 2.25); 97 | } 98 | 99 | h4{ 100 | font-size: @font-size * 1.25; 101 | line-height: ((@font-size * 1.25)/@baseline-height ) * (@font-size * 1.25); 102 | } 103 | 104 | h5{ font-size: @font-size;} 105 | 106 | h6{ 107 | font-size: @font-size * 0.75; 108 | line-height: ((@font-size * 0.75)/@baseline-height ) * (@font-size * 0.75); 109 | } 110 | 111 | // paragraph 112 | p{ 113 | margin: 0 0 @baseline-height; 114 | } 115 | 116 | // lists 117 | ul, ol{ 118 | padding: 0; 119 | margin: 0 0 (@baseline-height / 2) 20px; 120 | } 121 | 122 | ul ul, ul ol, ol ol, ol ul{ 123 | margin-bottom: 0; 124 | } 125 | 126 | li{ 127 | line-height: @baseline-height; 128 | } 129 | 130 | .square-list {list-style-type: square;} 131 | .circle-list {list-style-type: circle;} 132 | .disc-list {list-style-type: disc;} 133 | .no-bullet{ 134 | list-style-type: none; 135 | margin-left: 0; 136 | } 137 | .inline-list{ 138 | margin-left: 0; 139 | list-style: none; 140 | > li{ 141 | .inline; 142 | padding-left: 0; 143 | padding-right: 5px; 144 | } 145 | } 146 | 147 | 148 | // other elements 149 | hr { 150 | margin: @baseline-height 0; 151 | border: 0; 152 | border-top: 1px solid @base-grey; 153 | border-bottom: 1px solid @base-light-grey; 154 | clear: both; 155 | 156 | &.hr-highlight{ 157 | border-top: 1px solid @main-color; 158 | } 159 | &.hr-dark{ 160 | border-top: 1px solid @base-dark-grey; 161 | border-bottom: 1px solid @base-grey; 162 | } 163 | &.hr-simple{ 164 | border-bottom: 0; 165 | border-top: 1px solid @base-light-grey; 166 | } 167 | } 168 | 169 | blockquote{ 170 | margin: 0 0 @baseline-height; 171 | padding: 0 0 0 15px; 172 | border-left: 5px solid @base-off-white; 173 | cite{ 174 | display: block; 175 | color: @base-light-grey; 176 | &:before{ 177 | content: "\2014 \0020"; 178 | } 179 | a, a:visited{ 180 | color: @base-black; 181 | } 182 | } 183 | 184 | &.bq-aside{ 185 | max-width: 25%; 186 | float: left; 187 | margin: @baseline-height /2 @baseline-height; 188 | margin-left: 0; 189 | font-size: @font-size * 1.25; 190 | font-weight: bold; 191 | } 192 | } 193 | 194 | pre{ 195 | margin: @baseline-height 0; 196 | padding: .75em 1.5em; 197 | background: @base-very-light-grey; 198 | font-family: monospace; 199 | border: 1px solid @base-light-grey; 200 | border-radius: 3px; 201 | overflow: auto; 202 | } 203 | 204 | code { 205 | padding: 3px; 206 | background: @base-very-light-grey; 207 | border: 1px solid @base-light-grey; 208 | border-radius: 3px; 209 | } 210 | 211 | img { 212 | max-width: 100%; 213 | } 214 | 215 | //additions 216 | .warning{ 217 | color: @warning; 218 | } 219 | 220 | .success{ 221 | color: @success; 222 | } 223 | 224 | -------------------------------------------------------------------------------- /less/vars.less: -------------------------------------------------------------------------------- 1 | /* 2 | * Variables 3 | * 4 | */ 5 | 6 | @base-white: #fff; 7 | @base-black: #000; 8 | @base-grey: #58595B; 9 | @base-light-grey: lighten(@base-grey, 35%); 10 | @base-very-light-grey: lighten(@base-grey, 63%); 11 | @base-dark-grey: #222; 12 | @base-off-white: #e6e6e6; 13 | 14 | @main-color: #b5512d; 15 | @secondary-color: #4965d6; 16 | 17 | @main-color-dark: darken(@main-color, 5%); 18 | @main-color-light: lighten(@main-color, 5%); 19 | 20 | @secondary-color-dark: darken(@secondary-color, 5%); 21 | @secondary-color-light: lighten(@secondary-color, 5%); 22 | 23 | @warning: red; 24 | @success: green; 25 | 26 | //type vars 27 | @baseline-height: 1.5em; 28 | @font-size: 1em; 29 | @font-color: @base-dark-grey; 30 | @font-highlight: @main-color; 31 | @font-highlight-hover: @main-color-dark; 32 | @font-header: @font-highlight; 33 | @font-family-sans: 'Segoe UI', Verdana, Arial, sans-serif; 34 | @font-family-serif: Georgia, serif; 35 | 36 | 37 | //grid 38 | 39 | @container-width: 62.5em; 40 | 41 | //nav colors 42 | @nav-main-font-color: @base-white; 43 | @nav-second-font-color: @base-off-white; 44 | @nav-grey-font-color: @base-off-white; 45 | @nav-white-font-color: @main-color; 46 | 47 | -------------------------------------------------------------------------------- /menus.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Testing 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | Nav Title 19 | 36 |
37 |
38 |
39 |
40 |
41 | 71 |
72 |
73 |
74 | 75 | 76 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "application-name", 3 | "version": "0.1.5", 4 | "private": true, 5 | "devDependencies": { 6 | "gulp-autoprefixer": "0.0.7", 7 | "gulp": "^3.6.2", 8 | "gulp-less": "^1.2.3" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /tseczka-css-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AntJanus/tseczka-CSS-framework/9778bf512c2b57dd793318011d6a339e26dceb0d/tseczka-css-logo.png --------------------------------------------------------------------------------