fav

🔸 Code ┊ CSS ┊ Design ┊ Help ┊ Materials

Global Functions, helper functions ⭐️, getter/setter
DOM ⟩ $(), $all() ⭐️
CSS ⟩ Layout, style.prop(), Color Names
String ⟩ .escapeHTML(), .kebabToCamelCase(), .capitalize()

Code

DOM

Componet

Others

⭐️

String

<!-- ⭐️ external module script -->
<script type="module" src="script.js"></script>

CSS

/* centered element */
.centered-element {

  margin: 0;
  
  /* ⭐️  child 跟隨 parent 的坐標系   */
  position: absolute;
  
  /* ⭐️  垂直水平置中   */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ⭐️ inset shadow */
box-shadow: 2px 2px 5px 0px #404040 inset;

:root { 
    font-size: calc(1rem + 0.5vw);     /* ⭐️ 字體隨螢幕變大 */
}

/* reset */
* {
    padding: 0;
    margin: 0;
}

/* :root = html (with higher specificity) */
:root { 
    box-sizing: border-box; 
}

/* "*" doesn't include pseudo-elements */
*, ::before, ::after {
    /* box-sizing isn’t normally an inherited property, */
    /* use `inherit` to force it.                       */
    box-sizing: inherit;
}

/* ⭐️ import Font Awesome */
@import url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css");

/* -- custom styling for all icons -- */
.fas, .fab {
    border: 1px solid black;
    font-size: 48px;
    background-color: white;
    color: black;
}

/* -- custom styling for specific icons -- */
.fa-facebook {
    color: rgb(59, 91, 152);
}

Design

Omatsuri - web design tools ❤️
Tiny Helpers - web design (lots of) tools 😲

Help

素材

⋯ «» 
╭──⭐️──╮  // ╮
╰──⭐️──╯  // ⭐️
       // ╯

┌──────┐
│ text │
└──────┘

root
  ├ index.html
  ├ style.css
  ├ calc-app.js
  ├ calc-app-styles.css
  └ Calculator.js
  
root
  ├ index.html
  ├ style.css
  ├ calc-app ──┬ calc-app.js
  │            ├ calc-app-styles.css
  │            └ Calculator.js
  └ calc-app ──┬ calc-app.js
               ├ calc-app-styles.css
               └ Calculator.js

root
  ├ index.html
  ├ style.css
  ├ calc-app.js
  ├ calc-app-styles.css
  └ Calculator.js
  
root
  ├ index.html
  ├ style.css
  └ calc-app ──┬ calc-app.js
               ├ calc-app-styles.css
               └ Calculator.js

PreviousfreeCodeCamp Nexttools

Last updated 2 years ago

Was this helpful?