තොපිට ඕනේ සේරම තීනෝ. ඇතුලට වරෙව්.
.
.
.
.
.
.
අපි webpage එකක් style කරනකොට css codes තොගයක් ලියන්න වෙනවනේ. ඒක මග අරින්න අපිට CSS Framework එකක් පාවිච්චි කරන්න පුළුවන්. ඒ කියන්නේ කලින්ම ලියල තියෙන අපිට නිතර ඕන වෙන style සේරම තියෙන css file එකක්. උදාහරණයක් විදිහට පල්ලෙහා එක බලන්න.
eg :-
තමන් අතින්ම සේරම code කරද්දී html element එකට අයිති class එක හරි id එක හරි css code එකේදී යොදන එකනේ කරන්නේ.
HTML Code
CSS Code (style.css)
මෙතන myDiv කියන div එකට style එකක් දීල තියෙනවා style.css ෆයිල් එකෙන්.
Framework එකක් පාවිච්චි කලොත් අපි css ලියන්න ඕනේ නැහැ. අපිට තියෙන්නේ class / id එක වෙනස් කරන ඒක.
HTML CODE
මෙතන fm-section fm-section-blue කියල තියෙන class දෙකට අර framework එකේ css file එකේ style එකක් යොදලයි තියෙන්නේ. මේක කරන්න අපි framework එක download කරලා අදාළ css file එක html page එකට link කරන්න ඕනේ. මෙතන fm කියන්නේ framework කියන එක. ඒක සමහර framework වල යොදන්නේ තවත් framework එකක් එක්ක පැටලෙන එක වලක්වන්න. උදාහරණයකට x framework එකේ btn කියන class එකට blue color දෙනවා. y framework එකෙන් btn class එකට green color දෙනවා. එතකොට මේ x y frameworks දෙකම ඒක පාර පාවිච්චි කලොත් කෙල වෙනවා.
දැන් අපි බලමු මොනාද මේ හොඳම 3 කියලා.
1) Twitter Bootstrap
මේකේ දැන් තියෙන්නේ 4 වෙනි version එකයි. මේක මුල්තැන දෙන්නේ mobile device වලට. ඒ කියන්නේ ඕනේ device එකක ගානට display වෙනවා (responsive) මේක සම්පූර්ණයෙන්ම නොමිලේ ගන්න පුළුවන්. ඕන අය මෙතනින් ගන්න. මෙතනින් මේ framework එක ගැන tutorials හොයාගන්න පුළුවන්.
2) Material Design
මේක දෙන්නේ google එකෙන්. bootstrap තරම්ම හොඳයි. මමනම් වැඩිය පාවිච්චි කරලා නැහැ, ඒත් සාමානයෙන් හොඳයි කියල තමයි පැවසෙන්නේ. මෙතනින් ගන්න. Tutorials මෙතනින් බලන්න.
3) UIkit
මම පාවිච්චි කරපු ඉතාමත්ම හොඳ framework එකක්. හොඳ documentation එකක් තියෙනවා. tools මදි නොකියන්න තියෙනවා. එලට හදල තියෙනවා. සම්පූර්ණයෙන්ම free. මටනම් මේක කලින් දෙකටම වඩා හොඳයි. ඒත් සම්ප්රදායෙන් පිට පනින්න හොඳ නෑනේ
. කමක් නෑ. මෙතනින් මේක download කොරගන්න. Tutorials මෙතන තීනෝ...
මතක ඇතුව rep දීපල්ලා. comment එකක් දාගෙන පල.
.
.
.
.
.
.
අපි webpage එකක් style කරනකොට css codes තොගයක් ලියන්න වෙනවනේ. ඒක මග අරින්න අපිට CSS Framework එකක් පාවිච්චි කරන්න පුළුවන්. ඒ කියන්නේ කලින්ම ලියල තියෙන අපිට නිතර ඕන වෙන style සේරම තියෙන css file එකක්. උදාහරණයක් විදිහට පල්ලෙහා එක බලන්න.
eg :-
තමන් අතින්ම සේරම code කරද්දී html element එකට අයිති class එක හරි id එක හරි css code එකේදී යොදන එකනේ කරන්නේ.
HTML Code
Code:
<head>
<link href="style.css" rel="stylesheet" />
</head>
<div class="myDiv">...</div>CSS Code (style.css)
Code:
.myDiv {background-color: #ffffff;}මෙතන myDiv කියන div එකට style එකක් දීල තියෙනවා style.css ෆයිල් එකෙන්.
Framework එකක් පාවිච්චි කලොත් අපි css ලියන්න ඕනේ නැහැ. අපිට තියෙන්නේ class / id එක වෙනස් කරන ඒක.
HTML CODE
Code:
<head>
<link href="framework.css" rel="stylesheet" />
</head>
<div class="fm-section fm-section-blue">...</div>මෙතන fm-section fm-section-blue කියල තියෙන class දෙකට අර framework එකේ css file එකේ style එකක් යොදලයි තියෙන්නේ. මේක කරන්න අපි framework එක download කරලා අදාළ css file එක html page එකට link කරන්න ඕනේ. මෙතන fm කියන්නේ framework කියන එක. ඒක සමහර framework වල යොදන්නේ තවත් framework එකක් එක්ක පැටලෙන එක වලක්වන්න. උදාහරණයකට x framework එකේ btn කියන class එකට blue color දෙනවා. y framework එකෙන් btn class එකට green color දෙනවා. එතකොට මේ x y frameworks දෙකම ඒක පාර පාවිච්චි කලොත් කෙල වෙනවා.
දැන් අපි බලමු මොනාද මේ හොඳම 3 කියලා.
1) Twitter Bootstrap
මේකේ දැන් තියෙන්නේ 4 වෙනි version එකයි. මේක මුල්තැන දෙන්නේ mobile device වලට. ඒ කියන්නේ ඕනේ device එකක ගානට display වෙනවා (responsive) මේක සම්පූර්ණයෙන්ම නොමිලේ ගන්න පුළුවන්. ඕන අය මෙතනින් ගන්න. මෙතනින් මේ framework එක ගැන tutorials හොයාගන්න පුළුවන්.
2) Material Design
මේක දෙන්නේ google එකෙන්. bootstrap තරම්ම හොඳයි. මමනම් වැඩිය පාවිච්චි කරලා නැහැ, ඒත් සාමානයෙන් හොඳයි කියල තමයි පැවසෙන්නේ. මෙතනින් ගන්න. Tutorials මෙතනින් බලන්න.
3) UIkit
මම පාවිච්චි කරපු ඉතාමත්ම හොඳ framework එකක්. හොඳ documentation එකක් තියෙනවා. tools මදි නොකියන්න තියෙනවා. එලට හදල තියෙනවා. සම්පූර්ණයෙන්ම free. මටනම් මේක කලින් දෙකටම වඩා හොඳයි. ඒත් සම්ප්රදායෙන් පිට පනින්න හොඳ නෑනේ
. කමක් නෑ. මෙතනින් මේක download කොරගන්න. Tutorials මෙතන තීනෝ...මතක ඇතුව rep දීපල්ලා. comment එකක් දාගෙන පල.
Last edited:
එකේ ඩිසයින් එක නං ලස්සනයි ෆෝන් එකට මරු 
