Pelican
Pelican Design System
Overview
The Pelican Design System is a specialized Bootstrap theme tailored for OTS projects, offering a structured and visually appealing foundation for web development. With its comprehensive set of resources and user-friendly installation processes, it facilitates smooth integration while ensuring consistency in design across various applications.
Designed with modularity in mind, the Pelican Design System not only emphasizes performance with its optimized CSS and JS files but also enhances collaboration through detailed documentation and straightforward development workflows. This makes it an excellent choice for developers looking to streamline their projects and maintain a high level of quality.
Features
-
NPM Installation: Easy installation via npm ensures you can manage your packages efficiently, making updates and dependencies a breeze.
-
Comprehensive Asset Bundles: The package includes both compiled and minified CSS and JS files, along with source maps for easier debugging and development.
-
Bundled Resources: All necessary components like Bootstrap’s JS, Popper, and jQuery are included in bundled versions, saving time on integration.
-
Custom Typography and Icons: To achieve the best visual quality, Public Sans typeface and Font Awesome library are recommended, providing a rich collection of icons and improved font rendering.
-
Local Development Environment: A robust local development setup allows for easy asset building and documentation generation, ensuring rapid iterations during the development cycle.
-
Watch Commands: The ability to run watch commands keeps track of asset changes in real-time, automatically rebuilding assets to reflect modifications.
-
Linting Support: Dedicated linting scripts for both CSS/SASS and JavaScript help maintain code quality and adherence to best practices throughout the development process.
-
Documentation Generation: Leveraging Eleventy for documentation allows for clear and structured guidance, making it easier for developers to navigate and understand the system’s features.
- Bootstrap
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
- 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.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.