NukaCode - Front End - Bootstrap Documentation

Transcription

1 Nuka - Front End - Bootstrap Documentation Release stygian July 04, 2015

2

3 Contents 1 Badges Links Installation New CSS Classes Laravel Helpers Themes i

4 ii

5 Nuka - Front End - Bootstrap Documentation, Release 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

6 Nuka - Front End - Bootstrap Documentation, Release Contents

7 CHAPTER 1 Badges 1.1 Links Github Packagist 1.2 Installation 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 a more 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

8 Nuka - Front End - Bootstrap Documentation, Release 'Nuka\Bootstrap\BootstrapServiceProvider', 'Nuka\Bootstrap\Html\HtmlServiceProvider', Themes Bower Hint: You only need to have one of these. bower install -S nukacode-bootstrap-base#~0 bower 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 '../../../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 some of the main variables of the theme. You can of course overload any other standard bootstrap variables as you like in this file as lighten(@gray, lighten(@gray, lighten(@gray, lighten(@gray, darken(@brand-primary, darken(@brand-primary, darken(@brand-info, darken(@brand-success, darken(@brand-warning, 4 Chapter 1. Badges

9 Nuka - Front End - Bootstrap Documentation, Release New CSS Classes New CSS Classes Backgrounds A number of background colors have been supplied. These can be added to any element as they just set the background color to the themes predefined colors. Class bg-primary bg-info bg-warning bg-danger bg-success bg-inverse bg-purple bg-radiation Brand color brand-primary brand-info brand-warning brand-danger brand-success brand-black brand-purple brand-radiation Badges There are a few new badge classes. These work the same as standard classes and use the corresponding brand color for their background color. badge-primary badge-info badge-success badge-warning badge-danger <span class="badge badge-primary">10</span> 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

10 Nuka - Front End - Bootstrap Documentation, Release <button class="btn btn-inverse">go Back</button> Panels We have worked to add quite a few useful additions to panels. These are all completely optional of course, but we feel they 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 use them to detail errors and messages from form submission if you chose as well. <div class="panel panel-default"> <div class="panel-alert panel-alert-info">info Alert 6 Chapter 1. Badges

11 Nuka - Front End - Bootstrap Documentation, Release 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 a classless version. You can have as many or as few as you want. Just keep adding them to suit your needs New CSS Classes 7

12 Nuka - Front End - Bootstrap Documentation, Release <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 class="panel-body">panel Body 8 Chapter 1. Badges

13 Nuka - Front End - Bootstrap Documentation, Release Class Image info danger primary warning success <none> 1.3. New CSS Classes 9

14 Nuka - Front End - Bootstrap Documentation, Release 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 on a page. Well Title <div class="well"> <div class="well-title info">well title Default Well 10 Chapter 1. Badges

15 Nuka - Front End - Bootstrap Documentation, Release Class Image <none> info success warning danger Well Title Buttons Well title buttons work like panel buttons. Unlike panel buttons, there can only be one at a time. <div class="well"> <div class="well-title"> <div class="well-btn well-btn-right"><i class="fa fa-plus"></i> Well title Default Well 1.3. New CSS Classes 11

16 Nuka - Front End - Bootstrap Documentation, Release Class Image <none> info success warning danger 12 Chapter 1. Badges

17 Nuka - Front End - Bootstrap Documentation, Release Laravel Helpers HTML Image Links linkimage $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 $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 $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 $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 Laravel Helpers 13

18 Nuka - Front End - Bootstrap Documentation, Release {{ HTML::linkRouteIcon('user.profile', ['id' => 1], 'fa fa-user', 'Admin's Profile') }} Typography span $value Yes The text inside the tag. $attributes No [] Any attributes to add to the tag. {{ HTML::span('this is a span') }} bold $value Yes The text inside the tag. $attributes No [] Any attributes to add to the tag. {{ HTML::bold('This is bold text') }} italic $value Yes The text inside the tag. $attributes No [] Any attributes to add to the tag. {{ HTML::italic('This is italicized text') }} 14 Chapter 1. Badges

19 Nuka - Front End - Bootstrap Documentation, Release delete $value Yes The text inside the tag. $attributes No [] Any attributes to add to the tag. {{ HTML::delete('This is deleted text') }} strike $value Yes The text inside the tag. $attributes No [] Any attributes to add to the tag. {{ HTML::strike('This text is striked out') }} insert $value Yes The text inside the tag. $attributes No [] Any attributes to add to the tag. {{ HTML::insert('This is inserted text') }} underline $value Yes The text inside the tag. $attributes No [] Any attributes to add to the tag Laravel Helpers 15

20 Nuka - Front End - Bootstrap Documentation, Release {{ HTML::underline('This is underlined text') }} mark $value Yes The text inside the tag. $attributes No [] Any attributes to add to the tag. This is {{ HTML::mark('marked') }} text small $value Yes The text inside the tag. $attributes No [] Any attributes to add to the tag. This is {{ HTML::small('small') }} text lead $value Yes The text inside the tag. {{ HTML::lead('This text should stand out.') }} 16 Chapter 1. Badges

21 Nuka - Front End - Bootstrap Documentation, Release quote $value Yes The text inside the tag. $source No null The source of the quote. {{ HTML::quote('This is quoted text.', 'By Stygian') }} description To use bootstrap description lists pass an array to this method. The key will be the bolded text, the value will be the description text. $list Yes The text inside the tag. $attributes No [] Any attributes to add to the tag. $list = ['Description lists' => 'A description list is perfect for defining terms.', 'Euismod' => 'so {{ HTML::description($list) }} {{ HTML::description($list, ['class' => 'dl-horizontal']) }} 1.4. Laravel Helpers 17

22 Nuka - Front End - Bootstrap Documentation, Release code $value Yes The text inside the tag. $attributes No [] Any attributes to add to the tag. This is {{ HTML::code('code') }} text kbd KBD can accept either a single key or an array of keys. If it gets an array, it will automatically place the + between them. $keys Yes The keyboard key(s) that will be used. {{ HTML::kbd('ctrl') }} {{ HTML::kbd(['ctrl', 'alt', 'del']) }} Iframes iframe This will create a generic iframe with whatever you pass to it. $url Yes The url the iframe will point to. $attributes No [] Any attributes to add to the tag. {{ HTML::iframe(' }} 18 Chapter 1. Badges

23 Nuka - Front End - Bootstrap Documentation, Release embed This will create a bootstrap iframe that uses responsive sizing. $url Yes The url the iframe will point to. $aspect No 16by9 Valid aspects are 16by9 and 4by3. {{ HTML::embed(' '4by3') }} 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 the inputs 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 at getbootstrap.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() }} 1.4. Laravel Helpers 19

24 Nuka - Front End - Bootstrap Documentation, Release 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 you need. {{ 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 elements get 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. $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. {{ Form::label(' ', ' Address') }} {{ Form::text(' ') }} HTML <div class="form-group "> <label for=" "> Address</label> <input class="form-control" name=" " type="text" id=" "> 20 Chapter 1. Badges

25 Nuka - Front End - Bootstrap Documentation, Release help The help method will add help text to a given element. $text Yes The text that will be displayed. $options No [] Any attributes to add to the element. {{ Form::text(' ', $user-> , [], ' Address') }} {{ Form::help('Your address should be account@provider') }} HTML <div class="form-group "> <label for=" "> Address</label> <input class="form-control" name=" " type="text" value="example@google.com" id=" "> <span class="help-block">your address should be account@provider</span> icon This is used in conjunction with the feedback form group. It is what sets the icon inside of the input element. $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. {{ Form::feedbackSuccessGroupOpen() }} {{ Form::text(' ', $user-> , [], ' Address') }} {{ Form::icon('fa fa-user') }} {{ Form::groupClose() }} 1.4. Laravel Helpers 21

26 Nuka - Front End - Bootstrap Documentation, Release HTML <div class="form-group has-success has-feedback"> <label for=" "> Address</label> <input class="form-control has-success has-feedback" name=" " type="text" value="example@goog <span class="form-control-feedback fa fa-user" style="top: 30px;" aria-hidden="true"></span> date This will create a standard HTML 5 date input. $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. {{ Form::date('publish_on', ' ', [], 'When should this be published?') }} HTML <div class="form-group "> <label for="publish_on">when should this be published?</label> <input class="form-control" name="publish_on" type="date" value=" "> staticinput This will create a text entry instead of an input element. See getbootstrap.com for more details. $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. 22 Chapter 1. Badges

27 Nuka - Front End - Bootstrap Documentation, Release {{ Form::staticInput('Account is locked', [], 'Status') }} HTML <div class="form-group "> <label for="">status</label> <p class="form-control-static">account is locked</p> checkbox and radio These are unique but similar to each other, so they will be tackled together. $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. {{ 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') }} {{ Form::groupClose() }} HTML <div class="form-group "> <div class="checkbox-inline"> <label><input checked="checked" name="active" type="checkbox" value="1"> Active</ <div class="checkbox-inline"> <label><input checked="checked" name="hidden" type="checkbox" value="1"> Hidden</ <div class="form-group "> <div class="checkbox"> <label><input checked="checked" name="active" type="checkbox" value="1"> Active</ <div class="checkbox"> 1.4. Laravel Helpers 23

28 Nuka - Front End - Bootstrap Documentation, Release <label><input checked="checked" name="hidden" type="checkbox" value="1"> Hidden</ Everything else Each other input is the same as illuminate/html defaults with the addition of a final parameter: $label. You can add this to quickly create a label for any input you are using. {{ Form::text(name, value, options, 'Some Label') }} HTML <div class="form-group has-success has-feedback"> <label for=" "> Address</label> <input class="form-control has-success has-feedback" name=" " type="text" value="example@goog <span class="form-control-feedback fa fa-user" style="top: 30px;" aria-hidden="true"></span> Helpers open The open method is pretty much the same as Laravel default but with an optional second parameter. This allows you to set the form type when opening the form. It also makes sure your form has the correct bootstrap class based on the type you chose. $options No [] Any options to pass to the form. $type No horizontal The form type (basic, inline or horizontal). 24 Chapter 1. Badges

29 Nuka - Front End - Bootstrap Documentation, Release {{ 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, the second size will be 12 minus the first (to allow for a full bootstrap column set). $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 the form. $type No The type to set the form to. (basic, inline or horizontal). {{ Form::setType('basic')->open() }} To-Do input groups 1.5 Themes Themes Repos Base Theme Dark Theme Examples You can find an example of each theme at their respective github.io page Themes 25

30 Nuka - Front End - Bootstrap Documentation, Release Chapter 1. Badges

31 Nuka - Front End - Bootstrap Documentation, Release Dark 1.5. Themes 27

32 Nuka - Front End - Bootstrap Documentation, Release Chapter 1. Badges

33 Nuka - Front End - Bootstrap Documentation, Release Base 1.5. Themes 29