Merge pull request #118 from clemir/bulma-docs

Add Bulma to the documentation and fix templates

Author: clemir

LEEME.md

@@ -254,7 +254,7 @@ Es decir:
 
 ## Themes
 
-Este paquete fue creado pensando que hay muchos frameworks de CSS por ahí, y aunque sólo Twitter Bootstrap es incluído por defecto, planeamos agregar más paquetes en el futuro (y también invitamos a colaborar).
+Este paquete fue creado pensando que hay muchos frameworks de CSS por ahí, y aunque Bootstrap (versión 3 y 4) y Bulma (version 0.7.2) son incluídos por defecto, planeamos agregar más paquetes en el futuro (y también invitamos a colaborar).
 
 Puedes crear tus propios temas o modificar el existente con facilidad:
 

README.md

@@ -261,7 +261,7 @@ i.e.:
 
 ## Themes
 
-There are a lot of CSS frameworks out there, this package was created with that in mind, and even though only Twitter Bootstrap is included out of the box, we plan to add more packages in the future (we also invite you to collaborate).
+There are a lot of CSS frameworks out there, this package was created with that in mind, and even though *Bootstrap* (version 3 and 4) and *Bulma* are included out of the box, we plan to add more packages in the future (we also invite you to collaborate).
 
 But you can also create your own themes with ease, or modify the existing one:
 

docs/es/themes.md

@@ -1,6 +1,22 @@
 # Temas
 
-Este paquete fue creado teniendo en cuenta que hay un montón de frameworks de CSS por ahí (de todo tipo) y aunque *Twitter Bootstrap* sea incluido por defecto, se planea agregar más temas en el futuro (te invitamos a colaborar). También puedes crear temas propios, publicarlos y personalizarlos, si es necesario.
+Este paquete fue creado teniendo en cuenta que hay un montón de frameworks de CSS por ahí (de todo tipo) y aunque *Bootstrap* (versión 3 y 4) y *Bulma* sean incluidos por defecto, se planea agregar más temas en el futuro (te invitamos a colaborar).
+
+## Cambiar el tema
+
+El tema Bootstrap 4 theme está definido por defecto, pero tu puedes ir a `config/html.php` y cambiar el valor del tema:
+```php
+//config/html.php
+
+return [
+    'theme' => 'bulma',
+];
+```
+>Nota: `bootstrap` es para Bootstrap versión 3, `bootstrap4` es para Bootstrap versión 4 and `bulma` es para Bulma CSS versión 0.7.2.
+
+## Personalización
+
+ También puedes crear temas propios, publicarlos y personalizarlos, si es necesario.
 
 Para cambiar o personalizar un theme, simplemente ejecuta: 
 
@@ -22,7 +38,7 @@ Después crea una carpeta en `resources/views/themes/` llamada 'custom-theme', p
 
 Si es necesario puedes cambiar todas las plantillas dentro de ese directorio o agregar nuevas. 
 
-## Personalizar plantillas individuales 
+### Personalizar plantillas individuales 
 
 Quizás no necesites crear o usar un nuevo tema y simplemente necesitas sustituir una plantilla determinada; esto se puede hacer también, debido a que la mayoría de los métodos lo soporta, por ejemplo:
 
@@ -38,10 +54,14 @@ Quizás no necesites crear o usar un nuevo tema y simplemente necesitas sustitui
 {!! Field::email('email', ['template' => 'custom-template'])
 ```
 
-## Personalizar plantillas por tipo de campo (fieldBuilder)
+### Personalizar plantillas por tipo de campo (fieldBuilder)
 
 ¿Estás usando un framework de CSS que requiere un markup diferente para un tipo de campo determinado? No te preocupes, solo lee la sección de "Personalizar por tipo" de la [página field builder](field-builder.md)
 
 ## Pull requests
 
-Si creas un tema para un framework de CSS popular, puedes colaborar haciendo fork de este repositorio y crear un pull request, recuerda guardar las plantillas en la carpeta `themes/`. Gracias.
+Si creas un tema para un framework de CSS popular, puedes colaborar haciendo fork de este repositorio y crear un pull request, recuerda guardar las plantillas en la carpeta `themes/` y actualizar el archivo `config.php`.
+
+Puedes probar tu tema usando este repositorio: [https://github.com/StydeNet/html-integration-tests](https://github.com/StydeNet/html-integration-tests).
+
+Gracias.

docs/themes.md

@@ -1,8 +1,22 @@
 # Themes
 
-There are a lot of CSS (and all kind of) frameworks out there, this package was created with that in mind, and even though *Bootstrap* is included _out of the box_, we plan to add more themes in the future (we also invite you to collaborate). You can also create your own themes, publish and customize them if you need to.
+There are a lot of CSS (and all kind of) frameworks out there, this package was created with that in mind, and even though *Bootstrap* (version 3 and 4) and *Bulma* are included _out of the box_, we plan to add more themes in the future (we also invite you to collaborate). 
 
-To change or customize a theme, simply run: 
+## Change the theme
+
+The Bootstrap 4 theme is set by default, but you can go to `config/html.php` and change the theme value:
+```php
+//config/html.php
+
+return [
+    'theme' => 'bulma',
+];
+```
+>Note: `bootstrap` is for Bootstrap version 3, `bootstrap4` is for Bootstrap version 4 and `bulma` is for Bulma CSS version 0.7.2.
+
+## Customize
+
+You can also create your own themes, publish and customize them if you need to. To change or customize a theme, simply run: 
 
 ```bash
 php artisan vendor:publish
@@ -22,7 +36,7 @@ Then create a folder in `resources/views/themes/` called 'custom-theme', to save
 
 Then you can change all the templates within that directory or add new ones if you need to.
 
-## Customize individual templates
+### Customize individual templates
 
 Maybe you don't need to create or use a new theme and you just simply need to override a particular template, you can do this too, since most methods support that, for example:
 
@@ -38,10 +52,14 @@ Maybe you don't need to create or use a new theme and you just simply need to ov
 {!! Field::email('email', ['template' => 'custom-template']) !!}
 ```
 
-## Customize templates by field type (field builder)
+### Customize templates by field type (field builder)
 
 Are you using a CSS framework that requires a different markup for a particular field type? Don't worry, just read the "Customize by type" section of the [ field builder page](field-builder.md)
 
 ## Pull requests
 
-If you create a theme for a popular CSS framework, you can collaborate by forking this repository, and creating a pull request, remember to store the templates in the `themes/` folder. Thank you.
+If you create a theme for a popular CSS framework, you can collaborate by forking this repository, and creating a pull request, remember to store the templates in the `themes/` folder and update the `config.php` file. 
+
+You can prove your theme using this repository [https://github.com/StydeNet/html-integration-tests](https://github.com/StydeNet/html-integration-tests)
+
+Thank you.

themes/bulma/alert.blade.php

@@ -1,7 +1,7 @@
 @foreach ($messages as $msg)
     <article class="message is-{{ $msg['type'] }}">
         <div class="message-header">
-            <p>  <strong>Alerta!!</strong></p>
+            <p><strong>Alert!</strong></p>
             <button type="button" onclick="this.parentElement.parentElement.style.display = 'none';" class="delete" aria-label="delete"></button>
         </div>
         <div class="message-body">

themes/bulma/fields/checkbox.blade.php

@@ -1,20 +1,16 @@
 <div id="field_{{ $id }}" class="field">
-    <label class="label" for="{{ $id }}"{!! Html::classes(['text-danger' => $hasErrors]) !!}>
-        {{ $label }}
+    <div class="control">
+        {!! $input !!}
+        <label class="checkbox" for="{{ $id }}"{!! Html::classes(['text-danger' => $hasErrors]) !!}>
+            {{ $label }}
         @if ($required)
             <span class="tag is-success">Required</span>
         @endif
-    </label>
-    <div class="field-body">
-        <div class="field">
-            <div class="control">
-                {!! $input !!}
-            </div>
-            <p class="help is-danger">
-                @foreach ($errors as $error)
-                    {{ $error }}
-                @endforeach
-            </p>
-        </div>
+</label>
+        <p class="help is-danger">
+        @foreach ($errors as $error)
+            {{ $error }}
+        @endforeach
+    </p>
     </div>
-</div>
+</div>