Archivo de la etiqueta: Foundation

Visual Studio 2013 apuesta por Bootstrap

Diseño y Programación Web, Herramientas de desarrollo, Programación, Tecnologías y conocimiento, , , ,

Del mismo modo que Microsoft se decantó por dar soporte a jquery dentro de sus plantillas de proyectos de Visual Studio 2010 ahora podemos comprobar que con Visual Studio 2013 existen plantillas para desarrollar con bootstrap.

Creo que se han dado cuenta de que no podían prescindir de un framework que hiciera más fácil el diseño web adaptable (responsive design) indispensable hoy en día como todos bien sabemos.

Siempre podemos utilizar Foundation (el gran competidor de bootstrap) aunque yo no lo recomendaría por dos razones. La primera razón es que considero que hay que confiar en las decisiones de Microsoft, ellos son los que mejor conocen su framework y seguro que lo han valorado en su día. La segunda razón, sufrida en mis propias carnes, es que he comprobado que algunos controles asp no se llevan muy bien con Foundation.

Instalar Foundation para ASP.NET MVC

Diseño y Programación Web, Herramientas de desarrollo, Programación, , , ,

En esta entrada se explicará cómo instalar Foundation para ASP.NET MVC.

Se hará directamente sobre Visual Studio instalando el paquete NuGet. Para ello dentro del Visual Studio iremos a Tools->Library Package Manager->Package Manager Console. De esta forma se abrirá la consola de administración de librerías.

Package Manager Console

En la consola escribiremos: PM> Install-Package Foundation5.MVC y directamente se descargará de internet el paquete de foundation.

Centrar menu en Foundation

Diseño y Programación Web, ,

Este post indicará la manera de como centrar menu en Foundation.
Por defecto Foundation no permite centrar un menú en su framework.
Tenemos el siguiente marcado html:

<nav id="mi_menu" data-topbar="">
<ul>
<ul>
<ul><!-- Title Area --></ul>
</ul>
</ul>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<ul>
	<li><a><span>Menu</span></a></li>
</ul>
<section>
<ul>
	<li><a href="#">HOME</a></li>
	<li><a href="#" target="_blank">BLOG</a></li>
	<li><a href="#" target="_blank">SHOP</a></li>
</ul>
</section></nav>

Para centrar el menú podemos utilizar el siguiente código en css:


@media only screen and (min-width: 40.063em) {
#mi_menu {
width: 100%;
height: 3em;
margin: 0;
text-align: center;

}

#mi_menu .nav-bar {
height: auto;
margin: 0;
padding: 0;
display: inline-block;
}
}

Cambiar color del menu hamburguesa (hamburger menu) en Foundation

Diseño y Programación Web,

Si utilizas el framework Foundation y te preguntas como cambiar el color del menú que aparece para dispositivos móviles o de baja resolución de pantalla (hamburger menu).

Menu-Hamburguesa-Foundation

Mediante css, en el archivo foundation.css.Encuentra el menu-icon span donde cambiaras la propiedad box-shadow estableciendo los colores que deseas para tu menú hamburguesa.

Mediante este cambio podrás cambiar color del menu hamburguesa tan especial que aparece en los dispositivos móviles.