How to Install and compile SASS on Linux

SASS කියන්නේ CSS preprossesor එකක්. SASS කියන එකේ තේරුම වෙන්නේ Syntactically Awesome Style Sheets ඒ වගේම නමේම තියන විදියට CSS වලට වඩා ලේසියෙන් CSS styling code කරන්න පුළුවන් SASS වලින්. CSS වලින් කරන වැඩ ප්‍රමාණය අඩු කරලා ඒ දේවල් ටික පහසුවෙන් කරන්න පුළුවන් වෙන්න තමයි SASS හඳුන්වලා දුන්නේ. දැන් බලමු කොහොමද Install කරගන්නේ කියලා.
Continue reading

Bootstrap Grid System එක

කලින් post කීපයකම bootstrap ගැන කිව්වනේ.. මේ කියන්න හදන්නේ bootstrap වල තියන තවත් වැදගත්ම දෙයක් ගැන. Responsive Design වලදී වටිනම දෙයක් තමයි Grid System එක. මේ Grid System එක කොහොමද use කරන්නේ කියලා තමයි මේ post එකේ විස්තර කරන්නේ. Continue reading

JQuery සිංහලෙන් – 3

ගොඩක් කාලෙකට පස්සේ ආයෙත් ලියන්න ගත්තා. exam වලට හිර උනාම ඉතින් මොනවත් කරන්න බැහැනේ. කාලයක් තිස්සේ එක එක දේවල් ගැන ලිව්වා, මේ ලියවෙන්නේ මේ blog එකේ 50 වෙනි පොස්ට් එක. කලින් පොස්ට් එකේ කිව්ව විදියට effects ගැන මේ පොස්ටුවෙන් විස්තර කරන්නම්. effects කොටස් 4කට වෙන් කරන්න පුළුවන්. Continue reading

JQuery සිංහලෙන් – 2

ගොඩක් දවසකට පස්සේ තමයි මේ post series එකේ දෙවැනි post එක ලියන්නේ. කලින් post එකේ කිව්ව විදියට මේ post එකේදී කියන්න යන්නේ jquery events ගැන. කලින් post එක බැලුවේ නැත්තන් මෙතැනින් බලන්න.

Jquery Events වලදී විස්තර වෙන්නේ browser එකේදි කරන Interaction නිසා ඇති වෙන events ගැන. මේවා කොටස් 4කට වෙන් කරන්න පුළුවන්. Continue reading

Smooth Hover Effect – Text Input Field – Input Field Featured කරන හැටි – 2

මේ පොස්ට් එකෙන් කියන්න හදන්නෙත් කලින් පොස්ට් එකේ වගේම web design trick එකක්. එහෙනම් බලමු මොකද්ද මේ designing trick එක කියලා. මේකෙන් කරන්නේ css වලින් effects වලට smooth එකක් දෙන එක. මේක කැමති ඕනෑම HTML element එකකට add කරගන්න පුළුවන්. මේ වගේ tricks වලින් පුළුවන් site එකක තියන attraction එක, user-friendly ගතිය වැඩි වෙනවා. Continue reading

Add image into Text Input Field – Input Field Featured කරන හැටි – 1

මේ post එකේ විස්තර වෙන්නේ පහල තියන post series එකේම තවත් ලිපියක්.

Show/Hide Password – Password Field එක Featured කරන හැටි
Check Password Length – Password Field එක Featured කරන හැටි – 1

දැන් බලමු මේ post එකේ කියන්නේ මොකද්ද කියලා. web site වල පහල තියනවා වගේ input field දැකලා ඇති. ඒ වගේ input field එකක් code කරන විදිය තමයි මේකේ විස්තර වෙන්නේ. Continue reading

Change Text Box Width with JQuery – Input Field Featured කරන හැටි

මේ පොස්ට් එකේ කියන්න හදන්නේ web site වල use කරන තවත් design එකක් ගැන. text box එකට animation එකක් add කරන එක මේකෙදි කරන්නේ. text box එක click කරාම,  ඒ කියන්නේ text box එක focus උනාම width එක වෙනස් වෙන්නත් එකෙන් අයින් උනාම (blur කියන event එක) ආයෙත් කලින් width එකටම set කරන්නත් Jquery පාවිච්චි කරන්නේ කොහොමද කියලා තමයි මේකේ විස්තර වෙන්නේ. website වල,  web application වල මේක use කරනවා දැකලා ඇති. Continue reading

JQuery සිංහලෙන් – 1

Jquery, නම කිව්ව ගමන් හැම කෙනාම වගේ අහලා තියන JavaScript  Library එකක්. මේ post series එකේ කියන්න හදන්නේ මුල සිට Jquery භාවිතය ගැන. මේ පොස්ට් එක ලියන වෙලාවේ තියන latest version එක වෙන්නේ 2.1.3 එක. HTML, CSS, JavaScript ගැන මූලික දැනුමක් තියනවා නම් වඩා හොඳයි. Jquery  කියන්නේ JavaScript Library එකක්. “write less, do more” කියන්නේ මේකේ tagline එක. නමේම තියන විදියට JS Code පේලි ගොඩකින් කරන දේ පේලි කීපයකින් Jquery වලදී කරගන්න පුළුවන්. මේ නිසා තමයි Jquery ජනප්‍රිය වෙලා තියෙන්නේ. ඒ වගේම අද භාවිත කරන හැම browser එකකම වගේ වැඩ කරන විදියට හදලා තියන නිසා  cross-browser issue එක Jquery වල නැහැ. Continue reading

Web Site with Twitter Bootstrap – 4

කලින් පොස්ට් එකේ කිව්ව විදියට මේ පොස්ට් එකෙන් කියන්නේ Button Group ගැන. මේක Bootstrap වල දීල තියන අමතර feature එකක්. මේකේ කොටස් කීපයක් තියනවා. එකින් එක විස්තර කරන්නම්. මුලින්ම බලමු Button Group එකක් කියන්නේ මොකද්ද කියල, Button Group එකක් කියන නමේම තියන විදියට Button කීපයක එකතුවක්. Continue reading

Web Site with Twitter Bootstrap – 3

ගොඩක් දවසකට පස්සේ තමයි Bootstrap post එකක් ලියන්නේ. මේ තියෙන්නේ කලින් ලිව්ව පොස්ට් දෙක. Web Site with Twitter Bootstrap – 1Web Site with Twitter Bootstrap – 2. අන්තිමට විස්තර කරලා තියෙන්නේ buttons ගැන නිසා එතනින් පටන් ගන්නම්. Bootstrap වලින් දීලා තියන තවත් වැදගත් Feature එකක් තමයි Button Group කියන්නේ.මේ ගැන විස්තර කරන්න කලින් කියන්න ඕන වැදගත් දෙයක් තියනවා. ඒක තමයි Glyphicons කියන්නේ. Continue reading