Como agrega Funciones existente de PHP o Filtros de manera simple dentro de Twig, en una sola linea de codigo

Como agregar Funciones o Filtros de manera simple a Twig sin tenes que andar creando class que extiende de la interfaz Twig_Extension

class Project_Twig_Extension extends Twig_Extension {...}

Este es un código simple y limpio, se ve como podemos agrega un función de PHP como base64_encode() y base64_decode() que no esta en Twig.

40 Recursos para combinar con nuestro desarrollo web basado en Bootstrap

Diseño y tematización.

URL:  http://bootswatch.com/

Uno de los principales critisms cuando se utiliza un marco con botones prediseñados y widgets - es que el producto final puede empezar a buscar cansinas. Bootswatch es un mercado libre tema que tiene por objeto evitar que, con un número de implementaciones de rutina de carga a medida disponibles para descargar de forma gratuita. Su todavía el producto Bootstrap núcleo - sólo con una piel diferente aplicado. Para los diseñadores que necesitan inspiración sobre qué nivel de personalización está disponible, Bootswatch es un buen lugar para comenzar.

URL:  https://wrapbootstrap.com/

Siguiendo en la misma línea - WrapBootstrap es un mercado temático comercial, en la que podrás comprar y vender su tema Bootstrap. Es un gran ejemplo de las crecientes comunidades de nicho en la web alrededor del producto, y ofrece la posibilidad de ver cómo muchas otras personas también han adquirido el mismo tema.

URL: http://bootswatchr.com/

¿Te apetece un enfoque más DIY para requisitos particulares? Bootswatchr proporciona una interfaz visual para que usted pueda utilizar para personalizar los temas de rutina de carga desde cero. Piense en ello como un tema-rodillo (ala jQuery UI ) - que le permite ver de forma interactiva los elementos que se están personalizados en frente de tus ojos. Tres práctico.

URL:  http://stylebootstrap.info/

También ofrece un conjunto de herramientas de personalización, con la ventaja de que las URL individuales creados se pueden compartir con los demás, mostrando su tema.

URL:  http://jetstrap.com/

JetStrap ofrece una manera fácil extremadamente limpia para construir interfaces de bootstrap, y generar el código de trabajo Bootstrap por el otro lado. Está en algún lugar entre una maqueta y una herramienta de creación de la interfaz, que lleva el manual de codificación de distancia, y hace que sea muy fácil de arrastrar y soltar los componentes Bootstrap en su página y generar una interfaz de trabajo de HTML. Si se encuentra en las primeras etapas de desarrollo de productos, y estamos convencidos de que Manos a la Obra es el marco perfecto para usted en el futuro, entonces te encantará la rapidez JetStrap lo ponga en movimiento.

URL:  http://paintstrap.com/

Ofertas PaintStrap y el enfoque alternativo a Bootstrap tematización. Si usted es un ávidoColourLovers  o Adobe Kuler  usuario, entonces usted simplemente puede introducir el tema directamente en PaintStrap, y Wacks un tema Bootstrap con esos colores bellamente escogidos. Una manera muy simple, pero muy eficaz para hacer que el sitio se vea la parte.

URL:  http://jumpstartui.com/

A menudo el caso con los marcos temáticos es que se centran en lo que se necesita desde la perspectiva del diseño FrontEnd. Jump Start han tomado el tema de Manos a la Obra, y lo aplicó a las interfaces de administración, que ofrece implementaciones de primera calidad Bootstrap diseñadas para hacer que sus sistemas backend realmente brillan.

URL: http://www.boottheme.com/

BootTheme es otra herramienta de generación de Tema, sin embargo Boottheme ofrece un enfoque vista previa instantánea, lo que le permite ver los efectos de los cambios en tiempo real. También puede ver cómo los cambios se realizan directamente en varios dispositivos de una manera sensible, lo que lo hace útil en la toma de decisión inicial de diseño.

URL:  http://ajkochanowicz.github.com/Kickstrap/

Kickstrap es un proyecto impulsado por la comunidad añadiendo mejoras a la interfaz Bootstrap marco de interfaz de usuario. Manos a la Obra ha sido adoptado con los brazos abiertos por la mayoría de los desarrolladores de la web. Si bien todas las funciones, algunos pensaron que podrían hacer mejor, y mientras sus sugerencias y peticiones no podría haber llegado a la central de distribución Bootstrap, se han encontrado un hogar en Kickstrap.

Fuentes y tipografía

Con las fuentes haciendo una diferencia fundamental con la aplicación BootStrap estándar, no hay excusa para no personalizar. Este gran artículo te llevará a través de los pasos para lograr que, con una biblioteca de iconos personalizados. En este caso particular, se ha utilizado la popular FamFam conjunto de iconos, pero usted sería factible usar otra cosa.

URL:  http://fortawesome.github.com/Font-Awesome/

Fuente impresionante es un proyecto diseñado icono para agregar un cierto nivel de diferenciación de Manos a la Obra. Con la integración en un sinch Manos a la Obra, Font Impresionante también proporciona una hoja de estilo CSS personalizado para su proyecto, así que es una combinación de ambos códigos, y el icono snazziness.

 URL:  http://pfefferle.github.com/openwebicons/

Al igual que sus iconos más, así mínimos? Iconos OpenWeb comenzó a usar fuente impresionante de inspiración, pero se transformó en una colección de iconos de otros fantásticos, especialmente brillantes en escala de grises para más temas.

URL: http://fontello.com/

Esta herramienta le permite combinar WebFonts icónicos para su propio proyecto. Con fontello puede acceder a grandes conjuntos de iconos de calidad profesional de código abierto para su uso dentro de bootstrap.

Fragmentos de código.

URL:  http://bootsnipp.com/

BootSnippr proporciona gratuitamente fragmentos de HTML para su uso con Bootstrap. Con todo, desde formularios de registro de perfiles de usuario, que, literalmente, puede copiar y pegar juntos un prototipo de trabajo con el mínimo de código, lo que le permite seguir adelante con las cosas del lado del servidor.

URL: http://www.joostrap.com/

Los fans de Joomla estarán encantados de encontrar que los temas de arranque, componentes y fragmentos de código para Joomla están disponibles en JooStrap. A debe marcar para los desarrolladores de Joomla.

URL:  https://github.com/320press/wordpress-bootstrap

BootStrap WordPress es - sí que has adivinado, un tema de WordPress BootStrap listo.

Plantillas de diseño

Si quieres ir a por todas y personalizar todo alrededor de arranque, entonces puede ser digno de conseguir su diseñador eche un vistazo a algunas de ellas. Con Adobe plantillas PSD, PNG escalabilidad con fuegos artificiales a la asistencia wireframing, estos enlaces deben ayudar con el aspecto más granular de personalización Bootstrap.

URL:  http://www.extendingfireworks.com/?p=133

Este fantástico Adobe Fireworks ofrece un archivo de base de kit de herramientas de interfaz de usuario de Twitter Bootstrap con la interfaz de usuario completa recreado como imágenes vectoriales en Adobe Fireworks.

URL:  http://gui.repixdesign.com/

Los fans de Photoshop, no se preocupe - hay un montón de PSD que hay ahí fuera para la personalización de Manos a la Obra. Este uno de RepixDesign, es especialmente bien juntos y ser Vector base hace que sea fácilmente escalable.

URL:  http://viget.com/inspire/an-omnigraffle-stencil-for-twitter-bootstrap-2

OmniGraffle si usted no está familiarizado, es una maqueta brillante y una herramienta de wireframes. Esta plantilla proporciona ahora mucha necesidad UI Bootstrap y elementos de navegación a sus plantillas.

URL:  http://www.arvendo-media.com/projects # c-twitter-bootstrap-diseño-plantilla

Si usted es más de un niño ilustrador, entonces esto EPS debe proporcionar un buen comienzo para la creación de diseños listos Bootstrap.

Componentes de interfaz de usuario

URL: http://exacttarget.github.com/fuelux/

Combustible UX agrega algunos componentes adicionales ordenadas Javascript para Manos a la Obra, incluyendo un ComboBox, DataGrid, Fortín, Buscar y Spinner. Definitivamente vale la pena una visita incluso para un nivel adicional de uñas.

Botones

URL :  http://charliepark.org/bootstrap_buttons/

Proporciona 'Customiser' un botón similar al que se encuentra en algunas de las themers Bootstrap mencionadas antes

URL:  https://github.com/nostalgiaz/bootstrap-toggle-buttons

Bootstrap Toggle Buttons, por más sexy iPhone interruptores esq.

Editores WYSIWYG para Bootstrap

URL:  http://wrapbootstrap.com/preview/WB0DFT966 

BootStrap vivo Editor

URL:  https://github.com/samwillis/pagedown-bootstrap

Tenedor PageDown desarrollado para ajustarse a los principios de Manos a la Obra.

URL:  http://vitalets.github.com/bootstrap-editable/

Si en la edición de la página es más su cosa, "Manos a la Obra Editable" es un componente fantástico para el CMS.

Notificaciones / Popups

URL: http://nijikokun.github.com/bootstrap-notify/

Aunque Bootstrap tiene su propio motor de notificación, el código para la creación de ellos no es tan simple como añadir una clase CSS. Esto es lo que notify BootStrap trae a la fiesta.

URL: http://bootboxjs.com/

Bootbox.js es una pequeña biblioteca JavaScript que le permite crear cuadros de diálogo utilizando verbos modales programáticas de Twitter Bootstrap, sin tener que preocuparse por la creación, gestión o eliminación de cualquiera de los necesarios elementos DOM o JS controladores de eventos

URL:  https://github.com/Gild/bootstrap-tour

Pensando en dar recorridos de productos dentro de la aplicación para los nuevos usuarios? Tour de Manos a la Obra es una herramienta fácil de configurar tu Web asistente que guía y orienta a su usuario en torno a su interfaz, enseñándoles las partes Tricker de su interfaz.

URL:  http://jbutz.github.com/bootstrap-lightbox/

Casi todas las aplicaciones requieren una aplicación lightbox de algún tipo. Ya se trate de un cuadro de diálogo modal para iniciar sesión sin salir de la misma página, o para la exhibición de imágenes de gran tamaño.

Selectbox / Combobox / Pickers

URL:  http://ivaynberg.github.com/select2/index.html

Select2 es un reemplazo basado en jQuery para cuadros de selección. Es compatible con la búsqueda, los conjuntos de datos a distancia y el desplazamiento infinito de resultados. Ver y sentir de Select2 se basa en la excelente  Elegido  biblioteca.

URL:  https://github.com/dangrossman/bootstrap-daterangepicker

Probablemente el Selector de fecha más cool gama encontrarás en la web, y listo de nuevo su mejor Bootstrap.

URL:  http://jdewit.github.com/bootstrap-timepicker/

Si su solicitud tiene entrada sensible al tiempo, entonces TimePicker BootStrap es una mejora de la interfaz de usuario poco aseado que ayuda a asegurar lado más precisa cliente del usuario.

URL:  https://github.com/danielfarrell/bootstrap-combobox

Combobox Bootstrap mejora la combinación estándar, permitiendo que los usuarios escriban su entrada en el teclado, y selecciona automáticamente la entrada correspondiente. Sutil, pero eficaz.

URL:  http://www.eyecon.ro/colorpicker-and-datepicker-for-twitter-bootstrap.htm

A colourpicker y datepicker de arranque. El colourpicker es particularmente agradable.

Otros extras

URL:  http://bootstrap-arrows.iarfhlaith.com/

¿Necesitas flechas en su interfaz de usuario? Este plugin jQuery simple proporciona Manos a la Obra con una manera fácil de incluir flechas prediseñadas en cualquier ángulo dentro de sus diseños, todo a través del uso de determinadas clases CSS.

URL:  http://botmonster.com/jquery-bootpag/

BootPag es un plugin jQuery paginación dinámico para bootstrap twitter.

URL:  http://blueimp.github.com/Bootstrap-Image-Gallery/

Galería Bootstrap La imagen es una extensión para el cuadro de diálogo modal del conjunto de herramientas Bootstrap de Twitter, para facilitar la navegación entre un conjunto de imágenes de la galería. Cuenta con el ratón y el teclado de navegación, efectos de transición, modo de pantalla completa y la funcionalidad de presentación de diapositivas.

URL:  http://aozora.github.com/bootmetro/

Inspirado por la última encarnación de Windows Metro apps, Bootmetro ofrece la apariencia de ontop Metro de la oferta Bootstrap núcleo. A pesar de que está claro que hay algunos problemas pendientes de ser resueltos (de una sensible POV) sigue siendo un recurso valioso para aquellos que buscan algo diferente estilo sabio.

URL:  http://bootstrap-forms.heroku.com/

Arrastrar y soltar constructor de formulario para arranque, que genera el código HTML que hay que traer a la vida. Handy.

URL:  https://github.com/davidber/twitter-bootstrap-sample-page-layouts 

Algunos diseños de página adicionales no incluidos en el marco de arranque. Las muestras se pueden ver rápidamente aquí. 

Themes, Templates basado en Booststrap

WrapBootstrap es un sitio dedicado a crear templates o temas web sobre el Framework Booststrap de Twitter; para nuestros administrador web, sitio web frontend, wordpress, etc.. Con un coto bajo, el cual nos permite ganar tiempo en nuestros desarrollos.

Link: http://wrapbootstrap.com/

Template UI Freebie: En formato Photoshop PSD gratis para descargar

Template en formato PSD para nuestros panel de control, con un diseño sobrio y atractivo, listo para descarga y comenzar a implementar.

PREVIEWDOWNLOAD PSD

Template para paginacion - Clean Pagination Styles – Pack1

Clean Pagination Styles – Pack1

Clean Pagination Styles – Pack1

Features
1. Easy change colors
2. .psd files are well organized
3. 6 different styles of pagination
4. Only free/system fonts

Graphics Files Included: Layered PSD

Font used : Arial & Comic Sans MS

The zip file contains :
> 1 .PSD file ; fully layered & editable.
> 1 High-resolution JPG Preview file

JournalCrunch : Otro template o Theme free para WordPress

JournalCrunch es un tema para WordPress 3.0 gratuito, este themes es ideal para Noticias o Portafolio. Fue diseñado por Site5 y lanzado en el blog de Smashing Magazine de forma libre para el uso privado y comercial.

Características

• Soporte para Widgets en la barra lateral y Footer.
• Página de inicio personalizada (destacados y Slide).
• Soporte de gestión de Menú en WordPress 3.0.
• Widget de últimos tweets.
• Formulario de contacto en Ajax con Validación.
• jQuery Menú desplegable y PrettyPhoto.

Galería

ver demo – descargar – documentación

Rain.TPL Template Engines otra alternativa super rapída Vs Smarty Vs Twig

Rain.TPL es otro motor de template muy simple con funciones mínimas que lo hace muy rápido bajando la brecha entre PHP puro y un motor de plantillas como Smarty.net o Twig que esta el momento este ultimo era unos de los mas rápido y pequeños y llego de la mano de la gente que desarrolla Symfony.

RainTPL

RainTPL es un código abierto motor de plantillas PHP, que carga precompilada plantillas PHP:

• Fácil, 8 tags, 3 métodos, 1 sola clase en 1 solo archivo php
• Rápido, la carga de plantillas precompiladas
• Útiles, se divide la lógica de diseño
• WYSIWYG, el diseño de HTML con img / css con rutas relativas, la lluvia va a sustituir a la ruta correcta
• Dispone de Cache

Instalación

Downloadhow RainTPL copia, el rain.tpl.class.php archivo en su proyecto de incluir el directorio inc /, cree un directorio de plantillas tpl /, y un directorio tmp cache /.

Incluir y configurar

include "inc/rain.tpl.class.php"; //include Rain TPL
raintpl::$tpl_dir = "tpl/"; // template directory
raintpl::$cache_dir = "tmp/"; // cache directory

Tags

Aquí las etiquetas que necesita

• {$variable_name}
• {#constant#}
• {if="condition"}
• {loop="array"}
• {include="template"}
• {function="myFunc"}
• {noparse}
• {ignore}

{$Variable_name}

Las variables son los contenidos dinámicos de las plantillas, se pueden asignar a assign () método. Las variables son case_sensitive.

My age is {$age}  // 30

Usted puede hacer operaciones simples tales como - * /% con los números, cadenas y otras variables, y también utilizan = para asignar un valor a una variable

{$year=30}
My age is {$age+$year}  // 60

Puede utilizar las funciones con variables

My name is {$name|substr:0,3}  // Rai

Usar {$ GLOBALS} para acceder a todas las variables globales como variable _SESSION, _GET, _POST, _SERVER.

{#constant#}

Puede constantes con la siguiente sintaxis: {

{if="condition"}{/if}

Es el equivalente de php. Puede utilizar variables y php en el estado.

{if condition="$age < 20"}
    less than 20 years
{elseif condition="$age < 30"}
     less than 30 years
{else}
     30 or more
{/if}

{loop="array"}{/loop}

Esta etiqueta le permiten bucle una matriz, que es útil para imprimir una lista de artículos, noticias.

{loop name="user"}
 {$value.user_id} - {$value.name} - {$value.phone}
{/loop}

Betweein{loop} y {/loop} se pueden usar variables especiales:

• {$key}, key of the array element.
• {$value}, value of the array.
• 0, loop counter, it starts from 0. If you want starts from 1: {$counter+1}. If you do {$counter%2+1} each cycle will return 1 and 2.

{include="template"}

Use esta etiqueta para incluir plantillas externas. Útil para incluir encabezado y pie de si son los mismos en todas las páginas de su sitio web.

{include="layout/header"}

También puede utilizar el uso de caché estática con etiqueta incluyen. Compruebe la documentation.

{function="myFunc"}

Llamar a funciones php e imprimir el resultado.

{function="pagination($selected_page)"}

{ignore}{/ignore}

Todos entre {ignore} y {/ignore} se elimina en el archivo compilado. Use ignorar para comentar sus plantillas.

Hey, {ignore} {$name}, what's up {/ignore} dude?

{noparse}{/noparse}

Todo el código entre {noparse} {/noparse} no se va a analizar

Hey {noparse}how are you {$name}{/noparse}?

Output:

Hey how are you {$name}?

WYSIWYG - reemplazar Ruta

Esta característica interesante permite a los diseñadores para crear plantillas en HTML regular con imágenes y estilos con rutas relativas, RainTPL reemplaza automáticamente estos caminos con las rutas de servidor correcto.

Las rutas absolutas y caminos que termina con

<link href="style.css" type="text/css" rel="stylesheet">
<img src="img/logo.gif">

Output html:

<link href="tpl/style.css" type="text/css" rel="stylesheet">
<img src="tpl/img/logo.gif">

Nota: Si usted cambia raintpl:: $ base_url, RainTPL reemplazará a la ruta con raintpl:: $ base_url.

Asignar y dibujar

Esto es lo que has de escribir en la secuencia de comandos para asignar variables y extraer la plantilla.

$tpl = new raintpl(); //include Rain TPL
$tpl->assign( "age", "30" ); // assign variable
$tpl->assign( array( "age" => "30", "name" => "Rain" ) ); // associative array
$tpl->assign( "user", $user ); // assign an array
$tpl->draw( "mytemplate" ); // draw the template

Disponible también es un método de caché que puede mejorar drásticamente la velocidad de carga de su página.Compruebe la documentation.

Speed Test

¿Cuál es el motor de plantillas más rápido PHP? En esta página probado pocos motores de plantilla, por el tiempo de prueba y la memoria. La prueba se ejecuta en el template compilado, mediante pruebas de la variable de asignación y el lazo. La memoria caché está desactivada.

Link al test
Link a sitio oficial de RainTPL