Semantic UI

Semantic is a UI component framework based around useful principles from natural language. Semantic allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Semantic is responsively designed allowing your website to scale on multiple devices. - http://semantic-ui.com

Uso

Semantic requiere del uso de jQuery.

Accede al directorio (crealo de ser necesario) $HOME/www y crea el directorio semantic01:

 alumno@servidor:~ $ cd $HOME/www
 alumno@servidor:~/www $ mkdir semantic01
 alumno@servidor:~/www $ cd semantic01

Crea los directorios js y css y en este último al archivo vácio css/main.css:

 alumno@servidor:~/www/semantic01 $ mkdir js css
 alumno@servidor:~/www/semantic01 $ touch css/main.css

Accede a https://github.com/Semantic-Org/Semantic-UI-CSS/releases, descarga el archivo en formato zip ofrecido y descomprimelo:

 alumno@servidor:~/www/semantic01 $ unzip $HOME/Downloads/Semantic-UI-2.2.10.zip

En este caso se ha descargado a Semantic en su versión 2.2.10 (Semantic-UI-2.2.10.zip) en el directorio $HOME/Downloads.

Semantic ofrece de igual forma una distribución de CSS que consiste en unicamente los archivos de CSS sin el comportamiento en los elementos de HTML: https://github.com/Semantic-Org/Semantic-UI-CSS/releases (lightweight CSS only version of Semantic UI).

El archivo zip ofrecido por Semantic cuenta con varios recursos para su uso: archivos de CSS, JavaScript, Web Fonts, etc. Lo anterior conlleva a que ya cuentan con una estructura sus directorio/archivos y será necesario restructurarlos:

 alumno@servidor:~/www/semantic01 $ pwd && tree -L 2
 /home/alumno/www/semantic01
 .
 ├── Semantic-UI-2.2.10
 │   ├── CONTRIBUTING.md
 │   ├── LICENSE.md
 │   ├── README.md
 │   ├── RELEASE-NOTES.md
 │   ├── bower.json
 │   ├── composer.json
 │   ├── dist
 │   ├── examples
 │   ├── gulpfile.js
 │   ├── karma.conf.js
 │   ├── logo.png
 │   ├── package.json
 │   ├── semantic.json.example
 │   ├── src
 │   ├── tasks
 │   └── test
 └── css
     └── main.css

 7 directories, 12 files

Restructura los archivos ofrecidos por Semantic:

 alumno@servidor:~/www/semantic01 $ mv Semantic-UI-2.2.10/dist css/semantic

Corrige los permisos de los archivos/directorios:

 alumno@servidor:~/www/semantic01 $ find . -type d -exec chmod 755 {} \;
 alumno@servidor:~/www/semantic01 $ find . -type f -exec chmod 644 {} \;

Integra a jQuery al proyecto accediendo a https://code.jquery.com y en la sección jQuery 2.x bajo la sección jQuery Core obten el enlace hacía el archivo con nombre jquery-*.min.js (minified) y descarga dicho archivo:
```
 alumno@servidor:~/www/semantic01 $ wget https://code.jquery.com/jquery-2.2.4.min.js -O js/jquery.min.js
```
En este caso se ha descargado el archivo jquery-2.2.4.min.js de jQuery en su versión 2.2.4.

Crea el archivo index.html con el siguiente contenido:

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>semantic01</title>
   <link rel="stylesheet" href="css/semantic/semantic.min.css">
   <link rel="stylesheet" href="css/main.css">
 </head>
 <body>
   <!-- CONTENIDO -->
   <!-- /CONTENIDO -->
   <script src="js/jquery.min.js"></script>
   <script src="css/semantic/semantic.min.js"></script>
 </body>
 </html>

Notas:

El contenido de tu documento HTML, y que será visualizado por el usuario, quedará dentro de los comentarios CONTENIDO.
Si requieres modificar el aspecto visual o estilo de algún elemento HTML lo podrías llevar a cabo en el archivo css/main.css. Recuerda que tendrás que hacer uso de selectores de CSS.
El directorio Semantic-UI-2.2.10 puede ser borrado.

Al terminar en el directorio $HOME/www/semantic01 encontrarás la siguiente estructura:

alumno@servidor:~/www/semantic01 $ pwd && tree
/home/alumno/www/semantic01
.
├── css
│   ├── main.css
│   └── semantic
│       ├── components
│       ├── semantic.css
│       ├── semantic.js
│       ├── semantic.min.css
│       ├── semantic.min.js
│       └── themes
├── index.html
└── js
    └── jquery.min.js

5 directories, 7 files