Nathaniel Flick dirtandrust
dirtandrust
/ checkbox-div.jquery.js
Created
March 28, 2019 21:25
Toggle a checkbox by clicking a div
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(“.checkbox-div").click(function() { | |
| var checkbox = $(this).find("input[type='checkbox']"); | |
| if (!checkbox.prop("checked")) { | |
| checkbox.prop("checked", true); | |
| } else { | |
| checkbox.prop("checked", false); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Overflow behavior at line end | |
| Right end if ltr, left end if rtl */ | |
| text-overflow: clip; | |
| text-overflow: ellipsis; | |
| text-overflow: "…"; | |
| /* Overflow behavior at left end | at right end | |
| Directionality has no influence */ | |
| text-overflow: clip ellipsis; | |
| text-overflow: "…" "…"; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- (Best to use this without the “progress” HTML 5 element) --> | |
| <progress max="100" value="80"> | |
| <div class="progress-bar"> | |
| <span style="width: 80%;">Progress: 80%</span> | |
| </div> | |
| </progress> | |
| <style> | |
| .progress-bar { |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @mixin box-shadow($top, $left, $offset, $blur, $color) { | |
| -webkit-box-shadow: $top $left $offset $blur $color; | |
| -moz-box-shadow: $top $left $offset $blur $color; | |
| -ms-box-shadow: $top $left $offset $blur $color; | |
| -o-box-shadow: $top $left $offset $blur $color; | |
| box-shadow: $top $left $offset $blur $color; | |
| } | |
| @mixin box-shadow-inset($top, $left, $offset, $blur, $color, $inset) { | |
| -webkit-box-shadow: $top $left $offset $blur $color $inset; |
dirtandrust
/ responsive-show-hide.scss
Created
March 28, 2019 21:12
Responsive show/hide media queries
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .tablet-hide { | |
| display: none; | |
| } | |
| @media screen and (min-width: 768px) { | |
| .tablet-hide { | |
| display: block; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php if ($expression == true): ?> | |
| This will show if the expression is true. | |
| <?php else: ?> | |
| Otherwise this will show. | |
| <?php endif; ?> |
dirtandrust
/ responsive-video.css
Created
March 28, 2019 21:08
Responsive Video with out js (or fitVids.js) - credit to Toby Page
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // iFrame instead of fitvids | |
| .iframe-container { | |
| position: relative; | |
| padding-bottom: 56.25%; /* 16:9 */ | |
| height: 0; | |
| iframe, object, embed { | |
| position: absolute; | |
| top: 0; | |
| left: 0; |
dirtandrust
/ typescale-majorthird.css
Created
March 28, 2019 21:05
TypeScale.com - Major Third Type Scale
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| font-size: 1em; | |
| } | |
| body { | |
| background-color: white; | |
| font-family: Arial; | |
| font-weight: 400; | |
| line-height: 1.45; | |
| color: #333; |
dirtandrust
/ less-mixins.less
Created
March 28, 2019 21:03
LESS Mixins - to mimic the more popular ones from SCSS (some from CSS Tricks)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .box.darken { | |
| background-color: @color; | |
| border: 3px solid darken(@color, 20%); | |
| } | |
| @colorDark: darken(@color, 20%); | |
| .box.darken { | |
| background-color: @color; | |
| border: 3px solid @colorDark; |
dirtandrust
/ hide-announcement-banner.jquery.js
Created
March 28, 2019 21:00
jQuery - Cookie remembers the hide state of a banner
NewerOlder