الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

حديقة ماجي الرقمية

هذا هو الكود المصدري لـ MaggieAppleton.com ، وهي حديقة رقمية مليئة بالملاحظات المتنامية والمقالات وأنماط التصميم.

إنه مصدر مفتوح للسماح للأشخاص بالتجول والحصول على أفكار لحديقتهم الخاصة. ومع ذلك ، أفضل أنك لم تتفوق على البيع بالجملة من أجل بناء حديقتك الخاصة. أولاً لأن الكود الخاص بي هو فوضى ساخنة (أنا مطور بالضرورة ، وليس عن طريق المهنة أو الاختيار) ، والثاني لأنني صممتها وفقًا لتفضيلاتي الجمالية ، والاحتياجات / الرغبات الوظيفية. لك لن يكون هو نفسه.

إنه أمر محرج أيضًا عندما أتعثر على موقع شخص آخر وهو تعبير دقيق عن ذوق التصميم والهوية. مثل المشي على شخص يرتدي ملابسك. ومع ذلك ، يمكنك أن تفعل ما تحب على الويب ولن أثير ضجة كبيرة حول هذا الموضوع.

أشجعك بشدة على بناء حديقة خاصة بك! أحتفظ بقائمة منسقة من الأدوات والموارد التي يمكن أن تساعدك على القيام بذلك.

المكدس

  • Next.js
  • رد فعل
  • MDX
  • MDX Remote
  • أيقونات البطل - تستخدم في الرموز البسيطة (الصلبان ، السهام ، إلخ)
  • بحث الغوليا
  • المكونات المصممة
  • حركة الإطارات
  • الوصول إلى واجهة المستخدم
  • tippy.js
  • رد فعل البناء CSS
  • كبار المسئولين الاقتصاديين التالي
  • لوداش

نظام التصميم

  • المتغيرات العالمية المعلنة في المكونات/GlobalStyles.JS
  • تعيين على شبكة 8 بكسل. 2 ، 4 ، 8 ، 12 ، 16 ، 24 ، 32 ، 40 ، 48 ، 64 ، 80 ، 96 ، 128 ، 160. هذا بالتأكيد الكثير من خيارات الحجم. يجب مراجعة وخفضها في المستقبل.
  • الخطوط عبارة عن سطح Canela للعناوين ، ونص Canela للجسم الطويل ، و Lato كخط عام Sans-Serif لمكونات واجهة المستخدم العملية.
  • قم بتعيين نوع على مقياس السوائل باستخدام الحسابات الفاخرة من نظام يوتوبيا

مكونات MDX

  • <ProseWrapper /> يلتف حول جميع نسخة MDX Longform. يحدها إلى 72Ch ويضعها في grid-column: 2 .
  • عناصر التخطيط
    • <TwoColumn />
    • <ThreeColumn />
  • عناصر الصورة
    • <Img /> يهرب من grid-column: 2 وضع ويضع عرضًا أقصى قدره 1000 بكسل. تجاوز اختياري مع عرض width . الحد الأدنى من الأنماط ، يحل محل عنصر IMG الافتراضي.
    • <BasicImage /> أكثر ميزات كاملة - يتضمن تعليقًا اختياريًا من نص ALT.
    • <ImageFrame/> يضيف إطارًا خفيفًا و srop-shadow. مفيد لقطات الشاشة.

الصور

أنا أستخدم خدعة الصورة الكاملة لـ Josh Comeau مع شبكة CSS.

  • يتم تمرير جميع الصور في ملفات MDX إلى <img /> . يعلن عرضًا افتراضيًا قدره 1000 بكسل ويقبل دعامة width اختيارية
  • <BasicImage /> سوف يمتد الصورة عبر اللوحة الكاملة ، ويقبل اختياريا دعامة العرض المعلنة.
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل