Search
Search titles only
By:
Search titles only
By:
Log in
Register
Search
Search titles only
By:
Search titles only
By:
Menu
Install the app
Install
Forums
New posts
All threads
Latest threads
New posts
Trending threads
Trending
Search forums
What's new
New posts
New ads
New profile posts
Latest activity
Free Ads
Latest reviews
Search ads
Members
Current visitors
New profile posts
Search profile posts
Contact us
Latest ads
Power Lifting Lever Belt
SkullVamp
Updated:
Saturday at 10:32 PM
Ad icon
port.lk Domain for sale
Lankan-Tech
Updated:
Saturday at 3:55 PM
Colombo
Kaduwela - Two Storey House for Sale
dilrasan
Updated:
Thursday at 2:23 PM
Ad icon
Wechat qr verification
Pawan2005
Updated:
Thursday at 1:28 AM
🚀 GOOGLE AI PRO 18 MONTHS ACTIVATION 🚀
sayuru bandara
Updated:
Wednesday at 5:34 PM
Electronics
Vehicles
Property
Search
Reply to thread
Forums
Computers & Internet
Software Development
Best 3 CSS Frameworks for Web Designing Beginners
Get the App
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Message
<blockquote data-quote="GadgetPodda" data-source="post: 23344264" data-attributes="member: 567334"><p><span style="font-size: 9px"><span style="color: White">තොපිට ඕනේ සේරම තීනෝ. ඇතුලට වරෙව්.</span></span></p><p><span style="font-size: 9px"><span style="color: White">.</span></span></p><p><span style="font-size: 9px"><span style="color: White">.</span></span></p><p><span style="font-size: 9px"><span style="color: White">.</span></span></p><p><span style="font-size: 9px"><span style="color: White">.</span></span></p><p><span style="font-size: 9px"><span style="color: White">.</span></span></p><p><span style="font-size: 9px"><span style="color: White">.</span></span></p><p></p><p><span style="font-size: 18px">අපි webpage එකක් style කරනකොට css codes තොගයක් ලියන්න වෙනවනේ. ඒක මග අරින්න අපිට CSS Framework එකක් පාවිච්චි කරන්න පුළුවන්. ඒ කියන්නේ කලින්ම ලියල තියෙන අපිට නිතර ඕන වෙන style සේරම තියෙන css file එකක්. උදාහරණයක් විදිහට පල්ලෙහා එක බලන්න.</span></p><p> <span style="font-size: 18px"></span></p><p><span style="font-size: 18px">eg :-</span></p><p><span style="font-size: 18px"></span></p><p><span style="font-size: 18px"><strong>තමන් අතින්ම සේරම code කරද්දී html element එකට අයිති class එක හරි id එක හරි css code එකේදී යොදන එකනේ කරන්නේ.</strong></span></p><p><span style="font-size: 18px"></span></p><p><span style="font-size: 18px"><em>HTML Code</em></span></p><p><span style="font-size: 18px">[CODE]</span></p><p><span style="font-size: 18px"><head></span></p><p><span style="font-size: 18px"><link href="style.css" rel="stylesheet" /></span></p><p><span style="font-size: 18px"></head></span></p><p><span style="font-size: 18px"><div class="myDiv">...</div></span></p><p><span style="font-size: 18px">[/CODE]</span></p><p><span style="font-size: 18px"></span></p><p><span style="font-size: 18px"><em>CSS Code (style.css)</em></span></p><p><span style="font-size: 18px">[CODE].myDiv {background-color: #ffffff;}[/CODE]</span></p><p><span style="font-size: 18px"></span></p><p><span style="font-size: 18px">මෙතන myDiv කියන div එකට style එකක් දීල තියෙනවා style.css ෆයිල් එකෙන්. </span></p><p><span style="font-size: 18px"></span></p><p><span style="font-size: 18px"><strong>Framework එකක් පාවිච්චි කලොත් අපි css ලියන්න ඕනේ නැහැ. අපිට තියෙන්නේ class / id එක වෙනස් කරන ඒක.</strong></span></p><p><span style="font-size: 18px"></span></p><p><span style="font-size: 18px"><strong>HTML CODE</strong></span></p><p><span style="font-size: 18px">[CODE]<head></span></p><p><span style="font-size: 18px"><link href="framework.css" rel="stylesheet" /></span></p><p><span style="font-size: 18px"></head></span></p><p><span style="font-size: 18px"><div class="fm-section fm-section-blue">...</div>[/CODE]</span></p><p><span style="font-size: 18px"></span></p><p><span style="font-size: 18px">මෙතන 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 දෙකම ඒක පාර පාවිච්චි කලොත් කෙල වෙනවා.</span></p><p><span style="font-size: 18px"></span></p><p><span style="font-size: 18px">දැන් අපි බලමු මොනාද මේ හොඳම 3 කියලා.</span></p><p><span style="font-size: 18px"></span></p><p><span style="font-size: 18px"><span style="font-size: 22px">1) Twitter Bootstrap</span></span></p><p><span style="font-size: 18px">මේකේ දැන් තියෙන්නේ 4 වෙනි version එකයි. මේක මුල්තැන දෙන්නේ mobile device වලට. ඒ කියන්නේ ඕනේ device එකක ගානට display වෙනවා (responsive) මේක සම්පූර්ණයෙන්ම නොමිලේ ගන්න පුළුවන්. ඕන අය <a href="https://getbootstrap.com/" target="_blank">මෙතනින්</a> ගන්න. <a href="http://www.google.lk/search?q=bootstrap+tutorials" target="_blank">මෙතනින්</a> මේ framework එක ගැන tutorials හොයාගන්න පුළුවන්.</span></p><p><span style="font-size: 18px"></span></p><p><span style="font-size: 18px"><span style="font-size: 22px">2) Material Design</span></span></p><p><span style="font-size: 18px">මේක දෙන්නේ google එකෙන්. bootstrap තරම්ම හොඳයි. මමනම් වැඩිය පාවිච්චි කරලා නැහැ, ඒත් සාමානයෙන් හොඳයි කියල තමයි පැවසෙන්නේ. <a href="https://material.io/" target="_blank">මෙතනින්</a> ගන්න. Tutorials <a href="http://www.google.lk/search?q=material+design+tutorials" target="_blank">මෙතනින්</a> බලන්න.</span></p><p><span style="font-size: 18px"></span></p><p><span style="font-size: 18px"><span style="font-size: 22px">3) UIkit</span></span></p><p><span style="font-size: 18px">මම පාවිච්චි කරපු ඉතාමත්ම හොඳ framework එකක්. හොඳ documentation එකක් තියෙනවා. tools මදි නොකියන්න තියෙනවා. එලට හදල තියෙනවා. සම්පූර්ණයෙන්ම free. මටනම් මේක කලින් දෙකටම වඩා හොඳයි. ඒත් සම්ප්රදායෙන් පිට පනින්න හොඳ නෑනේ <img src="/styles/default/xenforo/smilies/default/P.gif" class="smilie" loading="lazy" alt=":P" title=":P :P" data-shortname=":P" />. කමක් නෑ. <a href="https://getuikit.com/" target="_blank">මෙතනින් </a>මේක download කොරගන්න. Tutorials <a href="https://getuikit.com/docs/introduction" target="_blank">මෙතන</a> තීනෝ...</span></p><p><span style="font-size: 18px"></span></p><p><span style="font-size: 18px">මතක ඇතුව rep දීපල්ලා. comment එකක් දාගෙන පල.</span></p></blockquote><p></p>
[QUOTE="GadgetPodda, post: 23344264, member: 567334"] [SIZE="1"][COLOR="White"]තොපිට ඕනේ සේරම තීනෝ. ඇතුලට වරෙව්. . . . . . .[/COLOR][/SIZE] [SIZE="5"]අපි webpage එකක් style කරනකොට css codes තොගයක් ලියන්න වෙනවනේ. ඒක මග අරින්න අපිට CSS Framework එකක් පාවිච්චි කරන්න පුළුවන්. ඒ කියන්නේ කලින්ම ලියල තියෙන අපිට නිතර ඕන වෙන style සේරම තියෙන css file එකක්. උදාහරණයක් විදිහට පල්ලෙහා එක බලන්න. eg :- [B]තමන් අතින්ම සේරම code කරද්දී html element එකට අයිති class එක හරි id එක හරි css code එකේදී යොදන එකනේ කරන්නේ.[/B] [I]HTML Code[/I] [CODE] <head> <link href="style.css" rel="stylesheet" /> </head> <div class="myDiv">...</div> [/CODE] [I]CSS Code (style.css)[/I] [CODE].myDiv {background-color: #ffffff;}[/CODE] මෙතන myDiv කියන div එකට style එකක් දීල තියෙනවා style.css ෆයිල් එකෙන්. [B]Framework එකක් පාවිච්චි කලොත් අපි css ලියන්න ඕනේ නැහැ. අපිට තියෙන්නේ class / id එක වෙනස් කරන ඒක.[/B] [B]HTML CODE[/B] [CODE]<head> <link href="framework.css" rel="stylesheet" /> </head> <div class="fm-section fm-section-blue">...</div>[/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 කියලා. [SIZE="6"]1) Twitter Bootstrap[/SIZE] මේකේ දැන් තියෙන්නේ 4 වෙනි version එකයි. මේක මුල්තැන දෙන්නේ mobile device වලට. ඒ කියන්නේ ඕනේ device එකක ගානට display වෙනවා (responsive) මේක සම්පූර්ණයෙන්ම නොමිලේ ගන්න පුළුවන්. ඕන අය [URL="https://getbootstrap.com/"]මෙතනින්[/URL] ගන්න. [URL="http://www.google.lk/search?q=bootstrap+tutorials"]මෙතනින්[/URL] මේ framework එක ගැන tutorials හොයාගන්න පුළුවන්. [SIZE="6"]2) Material Design[/SIZE] මේක දෙන්නේ google එකෙන්. bootstrap තරම්ම හොඳයි. මමනම් වැඩිය පාවිච්චි කරලා නැහැ, ඒත් සාමානයෙන් හොඳයි කියල තමයි පැවසෙන්නේ. [URL="https://material.io/"]මෙතනින්[/URL] ගන්න. Tutorials [URL="http://www.google.lk/search?q=material+design+tutorials"]මෙතනින්[/URL] බලන්න. [SIZE="6"]3) UIkit[/SIZE] මම පාවිච්චි කරපු ඉතාමත්ම හොඳ framework එකක්. හොඳ documentation එකක් තියෙනවා. tools මදි නොකියන්න තියෙනවා. එලට හදල තියෙනවා. සම්පූර්ණයෙන්ම free. මටනම් මේක කලින් දෙකටම වඩා හොඳයි. ඒත් සම්ප්රදායෙන් පිට පනින්න හොඳ නෑනේ :P. කමක් නෑ. [URL="https://getuikit.com/"]මෙතනින් [/URL]මේක download කොරගන්න. Tutorials [URL="https://getuikit.com/docs/introduction"]මෙතන[/URL] තීනෝ... මතක ඇතුව rep දීපල්ලා. comment එකක් දාගෙන පල.[/SIZE] [/QUOTE]
Insert quotes…
Verification
Payakata winadi keeyak tibeda?
Post reply
Top
Bottom