Kooms

5 Popular CSS Frameworks ដែល​លោក​អ្នក​គួតែ​ចាប់​ផ្តើម​ជាមួយ​វា

បានដាក់ប្រកាស ក្នុង ពត៌មាន ដោយ kooms ខែ មីនា 13, 2009

ភាសា​ជាច្រើន​សុទ្ធតែមាន​ Framework របស់វា ដូចជា Java, PHP, JavaScript ASP.NET, C#…។ប្រកាស់មុន ខ្ញុំ​បានដាក់​ Framework របស់​ JavaScript នឹង​ PHP រួច​មក​ហើយពេលនេះសូមបង្ហាញ Framework របស់ CSS វិញម្តង តើ​លោក​អ្នក​ចំលែក​ទេ ហេតុអ្វី CSS មាន​ Framework ដែរ? មិនមាន​​អ្វី​គួ​អោយ​ឆ្ងល់​​នោះទេ គោល​ការណ៍​នៃការបង្កើត​ Framework នេះឡើងគឺមាន​បួនចំនុច​ដូចខាងក្រោម

១) បង្កើន​ល្បឿននៃការអភិវឌ្ឍន៍ដោយ​ចំនាយពេល​ខ្លី

២) មានទំហំឯកសាមួយ(CSS)យ៉ាងតូចតែអាចប្រើការបានច្រើន នឹង​មាន​ប្រសិទ្ធភាពល្អ

៣) មានឯកសាមេរៀន និង​ការបង្ហាត់បង្រៀនល្អៗ

៤) ភាពច្បាស់លាស់អំពីរចនាសម្ព័ន្ធនៃ Grid

 

ថ្ងៃនេះខ្ញុំសូម​លើក​ CSS Framework ចំនូន​ ៥​ ដែល​កំពុង​ពេញនិយម មកបង្ហាញ រួមជាមួយ នឹង មេរៀន​ ឧទាហរណ៍ ដែល​ធ្វើ​អោយលោក​អ្នកកាន់តែយល់ច្បាស់អំពី Framework ទាំងនេះ។

១. 960 CSS Framework

960

960 Grid System ជា framework មួយដែល​ផ្តល់អោយ​យើង​ក្នុងការ​ប្រើប្រាស់ តាមខ្នាតសាមញ្ញ ដែលមាន width 960px។

 វាមាន 2 Variant: 12 និង 16 columns ដែលយើង​អាចប្រើវាបានដោយ​ការ​បំបែក​ពីគ្នា ឬក៏តាម​លំដាប់​លំដោយគ្នា ហើយមានទំតែ 3.6KB ដែលបាន compress រួចហើយ។

Live Demos

 កាពន្យល់ពីការប្រើប្រាស់ 960 CSS Framework

សូមចួល​ទៅ​មើលតំណខាង​ក្រោម​នេះ

 

 ២.​Blueprint CSS Framework

blueprint

 Blueprint ជា​ CSS Framework មួយដែលជួយយើងកាត់បន្ថយពេលវេលា​បង្កើត​ CSS វាផ្តល់អោយយើងនូវ​​មួល​ដ្ឋាល​ CSS ដ៏រឹង​មាំមួយ ដើម្បីបង្កើត​ គំរោងរបស់យើង​អោយ​ស្ថិតនៅ​កំរិតខ្ពស់​ជាមួយភាពងាយស្រួលការប្រើប្រាស់Grid, ពុម្ភអក្សរច្បាស់ៗ form ស្រស់ស្អាត។ លក្ខណះសំខាន់ផ្ទាល់ របស់វាគឺ Mass Reset នៃ Browser default style ដែល​ផ្តល់អត្ថិភាពអោយ​យើង​គ្រប់គ្នា​អាចគ្រប់គ្រង់ Layout ផ្ទាល់ខ្លួនបាន​យ៉ាង​ងាយ។

Live Demos

 កាពន្យល់ពីការប្រើប្រាស់ Blueprint CSS Framework

សូមចួល​ទៅ​មើលតំណខាង​ក្រោម​នេះ

 3.jQuery UI CSS Framework

jquery

 Jquery UI បានដាក់ CSS Framework មាំមួនមួយ​ដែលរចនាឡើងសំរាប់ការបង្កើត Custom Jquery widgets.

 CSS Framework បានរូមបញ្ចួល​ classes ដែលគ្រប់ដណ្តប់យ៉ាងទួលំទួលាយ​សំរាប់ការ​រចនា UI ហើយអាចរៀបចំដោយការប្រើ​ប្រាស់​  jQuery UI ThemeRoller

កាពន្យល់ពីការប្រើប្រាស់ Jquery UI CSS Framework

សូមចួល​ទៅ​មើលតំណខាង​ក្រោម​នេះ

 Live Demos

 ៤. YAML

yaml

 Yaml(Yet Another Multicolumn Layout) ផ្តោត​ទៅលើការរចនា Flexible Layouts និង column និង grid​ based​អ្នក​ត្រូវការ license ដើម្បីប្រើវា។​ YAML បាន​ភ្ជាប់​មកជាមួយ​ Ajax Builder ដ៏ពិសេសមួយ​ មាន​ភាពងាយស្រួល​ក្នុងការ​អភិវឌ្ឍ YAML-base CSS layouts ដែល​អនុញ្ញាតិ្ត​អោយ​យើង

 ដាក Containers នៃ layouts ទាំងនោះ​ដោយ​ការចាប់ដាក់​ ហើយ​HTML និង​ CSS កូដ ត្រូវបាន​ Generate automatically។

Live Demos


 កាពន្យល់ពីការប្រើប្រាស់ YAML

 

 ៥. Yahoo YUI Grids CSS

yahoo

 មួលដ្ឋាន​ YUI Grids CSS សំដៅទៅ 4 preset page widths, 6 preset templates, និងមាន​លត្ថភាពដាក់ចួល និង​បែងចែក​ជាផ្នែក​តួចៗ ២, ៣ ឬ ៤ columns. វាមាន​ធំហំតែ​ ៤KB ​អាចផ្តល់ទៅអោយច្រើន​ជាង​ ១០០០ Page layout ដាក់បញ្ចួលគ្នា។

 សូមកុំភ្លេចមើល CSS Reset/Base/Fonts/Grids Cheat Sheat

 Live Demos 


 កាពន្យល់ពីការប្រើប្រាស់ Yahoo YUI Grids CSS

បានដាក់ប្លាក ជាមួយ ៖, ,

បញ្ចេញ មួយចំលើយតប