Custom Form Elements - Radio & Checkbox Inputs. Using ONLY (S)CSS.
A Pen by Matt Daniel Brown on CodePen.
Matt Daniel Brown mattdanielbrown
This file contains 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
| <div class="iphones"> | |
| <div class="iphone"> | |
| <header class="header"> | |
| <a href="#" class="button button--small"> | |
| <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> | |
| <use xlink:href="#icon-arrow-left" /> | |
| </svg> | |
| </a> | |
| <h1>Sign up</h1> | |
| </header> |
This file contains 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
| <canvas id = 'c'></canvas> |
mattdanielbrown
/ custom-form-elements-radio-checkbox-inputs-only-s-css.markdown
Created
January 14, 2023 22:37
Custom Form Elements : Radio & Checkbox Inputs (ONLY (S)CSS)
A Pen by Matt Daniel Brown on CodePen.
mattdanielbrown
/ dropdown-using-details-and-input-type-radio.markdown
Created
January 1, 2023 14:56
Dropdown using <details> and <input type="radio">
Recreation of this Dribbble shot https://dribbble.com/shots/15124959-Light-UI-Elements by Jan Hoffmann.
A Pen by Matt Daniel Brown on CodePen.
mattdanielbrown
/ _color-for-properties_and_set-color-for-properties_mixins.scss
Last active
December 29, 2022 23:06
SCSS @Mixins for setting color/colors for a property/properties.
This file contains 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
| // Property Variable Definitions | |
| $color-prop : color; | |
| $bd-color-prop : border-color; | |
| $bg-color-prop : background-color; | |
| // Default argument (variable) values for @mxin color-for-props() | |
| $bg-and-bd-color-props : $bd-color-prop, $bg-color-prop; | |
| $bd-color-and-txt-color-props : $bd-color-prop, $color-prop; |
mattdanielbrown
/ bash_script_usage_v2.template.sh
Last active
December 11, 2023 22:02
Bash Script USAGE (function, message, text content) TEMPLATE ( and/or example ... ) [ >> VERSION 2.1 ]
This file contains 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
| #=============================================================================== | |
| # NAME : bash_script_usage_v2.template.sh | |
| # VERSION : 2.1.0 | |
| # CREATED : Dec 12 23:41:26 CST 2022 | |
| # AUTHOR : Matt Daniel Brown <[email protected]> | |
| # WEB : gist.github.com/mattdanielbrown/f00f119358b57a20ca9db67718dfbaf3 | |
| #------------------------------------------------------------------------------- | |
| # USAGE : Copy the `usage()` function below and paste into your bash script | |
| # ... and then, replace the details as is appropriate for your script. | |
| #=============================================================================== |
mattdanielbrown
/ bash_script_usage.template.sh
Created
December 13, 2022 05:36
Bash Script USAGE (function, message, text content) TEMPLATE ( and/or example ... )
This file contains 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
| # Print usage | |
| usage() { | |
| echo -n "${scriptName} [OPTION]... [FILE]... | |
| NAME | |
| ============================================================================== | |
| The Full Name | |
| • Expanded or 'Friendly' : Name Of The Script/App/Project |
mattdanielbrown
/ bashColorCodeVariables.sh
Created
December 13, 2022 05:33
BASH COLOR ESCAPE CODES - Variable definition, array usage, functions, ect. --- [SCRATCH PAD, WIP (alpha) ]
This file contains 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
| #!/usr/bin/env bash | |
| function define_color_escape_code_variables() { | |
| # black='\e[0;30m' | |
| export black='\e[30m' | |
| export red='\e[31m' | |
| export green='\e[32m' | |
| export brown='\e[33m' |
Recreation of this Dribbble shot designed by the talented Vishnu Prasad: https://dribbble.com/shots/11522673-Landing-Page-Components
A Pen by Matt Daniel Brown on CodePen.