Bootstrap Themes

📖 Theory

દરેક Bootstrap ની site સરખી દેખાય છે

FestConnect ચાલે છે અને સરસ રીતે ફરી ગોઠવાય છે, પણ એ બીજી દરેક Bootstrap ની site જેવી દેખાય છે: એ જ ભૂરું btn-primary, એ જ અક્ષરો, એ જ ગોળ ખૂણા. આયોજકોને fest નું ગરમ કેસરી brand જોઈએ છે, અને projector પરના સાંજના સમયપત્રકના પડદા માટે dark mode.

તમે કશું ફરી બાંધતા નથી. Theming હયાત ઘટકો કેવા દેખાય છે એ બદલે છે જ્યારે તમારું HTML અને classes બરાબર જેમ છે તેમ રહે છે.

📖 Theory

ઘર ફરી રંગવું, ફરી બાંધવું નહીં

ઘરની દીવાલો, દરવાજા અને ઓરડા એની રચના છે; રંગ અને સામાન એનો દેખાવ. વાતાવરણ બદલવા તમે ફરી રંગો છો, દીવાલો તોડતા નથી. Bootstrap નું theme એ ફરી રંગવાનું છે: એ જ grid, એ જ બટન, એ જ cards (રચના), પણ નવા રંગ, અક્ષરો અને ખૂણા (દેખાવ). તમારા બટન પરનું btn-primary બદલાતું નથી; 'primary' નો અર્થ શું છે એ બદલાય છે.

📖 Theory

Theme લગાડવાની રીતો

સૌથી હળવીથી સૌથી ઊંડી સુધી:

• CSS બદલવું: રંગ/અક્ષરો બદલવા Bootstrap પછી load થતા તમારા પોતાના નિયમો લખો (Unit 1 નું cascade: છેલ્લો જીતે).
• Variables બદલવાં: Bootstrap --bs-primary જેવાં CSS નાં variables ઉઘાડાં રાખે છે; જથ્થાબંધ brand બદલવા એમને ગોઠવો.
• રંગની પદ્ધતિઓ: જડેલો dark mode ચાલુ કરવા data-bs-theme="dark" ઉમેરો.
• પહેલેથી બનેલું theme: તૈયાર theme ની stylesheet જોડો જે મૂળભૂત દેખાવની જગ્યા લે છે.
• Sass ફરી compile કરવું: પૂરા કાબૂ માટે મૂળનાં variables બદલીને ફરી બાંધો.

⌨️ Practical

FestConnect ને નવું brand આપવું

<head>
  <!-- Bootstrap first ... -->
  <link href="bootstrap.min.css" rel="stylesheet">
  <!-- ... THEN your overrides, so they win the cascade -->
  <style>
    :root { --bs-primary: #e8590c; }   /* fest orange */
    body  { font-family: 'Poppins', sans-serif; }
  </style>
</head>

<!-- dark mode for the projector schedule -->
<body data-bs-theme="dark">
  <button class="btn btn-primary">Register</button>  <!-- now orange -->
</body>

This example runs in Gri-Learn on the web, where you can edit it and see the output.

💭 Think first

'Bootstrap પછી' કેમ?

તમારું પોતાનું --bs-primary: #e8590c; ત્યારે જ અસર કરે છે જ્યારે તમારું <style> એ Bootstrap ના <link> પછી મુકાયું હોય. Unit 1 નો કયો નિયમ આ સમજાવે છે, અને જો તમે તમારું style Bootstrap પહેલાં મૂકો તો શું થાય?

🧩 Quiz

આયોજકોને કોઈ પોતાના CSS વગર સમયપત્રકના પાનાની ઝડપી dark આવૃત્તિ જોઈએ છે. Bootstrap 5 માં સૌથી સાદી જડેલી રીત કઈ છે?

1. <html> કે container પર data-bs-theme="dark" ઉમેરો
2. દરેક btn-primary નું નામ હાથે બદલીને btn-dark કરો
3. Bootstrap ની link કાઢી નાખો જેથી પાનું સાદું થઈ જાય
4. Dark mode છે જ નહીં; તમારે Sass ફરી compile કરવું પડે

⚠️ Watch out

Theming ના ફાંદા

1. Bootstrap પહેલાં load થતા બદલા: એ cascade હારી જાય છે અને 'કશું કરતા નથી' એવું લાગે છે. તમારું CSS પછી load કરો.

2. bootstrap.min.css ને સીધું સુધારવું: આ ક્યારેય ન કરો; પછીનું update તમારા ફેરફારો ભૂંસી નાખશે. એને બદલે અલગ file માં બદલો.

3. Theme ને layout સાથે ગૂંચવવું: theme રંગ/અક્ષરો બદલે છે, grid નહીં. જો cards ખોટી જગ્યાએ હોય, તો એ grid ની સમસ્યા છે, theme ની નહીં.

📖 Theory

Unit 2 પૂરું: ખરેખરું front end

FestConnect હવે responsive, brand વાળું અને ઘટકોમાં વહેંચાયેલું છે, અને એ પણ હાથે એક પણ media query લખ્યા વગર. પણ એ હજી સ્થિર poster જ છે: બટન કશું કરતાં નથી, બેઠકોની ગણતરી ક્યારેય ખસતી નથી, કશું validate થતું નથી. Unit 3 JavaScript લાવે છે, એ ભાષા જે પાનાને પ્રતિભાવ આપતું બનાવે છે, અને શરૂઆત થાય છે JS ક્યાં ચાલે છે અને તમે BCA303 તથા BCA105 માં મળેલા server-side ના code થી એ કેવી રીતે જુદું છે એનાથી.

✅ Summary

Key takeaways

• Theme ઘટકો કેવા દેખાય છે એ બદલે છે (રંગ, અક્ષરો, ખૂણા), તમારું HTML કે classes નહીં.
• Bootstrap પછી તમારું પોતાનું CSS load કરીને બદલો (cascade: છેલ્લો જીતે); bootstrap.min.css ને ક્યારેય સીધું ન સુધારો.
• --bs-primary જેવાં variables ગોઠવીને જથ્થાબંધ brand બદલો.
• <html> કે container પર data-bs-theme="dark" થી જડેલો dark mode ચાલુ કરો.
• પહેલેથી બનેલી theme ની stylesheets અને Sass ફરી compile કરવાથી વધુ ઊંડો કાબૂ મળે છે.
• Memory hook: ઘર ફરી રંગો, ફરી ન બાંધો.