Usando su propio sistema de diseño con componentes KendoReact

Quizás ya hayas oído hablar de KendoReact (¡o incluso hayas trabajado con él!). Ha aparecido en algunas de mis conversaciones diarias, especialmente aquellas sobre trabajar con sistemas de diseño y React. Podrías considerarlo como una biblioteca de componentes como Bootstrap o Material Design, excepto que los componentes de KendoReact son mucho más robustos. Estos son componentes interactivos controlados por estado listos para comenzar a construir interfaces de usuario completas desde el principio (sin mencionar que si desea usar Bootstrap como tema, absolutamente puede hacerlo).

Siempre que esté pensando en utilizar una biblioteca de interfaz de usuario, debe pensar en las capacidades de estilo. ¿Eres realmente capaz de expresar tu marca con estos? ¿Estaban destinados a ser estilizados? ¿Cómo será la experiencia de estilismo?

Afortunadamente, KendoReact realmente hace que el estilo sea un ciudadano de primera clase de toda la biblioteca de UI.

KendoReact es una colección de componentes de interfaz de usuario para sitios de construcción. Es bastante grande. Según mis cálculos, más de 80, y eso no incluye a los componentes infantiles de los levantadores de pesas como la Grid /familia.

Aquí hay uno, el DropDownList /y simplemente usando el tema predeterminado (incluso ese es opcional):

Si quiero darle estilo a esto, no necesito ninguna habilidad especial de propiedad, solo puedo usar CSS. Aquí estoy yo forzándole una apariencia completamente nueva con diferentes colores y fuentes, con solo un poco de CSS simple:

Pero bueno, tal vez quieras hacer algo un poco más sistematizado que usar un CSS de anulación aleatoria. No te culpes. Buenas noticias: los temas de KendoReact están basados ​​en Sass. Por lo tanto, puedes controlar gran parte de la coloración y el estilo con solo cambiar algunas variables de Sass.

Tienen un creador de temas completos que puedes usar directamente en su sitio y que muestra exactamente lo que necesitas. Supongamos que deseamos comenzar desde su tema base y desde allí, seleccione el tema Predeterminado:

Luego podrás jugar con todos los colores de la interfaz de usuario a tu gusto. Aquí estoy probando un tema con algunos colores de CSS-Tricks.

Puedo descargarlo del sitio que me dará las variables como un archivo SCSS que puedo aplicar antes del tema predeterminado en mi compilación (hay un excelente tutorial que cubre cómo hacerlo en el blog de Telerik). Además, me proporciona todo el maldito archivo CSS del tema si quiero usarlo de esa manera, lo cual es simple y rápido. Aquí estoy yo usando su widget de chat conversacional con ese tema:

Nuevamente, puedo comenzar con Bootstrap, puedo comenzar con Material, puedo comenzar con su tema predeterminado o puedo comenzar desde cero. El estilo depende totalmente de mí. Cada tema tiene sus ventajas y, como era de esperar, son súper flexibles en cuanto a configurar colores, fuentes y otros elementos de diseño.

Si realmente te adentrarás en esto, por supuesto consultarás sus documentos y te orientarás (es bueno saber que tienen documentos realmente completos). Todo es bastante sencillo, ¡lo harás genial! Si necesita comenzar a construir rápidamente una interfaz interactiva basada en estados sin sacrificar la personalización o el poder, encontrará que KendoReact es su amigo.