ໃຊ້ໜ້ອຍກວ່າກັບ Bootstrap

ປັບແຕ່ງແລະຂະຫຍາຍ Bootstrap ດ້ວຍ LESS , CSS preprocessor, ເພື່ອໃຊ້ປະໂຫຍດຈາກຕົວແປ, mixins, ແລະຫຼາຍທີ່ໃຊ້ໃນການສ້າງ CSS ຂອງ Bootstrap.

ເປັນຫຍັງ LESS?

Bootstrap ແມ່ນເຮັດດ້ວຍ LESS ຫຼັກຂອງມັນ, ເປັນພາສາສະໄຕລ໌ຊີດແບບເຄື່ອນໄຫວທີ່ສ້າງໂດຍເພື່ອນທີ່ດີຂອງພວກເຮົາ, Alexis Sellier . ມັນເຮັດໃຫ້ການພັດທະນາ CSS ທີ່ອີງໃສ່ລະບົບໄວຂຶ້ນ, ງ່າຍຂຶ້ນ, ແລະມ່ວນຫຼາຍ.

ມີຫຍັງແດ່?

ໃນຖານະເປັນສ່ວນຂະຫຍາຍຂອງ CSS, LESS ປະກອບມີຕົວແປ, mixins ສໍາລັບ snippets ທີ່ໃຊ້ຄືນໃຫມ່ຂອງລະຫັດ, ການດໍາເນີນງານສໍາລັບຄະນິດສາດງ່າຍດາຍ, ຮັງ, ແລະແມ້ກະທັ້ງການທໍາງານຂອງສີ.

ສຶກສາເພີ່ມເຕີມ

ເຂົ້າເບິ່ງເວັບໄຊທ໌ທາງການຢູ່ທີ່ http://lesscss.org/ ເພື່ອສຶກສາເພີ່ມເຕີມ.

ຕົວແປ

ການຈັດການສີແລະຄ່າ pixels ລວງໃນ CSS ສາມາດເປັນຄວາມເຈັບປວດເລັກນ້ອຍ, ປົກກະຕິແລ້ວເຕັມໄປດ້ວຍການຄັດລອກແລະວາງ. ບໍ່ແມ່ນແຕ່ໜ້ອຍລົງ—ກຳນົດສີ ຫຼືຄ່າ pixels ໃຫ້ເປັນຕົວແປ ແລະປ່ຽນພວກມັນຄັ້ງດຽວ.

ມິກຊິນ

ເຫຼົ່ານີ້ສາມໃບປະກາດຂອບເຂດຊາຍແດນທີ່ທ່ານຈໍາເປັນຕ້ອງເຮັດໃນ CSS ປົກກະຕິ? ດຽວນີ້ພວກມັນຕົກຢູ່ແຖວໜຶ່ງດ້ວຍການຊ່ວຍເຫຼືອຂອງ mixins, snippets ຂອງລະຫັດທີ່ເຈົ້າສາມາດໃຊ້ຄືນໄດ້ທຸກທີ່.

ການດໍາເນີນງານ

ເຮັດໃຫ້ຕາຂ່າຍໄຟຟ້າຂອງທ່ານ, ນໍາພາ, ແລະມີຄວາມຍືດຫຍຸ່ນຫຼາຍໂດຍການເຮັດຄະນິດສາດໃນທັນທີດ້ວຍການດໍາເນີນການ. ຄູນ, ແບ່ງ, ເພີ່ມ, ແລະລົບວິທີການຂອງທ່ານໄປສູ່ CSS sanity.

Scaffolding ແລະການເຊື່ອມຕໍ່

`@bodyBackground`	`@white`	ສີພື້ນຫຼັງຂອງໜ້າ
`@textColor`	`@grayDark`	ສີຂໍ້ຄວາມເລີ່ມຕົ້ນສໍາລັບເນື້ອໃນທັງຫມົດ, ສ່ວນຫົວ, ແລະອື່ນໆ
`@linkColor`	`#08c`	ສີຂໍ້ຄວາມລິ້ງເລີ່ມຕົ້ນ
`@linkColorHover`	`darken(@linkColor, 15%)`	ວາງສີຂໍ້ຄວາມລິ້ງເລີ່ມຕົ້ນ

ລະບົບຕາຂ່າຍ

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

ຕົວພິມ

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", monospace
`@baseFontSize`	13px	ຕ້ອງເປັນ pixels
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	ຕ້ອງເປັນ pixels
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

ຕາຕະລາງ

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

ສີເທົາ

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#ເອີ
`@white`	#fff

ສີທີ່ເນັ້ນສຽງ

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

ອົງປະກອບ

ປຸ່ມ

`@btnBackground`	`@white`
`@btnBackgroundHighlight`	`darken(@white, 10%)`
`@btnBorder`	`darken(@white, 20%)`
`@btnPrimaryBackground`	`@linkColor`
`@btnPrimaryBackgroundHighlight`	`spin(@btnPrimaryBackground, 15%)`
`@btnInfoBackground`	`#5bc0de`
`@btnInfoBackgroundHighlight`	`#2f96b4`
`@btnSuccessBackground`	`#62c462`
`@btnSuccessBackgroundHighlight`	`51a351`
`@btnWarningBackground`	`lighten(@orange, 15%)`
`@btnWarningBackgroundHighlight`	`@orange`
`@btnDangerBackground`	`#ee5f5b`
`@btnDangerBackgroundHighlight`	`#bd362f`
`@btnInverseBackground`	`@gray`
`@btnInverseBackgroundHighlight`	`@grayDarker`

ແບບຟອມ

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

ຮູບແບບລັດແລະການແຈ້ງເຕືອນ

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

Navbar

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`
`@navbarLinkColorActive`	`@navbarLinkColorHover`
`@navbarLinkBackgroundHover`	`transparent`
`@navbarLinkBackgroundActive`	`@navbarBackground`
`@navbarSearchBackground`	`lighten(@navbarBackground, 25%)`
`@navbarSearchBackgroundFocus`	`@white`
`@navbarSearchBorder`	`darken(@navbarSearchBackground, 30%)`
`@navbarSearchPlaceholderColor`	`#ccc`
`@navbarBrandColor`	`@navbarLinkColor`

ເລື່ອນລົງ

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`

ໜ່ວຍພະເອກ

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

ກ່ຽວກັບ mixins

ປະສົມພື້ນຖານ

ການປະສົມຂັ້ນພື້ນຖານແມ່ນເປັນສ່ວນລວມ ຫຼືສ່ວນໜຶ່ງຂອງ CSS. ພວກມັນຖືກຂຽນຄືກັບຫ້ອງຮຽນ CSS ແລະສາມາດເອີ້ນໄດ້ທຸກບ່ອນ.

. ອົງປະກອບ {
  . clearfix ();
}

Parametric mixins

A parametric mixin ແມ່ນຄືກັນກັບ mixin ພື້ນຖານ, ແຕ່ມັນຍັງຍອມຮັບພາລາມິເຕີ (ເພາະສະນັ້ນຊື່) ທີ່ມີຄ່າເລີ່ມຕົ້ນທາງເລືອກ.

. ອົງປະກອບ {
  . border - radius ( 4px );
}

ໄດ້ຢ່າງງ່າຍດາຍເພີ່ມຂອງທ່ານເອງ

ເກືອບທັງໝົດຂອງ mixins ຂອງ Bootstrap ຖືກເກັບໄວ້ໃນ mixins.less, ເປັນໄຟລ໌ .less ທີ່ເປັນປະໂຫຍດອັນມະຫັດສະຈັນທີ່ຊ່ວຍໃຫ້ທ່ານໃຊ້ mixin ໃນໄຟລ໌ .less ໃດໆໃນຊຸດເຄື່ອງມື.

ດັ່ງນັ້ນ, ສືບຕໍ່ເດີນຫນ້າແລະນໍາໃຊ້ສິ່ງທີ່ມີຢູ່ແລ້ວຫຼືມີຄວາມຮູ້ສຶກບໍ່ເສຍຄ່າເພື່ອເພີ່ມຂອງຕົນເອງຕາມທີ່ທ່ານຕ້ອງການ.

ລວມເອົາເຄື່ອງປະສົມ

ອຸປະໂພກ

ມິກຊິນ	ພາລາມິເຕີ	ການນໍາໃຊ້
`.clearfix()`	ບໍ່ມີ	ເພີ່ມໃສ່ພໍ່ແມ່ເພື່ອລຶບລ້າງການລອຍຢູ່ພາຍໃນ
`.tab-focus()`	ບໍ່ມີ	ນຳໃຊ້ຮູບແບບຈຸດສຸມຂອງ Webkit ແລະໂຄງຮ່າງຂອງ Firefox ຮອບ
`.center-block()`	ບໍ່ມີ	ອັດໂນມັດຈັດວາງອົງປະກອບລະດັບບລັອກໂດຍໃຊ້`margin: auto`
`.ie7-inline-block()`	ບໍ່ມີ	ໃຊ້ນອກເຫນືອໄປຈາກປົກກະຕິ `display: inline-block`ເພື່ອໄດ້ຮັບການສະຫນັບສະຫນູນ IE7
`.size()`	`@height @width`	ກໍານົດຄວາມສູງແລະຄວາມກວ້າງຢ່າງໄວວາໃນຫນຶ່ງແຖວ
`.square()`	`@size`	ສ້າງຂຶ້ນ `.size()`ເພື່ອກໍານົດຄວາມກວ້າງແລະຄວາມສູງເປັນຄ່າດຽວກັນ
`.opacity()`	`@opacity`	ກໍານົດ, ໃນຈໍານວນທັງຫມົດ, ອັດຕາສ່ວນຄວາມໂປ່ງໃສ (ເຊັ່ນ, "50" ຫຼື "75")

ແບບຟອມ

ມິກຊິນ	ພາລາມິເຕີ	ການນໍາໃຊ້
`.placeholder()`	`@color: @placeholderText`	ກໍານົດ `placeholder`ສີຂໍ້ຄວາມສໍາລັບການປ້ອນຂໍ້ມູນ

ຕົວພິມ

ມິກຊິນ	ພາລາມິເຕີ	ການນໍາໃຊ້
`#font > #family > .serif()`	ບໍ່ມີ	ເຮັດໃຫ້ອົງປະກອບໃຊ້ serif font stack
`#font > #family > .sans-serif()`	ບໍ່ມີ	ສ້າງອົງປະກອບໃຫ້ໃຊ້ sans-serif font stack
`#font > #family > .monospace()`	ບໍ່ມີ	ເຮັດໃຫ້ອົງປະກອບໃຊ້ stack font monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	ໄດ້ຢ່າງງ່າຍດາຍກໍານົດຂະຫນາດຕົວອັກສອນ, ນ້ໍາຫນັກ, ແລະນໍາພາ
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	ຕັ້ງຄອບຄົວຕົວອັກສອນເປັນ serif, ແລະຄວບຄຸມຂະຫນາດ, ນ້ໍາຫນັກ, ແລະຊັ້ນນໍາ
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	ຕັ້ງຄອບຄົວຕົວອັກສອນເປັນ sans-serif, ແລະຄວບຄຸມຂະຫນາດ, ນ້ໍາຫນັກ, ແລະຊັ້ນນໍາ
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	ຕັ້ງຄອບຄົວຕົວອັກສອນເປັນ monospace, ແລະຄວບຄຸມຂະຫນາດ, ນ້ໍາຫນັກ, ແລະຊັ້ນນໍາ

ລະບົບຕາຂ່າຍ

ມິກຊິນ	ພາລາມິເຕີ	ການນໍາໃຊ້
`.container-fixed()`	ບໍ່ມີ	ສ້າງຕູ້ຄອນເທນເນີທີ່ມີສູນກາງແນວນອນສໍາລັບການຖືເນື້ອຫາຂອງທ່ານ
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	ສ້າງລະບົບຕາຂ່າຍ pixels (ບັນຈຸ, ແຖວ, ແລະຖັນ) ທີ່ມີ n ຖັນແລະ x pixel gutter ກວ້າງ
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	ສ້າງລະບົບຕາຂ່າຍກ່ອນໜ້າດ້ວຍ ຖັນ n ແລະ x % gutter ກວ້າງ
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	ສ້າງລະບົບຕາຂ່າຍໄຟຟ້າ pixels ສໍາລັບ `input`ອົງປະກອບ, ບັນຊີສໍາລັບ padding ແລະຊາຍແດນ
`.makeColumn`	`@columns: 1, @offset: 0`	ປ່ຽນອັນໃດ `div`ນຶ່ງເປັນຖັນຕາຂ່າຍທີ່ບໍ່ມີ `.span*`ຊັ້ນຮຽນ

CSS3 ຄຸນສົມບັດ

ມິກຊິນ	ພາລາມິເຕີ	ການນໍາໃຊ້
`.border-radius()`	`@radius`	ຮອບມຸມຂອງອົງປະກອບ. ສາມາດເປັນຄ່າດຽວ ຫຼືສີ່ຄ່າທີ່ແຍກອອກຈາກຊ່ອງຫວ່າງ
`.box-shadow()`	`@shadow`	ເພີ່ມເງົາລົງໃສ່ອົງປະກອບ
`.transition()`	`@transition`	ເພີ່ມເອັບເຟັກການປ່ຽນ CSS3 (ເຊັ່ນ: `all .2s linear`)
`.rotate()`	`@degrees`	ໝຸນອົງປະກອບ n ອົງສາ
`.scale()`	`@ratio`	ຂະຫຍາຍອົງປະກອບເປັນ n ເທົ່າຂະຫນາດຕົ້ນສະບັບຂອງມັນ
`.translate()`	`@x, @y`	ຍ້າຍອົງປະກອບຢູ່ໃນຍົນ x ແລະ y
`.background-clip()`	`@clip`	ຕັດພື້ນຫຼັງຂອງອົງປະກອບ (ທີ່ເປັນປະໂຫຍດສໍາລັບ `border-radius`)
`.background-size()`	`@size`	ຄວບຄຸມຂະໜາດຂອງພາບພື້ນຫຼັງຜ່ານ CSS3
`.box-sizing()`	`@boxmodel`	ປ່ຽນຮູບແບບກ່ອງສໍາລັບອົງປະກອບ (ເຊັ່ນ: `border-box`ສໍາລັບຄວາມກວ້າງເຕັມ `input`)
`.user-select()`	`@select`	ຄວບຄຸມການເລືອກເຄີເຊີຂອງຂໍ້ຄວາມໃນໜ້າໃດໜຶ່ງ
`.backface-visibility()`	`@visibility: visible`	ປ້ອງກັນການກະພິບຂອງເນື້ອຫາໃນເວລາທີ່ໃຊ້ CSS 3D transforms
`.resizable()`	`@direction: both`	ເຮັດໃຫ້ອົງປະກອບໃດນຶ່ງສາມາດປັບຂະໜາດໄດ້ຢູ່ເບື້ອງຂວາ ແລະລຸ່ມ
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	ເຮັດໃຫ້ເນື້ອຫາຂອງອົງປະກອບໃດໆໃຊ້ຄໍລໍາ CSS3

ພື້ນຫຼັງ ແລະ gradients

ມິກຊິນ	ພາລາມິເຕີ	ການນໍາໃຊ້
`#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`	ສ້າງສີພື້ນຫຼັງ radial ຂ້າມ browser
`#gradient > .striped()`	`@color, @angle`	ສ້າງສີພື້ນຫຼັງແບບສີຂ້າມຕົວທ່ອງເວັບ
`#gradientBar()`	`@primaryColor, @secondaryColor`	ໃຊ້ສຳລັບປຸ່ມຕ່າງໆເພື່ອກຳນົດເສັ້ນສີ ແລະ ຂອບສີເຂັ້ມກວ່າເລັກນ້ອຍ

ຫມາຍເຫດ: ຖ້າທ່ານກໍາລັງສົ່ງຄໍາຮ້ອງຂໍການດຶງໄປຫາ GitHub ດ້ວຍ CSS ທີ່ຖືກດັດແປງ, ທ່ານ ຕ້ອງ ລວບລວມ CSS ຜ່ານວິທີການເຫຼົ່ານີ້.

ເຄື່ອງມືສໍາລັບການລວບລວມ

Node ກັບ makefile

ຕິດຕັ້ງ compiler ເສັ້ນຄໍາສັ່ງ LESS ແລະ uglify-js ທົ່ວໂລກດ້ວຍ npm ໂດຍການແລ່ນຄໍາສັ່ງຕໍ່ໄປນີ້:

$ npm ຕິດຕັ້ງ -g ຫນ້ອຍ uglify-js

ເມື່ອຕິດຕັ້ງແລ້ວພຽງແຕ່ດໍາເນີນການ makeຈາກຮາກຂອງໄດເລກະທໍລີ bootstrap ຂອງທ່ານແລະທ່ານກໍາລັງຕັ້ງທັງຫມົດ.

ນອກຈາກນັ້ນ, ຖ້າທ່ານມີ watchr ຕິດຕັ້ງ, ທ່ານອາດຈະດໍາເນີນການ make watchໃຫ້ມີ bootstrap ອັດຕະໂນມັດໃຫມ່ທຸກຄັ້ງທີ່ທ່ານແກ້ໄຂໄຟລ໌ໃນ bootstrap lib (ອັນນີ້ບໍ່ຈໍາເປັນ, ພຽງແຕ່ເປັນວິທີທີ່ສະດວກ).

ເສັ້ນຄໍາສັ່ງ

ຕິດຕັ້ງເຄື່ອງມືບັນທັດຄໍາສັ່ງ LESS ຜ່ານ Node ແລະດໍາເນີນການຄໍາສັ່ງຕໍ່ໄປນີ້:

$ lessc ./less/bootstrap.less > bootstrap.css

ໃຫ້ແນ່ໃຈວ່າຈະລວມ --compressຢູ່ໃນຄໍາສັ່ງນັ້ນຖ້າທ່ານພະຍາຍາມປະຫຍັດບາງ bytes!

Javascript

ດາວໂຫລດ Less.js ຫຼ້າສຸດ ແລະລວມເອົາເສັ້ນທາງໄປຫາມັນ (ແລະ Bootstrap) ໃນ <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

ເພື່ອລວບລວມໄຟລ໌ .less ຄືນໃໝ່, ພຽງແຕ່ບັນທຶກພວກມັນ ແລະໂຫຼດໜ້າຂອງທ່ານຄືນໃໝ່. Less.js ລວບລວມພວກມັນແລະເກັບຮັກສາພວກມັນໄວ້ໃນບ່ອນເກັບຂໍ້ມູນທ້ອງຖິ່ນ.

ແອັບ Mac ທີ່ບໍ່ເປັນທາງການ

ແອັບ Mac ທີ່ບໍ່ເປັນທາງການຈະ ເບິ່ງໄດເຣັກທໍຣີຂອງໄຟລ໌ .less ແລະລວບລວມລະຫັດໄປຍັງໄຟລ໌ທ້ອງຖິ່ນຫຼັງຈາກບັນທຶກໄຟລ໌ .less ທີ່ເບິ່ງແລ້ວທຸກຄັ້ງ.

ຖ້າທ່ານຕ້ອງການ, ທ່ານສາມາດສະຫຼັບການຕັ້ງຄ່າໃນແອັບຯສໍາລັບການຫຍໍ້ອັດຕະໂນມັດແລະໄດເລກະທໍລີໃດທີ່ໄຟລ໌ລວບລວມໄດ້ສິ້ນສຸດລົງ.

ສ້າງດ້ວຍ LESS

ເປັນຫຍັງ LESS?

ມີຫຍັງແດ່?

ສຶກສາເພີ່ມເຕີມ

ຕົວແປ

ມິກຊິນ

ການດໍາເນີນງານ

ຕົວແປ Bootstrap ຫນ້ອຍຕົວແປ, ຄຸນຄ່າຂອງມັນ, ແລະຂໍ້ແນະນໍາການນໍາໃຊ້

Scaffolding ແລະການເຊື່ອມຕໍ່

ລະບົບຕາຂ່າຍ

ຕົວພິມ

ຕາຕະລາງ

ສີເທົາ

ສີທີ່ເນັ້ນສຽງ

ອົງປະກອບ

ປຸ່ມ

ແບບຟອມ

ຮູບແບບລັດແລະການແຈ້ງເຕືອນ

Navbar

ເລື່ອນລົງ

ໜ່ວຍພະເອກ

Bootstrap mixins

ກ່ຽວກັບ mixins

ປະສົມພື້ນຖານ

Parametric mixins

ໄດ້​ຢ່າງ​ງ່າຍ​ດາຍ​ເພີ່ມ​ຂອງ​ທ່ານ​ເອງ​

ລວມເອົາເຄື່ອງປະສົມ

ອຸປະໂພກ

ແບບຟອມ

ຕົວພິມ

ລະບົບຕາຂ່າຍ

CSS3 ຄຸນສົມບັດ

ພື້ນຫຼັງ ແລະ gradients

ການລວບລວມ Bootstrap ດ້ວຍ LESS

ເຄື່ອງມືສໍາລັບການລວບລວມ

Node ກັບ makefile

ເສັ້ນຄໍາສັ່ງ

Javascript

ແອັບ Mac ທີ່ບໍ່ເປັນທາງການ

ແອັບ Mac ເພີ່ມເຕີມ

Crunch

CodeKit

ບໍ່ງ່າຍດາຍ

ໄດ້ຢ່າງງ່າຍດາຍເພີ່ມຂອງທ່ານເອງ