Start your learning journey for JTB_MD from here! Introduction of library & things to know before start.
JTB_MD (or JTBLabs - Modular Design) is an open-source, free-to-use web design library created by JTBLabs to ease web development workflows. From its inception in 2019, the library has amassed a comprehensive collection of components and utilities that empower developers to construct web applications using two different methodologies:
While we've explored component-based and utility-based development as separate approaches, JTB_MD's true strength lies in its ability to seamlessly combine them within your projects. This flexibility empowers you to leverage the advantages of both methodologies. This combined approach fosters efficiency and granular control, ultimately leading to exceptional results.
JTB_MD is not just a static design library with fixed features and components. Thanks to its flexible philosophy, it offers multiple variations, each tailored to different use cases, balancing flexibility and simplicity. Every variation comes with its own set of benefits and trade-offs—some may provide a comprehensive range of features, while others focus on lighter, faster implementations for projects requiring less complexity.
Beyond these pre-built variations, JTB_MD also allows you to create your own custom variations trough Customization - Getting started page. This means you can fine-tune the library to meet your project’s specific needs, selecting only the components and features that best suit your workflow, ensuring both efficiency and precision in your development process.
The documentation of library have been created to equip you with the knowledge to leverage JTB_MD effectively. However, as the creators of both the library and documentation, we want to emphasize that true mastery comes through hands-on experience, not just passively reading guides. Once you grasp the core concepts and functionalities, we strongly recommend project-based approach for learning.
As you've already learned, there are multiple variations of the library, each with its own set of features and configurations. The documentation here dynamically adapts based on the specific variation you're using. If you're working with the default version of the library, all relevant features, components, and customization options will be shown. However, if you're using a custom-generated variation—such as jtb_md_light, which omits certain features to reduce file sizes for faster page loads—the documentation adjusts accordingly. This goes beyond simply adding or removing content: every aspect of the documentation, adapts to reflect the unique characteristics of the selected variation. This ensures a more seamless and relevant learning experience, focusing on the tools and components you’re actively working with.
To help your learning journey, in jtb_md variation, the library documentation is divided into 4 key sections. Here's a breakdown of each section, their pages and focus areas:
Getting started: This section serves as your entry point to the exciting world of JTB_MD.
Introduction: Here you can explore the library's philosophy, navigate its in-depth documentation, and discover how to connect with the community.
Customization: Learn how to customize various parts of library and create your own unique variations, tailoring the library to suit your project's specific needs.
Installation: Learn how to install JTB_MD into your projects, including a detailed overview of the library's file structure and step-by-step guides to download and set it up.
Licence: This page clarifies how to legally use the library: permissions, requirements and prohibitions.
Core:
Foundations: This page establishes the stylistic and configurational foundation of library, including default element setups,and font families.
Rebooted elements: This page shows the modifications and enhancements made to default HTML elements.
Colors: This page explains the color palettes of the library and allows you to create your own color palettes.
Breakpoints: This page details the pre-set breakpoints of library; their definitions, associated dimensions, and the philosophy behind them.
Z-Index: This page shows the layers of library and its components including their parts, providing insight into the layering system used within.
Utilities: This core section serves as your comprehensive guide to JTB_MD's utility classes. Here, you'll find in-depth information about each utility group, display how to create structures and layouts, and modify design properties / enhance element styling with simple class assignments.
Layout systems: This section includes the utility groups of the library that aim to create / modify the layout structures of pages.
Design: This section includes the utility groups of the library that aim to modify / enhance designs of elements.
Components: This core section serves as your comprehensive guide to JTB_MD's custom made components. Here, you'll discover detailed information about each component, including its features, usage instructions, properties, and relationships with other components.
Form elements: This section showcases the collection of pre-built components of library that designed to facilitate user interaction and gather information.
Others: This section dives into the library's collection of pre-built components that are beyond layout creation and data gathering.
Layout: This section includes the collection of pre-built components of library which are designed to streamline layout creation processes.
To stay up-to-date on the development process of JTB_MD, you can leverage these helpful resources:
To ask a question about the library or get help in a specific topic:
jtb-md tag,#jtb_md channel,Copyright © 2024 JTBLabs - All rights reserved.