Guidelines

Atomic Design Guidelines

அணுமுறை வடிவமைப்பு வழிகாட்டி

Learn how TamilDS uses the Atomic Design methodology to build consistent, scalable, and localized web interfaces. This hierarchy guides how small atoms combine into complex pages.

தமிழ் வடிவமைப்பு அணுமுறை அமைப்பை (Atomic Design) எவ்வாறு பயன்படுத்தி எளிய கூறுகள் முதல் முழுமையான அரசு இணையப் பக்கங்கள் வரை உருவாக்குகிறது என்பதை விளக்கும் வழிகாட்டி.

அமைப்பு முறை விளக்கம்

அணுமுறை வடிவமைப்பு (Atomic Design) என்பது பக்கங்களை தனித்தனியாக வடிவமைக்காமல், மீண்டும் மீண்டும் பயன்படுத்தக்கூடிய மற்றும் எளிதில் அளவிடக்கூடிய கூறுகளின் அமைப்பாக உருவாக்குவதற்கான ஒரு வடிவமைப்பு நெறிமுறையாகும்.

1. Atoms (அணுக்கள்)

வடிவமைப்பின் அடிப்படை அலகுகள். இவற்றை மேலும் பிரிக்க இயலாது. எடுத்துக்காட்டாக: லேபிள்கள், உள்ளீடுகள், பொத்தான்கள், சின்னங்கள் மற்றும் பேட்ஜ்கள்.

2. Molecules (மூலக்கூறுகள்)

ஒன்றோடொன்று இணைந்த அணுக்களின் எளிய தொகுப்பு. ஒரு குறிப்பிட்ட செயலைச் செய்ய இவை கூட்டாக இயங்குகின்றன. எடுத்துக்காட்டாக: தேடல் பட்டி (உள்ளீடு + தேடல் பொத்தான்) அல்லது படிவப் புலம்.

3. Organisms (தொகுப்புக் கூறுகள்)

மூலக்கூறுகள் மற்றும் அணுக்களின் கூட்டமைப்பால் உருவான சிக்கலான வடிவங்கள். இவை பக்கத்தின் ஒரு முழுமையான பகுதியை உருவாக்குகின்றன. எடுத்துக்காட்டாக: பக்கத்தின் மேல் பகுதி (Header), பக்கத்தின் கீழ் பகுதி (Footer) அல்லது வழிசெலுத்தல் பட்டை.

4. Templates (வார்ப்புருக்கள்)

பக்க அளவிலான கட்டமைப்புகள். இவை தகவல்களும் கூறுகளும் பக்கத்தில் எங்கு அமைய வேண்டும் என்பதைத் தீர்மானிக்கின்றன. இதில் நிஜத் தரவுகள் இருக்காது, வெறும் இடவமைப்புகள் மட்டுமே இருக்கும்.

5. Pages (பக்கங்கள்)

வார்ப்புருக்களின் இறுதி வடிவம். இதில் உண்மையான தரவுகள், மொழிபெயர்ப்பு உரைகள் (தமிழ்), மற்றும் பக்கத்தின் இறுதித் தோற்றம் ஆகியவை முழுமையாக இருக்கும். பயனர் காண்பது இந்தப் பக்கங்களையே.

அணுமுறை வடிவமைப்பு விளையாட்டகம்

ஒவ்வொரு அடுக்கிலும் கூறுகள் எவ்வாறு ஒருங்கிணைக்கப்படுகின்றன என்பதை நேரலையாக விளையாடிப் பார்க்கவும். இடதுபுறக் கட்டுப்பாட்டுப் பலகத்தின் மூலம் **அணுக்கள் (Atoms)** மாறும் போது அவை **மூலக்கூறுகள் (Molecules)** மற்றும் **பக்கங்களில் (Pages)** எவ்வாறு பிரதிபலிக்கின்றன என்பதை அறியலாம்.

Stage 1

Atoms (அணுக்கள்)

இவை ஒவ்வொன்றும் தனித்தனி அணுக்கள். பக்கவாட்டுப் பலகத்தில் உங்கள் விருப்பத்திற்கேற்ப இவற்றை மாற்றிக் கொள்ளலாம்.

Input Atom

Button Atom

Icon Atom

Badge Atomஅரசு அறிவிப்பு

குறியீடு முன்னோட்டம் (Code Preview)

// Atom component imports from TamilDS
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Mail } from "lucide-react";

// Individual Atom Specimen Definitions
const BadgeAtom = () => (
  <Badge variant="default">
    ${isTamil ? "அரசு அறிவிப்பு" : "Official Notice"}
  </Badge>
);

const InputAtom = ({ value, onChange }) => (
  <Input 
    type="email"
    placeholder=${isTamil ? "மின்னஞ்சல் முகவரி..." : "Enter your email address..."}
    className="bg-background"
    value={value}
    onChange={onChange}
  />
);

const ButtonAtom = ({ onClick }) => (
  <Button 
    size="default"
    className=""
    onClick={onClick}
  >
    <Mail className="mr-2 size-4" />
    ${isTamil ? "சந்தா சேர்" : "Subscribe"}
  </Button>
);

சிறந்த நடைமுறைகள் (Do & Dont)

உறுப்புகளின் மறுபயன்பாடு மற்றும் தரத்தை உறுதிப்படுத்த இந்த விதிகளைப் பின்பற்றவும்:

அணுக்களை முழுமையாக நிலையற்றதாக (Stateless) வைத்திருங்கள்

அணுக்களை நிலையற்றதாக வைத்திருங்கள்

அணுக்கள் (Atoms) தங்களுக்குள் சிக்கலான நிலைகளை மேலாண்மை செய்யக்கூடாது. அவை தங்களை உள்ளடக்கிய பெட்டியின் அளவிற்கு ஏற்ப மட்டுமே இயங்க வேண்டும்.

அணுக்கள் தங்களுக்குள் நிலைகளை மேலாண்மை செய்யாமல், வெளியிலிருந்து பெறும் மதிப்புகளின் அடிப்படையில் மட்டுமே இயங்க வேண்டும்.

மூலக்கூறுகளுக்குள் API சேவைகளை இணைக்க வேண்டாம்

API சேவைகளை இணைக்க வேண்டாம்

மூலக்கூறுகள் என்பவை வெறும் இடைமுக வடிவமைப்புகள் மட்டுமே. அவற்றுக்குள் நேரடியாக நெட்வொர்க் சேவைகளை இணைப்பது அவற்றின் மறுபயன்பாட்டைத் தடுக்கும்.

மூலக்கூறுகளுக்குள் நேரடியாக API கோரிக்கைகளை இணைப்பதைத் தவிர்த்து, தொகுப்புக் கூறுகள் அல்லது பக்கங்கள் மூலம் அவற்றை மேலாண்மை செய்யவும்.

கட்டமைப்பு வழிகாட்டுதல்கள்

வடிவமைப்பு டோக்கன்கள் கீழ்நோக்கி பாயும்

அணுக்கள் நிறம், இடைவெளி போன்ற வடிவமைப்பு டோக்கன்களை நேரடியாகப் பயன்படுத்தும். மூலக்கூறுகள் அவற்றைப் பெற்றோர் பெட்டியின் மூலம் மேலாண்மை செய்ய வேண்டும். அணுக்களுக்குள் நேரடியாக மார்ஜின்களை அமைப்பதைத் தவிர்க்கவும்.

தனித்தனி எல்லைகள்

அணுக்கள் மற்றும் மூலக்கூறுகள் பக்கத்தின் ரவுட்டிங், அங்கீகார நிலை, அல்லது தரவுதளங்களுடன் நேரடியாகத் தொடர்பு கொண்டிருக்கக் கூடாது. இது அவற்றைச் சுதந்திரமாகச் சோதிக்க உதவும்.

சரிபார்ப்புப் பட்டியல்

அணுக்கள் வெளிப்புற இடைவெளிகளை (Margin) கொண்டிருக்கக் கூடாது; அவற்றை உள்ளடக்கிய பெற்றோர் கூறுகள் மட்டுமே இடைவெளிகளைத் தீர்மானிக்க வேண்டும்.

மூலக்கூறுகள் தெளிவான அணுகல்தன்மை பண்புகளை (Aria roles) கொண்டிருப்பதை உறுதி செய்யவும்.

தரவுகள் ஏற்றப்படும் வரை தொகுப்புக் கூறுகள் (Organisms) எலும்புக்கூடு (Skeleton screen) போன்ற மாற்று நிலைகளைக் கொண்டிருக்க வேண்டும்.

வார்ப்புருக்கள் (Templates) வெறும் அமைப்புகள் மட்டுமே, அவற்றுக்குள் தரவுதளத் தகவல்களை நேரடியாகப் பயன்படுத்தக் கூடாது.

பக்கங்கள் (Pages) மட்டுமே மொழிபெயர்ப்பு உரைகளைப் பெற்று அவற்றை உரிய கூறுகளுக்குப் பகிர வேண்டும்.

W3C Semantic HTML: அணுக்கள் முறையான HTML குறிச்சொற்களைப் பயன்படுத்த வேண்டும் (உம்: <div role='button'> என்பதற்குப் பதிலாக <button>). இது அணுகல்தன்மை (Accessibility) மரத்தை வலுவாக உருவாக்க உதவும்.