Octagon Escuelaweb, el framework CSS

Framework de estilos creados para la plataforma de EscuelaWeb, un framework css como Twitter bootstrap o Zurb foundation que no busca competir con ninguno de ellos.



Build with HTML5

Octogon es desarrollando utilizando HTML5, lo que permite utilizar las nuevas etiquetas semanticas y ofrece compatibilidad con todos los browser (hasta en IE6, aunque eso no es un browser respetable).



Powered by CSS3

Creado bajo los ultimos estandares CSS3, lo que permite al framework experimentar las nuevas features de CSS, por lo tanto no intentes que los estilos como bordes redondiados, sombras, transiciones, etc. funcionen en IE6

p

Proyecto Open Source

Es un proyecto abierto a la comunidad, por lo tanto cualquier nueva linea de codigo sera bien recibida. Espero que la comunidad de desarrolladores pueda a hacer mejor este proyecto dia a dia.

Repositorio Github p

Caracteristicas de Octagon framework

Module Title Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. A voluptas suscipit eos ex iusto ducimus odio quam? Veniam, magni, voluptate, ab, eligendi quo laboriosam rerum in porro et beatae a.

Module Title Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt, quas, ad, ratione, aut et eum dolores assumenda numquam fugit ab repellendus officiis rem cumque aliquid architecto voluptates minus molestias ipsum!

Module Title Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, earum, eligendi veritatis consequuntur saepe a deleniti quae rem esse voluptate facere provident cum assumenda natus qui ipsa iusto aliquid doloremque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Nivel Basico

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, delectus, rerum, fugiat, exercitationem consequuntur pariatur numquam repellat veritatis quos omnis obcaecati facilis quisquam illo quis voluptas expedita voluptatibus animi tempora?

Nivel Basico

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, delectus, rerum, fugiat, exercitationem consequuntur pariatur numquam repellat veritatis quos omnis obcaecati facilis quisquam illo quis voluptas expedita voluptatibus animi tempora?

Nivel Basico

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, delectus, rerum, fugiat, exercitationem consequuntur pariatur numquam repellat veritatis quos omnis obcaecati facilis quisquam illo quis voluptas expedita voluptatibus animi tempora?

Nivel Basico

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, delectus, rerum, fugiat, exercitationem consequuntur pariatur numquam repellat veritatis quos omnis obcaecati facilis quisquam illo quis voluptas expedita voluptatibus animi tempora?

Nivel Basico

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, delectus, rerum, fugiat, exercitationem consequuntur pariatur numquam repellat veritatis quos omnis obcaecati facilis quisquam illo quis voluptas expedita voluptatibus animi tempora?

Nivel Basico

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, delectus, rerum, fugiat, exercitationem consequuntur pariatur numquam repellat veritatis quos omnis obcaecati facilis quisquam illo quis voluptas expedita voluptatibus animi tempora?

Sistema de Columnas

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, eum maiores nesciunt facilis assumenda? Consequatur, officia, placeat, magnam, eos minima tenetur animi adipisci excepturi quia ea odio necessitatibus dolorem aliquam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, beatae, vero, id, labore atque saepe suscipit eius quisquam provident necessitatibus deserunt sapiente quis iure enim minima ipsa corporis modi dolores.

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid1

.grid2

.grid2

.grid2

.grid2

.grid2

.grid2

4 Columnas (.grid4)

4 Columnas (.grid4)

4 Columnas (.grid4)

3 Columnas (.grid3)

3 Columnas (.grid3)

3 Columnas (.grid3)

3 Columnas (.grid3)

4 Columnas (.grid4)

8 Columnas (.grid8)

9 Columnas (.grid9)

3 Columnas (.grid3)

12 Columnas (.grid12)

.grid6.offset3

.grid3

¿Como usar el sistema de columnas?

El sistema de columna de octogon esta basado en 12 columnas y un ancho de total de 940px en estado normal, es decir, sin aplicar estilos Responsive.

Las clases para el manejo del grid son:

.container: que es la clase que centra el contenido y le coloca el ancho a 940px
.row: se encarga de iniciar la el sistema anidado de columnas
.grid[x]: define el ancho en columnas de un div, section, article, etc.
.offset[x]: coloca un margen a la izquierda de cierta cantidad de columnas.

Ejemplos de uso del sistema de columnas

Elemento que ocupe las 12 columnas

<div class="container">
    <div class="row">
      <div class="grid12">Lorem ipsum dolor sit amet</div>
    </div>
</div>

Dividir el sistema en 3 sectores usando 3 div de 4 columnas cada uno

<div class="container">
    <div class="row">
      <div class="grid4">Lorem ipsum dolor sit amet</div>
      <div class="grid4">Lorem ipsum dolor sit amet</div>
      <div class="grid4">Lorem ipsum dolor sit amet</div>
    </div>
</div>

Anidar columnas dentro de columnas

<div class="container">
  <div class="row">
    <div class="grid9">
      <div class="row">
        <div class="grid3">Lorem ipsum dolor</div>
        <div class="grid3">Lorem ipsum dolor</div>
        <div class="grid3">Lorem ipsum dolor</div>
      </div>
    </div>
    <div class="grid3">
        Lorem ipsum dolor sit ametone corrupti.
    </div>
  </div>
</div>

Columnas con offset

<div class="container">
  <div class="row">
    <div class="grid6 offset3"></div>
    <div class="grid3"></div>
  </div>
</div>

Botones

Tipos de Botones

Boton normal

Boton de accept

Boton de actions

Boton de error

Boton de warning

Variaciones de Tamano

Boton pequeno

Boton normal

Boton medium

Boton Grande

Boton Grande

Boton full width

Botones con Iconos

Boton con Icono a la derecha [

Boton con icono a la izquierda a

icono a la izquierda a

icono a la izquierda a

Botones de Redes Sociales

¿Como usar los botones?

Octagon cuenta con un sistema ed botones donde tenemos variaciones de colores, tamaños y inclusion de iconos dentro del boton.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, ex amet minus ullam asperiores! Dolorem minima quam officiis mollitia rerum! Repellendus, odio illo vitae explicabo illum ipsam itaque modi ea!

Ejemplos de uso de botones

A continuacion se observan ejemplos de uso de las clases que poseen los botones, dichas clases se pueden combinar entre ellas para generar muchisimas variaciones de estilo de botones.

Variaciones de color

<!-- Boton por defecto -->
<a href="#" class="btn">Boton normal</a>

<!-- Boton en color verde o boton de aceptar -->
<a href="#" class="btn btn-accept">Boton de accept</a>

<!-- Boton en color purpura o boton de accion -->
<a href="#" class="btn btn-action">Boton de actions</a>

<!-- Boton en color rojo o boton de error -->
<a href="#" class="btn btn-error">Boton de error</a>

<!-- Boton en color naranja o boton de warning -->
<a href="#" class="btn btn-warning">Boton de warning</a>

Variaciones de tamaño

<!-- Boton tamaño regular -->
<a href="#" class="btn">Boton normal</a>

<!-- Boton pequeño -->
<a href="#" class="btn btn-p">Boton pequeño</a>

<!-- Boton mediano -->
<a href="#" class="btn btn-m">Boton mediano</a>

<!-- Boton grande -->
<a href="#" class="btn btn-">Boton grande</a>

<!-- Boton gigante -->
<a href="#" class="btn btn-h">Boton gigante</a>

Boton con iconos embed

<!-- Boton con icono del lado derecho -->
<a href="#" class="btn btn-wicon">
  Boton con Icono a la derecha
  <!-- icono que integra el framework -->
  <span class="btn-wicon-icon icons">&#x5b;</span>
</a>

<!-- Boton con icono del lado izquierdo -->
<a href="#" class="btn btn-wicon btn-wicon-left">
  icono a la izquierda
  <span class="btn-wicon-icon icons">&#x61;</span>
</a>

Estilo para iconos

Juegos de iconos completo, todos los iconos son utilizados con la propiedad @font-face por lo que son una fuente vectorizada

&

2

3

?

D

I

L

M

R

S

T

V

X

X

s

#

$

0

1

6

-

<

=

>

B

E

O

P

U

@

5

!

'

(

)

*

,

"

+

/

9

:

;

A

C

F

G

%

J

K

N

W

Y

[

\

]

a

b

c

f

g

h

i

k

1

o

`

d

e

j

p

r

z

.

4

7

8

Q

Z

^

_

n

m











































































Variaciones de tamano de los iconos









_

b





Lorem ipsum dolor sit amet, consectetur adipisicing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, delectus commodi aperiam laborum nisi obcaecati nesciunt quibusdam vero quam perferendis. Velit, maxime voluptates fuga nemo sunt architecto commodi numquam optio.

Ejemplos de uso de los Iconos

Implementacion de los iconos

La implementación puede ser con usada con div, span o cualquier otra etiqueta

<!-- clase icono + clase tamaño del icono -->
<div class="icons icons-huge">&</div>

Uso de los iconos en sus distintos tamaños

<!-- clase icono pequeño -->
<div class="icons icons-small">&#xe007;</div>

<!-- clase icono mediano -->
<div class="icons icons-medium">&#xe007;</div>

<!-- clase icono grande -->
<div class="icons icons-big">&#xe007;</div>

<!-- clase icono enorme -->
<div class="icons icons-huge">&#xe007;</div>

Uso de iconos dentro de sombra circular

<!-- clase "icons-rounded" para encerrarlos en un circulo -->

<div class="icons icons-small icons-rounded">&#xe007;</div>

<div class="icons icons-medium icons-rounded">&#xe007;</div>

<div class="icons icons-big icons-rounded">&#xe007;</div>

<div class="icons icons-huge icons-rounded">&#xe007;</div>

Detalle sobre los caracteres para cada icono ]

Estilos generales de parrafos y titulos

Lista desordenada

Elemento de la lista
Elemento de la lista
Elemento de la lista
Elemento de la lista
Elemento de la lista

Lista ordenada

Elemento de la lista
Elemento de la lista
Elemento de la lista
Elemento de la lista
Elemento de la lista

Lista sin bullet

Elemento de la lista
Elemento de la lista
Elemento de la lista
Elemento de la lista
Elemento de la lista

Textos

Enlaces
Negritas
Italic
Subrayado

Titulos

Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
Headline 6

Alineaciones

A la derecha (.right)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, assumenda, totam, tempora natus incidunt rerum quia eius vero ex nobis quis mollitia quo sunt accusamus odit laboriosam officia sit possimus!

A la izquierda (.left)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, assumenda, totam, tempora natus incidunt rerum quia eius vero ex nobis quis mollitia quo sunt accusamus odit laboriosam officia sit possimus!

Centrado (.center)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, assumenda, totam, tempora natus incidunt rerum quia eius vero ex nobis quis mollitia quo sunt accusamus odit laboriosam officia sit possimus!

Justificado (.justify)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, assumenda, totam, tempora natus incidunt rerum quia eius vero ex nobis quis mollitia quo sunt accusamus odit laboriosam officia sit possimus!

Titulo con cinta a la izquierda (.span6)

Titulo con cinta a la derecha (.span6)

Titulo con cinta a la derecha (.span9)

Titulo con cinta a la izquierda (.span9)

Titulo con cinta a la derecha con icono

Titulo con cinta a la derecha con icono

Titulo con cinta a la derecha con icono

L Titulo con cinta a la derecha con icono

L Titulo con cinta a la izquierda con icono

L Cinta .grid9 con icono

L Cinta a la izquierda con icono

L Cinta a la derecha con icono

Ejemplos de uso estilos para los textos

Uso de listas

<!-- Listas desordenadas -->
<ul>
  <li>elemento de lista desordenada</li>
  <li>elemento de lista desordenada</li>
  <li>elemento de lista desordenada</li>
</ul>

<!-- Listas ordenadas -->
<ol>
  <li>elemento de lista ordenada</li>
  <li>elemento de lista ordenada</li>
  <li>elemento de lista ordenada</li>
</ol>

<!-- Listas sin estilo -->
<ul class="unstyled">
  <li>elemento de lista sin bullet</li>
  <li>elemento de lista sin bullet</li>
  <li>elemento de lista sin bullet</li>
</ul>

Titulos, enlaces, negritas, italic, subrayado

<h1>Titulo headline 1</h1>
<h2>Titulo headline 2</h2>
<h3>Titulo headline 3</h3>
<h4>Titulo headline 4</h4>
<h5>Titulo headline 5</h5>
<h6>Titulo headline 6</h6>
<a href="#">Enlace inline</a>
<b>Negrita</b>
<i>Italic</i>
<u>Subrayado</u>

Alineaciones

Existe una clase para alinear los textos a cada una de las alineaciones basicas.

Izquierda (.right)
Derecha (.left)
Centrado (.center)
Justificado (.justify)

Ejemplo de uso:

<!-- Parrafo con el texto alineado a la derecha -->
<p class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptatem, harum, dolorem ipsa perferendis delectus ea sapiente quis reiciendis expedita quidem deleniti vitae dolorum facilis unde quod necessitatibus dolore distinctio.</p>

<!-- Parrafo con el texto alineado a la izquierda -->
<p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptatem, harum, dolorem ipsa perferendis delectus ea sapiente quis reiciendis expedita quidem deleniti vitae dolorum facilis unde quod necessitatibus dolore distinctio.</p>

<!-- Parrafo con el texto centrado -->
<p class="center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptatem, harum, dolorem ipsa perferendis delectus ea sapiente quis reiciendis expedita quidem deleniti vitae dolorum facilis unde quod necessitatibus dolore distinctio.</p>

<!-- Parrafo con el texto justificado -->
<p class="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptatem, harum, dolorem ipsa perferendis delectus ea sapiente quis reiciendis expedita quidem deleniti vitae dolorum facilis unde quod necessitatibus dolore distinctio.</p>

Titulos con cinta

<!-- Titulo con cinta grande -->
<h1 class="ribbon-title">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit
</h1>

<!-- Cinta pequeña -->
<h4 class="ribbon-title">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit
</h4>

<!-- Cinta color morado -->
<h1 class="ribbon-title morado">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit
</h1>

<!-- Cinta fondo claro -->
<h1 class="ribbon-title light">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit
</h1>

<!-- Cinta solo hacia la derecha -->
<h1 class="ribbon-title ribbon-right">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit
</h1>

<!-- Cinta solo hacia la izquierda -->
<h1 class="ribbon-title ribbon-left">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit
</h1>

Estilos para Formularios