ബൂട്ട്‌സ്‌ട്രാപ്പിനൊപ്പം കുറവ് ഉപയോഗിക്കുന്നു

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ CSS നിർമ്മിക്കാൻ ഉപയോഗിക്കുന്ന വേരിയബിളുകൾ, മിക്‌സിനുകൾ എന്നിവയും അതിലേറെയും പ്രയോജനപ്പെടുത്തുന്നതിന്, ഒരു CSS പ്രീപ്രൊസസറായ LESS ഉപയോഗിച്ച് ബൂട്ട്‌സ്‌ട്രാപ്പ് ഇഷ്ടാനുസൃതമാക്കുകയും വിപുലീകരിക്കുകയും ചെയ്യുക .

എന്തുകൊണ്ട് കുറവ്?

ബൂട്ട്‌സ്‌ട്രാപ്പ് അതിന്റെ കാമ്പിൽ കുറച്ച് ഉപയോഗിച്ചാണ് നിർമ്മിച്ചിരിക്കുന്നത്, ഞങ്ങളുടെ നല്ല സുഹൃത്തായ അലക്‌സിസ് സെല്ലിയർ സൃഷ്‌ടിച്ച ഡൈനാമിക് സ്‌റ്റൈൽഷീറ്റ് ഭാഷ . ഇത് സിസ്റ്റം അടിസ്ഥാനമാക്കിയുള്ള CSS വികസിപ്പിക്കുന്നത് വേഗമേറിയതും എളുപ്പമുള്ളതും കൂടുതൽ രസകരവുമാക്കുന്നു.

എന്താണ് ഉൾപ്പെടുത്തിയിരിക്കുന്നത്?

CSS-ന്റെ വിപുലീകരണമെന്ന നിലയിൽ, വേരിയബിളുകൾ, കോഡിന്റെ പുനരുപയോഗിക്കാവുന്ന സ്‌നിപ്പെറ്റുകൾക്കായുള്ള മിക്സിനുകൾ, ലളിതമായ ഗണിതത്തിനുള്ള പ്രവർത്തനങ്ങൾ, നെസ്റ്റിംഗ്, കൂടാതെ കളർ ഫംഗ്‌ഷനുകൾ എന്നിവയും കുറവ് ഉൾപ്പെടുന്നു.

കൂടുതലറിയുക

കുറവ് CSS

കൂടുതലറിയാൻ http://lesscss.org/ എന്ന ഔദ്യോഗിക വെബ്സൈറ്റ് സന്ദർശിക്കുക .

വേരിയബിളുകൾ

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 #c09853
@warningBackground #f3edd2
@errorText #b94a48
@errorBackground #f2dede
@successText #468847
@successBackground #dff0d8
@infoText #3a87ad
@infoBackground #d9edf7

മിക്സിനുകളെ കുറിച്ച്

അടിസ്ഥാന മിക്സിനുകൾ

അടിസ്ഥാന മിക്‌സിൻ എന്നത് പ്രധാനമായും CSS-ന്റെ ഒരു സ്‌നിപ്പെറ്റിനുള്ള ഉൾപ്പെടുത്തലോ ഭാഗികമോ ആണ്. അവ ഒരു CSS ക്ലാസ് പോലെ എഴുതിയിരിക്കുന്നു, എവിടെയും വിളിക്കാവുന്നതാണ്.

  1. . ഘടകം {
  2. . clearfix ();
  3. }

പാരാമെട്രിക് മിക്സിനുകൾ

ഒരു പാരാമെട്രിക് മിക്‌സിൻ ഒരു അടിസ്ഥാന മിക്‌സിൻ പോലെയാണ്, എന്നാൽ ഇത് ഓപ്‌ഷണൽ ഡിഫോൾട്ട് മൂല്യങ്ങളുള്ള പാരാമീറ്ററുകളും (അതിനാൽ പേര്) സ്വീകരിക്കുന്നു.

  1. . ഘടകം {
  2. . ബോർഡർ - ആരം ( 4px );
  3. }

നിങ്ങളുടേത് എളുപ്പത്തിൽ ചേർക്കുക

ബൂട്ട്‌സ്‌ട്രാപ്പിന്റെ മിക്കവാറും എല്ലാ മിക്സിനുകളും 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() ഒന്നുമില്ല നിങ്ങളുടെ ഉള്ളടക്കം കൈവശം വയ്ക്കുന്നതിന് തിരശ്ചീനമായി കേന്ദ്രീകൃതമായ ഒരു കണ്ടെയ്‌നർ സൃഷ്‌ടിക്കുക
#grid > .core() @gridColumnWidth, @gridGutterWidth n നിരകളും x പിക്സൽ വീതിയുള്ള ഗട്ടറും ഉപയോഗിച്ച് ഒരു പിക്സൽ ഗ്രിഡ് സിസ്റ്റം (കണ്ടെയ്നർ, വരി, നിരകൾ) സൃഷ്ടിക്കുക
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth n നിരകളും x % വീതിയുള്ള ഗട്ടറും ഉള്ള ഒരു മുൻകാല ഗ്രിഡ് സിസ്റ്റം സൃഷ്ടിക്കുക

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 ഗ്രേഡിയന്റും ചെറുതായി ഇരുണ്ട ബോർഡറും നൽകുന്നതിന് ബട്ടണുകൾക്കായി ഉപയോഗിക്കുന്നു
ശ്രദ്ധിക്കുക: പരിഷ്‌ക്കരിച്ച CSS ഉപയോഗിച്ച് നിങ്ങൾ GitHub-ലേക്ക് ഒരു പുൾ അഭ്യർത്ഥന സമർപ്പിക്കുകയാണെങ്കിൽ , ഈ ഏതെങ്കിലും രീതിയിലൂടെ നിങ്ങൾ CSS വീണ്ടും കംപൈൽ ചെയ്യണം .

കംപൈൽ ചെയ്യുന്നതിനുള്ള ഉപകരണങ്ങൾ

മേക്ക്‌ഫൈലുള്ള നോഡ്

ഇനിപ്പറയുന്ന കമാൻഡ് പ്രവർത്തിപ്പിച്ച് npm ഉപയോഗിച്ച് ആഗോളതലത്തിൽ LESS കമാൻഡ് ലൈൻ കമ്പൈലറും uglify-js-ഉം ഇൻസ്റ്റാൾ ചെയ്യുക:

$ npm ഇൻസ്റ്റാൾ -g കുറവ് uglify-js

ഇൻസ്റ്റാൾ ചെയ്തുകഴിഞ്ഞാൽ 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-ലാണ് .