ബൂട്ട്‌സ്‌ട്രാപ്പിനൊപ്പം കുറവ് ഉപയോഗിക്കുന്നു
ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS നിർമ്മിക്കാൻ ഉപയോഗിക്കുന്ന വേരിയബിളുകൾ, മിക്സിനുകൾ എന്നിവയും അതിലേറെയും പ്രയോജനപ്പെടുത്തുന്നതിന്, ഒരു CSS പ്രീപ്രൊസസറായ LESS ഉപയോഗിച്ച് ബൂട്ട്സ്ട്രാപ്പ് ഇഷ്ടാനുസൃതമാക്കുകയും വിപുലീകരിക്കുകയും ചെയ്യുക .
കുറച്ച് കൊണ്ട് നിർമ്മിച്ചത്
എന്തുകൊണ്ട് കുറവ്?
ബൂട്ട്സ്ട്രാപ്പ് അതിന്റെ കാതലിൽ കുറച്ച് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്, ഞങ്ങളുടെ നല്ല സുഹൃത്തായ അലക്‌സിസ് സെല്ലിയർ സൃഷ്‌ടിച്ച ഡൈനാമിക് സ്‌റ്റൈൽഷീറ്റ് ഭാഷ . ഇത് സിസ്റ്റം അടിസ്ഥാനമാക്കിയുള്ള CSS വികസിപ്പിക്കുന്നത് വേഗമേറിയതും എളുപ്പമുള്ളതും കൂടുതൽ രസകരവുമാക്കുന്നു.
എന്താണ് ഉൾപ്പെടുത്തിയിരിക്കുന്നത്?
CSS-ന്റെ വിപുലീകരണമെന്ന നിലയിൽ, വേരിയബിളുകൾ, കോഡിന്റെ പുനരുപയോഗിക്കാവുന്ന സ്‌നിപ്പെറ്റുകൾക്കായുള്ള മിക്സിനുകൾ, ലളിതമായ ഗണിതത്തിനുള്ള പ്രവർത്തനങ്ങൾ, നെസ്റ്റിംഗ്, കൂടാതെ കളർ ഫംഗ്‌ഷനുകൾ എന്നിവയും കുറവ് ഉൾപ്പെടുന്നു.
വേരിയബിളുകൾ
CSS-ൽ നിറങ്ങളും പിക്സൽ മൂല്യങ്ങളും കൈകാര്യം ചെയ്യുന്നത് അൽപ്പം വേദനാജനകമാണ്, സാധാരണയായി കോപ്പിയും പേസ്റ്റും നിറഞ്ഞതാണ്. കുറവാണെങ്കിലും അല്ല - നിറങ്ങളോ പിക്സൽ മൂല്യങ്ങളോ വേരിയബിളുകളായി നൽകുകയും അവ ഒരിക്കൽ മാറ്റുകയും ചെയ്യുക.
മിക്സിൻസ്
സാധാരണ CSS-ൽ നിങ്ങൾ ചെയ്യേണ്ട ആ മൂന്ന് ബോർഡർ-റേഡിയസ് പ്രഖ്യാപനങ്ങൾ? നിങ്ങൾക്ക് എവിടെയും പുനരുപയോഗിക്കാവുന്ന കോഡിന്റെ സ്‌നിപ്പെറ്റുകൾ, മിക്സിനുകളുടെ സഹായത്തോടെ അവ ഇപ്പോൾ ഒരു വരിയിലേക്ക് ഇറങ്ങി.
പ്രവർത്തനങ്ങൾ
ഓപ്പറേഷനുകൾക്കൊപ്പം ഈച്ചയിൽ കണക്ക് ചെയ്തുകൊണ്ട് നിങ്ങളുടെ ഗ്രിഡ്, ലീഡിംഗ്, കൂടുതൽ ഫ്ലെക്സിബിൾ ആക്കുക. CSS സാനിറ്റിയിലേക്കുള്ള നിങ്ങളുടെ വഴി ഒന്നിലധികം, വിഭജിക്കുക, ചേർക്കുക, കുറയ്ക്കുക.
ബൂട്ട്സ്ട്രാപ്പ് വേരിയബിളുകൾ കുറവ് വേരിയബിളുകൾ, അവയുടെ മൂല്യങ്ങൾ, ഉപയോഗ മാർഗ്ഗനിർദ്ദേശങ്ങൾ
ഹൈപ്പർലിങ്കുകൾ
@linkColor |
#08c | ഡിഫോൾട്ട് ലിങ്ക് ടെക്സ്റ്റ് വർണ്ണം | |
@linkColorHover |
darken(@linkColor, 15%) |
ഡിഫോൾട്ട് ലിങ്ക് ടെക്സ്റ്റ് ഹോവർ നിറം |
ഗ്രിഡ് സിസ്റ്റം
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
ടൈപ്പോഗ്രാഫി
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
ഗ്രേസ്കെയിൽ നിറങ്ങൾ
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
ആക്സന്റ് നിറങ്ങൾ
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
ഘടകങ്ങൾ
ബട്ടണുകൾ
@primaryButtonBackground |
@linkColor |
ഫോമുകൾ
@placeholderText |
@grayLight |
നവബാർ
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
ഫോം സ്റ്റേറ്റുകളും അലേർട്ടുകളും
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
ബൂട്ട്സ്ട്രാപ്പ് മിക്സിനുകൾ
മിക്സിനുകളെ കുറിച്ച്
അടിസ്ഥാന മിക്സിനുകൾ
അടിസ്ഥാന മിക്സിൻ എന്നത് സിഎസ്‌എസിന്റെ ഒരു സ്‌നിപ്പെറ്റിനുള്ള ഉൾപ്പെടുത്തലോ ഭാഗികമോ ആണ്. അവ ഒരു CSS ക്ലാസ് പോലെ എഴുതിയിരിക്കുന്നു, എവിടെയും വിളിക്കാവുന്നതാണ്.
- . ഘടകം {
- . clearfix ();
- }
പാരാമെട്രിക് മിക്സിനുകൾ
ഒരു പാരാമെട്രിക് മിക്സിൻ ഒരു അടിസ്ഥാന മിക്സിൻ പോലെയാണ്, എന്നാൽ ഇത് ഓപ്‌ഷണൽ ഡിഫോൾട്ട് മൂല്യങ്ങളുള്ള പാരാമീറ്ററുകളും (അതിനാൽ പേര്) സ്വീകരിക്കുന്നു.
- . ഘടകം {
- . ബോർഡർ - ആരം ( 4px );
- }
നിങ്ങളുടേത് എളുപ്പത്തിൽ ചേർക്കുക
ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ മിക്കവാറും എല്ലാ മിക്സിനുകളും mixins.less-ൽ സംഭരിച്ചിരിക്കുന്നു, ടൂൾകിറ്റിലെ ഏതെങ്കിലും .less ഫയലുകളിൽ മിക്സിൻ ഉപയോഗിക്കാൻ നിങ്ങളെ പ്രാപ്‌തമാക്കുന്ന ഒരു മികച്ച യൂട്ടിലിറ്റി .ലെസ്സ് ഫയലാണ്.
അതിനാൽ, മുന്നോട്ട് പോയി നിലവിലുള്ളവ ഉപയോഗിക്കുക അല്ലെങ്കിൽ നിങ്ങൾക്ക് ആവശ്യമുള്ളതുപോലെ നിങ്ങളുടേത് ചേർക്കാൻ മടിക്കേണ്ടതില്ല.
മിക്സിനുകൾ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്
യൂട്ടിലിറ്റികൾ
| മിക്സിൻ | പരാമീറ്ററുകൾ | ഉപയോഗം |
|---|---|---|
.clearfix() |
ഒന്നുമില്ല | ഉള്ളിലെ ഫ്ലോട്ടുകൾ മായ്‌ക്കാൻ ഏതെങ്കിലും രക്ഷകർത്താവിനെ ചേർക്കുക |
.tab-focus() |
ഒന്നുമില്ല | വെബ്കിറ്റ് ഫോക്കസ് ശൈലിയും റൗണ്ട് ഫയർഫോക്സ് ഔട്ട്ലൈനും പ്രയോഗിക്കുക |
.center-block() |
ഒന്നുമില്ല | ഒരു ബ്ലോക്ക്-ലെവൽ ഘടകം ഉപയോഗിച്ച് യാന്ത്രികമായി കേന്ദ്രീകരിക്കുകmargin: auto |
.ie7-inline-block() |
ഒന്നുമില്ല | display: inline-blockIE7 പിന്തുണ ലഭിക്കുന്നതിന് റെഗുലറിന് പുറമേ ഉപയോഗിക്കുക |
.size() |
@height: 5px, @width: 5px |
ഒരു വരിയിൽ ഉയരവും വീതിയും വേഗത്തിൽ സജ്ജമാക്കുക |
.square() |
@size: 5px |
.size()വീതിയും ഉയരവും ഒരേ മൂല്യമായി സജ്ജീകരിക്കാൻ ബിൽഡ് ഓൺ ചെയ്യുന്നു |
.opacity() |
@opacity: 100 |
പൂർണ്ണ സംഖ്യകളിൽ, അതാര്യത ശതമാനം (ഉദാ, "50" അല്ലെങ്കിൽ "75") സജ്ജമാക്കുക |
ഫോമുകൾ
| മിക്സിൻ | പരാമീറ്ററുകൾ | ഉപയോഗം |
|---|---|---|
.placeholder() |
@color: @placeholderText |
placeholderഇൻപുട്ടുകൾക്കായി ടെക്സ്റ്റ് വർണ്ണം സജ്ജമാക്കുക |
ടൈപ്പോഗ്രാഫി
| മിക്സിൻ | പരാമീറ്ററുകൾ | ഉപയോഗം |
|---|---|---|
#font > #family > .serif() |
ഒന്നുമില്ല | ഒരു സെരിഫ് ഫോണ്ട് സ്റ്റാക്ക് ഉപയോഗിച്ച് ഒരു ഘടകം ഉണ്ടാക്കുക |
#font > #family > .sans-serif() |
ഒന്നുമില്ല | സാൻസ്-സെരിഫ് ഫോണ്ട് സ്റ്റാക്ക് ഉപയോഗിച്ച് ഒരു ഘടകം ഉണ്ടാക്കുക |
#font > #family > .monospace() |
ഒന്നുമില്ല | ഒരു മോണോസ്പേസ് ഫോണ്ട് സ്റ്റാക്ക് ഉപയോഗിച്ച് ഒരു ഘടകം ഉണ്ടാക്കുക |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ഫോണ്ട് വലുപ്പം, ഭാരം, ലീഡ് എന്നിവ എളുപ്പത്തിൽ സജ്ജമാക്കുക |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ഫോണ്ട് ഫാമിലി സെരിഫായി സജ്ജീകരിക്കുക, വലുപ്പം, ഭാരം, ലീഡ് എന്നിവ നിയന്ത്രിക്കുക |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ഫോണ്ട് ഫാമിലിയെ sans-serif-ലേക്ക് സജ്ജമാക്കുക, വലുപ്പം, ഭാരം, ലീഡ് എന്നിവ നിയന്ത്രിക്കുക |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
ഫോണ്ട് ഫാമിലി മോണോസ്‌പേസിലേക്ക് സജ്ജമാക്കുക, വലുപ്പം, ഭാരം, ലീഡ് എന്നിവ നിയന്ത്രിക്കുക |
ഗ്രിഡ് സിസ്റ്റം
| മിക്സിൻ | പരാമീറ്ററുകൾ | ഉപയോഗം |
|---|---|---|
.container-fixed() |
ഒന്നുമില്ല | @siteWidthനിങ്ങളുടെ ഉള്ളടക്കം കൈവശം വയ്ക്കുന്നതിന് ഒരു നിശ്ചിത വീതിയുള്ള ഒരു കണ്ടെയ്നർ നൽകുക |
.columns() |
@columns: 1 |
എത്ര നിരകളിലേക്കും വ്യാപിക്കുന്ന ഒരു ഗ്രിഡ് കോളം നിർമ്മിക്കുക (ഡിഫോൾട്ടായി 1 കോളം വരെ) |
.offset() |
@columns: 1 |
എത്ര നിരകളിലേക്കും വ്യാപിക്കുന്ന ഇടത് മാർജിൻ ഉപയോഗിച്ച് ഒരു ഗ്രിഡ് കോളം ഓഫ്‌സെറ്റ് ചെയ്യുക |
.gridColumn() |
ഒന്നുമില്ല | ഗ്രിഡ് കോളം പോലെ ഒരു ഘടകം ഫ്ലോട്ട് ആക്കുക |
CSS3 പ്രോപ്പർട്ടികൾ
| മിക്സിൻ | പരാമീറ്ററുകൾ | ഉപയോഗം |
|---|---|---|
.border-radius() |
@radius: 5px |
ഒരു മൂലകത്തിന്റെ കോണുകൾ ചുറ്റുക. ഒരൊറ്റ മൂല്യമോ നാല് സ്‌പെയ്‌സ് വേർതിരിച്ച മൂല്യങ്ങളോ ആകാം |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
ഒരു ഘടകത്തിലേക്ക് ഒരു ഡ്രോപ്പ് ഷാഡോ ചേർക്കുക |
.transition() |
@transition |
CSS3 സംക്രമണ പ്രഭാവം ചേർക്കുക (ഉദാ, all .2s linear) |
.rotate() |
@degrees |
ഒരു മൂലകം n ഡിഗ്രി തിരിക്കുക |
.scale() |
@ratio |
ഒരു മൂലകത്തെ അതിന്റെ യഥാർത്ഥ വലുപ്പത്തിന്റെ n മടങ്ങിലേക്ക് സ്കെയിൽ ചെയ്യുക |
.translate() |
@x: 0, @y: 0 |
x, y പ്ലെയിനുകളിൽ ഒരു ഘടകം നീക്കുക |
.background-clip() |
@clip |
ഒരു മൂലകത്തിന്റെ പശ്ചാത്തലം ക്രോപ്പ് ചെയ്യുക (ഇതിന് ഉപയോഗപ്രദമാണ് border-radius) |
.background-size() |
@size |
CSS3 വഴി പശ്ചാത്തല ചിത്രങ്ങളുടെ വലുപ്പം നിയന്ത്രിക്കുക |
.box-sizing() |
@boxmodel |
ഒരു ഘടകത്തിനായുള്ള ബോക്സ് മോഡൽ മാറ്റുക (ഉദാ, border-boxപൂർണ്ണ വീതിക്ക് input) |
.user-select() |
@select |
ഒരു പേജിലെ വാചകത്തിന്റെ കഴ്‌സർ തിരഞ്ഞെടുക്കൽ നിയന്ത്രിക്കുക |
.resizable() |
@direction: both |
വലത്തോട്ടും താഴെയും വലുപ്പം മാറ്റാവുന്ന ഏതെങ്കിലും ഘടകം ഉണ്ടാക്കുക |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
ഏതെങ്കിലും ഘടകത്തിന്റെ ഉള്ളടക്കം CSS3 നിരകൾ ഉപയോഗിക്കുക |
പശ്ചാത്തലങ്ങളും ഗ്രേഡിയന്റുകളും
| മിക്സിൻ | പരാമീറ്ററുകൾ | ഉപയോഗം |
|---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
ഒരു മൂലകത്തിന് അർദ്ധസുതാര്യമായ പശ്ചാത്തല നിറം നൽകുക |
.#translucent > .border() |
@color: @white, @alpha: 1 |
ഒരു മൂലകത്തിന് അർദ്ധസുതാര്യമായ ബോർഡർ നിറം നൽകുക |
.#gradient > .vertical() |
@startColor, @endColor |
ഒരു ക്രോസ് ബ്രൗസർ ലംബ പശ്ചാത്തല ഗ്രേഡിയന്റ് സൃഷ്ടിക്കുക |
.#gradient > .horizontal() |
@startColor, @endColor |
ഒരു ക്രോസ് ബ്രൗസർ തിരശ്ചീന പശ്ചാത്തല ഗ്രേഡിയന്റ് സൃഷ്ടിക്കുക |
.#gradient > .directional() |
@startColor, @endColor, @deg |
ഒരു ക്രോസ്-ബ്രൗസർ ദിശാസൂചന പശ്ചാത്തല ഗ്രേഡിയന്റ് സൃഷ്ടിക്കുക |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
ഒരു ക്രോസ്-ബ്രൗസർ മൂന്ന്-വർണ്ണ പശ്ചാത്തല ഗ്രേഡിയന്റ് സൃഷ്ടിക്കുക |
.#gradient > .radial() |
@innerColor, @outerColor |
ഒരു ക്രോസ്-ബ്രൗസർ റേഡിയൽ പശ്ചാത്തല ഗ്രേഡിയന്റ് സൃഷ്ടിക്കുക |
.#gradient > .striped() |
@color, @angle |
ഒരു ക്രോസ് ബ്രൗസർ വരയുള്ള പശ്ചാത്തല ഗ്രേഡിയന്റ് സൃഷ്ടിക്കുക |
.#gradientBar() |
@primaryColor, @secondaryColor |
ഗ്രേഡിയന്റും ചെറുതായി ഇരുണ്ട ബോർഡറും നൽകുന്നതിന് ബട്ടണുകൾക്കായി ഉപയോഗിക്കുന്നു |
കുറവ് ഉപയോഗിച്ച് ബൂട്ട്സ്ട്രാപ്പ് കംപൈൽ ചെയ്യുന്നു
കംപൈൽ ചെയ്യുന്നതിനുള്ള ഉപകരണങ്ങൾ
മേക്ക്‌ഫൈലുള്ള നോഡ്
ഇനിപ്പറയുന്ന കമാൻഡ് പ്രവർത്തിപ്പിച്ച് npm ഉപയോഗിച്ച് LESS കമാൻഡ് ലൈൻ കംപൈലർ ഇൻസ്റ്റാൾ ചെയ്യുക:
$ npm ഇൻസ്റ്റാൾ കുറവ്
ഇൻസ്റ്റാൾ ചെയ്തുകഴിഞ്ഞാൽ make, നിങ്ങളുടെ ബൂട്ട്സ്ട്രാപ്പ് ഡയറക്ടറിയുടെ റൂട്ടിൽ നിന്ന് പ്രവർത്തിപ്പിക്കുക, നിങ്ങൾ എല്ലാം സജ്ജമാക്കിക്കഴിഞ്ഞു.
കൂടാതെ, നിങ്ങൾ വാച്ചർ ഇൻസ്റ്റാൾ ചെയ്‌തിട്ടുണ്ടെങ്കിൽ, make watchബൂട്ട്സ്ട്രാപ്പ് ലിബിൽ ഒരു ഫയൽ എഡിറ്റുചെയ്യുമ്പോഴെല്ലാം ബൂട്ട്സ്ട്രാപ്പ് സ്വയമേവ പുനർനിർമ്മിക്കുന്നതിന് നിങ്ങൾ പ്രവർത്തിപ്പിക്കാം (ഇത് ആവശ്യമില്ല, ഒരു സൗകര്യ രീതി മാത്രം).
കമാൻഡ് ലൈൻ
നോഡ് വഴി LESS കമാൻഡ് ലൈൻ ടൂൾ ഇൻസ്റ്റാൾ ചെയ്ത് ഇനിപ്പറയുന്ന കമാൻഡ് പ്രവർത്തിപ്പിക്കുക:
$lessc ./lib/bootstrap.less > bootstrap.css
--compressനിങ്ങൾ ചില ബൈറ്റുകൾ സംരക്ഷിക്കാൻ ശ്രമിക്കുകയാണെങ്കിൽ ആ കമാൻഡിൽ ഉൾപ്പെടുത്തുന്നത് ഉറപ്പാക്കുക !
ജാവാസ്ക്രിപ്റ്റ്
ഏറ്റവും പുതിയ Les.js ഡൗൺലോഡ് ചെയ്ത് അതിലേക്കുള്ള പാത (ബൂട്ട്‌സ്‌ട്രാപ്പും) എന്നതിൽ ഉൾപ്പെടുത്തുക <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
.less ഫയലുകൾ വീണ്ടും കംപൈൽ ചെയ്യാൻ, അവ സംരക്ഷിച്ച് നിങ്ങളുടെ പേജ് വീണ്ടും ലോഡുചെയ്യുക. Less.js അവ കംപൈൽ ചെയ്യുകയും ലോക്കൽ സ്റ്റോറേജിൽ സൂക്ഷിക്കുകയും ചെയ്യുന്നു.
അനൗദ്യോഗിക മാക് ആപ്പ്
അനൗദ്യോഗിക Mac ആപ്പ് .less ഫയലുകളുടെ ഡയറക്‌ടറികൾ വീക്ഷിക്കുകയും കണ്ട .less ഫയലിന്റെ ഓരോ സേവ് ചെയ്‌തതിന് ശേഷവും ലോക്കൽ ഫയലുകളിലേക്ക് കോഡ് കംപൈൽ ചെയ്യുകയും ചെയ്യുന്നു.
നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ, സ്വയമേവ ചെറുതാക്കുന്നതിനും കംപൈൽ ചെയ്‌ത ഫയലുകൾ ഏത് ഡയറക്‌ടറിയിലാണ് അവസാനിക്കുന്നതെന്നും ആപ്പിലെ മുൻഗണനകൾ ടോഗിൾ ചെയ്യാം.
കൂടുതൽ Mac ആപ്പുകൾ
ക്രഞ്ച്
അഡോബ് എയറിൽ നിർമ്മിച്ച ഒരു ചെറിയ എഡിറ്ററും കമ്പൈലറും ആണ് ക്രഞ്ച്.
കോഡ്കിറ്റ്
അനൗദ്യോഗിക മാക് ആപ്പിന്റെ അതേ പയ്യൻ സൃഷ്‌ടിച്ചത്, കോഡ്കിറ്റ് കുറവ്, സാസ്, സ്റ്റൈലസ്, കോഫിസ്‌ക്രിപ്റ്റ് എന്നിവ സമാഹരിക്കുന്ന ഒരു മാക് ആപ്പാണ്.
ലളിതം
കുറഞ്ഞ ഫയലുകൾ കംപൈൽ ചെയ്യുന്നതിനുള്ള Mac, Linux, PC ആപ്പ്. കൂടാതെ, സോഴ്‌സ് കോഡ് GitHub-ലാണ് .