થોડા સમય પહેલા, મારા સાથીદાર ડિએગોએ ઘણા લેખો (જેમ કે આ) વેબ સામગ્રી બનાવવા માટેના ફ્રેમવર્ક વિશે, વધુ ખાસ કરીને જે ડિઝાઇન પ્રદાન કરવા માટે જવાબદાર છે. અંતે, વેબ બ્રાઉઝર્સ માત્ર બંધારણ માટે HTML સમજે છે, સીએસએસ ડિઝાઇન અને JavaScript માટે, જેમ કે મારા શિક્ષકે આ વિશે કહ્યું છે, સામગ્રીને એનિમેટ કરો, જો કે ત્યાં લારાવેલ અથવા જેંગો જેવા ફ્રેમવર્ક છે જે વિપરીત કહે છે. તેઓ જેવો દેખાય છે. આજે આપણે અહીં શું કરવા જઈ રહ્યા છીએ તે સમજાવે છે કે આપણે HTML સામગ્રીને આકાર આપવા માટે ક્યારે એક અથવા બીજો વિકલ્પ પસંદ કરવો જોઈએ.
ટેઈલવિન્ડ અને બુટસ્ટ્રેપનો હેડલાઈનમાં ઉલ્લેખ કરવામાં આવ્યો હોવા છતાં, તે નામોથી મારો અર્થ એ છે કે કેટલાક લોકો શુદ્ધ CSS અને યોગ્ય ફ્રેમવર્ક અને સંપૂર્ણ ફ્રેમવર્ક વચ્ચેનો મધ્યબિંદુ માને છે. તે બંને ફ્રેમવર્ક છે, પરંતુ બુટસ્ટ્રેપમાં લગભગ બધું જ થઈ ગયું છે અને Tailwind વધુ કસ્ટમાઇઝેશન માટે પરવાનગી આપે છે. હું પહેલાથી જ એક કારણની અપેક્ષા રાખું છું એક અથવા બીજો વિકલ્પ પસંદ કરો, પરંતુ ચાલો CSS નો ઉપયોગ ક્યારે કરવો તેની સાથે શરૂ કરીએ.
મારી વેબસાઇટ માટે શુદ્ધ CSS ક્યારે પસંદ કરવું
શુદ્ધ CSS એ છે જ્યારે તમે લખો છો પસંદગીકારોનો ઉપયોગ કરીને મેન્યુઅલી બધા નિયમો. ઉદાહરણ તરીકે, જ્યારે હું ઇચ્છું છું કે નેવિગેશન બારમાં લાલ પૃષ્ઠભૂમિ હોય અને લિંક્સ અલગ રંગ અને કેન્દ્રમાં હોય, ત્યારે લક્ષ્ય બ્રાઉઝર નેસ્ટેડ નિયમોને સપોર્ટ કરે છે એમ ધારીને હું નીચેની જેમ કંઈક લખીશ.
nav { પૃષ્ઠભૂમિ-રંગ:લાલ; રંગ: વાદળી; માર્જિન:0; ટેક્સ્ટ-સંરેખિત: કેન્દ્ર; a { પેડિંગ: 10px; રંગ:સફેદ } }
ઉપરોક્તમાં આપણે હજી પણ કંઈક ઉમેરવું પડશે જો આપણે તે ખૂબ જ સરળ - અને નબળી રીતે ડિઝાઇન કરેલ હોય, તો તે કહેવું જ જોઇએ - નેવિગેશન બાર ધાર પર અટકી જાય છે, અને તે છે દસ્તાવેજના મુખ્ય ભાગમાં કોઈ માર્જિન નથી. નહિંતર, બ્રાઉઝર્સ દરેક વસ્તુની આસપાસ સરહદ દર્શાવે છે.
અને તેથી બધું સાથે.
- સારુ:
- શુદ્ધ CSS નો ઉપયોગ કરીને આપણે જે બનાવીએ છીએ તેના પર આપણું સંપૂર્ણ નિયંત્રણ છે.
- બધું કામ કરવા માટે અમારે ઘણી ફાઇલો ઉમેરવાની જરૂર નથી, અમારા પ્રોજેક્ટમાં ફ્રેમવર્ક ઇન્સ્ટોલ કરવું ઘણું ઓછું છે.
- ખરાબ:
- બધા CSS ને હાથથી લખવું એ એક સરળ પ્રોજેક્ટ માટે સારું હોઈ શકે છે, પરંતુ જો પ્રોજેક્ટ જટિલ હોય અથવા અમારે ઘણા વેબ પેજ બનાવવા હોય તો એટલું નહીં. હંમેશા શરૂઆતથી શરૂ કરવું ખર્ચાળ, અવેતન છે અને તેથી જ ફ્રેમવર્ક અસ્તિત્વમાં છે.
ક્યારે બુટસ્ટ્રેપ પસંદ કરવું (અથવા અન્ય "સંપૂર્ણ" ફ્રેમવર્ક)
બુટસ્ટ્રેપ અને મોટાભાગના CSS - અને નોન-CSS - ફ્રેમવર્ક બનાવવામાં આવે છે ઉત્પાદકતા વિશે વિચારવું. તેઓ સામાન્ય રીતે "ઓછું લખો, વધુ કરો" તરીકે ઓળખાતી ફિલસૂફી ધરાવે છે. સામાન્ય નિયમ તરીકે, તે CSS ફાઇલો છે, અને કદાચ JavaScript પણ છે, જેનો ઉપયોગ શરૂ કરવા માટે બધું તૈયાર છે.
શુદ્ધ CSSથી વિપરીત, જે પસંદગીકારો, બુટસ્ટ્રેપ અને અન્ય સમાન વિકલ્પો સાથે કામ કરે છે તેઓ એવા વર્ગોનો ઉપયોગ કરે છે જે ટેગમાં સમાવિષ્ટ છે એક તત્વનું. ઉદાહરણ તરીકે, જો આપણે વાદળી ટેક્સ્ટ, લાલ પૃષ્ઠભૂમિ અને આંતરિક વિભાજન સાથે પ્રકાર 1 (h1) હેડર બનાવવા માંગીએ છીએ, તો આપણે આના જેવું કંઈક લખવું જોઈએ:
આ લખાણ છે
મને ખબર નથી કે તમે નોંધ્યું છે કે મેં રંગો માટે "પ્રાથમિક" અને "ડેન્જર" નો ઉપયોગ કર્યો છે, અને બુટસ્ટ્રેપમાં મેનુઓ, બટનો અને સંદેશાઓ માટે ઘણા બધા છે. જો આપણે અન્યનો ઉપયોગ કરવા માંગીએ છીએ, તો આપણે આપણા પોતાના CSSનો ઉપયોગ કરવો પડશે અને બુટસ્ટ્રેપ નિયમો પર ફરીથી લખવું પડશે. તે અથવા ફ્રેમવર્કની .css ફાઇલમાં ફેરફાર કરો.
- સારુ:
- ઘટકો ઝડપથી બનાવવા માટે દસ્તાવેજો અને ઉદાહરણો છે.
- તે પ્રતિભાવશીલ છે અને પ્રથમ મોબાઇલ.
- જો તમે તેના દસ્તાવેજીકરણમાંથી ઉદાહરણો લો તો બુટસ્ટ્રેપ વિશે વધુ જાણ્યા વિના પણ વેબ પૃષ્ઠો ઝડપથી બનાવી શકાય છે.
- ખરાબ:
- બુટસ્ટ્રેપ વડે પૃષ્ઠ બનાવવું અને તેને ઝડપથી કરવાથી તે સ્પષ્ટ થાય છે કે તમે તેની ડિઝાઇન માટે શું વાપર્યું છે.
- જો તમે તમારા પોતાના નિયમો અને ટ્વિક્સ લાગુ ન કરો તો બહુ ઓછા કસ્ટમાઇઝ કરી શકાય છે.
Tailwind ક્યારે પસંદ કરવું
Tailwind પણ એક ફ્રેમવર્ક છે, પરંતુ ઘણા લોકો તેને શુદ્ધ CSS અને બાકીના ફ્રેમવર્ક વચ્ચે મૂકે છે તેની પોતાની લાક્ષણિક શૈલી ન હોવા માટે. જલદી આપણે તેને ઇન્સ્ટોલ કરીએ છીએ, આપણે એવી વસ્તુઓ જોઈશું જેમ કે બધા હેડરો સમાન કદ ધરાવે છે, અને તે એટલા માટે છે કારણ કે તેની પાસે સારી ફરીથી સેટ કરો જેથી વપરાશકર્તા બધું નિયંત્રિત કરે. બુટસ્ટ્રેપ ઉદાહરણમાંથી હેડર પ્રકાર 1 મેળવવા માટે, Tailwinds અમને આના જેવું કંઈક પૂછે છે:
આ લખાણ છે
બુટસ્ટ્રેપ કોમ્બો વર્ગમાં સમાનતા અને તફાવતો છે. ઉદાહરણ તરીકે, આંતરિક માર્જિન અથવા ગાદી તે સમાન છે, દરેક તેના પોતાના કદ સાથે, પરંતુ સમાન વાક્યરચના, અને ટેક્સ્ટને કેન્દ્રમાં રાખવા માટેનો વર્ગ પણ છે. પહેલેથી જ રંગો જેટલા અલગ છે. જ્યારે બુટસ્ટ્રેપમાં મૂળભૂત રીતે માત્ર કેટલાક રંગોનો સમાવેશ થાય છે જે પ્રાથમિક, ગૌણ, ભય, ચેતવણી વગેરે હોય છે, ત્યારે Tailwind વધુ વૈવિધ્યસભર શ્રેણી પ્રદાન કરે છે અને તમે 9 જેટલા વિવિધ ટોન સાથે રંગ સેટ કરી શકો છો. તે બધાને જાણવા માટે, તે વાંચવા યોગ્ય છે સત્તાવાર દસ્તાવેજીકરણ.
- સારુ:
- તે અન્ય ફ્રેમવર્ક કરતાં હળવા હોવાનું કહેવાય છે.
- અમે શું ડિઝાઇન કરીએ છીએ તેના પર આપણું બધું નિયંત્રણ છે; અમે નિર્ધારિત આધાર પર આધાર રાખતા નથી.
- વર્ગના નામો વધુ શુદ્ધ CSS જેવા છે.
- ખરાબ:
- તેની સ્થાપના સૌથી સરળ નથી. જો કે તેનો ઉપયોગ ટેગમાં ઉમેરવામાં આવેલ CDN સાથે થઈ શકે છે વડા, આ ગંભીર પ્રોજેક્ટ માટે આગ્રહણીય નથી.
- Tailwind CSS અંશતઃ Sass જેવું ટેક્સ્ટ પ્રી-પ્રોસેસર છે અને અમને એક ઇનપુટ ફાઇલની જરૂર છે જે દરેક વસ્તુને શુદ્ધ CSSમાં કમ્પાઇલ અને અનુવાદ કરશે.
- HTML ખૂબ સ્વચ્છ નથી; ઘણી શૈલીઓવાળા તત્વમાં વિશાળ વર્ગ હોઈ શકે છે, પરંતુ આનો ઉકેલ છે, જો કે તમારે કરવું પડશે તે શીખો.
ગ્રિડ y ફ્લેક્સ CSS ફ્રેમવર્ક સાથે
આ ફ્રેમવર્ક વિશે સકારાત્મક બાબત છે અને શુદ્ધ CSS વિશે નકારાત્મક બાબત છે. અન્ય કરતાં સરળ આવૃત્તિઓ છે, અને નિયંત્રિત કરો ગ્રિડ y ફ્લેક્સ CSS જટિલ હોઈ શકે છે. ફ્રેમવર્કે આ વિશે વિચાર્યું છે, અને ઉદાહરણ તરીકે બુટસ્ટ્રેપ પાસે 12 કૉલમ પર આધારિત સરળ ઉકેલ છે.
ધારો કે અમારી પાસે 6 તત્વો સાથેનું મેનુ અથવા તેના જેવું કંઈક છે અને અમે તેને સ્ક્રીનની પહોળાઈના આધારે ગોઠવવા માંગીએ છીએ, જેને તરીકે પણ ઓળખવામાં આવે છે. વ્યુપોર્ટ. તેને શુદ્ધ CSS સાથે કરવા માટે તમારે મીડિયા ક્વેરીઝનો ઉપયોગ કરવો પડશે, જે એક ક્વેરી જેવો છે જે બ્રાઉઝર સ્ક્રીનના પ્રકાર વિશે બનાવે છે જેમાંથી અમે સામગ્રીની મુલાકાત લઈ રહ્યા છીએ. સીએસએસમાં દરેક સ્ક્રીનની પહોળાઈ માટે @મીડિયાનો સમાવેશ થશે અને તેમાંના દરેકમાં આપણે "ગ્રીડ" ને ફરીથી ગોઠવવું પડશે. બુટસ્ટ્રેપ આને આ રીતે હલ કરે છે:
ટેક્સ્ટ ટેક્સ્ટ ટેક્સ્ટ ટેક્સ્ટ ટેક્સ્ટ ટેક્સ્ટ
અગાઉના વર્ગો સૂચવે છે:
- કોલ -12: "સામાન્ય" કદમાં, જે બુટસ્ટ્રેપ મોબાઇલ સ્ક્રીનને આ રીતે લે છે, દરેક ઘટક કુલ (12/12) પર કબજો કરશે, જે સ્ક્રીનની સમગ્ર પહોળાઈ પર કબજો કરતી બીજી એકની નીચે છ પંક્તિઓ બનાવશે. તેને અવગણી શકાય છે, કારણ કે તે ડિફોલ્ટ વર્તન છે.
- col-md-6- મધ્યમ સ્ક્રીનો પર, દરેક તત્વ અડધો (6/12) લેશે, તેથી ટોચ પર બે, મધ્યમાં બે અને નીચે બે હશે.
- col-lg-4- મોટી સ્ક્રીન પર, દરેક તત્વ ત્રીજા ભાગ (4/12) લેશે, તેથી ટોચ પર ત્રણ અને તળિયે ત્રણ હશે.
- col-xl-2- મોટી સ્ક્રીન પર, દરેક આઇટમ છઠ્ઠો ભાગ (2/12) લેશે, તેથી 6 આઇટમ્સ હોવાથી, તમામ છ સાથેની એક પંક્તિ પ્રદર્શિત થશે.
બુટસ્ટ્રેપમાં ગ્રીડ વિશે વધુ માહિતી.
નિષ્કર્ષ
ફ્રેમવર્ક અને આ પ્રકારના સાધનો તેઓ વધુ સારા થવા માટે બનાવવામાં આવ્યા છે, અને તેઓ અર્થપૂર્ણ છે, સૌથી ઉપર, જ્યારે આપણે કાર્યક્ષમ રીતે ઉત્પાદન કરવાની જરૂર હોય. જ્યારે તમારે થોડો CSS નો ઉપયોગ કરવો હોય, ત્યારે તેમાં વધુ પડતું ન પડવું અને તેને હાથ વડે વળગી રહેવું એ કદાચ શ્રેષ્ઠ છે. જ્યારે આપણે કસ્ટમાઇઝેશન વિશે વધુ પડતી કાળજી લીધા વિના કંઈક ઝડપી જોઈએ છે, ત્યારે બુટસ્ટ્રેપ જેવું કંઈક ઉકેલ હોઈ શકે છે. અને જો આપણે સંપૂર્ણ નિયંત્રણ મેળવવા માંગતા હોય, ભલે આપણે થોડી મહેનત કરવી પડે, મધ્યમ બિંદુ, ટેઈલવિન્ડ.