Macaan2024 / SPC-LMS

SPC Library Management System
0 stars 0 forks source link

MOBILE UI RESPONSIVE #8

Open Macaan2024 opened 5 months ago

Macaan2024 commented 5 months ago

!!!!! EYES HERE !!! READ THE FOLLOWING BELOW

  1. BOOTSTRAP

    • Use pure bootstrap but still can use semi css for modifying colors and sizes or any situational design that bootstrap can't provide.
  2. Use Media Queries to impalement Viewport (320, 480, 620, 720, 900, 1200, 1400, 1600, 1900)

    • Need to be responsive 320 to 1920
    • Cards must be Responsive base on the viewport, the size can increase if the viewport is increasing then if viewport is decreasing then the size must be decreasing too. to achieve this use media queries then do not use units pixels if not necessary, instead use the units rem or em and vw.
    • font-size, use media queries again then the units much preffered use em or rem.
    • font-size, do not use wrap text as always or no wrap as always just try to judge the situation of text you are modifying.
    • proper aligning and staying, use flex-box or grids. or mix it. and also just keep remember as always that no matter what the viewport of the screen is, the divider of the width is always 12 if you are using rows and col.

--------- TUTORIALS LINKS ------------------- GRID https://www.youtube.com/watch?v=x7tLPhnA06w&list=PL4cUxeGkcC9itC4TxYMzFCfveyutyPOCY

FLEX BOX https://youtu.be/z6tJ5ngiF14?si=8PBhVO6uCUWSU01d

Typography(FONTS) & UNITS https://www.youtube.com/watch?v=_ybQREu-NU0&list=PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit&index=4 (VIDEO) INCLUDE WATCH PLAYLIST GOODS NA GOODS NI SIYA.
https://w3schools.com/cssref/css_units.php (READING)

BOOTSTRAP TAGALOG VERSION FULL TUTORIAL https://www.youtube.com/watch?v=NUCvrUU8NFo&t=5s