Vue Layout System

Vue components that solve daily layout problems

Consistent

Vue Layout System lets you and your team arrange UI components in a consistent way. Developers work more efficiently by saving much time tackling CSS challenges for different layout problems in multiple ways.

Predictable

Designers and developers benefit from Vue Layout System by knowing how the others comprehend layout concepts in the same way. You can collaborate efficiently without discussing the details of HTML and CSS.

Stable

Tired of broken layout issues? Vue Layout System takes the best practices for solving layout problems. It separates the concerns of layout, keeping your UI elements aligned and precise-positioned across browsers.

# Give it a try

Here's an example showing how you can easily create new composite elements by mixing your existing components and contents with Vue Layout System. Without writing many lines of CSS, you can arrange your UI components in the desired layout, where elements are well aligned and arranged with precise spacing.

(

offline

Text

)

Vue Layout System

Highlight layouts

List gap : 5

List paddingX : 5

List paddingY : 5

Message paddingX : 5

Message paddingY : 5

Message content gap : 3

User avatar gap : 5

User status gap : 3

Notification Padding : 1

Notification position

reset

Ellen Lambert