DEV Community

Cover image for Tutorial 2: Instalación de Kikstart UI
Derlys for kikstart.dev

Posted on • Edited on

3 2

Tutorial 2: Instalación de Kikstart UI

En este tutorial aprenderemos que Kikstart UI contiene dependencias que podemos utilizar para construir nuestra app.

Requisitos

  • Haber realizado el tutorial 1, donde instalamos Angular CLI y creamos una app.

Paso # 1

En este paso instalamos los temas de Kikstart UI. Los temas son una versión personalizada de bootswatch y estos mismos son temas de bootstrap.

1: Ejecuta el siguiente comando para instalar la dependencia:

npm install @kikstart-ui/themes
Enter fullscreen mode Exit fullscreen mode

2: Actualiza los estilos de scss, en tu editor busca la ruta
src/styles.scss y agrega lo siguiente:

@import "~@kikstart-ui/themes/scss/dark";
Enter fullscreen mode Exit fullscreen mode

📖 kikstartpedia

En Kikstart UI puedes experimentar con los diferentes styles de layout. Cambia la palabra dark en el @import por pirate o light y mira como se ve 😉.

Paso # 2

En este paso instala el layout-web y utilízalo en tu AppComponent.

1: Ejecuta el siguiente comando para instalar la dependencia:

npm install @kikstart-ui/layout-web
Enter fullscreen mode Exit fullscreen mode

2: Busca la ruta src/app/app.module.ts y agrega lo siguiente en la parte superior:

import { LayoutWebModule } from '@kikstart-ui/layout-web'
Enter fullscreen mode Exit fullscreen mode

3: Luego agrega LayoutWebModule en el array imports de @NgModule.

@NgModule({
  declarations: [
    AppComponent,  
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LayoutWebModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

4: En tu editor busca la ruta src/app/app.component.html y cambia el contenido con:

<web-layout>
  <header> header </header>
  <router-outlet></router-outlet>
  <footer class="text-center text-muted py-3">
    Copyright &copy; 2020
  </footer>
</web-layout>
Enter fullscreen mode Exit fullscreen mode

Paso # 3

En este paso agrega la navegación principal a tu app. Usa el UiNavbarModule y configura el brand.

1: Busca la ruta src/app/app.module.ts y agrega lo siguiente en la parte superior:

import { UiNavbarModule} from '@kikstart-ui/ui-navbar';
Enter fullscreen mode Exit fullscreen mode

2: Luego agrega UiNavbarModule en el array imports de @NgModule.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LayoutWebModule,
    UiNavbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

3: Busca la ruta src/app/app.component.ts y agrega lo siguiente en la parte superior:

import { UiBrand} from '@kikstart-ui/ui-brand';
Enter fullscreen mode Exit fullscreen mode

4: Luego en el mismo archivo define una propiedad brand con el tipo UiBrand.

 export class AppComponent {
  title = 'site';
  brand: UiBrand = {
    name: 'Site',
    logo: 'https://github.com/kikstart-ui.png',
  };
}
Enter fullscreen mode Exit fullscreen mode

5: En tu editor busca la ruta src/app/app.component.html y cambia el header a:

<header>
  <ui-navbar navbarStyle="dark" [brand]="brand"></ui-navbar>
</header>
Enter fullscreen mode Exit fullscreen mode

Resumen

Para resumir en este tutorial hemos instalado Kikstart UI y sus dependencias, creamos un layout que queda listo para empezar el siguiente tutorial en donde configuraremos nuestras rutas.

El repositorio con este paso lo puedes encontrar aquí.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series