Himig
MatteuSan's personal design system for building user interfaces.
Overview
If you're diving into the world of design systems, it's crucial to ensure you're set up with the right tools and prerequisites. This system emphasizes the importance of using NodeJS LTS to avoid any potential issues during development. Additionally, you'll need to leverage the power of Sass, specifically DartSass, to ensure compatibility and avoid deprecated functionalities.
Setting up this design system is straightforward, but adhering to the guidelines for contributions will ensure that your efforts align with the community's standards. By keeping these prerequisites in mind, you can make the most of your experience in developing and enhancing the design system.
Features
- NodeJS LTS Requirement: Ensures project stability and minimizes the risk of breaking changes during development.
- Sass Dependency: Utilizes a CSS preprocessor, enhancing styling capability and efficiency.
- DartSass Preferred: Guides users to utilize DartSass over the deprecated LibSass for better performance and support.
- Clear Setup Instructions: Provides a straightforward approach to installing and configuring the necessary components.
- Contribution Guidelines: Encourages community involvement and offers a structured framework for submitting improvements.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Templates & Themes
A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.
- UI Kits & Components
A UI kit provides developers with a set of reusable components that can be easily integrated into a website or application. These components are pre-designed with consistent styling and functionality, allowing developers to save time and effort in the design and development process. UI kits can be either custom-built or third-party, and often include components for buttons, forms, typography, icons, and more.
- Gulp
Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.
- Rollup
RollupJS is a popular and efficient JavaScript module bundler that takes the code from multiple modules and packages them into a single optimized file, minimizing the overall size of the application and improving its performance.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.