Build your apps with speed and consistency
Eco Components reduce the complexity involved in building web applications by providing pre-designed, high-level components that get your application off the ground and in customers hands more quickly.
Eco is an open source, community-built environment
Contribute to Eco
We work hard to create in-demand components and features, but if your team has or would like to create resources that would benefit other DTN teams, please share them! Learn more about what can be contributed to Eco and the process to do so on our Contributing page.
Less assembly required
The goal of Eco is to provide DTN Application Engineers with the tools needed to create apps quickly and effectively, while aligning to the principles below.
Fast
Go from nothing to a functioning application in very little time.
Focused
Leverage existing tooling and best practices -- no time spent reinventing the wheel.
Consistent
Focus on higher level reusable components and interactions to reduce the time and effort of creating single use designs.
Reusable
Build apps with content-agnostic CSS components to ensure consistency across all design specs.
Lightweight
Remove all unused CSS when building for production, making your final CSS bundle as small as possible (most projects ship less than 10kB of CSS to the client).
Responsive
Create fully responsive and carefully designed apps that look great at any screen size.
Accessible
Adhere to accessibility best practices and W3C standards so that all may benefit from your apps.
Interactive
Interact with live examples to get a full understanding of how these components work before implementing them into your app.
UX front and center
The Eco Component Library has UX design baked in. Each and every component is built to meet the needs of the end user, ensuring their experience is free from common pain points. These UX-based design decisions follow these key principals.
Consistency
Follow standard conventions so that users don’t have to wonder what different actions, words, or situations mean.
Efficient
Provide multiple ways to accomplish tasks and allow users to tailor their actions and outcomes.
Relevant
Showcase only relevant and needed information, ensuring that nothing gets in the user’s way.
Clear
Express error messages in plain language with direct and meaningful instructions to get the user back on track.
Prevention
Help users avoid error-prone actions by ensuring the proper confirmations and paths are presented before an action is committed.
Freedom
Give users control over the path that they are taking in your app, providing a sense of confidence and minimizing frustration.
Visibility
Keep users informed about what is happening in the app through timely and appropriate feedback.
Familiar
Tailor the designs to the user’s so that they feel welcome and engaged in the process.