Semantic UI

El framework que habla tu idioma

Introducción

¿Qué es Semantic UI?

Semantic UI es un framework de CSS + JavaScript diseñado para crear interfaces web modernas y atractivas. Su enfoque principal es utilizar clases con nombres semánticos, es decir, clases fáciles de leer y entender porque se parecen al inglés común.

"Esto lo hace más accesible incluso para personas que no son desarrolladoras."

Historia y contexto

Creado en 2013

Fue creado por Jack Lukic como alternativa a Bootstrap, con la idea de ser más intuitivo, humano y descriptivo.

Comunidad

Aunque tuvo una comunidad muy activa, en los últimos años Bootstrap y Tailwind lo han desplazado un poco.

Propuesta única

Aun así, se sigue usando porque mantiene una propuesta diferente: código más cercano al lenguaje natural.

Características únicas

Lenguaje semántico

Las clases se leen casi como frases en inglés. Ejemplo: ui button primary

Muy descriptivo

Hace que el código sea más fácil de leer, mantener y compartir.

Componentes UI

Gran cantidad de componentes prediseñados, listos para usarse.

Interacciones

Incluye menús desplegables, modales y transiciones con jQuery, sin mucho JavaScript.

Filosofía

Semantic UI busca que el código sea legible como lenguaje humano.

"En lugar de escribir estilos en CSS, describes la interfaz con palabras."

<button class="ui red button">Guardar</button>

Aquí no solo es un botón, también se entiende que es UI, de color rojo y que es un botón.

Sistema de Clases

Las clases funcionan como "palabras" que describen el componente:

Activa Semantic UI

[color]

Define el color (red, blue, green...)

[number]

Define grids o columnas (three, four...)

[type]

Tipo de componente (button, card, menu...)


<div class="ui three column grid">
  <div class="column">A</div>
  <div class="column">B</div>
  <div class="column">C</div>
</div>

jQuery y Semantic UI

¿Qué es jQuery?

Es una biblioteca de JavaScript que simplifica:

Selección y manipulación de HTML
Manejo de eventos y animaciones
Compatibilidad entre navegadores

Instalación


<head>
  <!-- jQuery primero -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  
  <!-- Semantic UI -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
</head>

Dato clave: Sin jQuery, los componentes de Semantic no funcionarían correctamente.

Ejemplos prácticos

Botones


<div class="ui three buttons">
  <button class="ui red button">Cancelar</button>
  <button class="ui green button">Aceptar</button>
  <button class="ui blue button">Ayuda</button>
</div>

Permite cambiar fácilmente el color y agrupar varios botones con solo añadir clases (red, green, blue, three buttons).

Tarjeta (Card)


<div class="ui card">
  <div class="image">
    <img src="imagen.png">
  </div>
  <div class="content">
    <div class="header">Simón</div>
    <div class="meta">Estudiante</div>
    <div class="description">
      Aprende Semantic UI con su grupo.
    </div>
  </div>
</div>

Proporciona una estructura visual lista para mostrar perfiles, productos o información organizada.

Ejemplo: Dropdown con selección automática


// JS con jQuery y Semantic UI
$('select.dropdown')
  .dropdown('set selected', ['meteor', 'ember']);

Explicación:

$('select.dropdown') → $ es jQuery. 'select.dropdown' busca un <select> con clase dropdown.
.dropdown(...) → Llama a la función dropdown() de Semantic UI para controlar el menú.
'set selected', ['meteor', 'ember'] → Selecciona automáticamente los valores "meteor" y "ember".

HTML asociado:


<select name="skills" multiple="" class="ui fluid dropdown">
  <option value="">Skills</option>
  <option value="angular">Angular</option>
  <option value="css">CSS</option>
  <option value="ember">Ember</option>
  <option value="html">HTML</option>
  <option value="javascript">Javascript</option>
  <option value="meteor">Meteor</option>
  <option value="node">NodeJS</option>
</select>

multiple="" → permite selección múltiple
"ui fluid dropdown" → estilo de Semantic UI
<option value="meteor"> → cada opción tiene un valor usado en JS

Types of Components

Globals

Son estilos que se aplican en todo el sitio. Incluyen reinicios de CSS, tipografía, enlaces y tamaños predeterminados. También contienen variables globales de tematización que otros componentes pueden heredar y modificar.

Elements

Son elementos de la interfaz con una única función. Pueden existir solos o en grupo, compartiendo cualidades. Ejemplo: un grupo de botones con la clase ui red buttons y sus hijos ui button.

Collections

Son grupos heterogéneos de componentes que suelen aparecer juntos en un contexto específico. Pueden extender otros elementos (como form que usa dropdown o input) y también incluir su propio contenido.

Views

Son convenciones para presentar cierto tipo de contenido de forma consistente en un sitio web. Ejemplos: comentarios, feeds de actividad o tarjetas.

Modules

Son componentes que definen tanto su apariencia como su comportamiento. Ejemplos: acordeones, menús desplegables (dropdowns), y ventanas emergentes (popups).