NukaCode - Front End - Bootstrap Documentation

NukaCode - Front End - BootstrapDocumentation

Release 1.0.0

stygian

July 04, 2015

Contents

1 Badges 31.1 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.2 Installation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31.3 New CSS Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.4 Laravel Helpers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131.5 Themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

i

NukaCode - Front End - Bootstrap Documentation, Release 1.0.0

This package is designed to make using Twitter Bootstrap much easier in Laravel. It requires Core, but otherwise,works out of the box.

Contents 1


2 Contents

CHAPTER 1

Badges

1.1 Links

• Github

• Packagist

1.2 Installation

1.2.1 Installation

Laravel-Base

If you are adding bootstrap to Laravel-Base, you will need to make some minor changes.

• Remove resources/views/layouts/default.blade.php (Optional but this package contains amore in depth layout)

• Remove Illuminate\Html\HtmlServiceProvider from config/app.php.

Composer

composer require nukacode/front-end-bootstrap:~1.0

Routes

If you would like to use the included routes, add the following to your app/Http/routes.php file.

include_once(base_path() .'/vendor/nukacode/front-end-bootstrap/src/routes.php');

Service Providers

Add the following service providers to configs/app.php. .. code:

3

https://github.com/NukaCode/Front-End-Bootstrap

https://packagist.org/packages/nukacode/bootstrap


'NukaCode\Bootstrap\BootstrapServiceProvider','NukaCode\Bootstrap\Html\HtmlServiceProvider',

Themes

Bower

Hint: You only need to have one of these.

bower install -S nukacode-bootstrap-base#~0bower install -S nukacode-bootstrap-dark#~0

Resources

app.less At the top of resources/assets/less/app.less add the line below that matches your theme.Make sure this is first line of that file.

@import '../../../vendor/bower_components/nukacode-bootstrap-base/less/base';@import '../../../vendor/bower_components/nukacode-bootstrap-dark/less/dark';

colors.less Create a file in resources/assets/less/ called colors.less. This file is used to quickly set someof the main variables of the theme. You can of course overload any other standard bootstrap variables as you like inthis file as well.

@bg: #343838;@gray: #343838;@brand-primary: #6fba3b;@brand-info: #3b81ba;@brand-success: #62c462;@brand-warning: #c09853;@brand-danger: #ba403b;@menuColor: #4e8329;

@gray-darker: lighten(@gray, 13.5%);@gray-dark: lighten(@gray, 20%);@gray-light: lighten(@gray, 60%);@gray-lighter: lighten(@gray, 93.5%);@darkPrimary: darken(@brand-primary, 15%);@darkerPrimary: darken(@brand-primary, 30%);@darkInfo: darken(@brand-info, 15%);@darkSuccess: darken(@brand-success, 15%);@darkWarning: darken(@brand-warning, 15%);@darkError: darken(@brand-danger, 15%);@body-bg: @bg;

4 Chapter 1. Badges


1.3 New CSS Classes

1.3.1 New CSS Classes

Backgrounds

A number of background colors have been supplied. These can be added to any element as they just set the backgroundcolor to the themes predefined colors.

Class Brand colorbg-primary brand-primarybg-info brand-infobg-warning brand-warningbg-danger brand-dangerbg-success brand-successbg-inverse brand-blackbg-purple brand-purplebg-radiation brand-radiation

Badges

There are a few new badge classes. These work the same as standard classes and use the corresponding brand colorfor their background color.

• badge-primary

• badge-info

• badge-success

• badge-warning

• badge-danger

Code

<span class="badge badge-primary">10</span>

Output

Buttons

This is meant to be an inverted button. It varies by theme, but will always match the default theme settings.

• btn-inverse

1.3. New CSS Classes 5


Code

<button class="btn btn-inverse">Go Back</button>

Output

Panels

We have worked to add quite a few useful additions to panels. These are all completely optional of course, but we feelthey add a lot of functionality people would find useful.

Panel Alerts

Panel alerts are used when you need to alert the user to some details about what the panel contains. You could also usethem to detail errors and messages from form submission if you chose as well.

Code<div class="panel panel-default">

<div class="panel-alert panel-alert-info">Info Alert</div></div>

6 Chapter 1. Badges


Output

Class Image

panel-alert-info

panel-alert-warning

panel-alert-danger

panel-alert-success

Panel Buttons

Panel buttons are used to add quick and easy buttons to the panel heading. These come in all the common classes or aclassless version.

You can have as many or as few as you want. Just keep adding them to suit your needs.

Code



<div class="panel panel-default"><div class="panel-heading">

Panel Heading<div class="panel-btn primary">

<a><i class="fa fa-plus"></i></a></div>

</div><div class="panel-body">Panel Body</div>

</div>

8 Chapter 1. Badges


Output

Class Image

pri-mary

info

warn-ing

danger

suc-cess

<none>



Text

The only addition to text is the inclusion of text-primary as a class. This will set your text color to the brand-primary.

<p class="text-primary">Something</p>

Tables

The only addition to tables is the inclusion of a primary table row class to use your primary brand color.

<tr class="primary"><td>Something</td></tr>

Wells

Wells have been upgraded slightly to have a bit more styling. The inclusion of the well-title helps distinguish wells ona page.

Well Title

Code<div class="well">

<div class="well-title info">Well title</div>Default Well

</div>

10 Chapter 1. Badges


Output

Class Image

<none>

info

suc-cess

warn-ing

danger

Well Title Buttons

Well title buttons work like panel buttons. Unlike panel buttons, there can only be one at a time.

Code<div class="well">

<div class="well-title"><div class="well-btn well-btn-right"><i class="fa fa-plus"></i></div>Well title

</div>Default Well

</div>



Output

Class Image

<none>

info

suc-cess

warn-ing

danger



1.4 Laravel Helpers

1.4.1 HTML

Image Links

linkImage

Parameters Required Default Notes$url Yes The url the image will link to.$imageSrc Yes The location of the image.$attributes No [] Any attributes to add to the anchor tag.$https No null Whether to use https.

{{ HTML::linkImage('/home', public_path('img/test.png')) }}

linkRouteImage

Parameters Required Default Notes$route Yes The route the image will link to.$parameters Yes Any parameters the route may need.$imageSrc Yes The location of the image.$attributes No [] Any attributes to add to the anchor tag.$https No null Whether to use https.

{{ HTML::linkRouteImage('user.profile', ['id' => 1], public_path('img/test.png')) }}

Icon Links

linkIcon

Parameters Required Default Notes$url Yes The url the image will link to.$iconClasses Yes The icon classes to use.$iconText No null Any text to display after the icon.$attributes No [] Any attributes to add to the anchor tag.$https No null Whether to use https.

{{ HTML::linkIcon('/home', 'fa fa-home', 'Go Home') }}

linkRouteIcon

Parameters Required Default Notes$route Yes The route the image will link to.$parameters Yes Any parameters the route may need.$iconClasses Yes The icon classes to use.$iconText No null Any text to display after the icon.$attributes No [] Any attributes to add to the anchor tag.$https No null Whether to use https.

1.4. Laravel Helpers 13


{{ HTML::linkRouteIcon('user.profile', ['id' => 1], 'fa fa-user', 'Admin's Profile') }}

Typography

span

Parameters Required Default Notes$value Yes The text inside the tag.$attributes No [] Any attributes to add to the tag.

Code{{ HTML::span('this is a span') }}

Output

bold


Code{{ HTML::bold('This is bold text') }}

Output

italic


Code{{ HTML::italic('This is italicized text') }}

Output



delete


Code{{ HTML::delete('This is deleted text') }}

Output

strike


Code{{ HTML::strike('This text is striked out') }}

Output

insert


Code{{ HTML::insert('This is inserted text') }}

Output

underline




Code{{ HTML::underline('This is underlined text') }}

Output

mark


CodeThis is {{ HTML::mark('marked') }} text

Output

small


CodeThis is {{ HTML::small('small') }} text

Output

lead

Parameters Required Default Notes$value Yes The text inside the tag.

Code{{ HTML::lead('This text should stand out.') }}

Output



quote

Parameters Required Default Notes$value Yes The text inside the tag.$source No null The source of the quote.

Code{{ HTML::quote('This is quoted text.', 'By Stygian') }}

Output

description

To use bootstrap description lists pass an array to this method. The key will be the bolded text, the value will be thedescription text.

Parameters Required Default Notes$list Yes The text inside the tag.$attributes No [] Any attributes to add to the tag.

Code$list = ['Description lists' => 'A description list is perfect for defining terms.', 'Euismod' => 'something'];

{{ HTML::description($list) }}{{ HTML::description($list, ['class' => 'dl-horizontal']) }}

Output



Code

code


CodeThis is {{ HTML::code('code') }} text

Output

kbd

KBD can accept either a single key or an array of keys. If it gets an array, it will automatically place the + betweenthem.

Parameters Required Default Notes$keys Yes The keyboard key(S) that will be used.

Code{{ HTML::kbd('ctrl') }}{{ HTML::kbd(['ctrl', 'alt', 'del']) }}

Output

Iframes

iframe

This will create a generic iframe with whatever you pass to it.

Parameters Required Default Notes$url Yes The url the iframe will point to.$attributes No [] Any attributes to add to the tag.

Code{{ HTML::iframe('http://google.com') }}



embed

This will create a bootstrap iframe that uses responsive sizing.

Parameters Required Default Notes$url Yes The url the iframe will point to.$aspect No 16by9 Valid aspects are 16by9 and 4by3.

Code{{ HTML::embed('http://google.com', '4by3') }}

1.4.2 Form

Sizes and Types

The bootstrap form builder has a few things that it considers globally important to a form.

Sizes can be looked at as the gutters everything will fall into. By default, we assume a label will be 2 columns and theinputs will be 10 columns. This can be changed using setSizes() at any time.

Note: Sizes only apply to horizontal type forms.

Type describes the bootstrap form type. A type can be basic, inline or horizontal. You can see details on the types atgetbootstrap.com.

Form Groups

To use bootstrap form groups is actually pretty easy.:

{{ Form::groupOpen() }}// Form elements

{{ Form::groupClose() }}

To make things easier, when calling groupOpen() you can pass up to 3 sizes and it will reset the sizes for this group.The form will switch back to the previous sizes once the form group is closed.

Form groups have a few optional addendums that you can use to better control the output.

Sizing

You can add lg or sm to change the input sizes of the form group elements.

{{ Form::lgGroupOpen() }}

Offset Inputs

For checkboxes, radios and submit buttons, you may not have any labels on the left (primarily on horizontal forms).For these situations, open an offset form group.

{{ Form::offsetGroupOpen() }}


http://getbootstrap.com/css/#forms


Validation States

Bootstrap also gives nice validation states to form groups. These are success, warning and error.

{{ Form::warningGroupOpen() }}

Feedback

Lastly, form inputs can have icons denoting feedback. These too require a special form group.

{{ Form::feedbackGroupOpen() }}

Putting it all together

The bst thing of all is that these groups are not exclusive. You can combine them as you wish to get any result youneed.

{{ Form::warningFeedbackGroupOpen() }}{{ Form::errorOffsetLgGroupOpen() }}

Inputs

Now that we can open form groups, let’s dig into inputs. These are the basis of all forms, so they deserve attention.

Each form element that is called automatically gets the class form-control added to it. Certain specific elementsget default classes added to them as well but will be covered in their own area below.

label

This element will have the sr-only class applied to it on inline forms and col-md-<label size>control-label for horizontal forms.

Note: Be careful with this. If you call this and also set the label parameter on your input, two labels will show up.

Parameters Required Default Notes$name Yes The name of the element this label is for.$value No null The text displayed for the label.$options No [] Any attributes to add to the element.

Code{{ Form::label('email', 'Email Address') }}{{ Form::text('email') }}

HTML<div class="form-group ">

<label for="email">Email Address</label><input class="form-control" name="email" type="text" id="email">

</div>



Output

help

The help method will add help text to a given element.

Parameters Required Default Notes$text Yes The text that will be displayed.$options No [] Any attributes to add to the element.

Code{{ Form::text('email', $user->email, [], 'Email Address') }}{{ Form::help('Your email address should be account@provider') }}


<label for="email">Email Address</label><input class="form-control" name="email" type="text" value="[email protected]" id="email"><span class="help-block">Your email address should be account@provider</span>

</div>

Output

icon

This is used in conjunction with the feedback form group. It is what sets the icon inside of the input element.

Parameters Required Default Notes$class Yes The class(es) of the icon to use.$options No [] Any attributes to add to the element.

Note: The form builder will take into account glyphicon and font-awesome classes for spacing.

Code{{ Form::feedbackSuccessGroupOpen() }}

{{ Form::text('email', $user->email, [], 'Email Address') }}{{ Form::icon('fa fa-user') }}




HTML<div class="form-group has-success has-feedback">

<label for="email">Email Address</label><input class="form-control has-success has-feedback" name="email" type="text" value="[email protected]" id="email"><span class="form-control-feedback fa fa-user" style="top: 30px;" aria-hidden="true"></span>

</div>

Output

date

This will create a standard HTML 5 date input.

Parameters Required Default Notes$name Yes The name of the element this label is for.$value No null The text displayed for the label.$options No [] Any attributes to add to the element.$label No null Is this is supplied, it creates a label with this text for you.

Code{{ Form::date('publish_on', '2015-05-21', [], 'When should this be published?') }}


<label for="publish_on">When should this be published?</label><input class="form-control" name="publish_on" type="date" value="2015-05-21">

</div>

Output

staticInput

This will create a text entry instead of an input element. See getbootstrap.com for more details.

Parameters Required Default Notes$name Yes The name of the element this label is for.$value No null The text displayed for the label.$options No [] Any attributes to add to the element.$label No null Is this is supplied, it creates a label with this text for you.


http://getbootstrap.com/css/#forms-controls-static


Code{{ Form::staticInput('Account is locked', [], 'Status') }}


<label for="">Status</label><p class="form-control-static">Account is locked</p>

</div>

Output

checkbox and radio

These are unique but similar to each other, so they will be tackled together.

Parameters Required Default Notes$name Yes The name of the element this label is for.$value No null The text displayed for the label.$checked No false Wether the element should be checked by default.$options No [] Any attributes to add to the element.$label No null Is this is supplied, it creates a label with this text for you.$inline No false This switched the elements to be inline instead of stacked.

Code{{ Form::offsetGroupOpen() }}

{{ Form::checkbox('active', 1, true, [], 'Active', true) }}{{ Form::checkbox('hidden', 1, true, [], 'Hidden', true) }}

{{ Form::groupClose() }}{{ Form::offsetGroupOpen() }}

{{ Form::checkbox('active', 1, true, [], 'Active') }}{{ Form::checkbox('hidden', 1, true, [], 'Hidden') }}



<div class="checkbox-inline"><label><input checked="checked" name="active" type="checkbox" value="1"> Active</label>

</div><div class="checkbox-inline">

<label><input checked="checked" name="hidden" type="checkbox" value="1"> Hidden</label></div>

</div><div class="form-group ">

<div class="checkbox"><label><input checked="checked" name="active" type="checkbox" value="1"> Active</label>

</div><div class="checkbox">



<label><input checked="checked" name="hidden" type="checkbox" value="1"> Hidden</label></div>

</div>

Output

Everything else

Each other input is the same as illuminate/html defaults with the addition of a final parameter: $label. You canadd this to quickly create a label for any input you are using.

Code{{ Form::text(name, value, options, 'Some Label') }}

HTML<div class="form-group has-success has-feedback">

<label for="email">Email Address</label><input class="form-control has-success has-feedback" name="email" type="text" value="[email protected]" id="email"><span class="form-control-feedback fa fa-user" style="top: 30px;" aria-hidden="true"></span>

</div>

Output

Helpers

open

The open method is pretty much the same as Laravel default but with an optional second parameter. This allows youto set the form type when opening the form. It also makes sure your form has the correct bootstrap class based on thetype you chose.

Parameters Required Default Notes$options No [] Any options to pass to the form.$type No horizontal The form type (basic, inline or horizontal).



{{ Form::open([], 'inline') }}

setSizes

This is used to set the sizes for the entire form. Use it before opening the form. If only the first parameter is sent, thesecond size will be 12 minus the first (to allow for a full bootstrap column set).

Parameters Required Default Notes$labelSize Yes The size for labels (left most column).$inputSize No 12 - ($labelSize) The size for the inputs (center or right column).$iconSize No 0 An optional third column for anything extra (right column).

{{ Form::setSizes(4, 6)->open() }}

setType

This is used to set the type manually (outside of the open() method). This too must be called before opening theform.

Parameters Required Default Notes$type No The type to set the form to. (basic, inline or horizontal).

{{ Form::setType('basic')->open() }}

To-Do

• input groups

1.5 Themes

1.5.1 Themes

Repos

• Base Theme

• Dark Theme

Examples

You can find an example of each theme at their respective github.io page.

1.5. Themes 25

https://github.com/stygiansabyss/NukaCode-Bootstrap-Base

https://github.com/stygiansabyss/NukaCode-Bootstrap-Admin


Dark

1.5. Themes 27

http://stygiansabyss.github.io/NukaCode-Bootstrap-Dark


Base

1.5. Themes 29

http://stygiansabyss.github.io/NukaCode-Bootstrap-Base

NukaCode - Front End - Bootstrap Documentation

Documents

Transcript of NukaCode - Front End - Bootstrap Documentation