← සියලුම ඒකක වෙත යන්න

06 Design Systems සහ Style Guides

විශාල ව්‍යාපෘති වලදී සියලුම පිටු සහ මූලිකාංග (elements) අතර ඒකාකාරී පෙනුමක් පවත්වා ගන්නේ කෙසේද? පිළිතුර Design Systems ය.

Design System යනු කුමක්ද?

Design System එකක් යනු නැවත නැවතත් භාවිතා කළ හැකි මූලිකාංග (reusable components) එකතුවක් සහ ඒවා භාවිතා කළ යුතු ආකාරය පිළිබඳ පැහැදිලි නීති මාලාවකි. මෙය නිර්මාණකරුවන්ට සහ සංවර්ධකයින්ට (developers) එකම භාෂාවක් කතා කිරීමට සහ ව්‍යාපෘතිය පුරාම ස්ථාවර (consistent) පෙනුමක් සහ හැඟීමක් පවත්වා ගැනීමට උපකාරී වේ.

උදාහරණයක්: LEGO සෙල්ලම් බඩු කට්ටලයක් ගැන සිතන්න. එහි විවිධ වර්ගයේ ගඩොල් (components) ඇති අතර, ඒ සියල්ල එකිනෙකට හොඳින් ගැලපේ (rules). ඔබට එම ගඩොල් භාවිතයෙන් විවිධ දේ (නිවසක්, මෝටර් රථයක්) සෑදිය හැකි නමුත්, ඒ සියල්ල "LEGO" පෙනුමක් රඳවා ගනී. Design System එකක් ද එසේමය.

Style Guide: අපේ ව්‍යාපෘතියේ නීති මාලාව

Style Guide යනු Design System එකේ ලේඛනගත කිරීමයි. අපගේ "Student Notes Website" සඳහා සරල Style Guide එකක් නිර්මාණය කරමු.

Student Notes - Style Guide

🎨 වර්ණ (Colors)

Primary (ප්‍රාථමික): #007bff (බොත්තම් සහ ප්‍රධාන links සඳහා)

Background (පසුබිම): #f4f4f9 (පිටුවේ පසුබිම් වර්ණය)

Text (පෙළ): #333 (කියවීමට පහසු තද අළු පැහැය)

✒️ අකුරු (Typography)

ප්‍රධාන අකුරු වර්ගය: Arial, sans-serif

h1: ශීර්ෂ පාඨය

p: සාමාන්‍ය ඡේදයක පෙළ.

බොත්තම් (Buttons)

ප්‍රාථමික ක්‍රියා සඳහා භාවිතා කරන බොත්තම.

ප්‍රායෝගික ක්‍රියාකාරකම: CSS Classes සමඟින් සංවිධානය වීම

දැන් අපි පෙර පාඩමේදී එකතු කළ style නීති, නැවත භාවිතා කළ හැකි CSS Classes බවට පත් කරමු. මෙය අපගේ කේතය වඩාත් පිළිවෙල සහ නඩත්තු කිරීමට පහසු කරයි.

උපදෙස්:

ඔබේ student-notes-v4.html ගොනුව විවෘත කරන්න.
<style> ටැගය තුළ ඇති style නීති, පහත දැක්වෙන පරිදි class-based selectors (උදා: .btn-primary) භාවිතා වන ලෙස වෙනස් කරන්න.
HTML body එකේ ඇති අදාළ මූලිකාංගවලට එම classes (උදා: <button class="btn-primary">) යොදන්න.
ගොනුව student-notes-v5.html ලෙස අලුතින් save කරන්න.

HTML කේතය:

                        
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student Notes</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f9;
            color: #333;
        }
        .container {
            padding: 20px;
            max-width: 800px;
            margin: auto;
        }

        /* Button Style - Reusable Class */
        .btn-primary {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 15px;
            cursor: pointer;
            border-radius: 5px; /* Added for a softer look */
        }

    </style>
</head>
<body>

<div class="container">
    <nav>
        <a href="#">Home</a> |
        <a href="#">Notes</a> |
        <a href="#">About</a>
    </nav>
    <hr>

    <h1>Welcome to Student Notes Website</h1>
    <p>A simple place to store your notes online.</p>

    <!-- Using the new reusable class -->
    <button class="btn-primary">Login</button>

</div>

</body>
</html>
                        
                    

පෙර ඒකකය ඊළඟ ඒකකය: Interaction Design