Awesome GitHub RepositoriesSyntax Conventions

Semantic-UI is an HTML and CSS UI framework consisting of a themed component library and a responsive layout framework. It provides a collection of reusable interface components and a grid-based system of columns and containers designed to build responsive websites. The framework is distinguished by its use of natural-language class naming, which maps human-readable CSS classes to specific visual styles. It also functions as a right-to-left UI toolkit, utilizing directional mirroring to adjust visual flow and element alignment for languages read from right to left. The system covers frontend

This project is a comprehensive educational knowledge base designed to support developers in mastering React and its surrounding ecosystem. It serves as a technical interview resource, providing a structured collection of questions and answers that cover core concepts, architectural patterns, and common development challenges. The repository distinguishes itself by offering detailed explanations of fundamental React principles, including component-based composition, the declarative UI paradigm, and state-driven data flow. It provides clarity on complex topics such as the Fiber reconciliation

Material Design Lite is a Material Design UI library and CSS design system. It serves as a front-end component framework providing a collection of HTML, CSS, and JavaScript components that implement the Material Design visual language for web applications. The project enables the implementation of Material Design components and a standardized design language to maintain a consistent look and feel across user interfaces. It supports frontend UI development and responsive web styling through pre-built components. The library facilitates rapid web prototyping by providing pre-styled components

WeUI is a mobile design system and CSS component framework providing a collection of pre-styled widgets and layout components for building mobile web applications. It functions as a mobile web UI library that enforces a consistent visual language and design language across web environments. The library utilizes a BEM styling system to prevent CSS conflicts and ensure modular component behavior. It provides a set of reusable styles and layout helpers that enable rapid prototyping of mobile web layouts through standardized buttons, dialogs, and navigation elements. The framework includes a mob

WeUI is a mobile web UI library and design system consisting of CSS components and HTML templates. It is specifically designed to replicate the visual identity and interface of the WeChat messaging ecosystem, providing a standardized set of components to build responsive mobile web interfaces. The library functions as a stateless component system, utilizing a pure CSS architecture and HTML templates that rely on external JavaScript for interactivity. It employs a BEM-based class naming convention to manage component nesting and prevent style leakage across complex layouts. The framework incl

NES.css is an 8-bit CSS framework and styling system that transforms standard HTML elements into pixelated interfaces inspired by classic gaming consoles. It serves as a retro UI component library and toolkit for rendering text, borders, and icons with a blocky aesthetic. The framework uses pure CSS to emulate 8-bit graphics without relying on external images or JavaScript rendering. It implements pixel-art border simulations and integrates pixel-style web fonts to maintain a consistent gaming aesthetic across different browsers. The system provides a suite of game-themed interface elements,

weui-wxss is a mobile design system and UI framework designed for the WeChat Mini Program development environment. It provides a collection of reusable components and predefined styles to ensure interfaces match the native WeChat look and feel. The library focuses on implementing a native WeChat user experience by translating mobile design mockups into working code using standardized visual guidelines. It manages the visual appearance of applications through a consistent set of stylesheets tailored for the WeChat runtime. The framework includes capabilities for style management and the imple

Primer is a CSS design system framework and utility library used to build consistent user interfaces based on a unified visual language. It provides a collection of CSS rules, utility classes, and pre-defined style sheets for styling standard interface elements. The framework implements frontend visual standardization through a shared set of utility classes and design system rules. This allows for the creation of reusable interface elements and the rapid development of web interface layouts. The system utilizes a BEM-based naming convention, design-token mapping, and CSS variable-based themi

This project is a CSS design system framework and modular library providing a standardized set of UI component stylesheets. It establishes a unified system of visual guidelines to ensure a consistent and professional look and feel across web interfaces. The framework is organized as a collection of standalone stylesheets that can be imported individually to minimize bundle size and eliminate unused styles. It utilizes a design token system based on CSS variables to manage theming and a utility-first class system for layout and spacing. The system employs a block element modifier naming conve

This project is a technical interview study guide and a markdown-driven static site designed to help developers prepare for coding screenings. It serves as a curated collection of common technical questions and expert answers, functioning as a comprehensive educational resource. The platform provides a structured curriculum and reference materials across several key domains. This includes a JavaScript language reference covering programming fundamentals, a frontend engineering curriculum focused on UI patterns and responsive design, and a web security knowledge base detailing attack vectors a

hint.css is a pure CSS tooltip library and styling framework used to create accessible informational pop-ups. It functions as a lightweight user interface component that transforms ARIA attributes into visible tooltips without the use of JavaScript. The framework is designed to be customizable, offering a system of configurable class prefixes to prevent naming conflicts within larger web projects. It utilizes a BEM-inspired namespace to ensure stylesheets remain conflict-free when integrated into existing environments. The library covers a range of UI capabilities, including directional posi

This project is a CSS architecture framework and style guide providing formal coding standards for CSS and Sass. It establishes a structured approach to naming conventions, property organization, and selector management to ensure consistency across large-scale projects. The framework focuses on decoupling visual styles from JavaScript behavior through specific naming prefixes and utilizes a block element modifier system for component naming. It defines strict guidelines for Sass usage, emphasizing the efficient application of variables and mixins to prevent bloated output and complex dependen

Get BEM to all people in simplest way

هذا المشروع عبارة عن إضافة Sublime Text وامتداد محرر تطوير ويب يعمل كموسع اختصار ترميز. يسمح بالإنشاء السريع لكتل كود HTML وCSS مهيكلة عن طريق تحويل رموز اختصار موجزة تشبه CSS إلى ترميز وأوراق أنماط كاملة. توفر الأداة أتمتة متقدمة لسير عمل الويب، بما في ذلك إنشاء عناصر HTML متداخلة، وأسماء فئات BEM، وبادئات بائع CSS. كما تتضمن أدوات متخصصة لإنشاء تدرجات CSS مع بدائل توافق المتصفح وتحويل مسارات الصور إلى عناوين URL للبيانات المشفرة بـ base64. بعيداً عن إنشاء الكود، يغطي الامتداد معالجة هيكل الترميز والتنقل. يتضمن ذلك قدرات لموازنة اختيارات العلامات، والقفز بين أزواج العلامات المطابقة، وإجراء حسابات حسابية داخل الكود، وإنشاء نص وهمي للاختبار البصري. النظام قابل للتهيئة من خلال تعيين اسم مستعار للاختصار، وتعريفات مقتطفات مخصصة، وإضافات إضافية لتعديل الفلاتر والإجراءات الداخلية.

wux-weapp هي مكتبة واجهة مستخدم قائمة على المكونات مصممة خصيصاً لبيئة WeChat Mini Program. توفر مجموعة من اللبنات الأساسية الموحدة والقابلة لإعادة الاستخدام والتوسيع لإنشاء تخطيطات وتفاعلات متسقة عبر صفحات تطبيقات الهاتف المحمول. يعمل إطار العمل كمجموعة واجهة متعددة المنصات تتيح توحيد واجهة الواجهة الأمامية وسير عمل النماذج الأولية السريع. يسمح ببناء تصميمات واجهة مستخدم احترافية للهاتف المحمول باستخدام عناصر مرئية مصممة مسبقاً بدلاً من كتابة الأنماط والمنطق المخصص من الصفر. تدمج المكتبة اتفاقية تسمية الأنماط القائمة على BEM وسمات CSS المتغيرة لإدارة المظهر المرئي. تستخدم نموذج تكوين مدفوع بالخصائص (Props) ومغلفات مكونات مخصصة لتوسيع مكونات WeChat Mini Program الأصلية مع فصل العرض عن منطق الأعمال.

هذا المشروع عبارة عن منهج تعليمي متقدم لـ CSS يتكون من ملفات أولية ومشاريع نهائية. يوفر مجموعة من التنفيذات الواقعية ومعرض مشاريع مصمم لإتقان تقنيات التخطيط والتصميم الحديثة. يركز المنهج على نهج نمطي لأوراق الأنماط باستخدام متغيرات Sass والمعمارية. يؤكد على اتفاقية تسمية المعدل-العنصر-الكتلة (BEM) لإنشاء CSS قابل للصيانة وإعادة الاستخدام. تغطي المادة عدة مجالات قدرات أساسية، بما في ذلك تصميم الويب المتجاوب باستخدام CSS Grid، وFlexbox، واستعلامات الوسائط. كما تتضمن تطوير تأثيرات الحركة من خلال إطارات CSS الرئيسية والانتقالات، بالإضافة إلى دمج رسومات المتجهات القابلة للتوسع والصور المحسنة لتصميم الواجهة الأمامية.

Topcoat هو إطار عمل CSS لواجهة المستخدم ومكتبة مكونات تُستخدم لبناء واجهات تطبيقات الويب. يعمل كتنفيذ لنظام تصميم يوفر مجموعة من العناصر المنسقة القابلة لإعادة الاستخدام وأساسيات التخطيط لضمان الاتساق البصري عبر صفحات الويب. يستخدم النظام بنية تنسيق قائمة على BEM لإدارة الخصوصية ومنع تسرب الأنماط. يجمع بين مكتبة CSS تعتمد على الأدوات المساعدة لاحتياجات التخطيط والتباعد الشائعة مع شبكة CSS متجاوبة تتكيف بناءً على عرض إطار العرض. يغطي إطار العمل تنسيق الواجهة الأمامية، وتطوير الويب المتجاوب، والنماذج الأولية السريعة لواجهة المستخدم. يشمل سطحه التقني سمات تعتمد على متغيرات CSS وأساس CSS طبيعي للحفاظ على عرض متسق عبر محركات الويب المختلفة.

Suit is a CSS component architecture framework and methodology designed for organizing styles using predictable naming conventions for components, descendants, and visual variations. It serves as a design system styling framework that maps application states and design variations to modular CSS rules. The system utilizes namespace-based CSS scoping to isolate component styles and prevent unintended side effects in global stylesheets. It also functions as a utility-first toolkit, providing a system for applying single-purpose layout and spacing rules to reduce code duplication. The methodolog

inuit.css is a Sass-based CSS framework and design system tool focused on building scalable user interfaces. It serves as a modular preprocessor system that utilizes BEM architecture and OOCSS patterns to structure stylesheets into reusable components and layout abstractions. The framework distinguishes itself by separating structural layout logic from visual skinning, allowing for the creation of design-agnostic layout objects. It employs a configuration-driven build process where developers can use feature switches and variable overrides to inject design tokens and selectively include only

Fomantic-UI is a component-based CSS library and frontend design system used to build consistent, responsive user interfaces. It functions as a CSS framework and responsive UI toolkit, providing a structured approach to managing typography, color palettes, and spacing. The project enables the development of custom UI components and the implementation of unified design systems across web applications. It provides a variable-driven theme compilation process to customize visual styles and a build-time system to compile selected components into production CSS bundles. The toolkit covers a broad