From 67c013da614376652c37b803f4290c18b67df356 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Tue, 26 Jul 2016 12:15:18 +0300 Subject: [PATCH] Update .gitignore --- LICENSE | 21 -- README.md | 23 --- favicon.png | Bin 5201 -> 0 bytes index.html | 552 ---------------------------------------------------- 4 files changed, 596 deletions(-) delete mode 100644 LICENSE delete mode 100644 README.md delete mode 100644 favicon.png delete mode 100644 index.html diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 59644cd..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2016 Angelos Chalaris - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index 26f05aa..0000000 --- a/README.md +++ /dev/null @@ -1,23 +0,0 @@ -# Bootstrap-Extend - -A set of useful extensions for the very popular [Bootstrap](http://getbootstrap.com/) framework. - -## Live Demo and Documentation - -For information on the components, as well as a live demo of the components, check out the [Bootstrap-Extend page](https://chalarangelo.github.io/bootstrap-extend/). - -## Dependencies and Installation - -This framework depends heavily on jQuery (2.2.4 or newer) and Bootstrap 3 (currently supported 3.3.6 and 3.3.7). Include them in your `` before it. Use the following two lines to include **Bootstrap-Extend** in your page: - -`` - -`` - -## Contributing - -If you have an idea for a new component, you can submit it under [Requested Components](https://github.com/Chalarangelo/bootstrap-extend/issues/3). - -## License - -The framework is licensed under the MIT License. \ No newline at end of file diff --git a/favicon.png b/favicon.png deleted file mode 100644 index 136479d5507d7d8c1ca0eae498c5b922f7560d0d..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5201 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 i7cnCLBksiY7B06i@u&02Nai2nj{7MU0T diff --git a/index.html b/index.html deleted file mode 100644 index 1625a65..0000000 --- a/index.html +++ /dev/null @@ -1,552 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - Bootstrap-Extend - - -
-
-
- - - -
-

Bootstrap Extend Easy-to-use components for Bootstrap 3

-Watch -Star -Fork -Issue
-

A set of useful extensions for the very popular Bootstrap framework.

-
- -

Dependencies and usage

-

This framework depends heavily on Bootstrap 3 and jQuery. Include the dependencies (jQuery 2.2.4 or newer, Bootstrap 3 js and css files) in your <head> section and after them insert the following two lines to include Bootstrap-Extend:

-
- 
<script type="text/javascript" src="https://cdn.rawgit.com/Chalarangelo/bootstrap-extend/master/js/bootstrap-extend.min.js"><script/>
-<rel type=stylesheet" href="https://cdn.rawgit.com/Chalarangelo/bootstrap-extend/master/css/bootstrap-extend.min.css" />
-

Alternatively you can download the files on your computer from my Github page and include them using a local path.

- -

Components, CSS and Javascript

-

This framework is all about custom CSS styles for commonly used elements and responsive and lightweight components. Most of these components complement Bootstrap's aesthetic or aim to deal with its shortcomings in one way or another. More components will be added regularly. Bootstrap-Extend aims to eventually fill the gap left by Bootstrap in certain areas, without the need to include each component individually, but rather provide people with a consistent set of elements all in one place.
- If you want to get individual components instead of the whole thing, head over to my Github page, find the components you need and copy paste the corresponding SCSS and Javascript files. You will need to compile the SCSS files locally before you have a working CSS file that you can use.

- -

One extra button style Because there can never be enough

-

Use the .btn-notice class like any other button tag from Bootstrap. Inspired from the Bootstrap website's header colors.

-
-
-

Example

-
-
- -
-

Usage:

-
- 
<button class="btn btn-notice">Hello there!<button/>
-
-
- -

Password field with toggle

-

Extend the functionality of your <input type="password"> fields by adding a button that toggles password display on or off. Simply add the .pwd class to your field and the .pwd-toggle class to a <span><span/> element in the same .input-group and users can now toggle password viewing on or off. When the form is submitted, the field will revert to type="password" regardless of its current state for security reasons. Just be sure to use an <input type="submit"> element to submit your form.

-
-
-

Example

-
-
-

Password:

-
- - -
-
-
-

Usage:

-
- 
<div class="input-group">
-  <input type="password" class="form-control pwd"/>
-  <span class="text" class="form-control"></span>
-</div>
-
-

   Original idea and implementation by Shell Bryson.

-
- -

Toggle switches Rectangular, round, with text or without, all in pure CSS

-

Use the .switch class only on <input type="checkbox"> or <input type="radio"> elements. Don't forget to add a <label> after it and link it to the input's id. There are two types of toggle switches, round and rectangular. Both types have seven flavours, similar to the classic Bootstrap buttons:

-
    -
  • .switch-round-default and .switch-rect-default
    • -
  • .switch-round-primary and .switch-rect-primary
    • -
  • .switch-round-success and .switch-rect-success
    • -
  • .switch-round-info and .switch-rect-info
    • -
  • .switch-round-warning and .switch-rect-warning
    • -
  • .switch-round-danger and .switch-rect-danger
    • -
  • .switch-round-notice and .switch-rect-notice
    • -
-

You can also add optional text labels to your toggle switches. There are three options of toggle switch text labels:

-
    -
  • .switch-on-off (Displays "ON" and "OFF")
    • -
  • .switch-io (Displays the on and off symbols)
    • -
  • .switch-yes-no (Displays "YES" and "NO")
    • -
- -
-
-

Examples

-
-
-

Round toggle switches:

- Default - Primary - Success - Info: -
Radio button toggle switch group
- Warning - Danger - Notice -
-

Usage:

-
- 
Default <input id="cT1" class="switch switch-round-default" type="checkbox"> <label for="cT1"></label>
-Primary <input id="cT2" class="switch switch-round-primary" type="checkbox"> <label for="cT2"></label>
-Success <input id="cT3" class="switch switch-round-success" type="checkbox"> <label for="cT3"></label>
-Info <input id="cT4" class="switch switch-round-info"    type="checkbox"> <label for="cT4"></label>
-<br>Radio button toggle switch group<br>
-Warning <input id="cT5" class="switch switch-round-warning" type="radio" name="roundToggle"> <label for="cT5"></label>
-Danger <input id="cT6" class="switch switch-round-danger"  type="radio" name="roundToggle"> <label for="cT6"></label>
-Notice <input id="cT7" class="switch switch-round-notice"  type="radio" name="roundToggle"> <label for="cT7"></label>
-
-

Rectangular toggle switches:

- Default - Primary - Success - Info -
Radio button toggle switch group
- Warning - Danger - Notice -
-

Usage:

-
- 
Default <input id="rT1" class="switch switch-rect-default" type="checkbox"> <label for="rT1"></label>
-Primary <input id="rT2" class="switch switch-rect-primary" type="checkbox"> <label for="rT2"></label>
-Success <input id="rT3" class="switch switch-rect-success" type="checkbox"> <label for="rT3"></label>
-Info <input id="rT4" class="switch switch-rect-info"    type="checkbox"> <label for="rT4"></label>
-<br>Radio button toggle switch group<br>
-Warning <input id="rT5" class="switch switch-rect-warning" type="radio" name="rectToggle"> <label for="rT5"></label>
-Danger <input id="rT6" class="switch switch-rect-danger"  type="radio" name="rectToggle"> <label for="rT6"></label>
-Notice <input id="rT7" class="switch switch-rect-notice"  type="radio" name="rectToggle"> <label for="rT7"></label>
-
-

Optional text:

- Round toggle switches
- On/Off - I/O - Yes/No -
Rectangular toggle switches
- On/Off - I/O - Yes/No -

Usage:

-
- 
Round toggle switches<br>
-On/Off <input id="o1" class="switch switch-round-primary switch-on-off" type="checkbox"> <label for="o1"></label>
-I/O <input id="o2" class="switch switch-round-primary switch-io" type="checkbox"> <label for="o2"></label>
-Yes/No <input id="o3" class="switch switch-round-primary switch-yes-no" type="checkbox"> <label for="o3"></label>
-<br>Rectangular toggle switches<br>
-On/Off <input id="o4" class="switch switch-rect-primary switch-on-off" type="checkbox"> <label for="o4"></label>
-I/O <input id="o5" class="switch switch-rect-primary switch-io" type="checkbox"> <label for="o5"></label>
-Yes/No <input id="o6" class="switch switch-rect-primary switch-yes-no" type="checkbox"> <label for="o6"></label>
-
-

   Original idea and implementation by callmenick.com.

-
- - -

Use the .lightbox-toggle class on a link element surrounding an image element to create a lightbox that opens when you click on the image. Be sure to specify a unique id for the image element. The lightbox will automatically resize to properly fit your browser's size and change its size accordingly to the browser when the window is resized. You can use the alt attribute of the image to show a custom title in your lightbox, otherwise you can leave it blank to show the URL of the image.
Suggestion: Use this lightbox with Bootstrap's .thumbnail class and/or in combination with tooltips to show your users that the images can be viewed in a lightbox.

-
-
-

Examples

-
-
-
-
- - This image has an alt attribute specified for the title bar - -
-
- - - -
-
-

Usage:

-
- 
<a href="" class="thumbnail lightbox-toggle">
-  <img alt="This image has an alt attribute specified for the title bar" id="light-img1" src="http://dummyimage.com/hd1080" data-toggle="tooltip" data-placement="top" title="View image">
-</a>
-
-<a href="" class="thumbnail lightbox-toggle">
-  <img id="light-img2" src="http://dummyimage.com/vga" data-toggle="tooltip" data-placement="top" title="View image">
-</a>
-
-
- -

Numeric spinner

-

Make your numeric inputs prettier by using the .spinner class on an .input-group with a text input element and two buttons. Comes in two styles: arrows (.spinner-up-down class) and plus/minus (.spinner-plus-minus class).

-
-
-

Examples

-
-
-

Arrows:

- -

Plus/Minus:

- -

Usage:

-
- 
<div class="input-group spinner spinner-up-down">
-  <input type="text" class="form-control" value="25">
-  <div>
-    <button class="btn btn-default" type="button"></button>
-    <button class="btn btn-default" type="button"></button>
-  </div>
-</div>
-
-<div class="input-group spinner spinner-plus-minus">
-  <input type="text" class="form-control" value="40">
-  <div>
-    <button class="btn btn-default" type="button"></button>
-    <button class="btn btn-default" type="button"></button>
-  </div>
-</div>
-
-

   Original idea and implementation by Thomas Lebeau.

-
- -

Collapse toggle box

-

Bootstrap's Collapse is great. But if you are looking for a different style for your content toggle buttons, you can now use the .btn-toggle class in combintion with a <label> element to achieve that. All the functionality of the original Bootstrap component remains intact.

-
-
-

Example

-
-
- -
-
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. In efficitur euismod lobortis. Donec odio justo, eleifend a lacinia quis, tempor vel nisi. Phasellus fermentum iaculis interdum. Nullam nec congue nisl. Donec a nisi velit. Cras eu elit in quam semper auctor ut sed lorem. In ac eleifend ligula. Sed vulputate id tortor in fringilla. -
-

- -
-
- Etiam posuere luctus lorem, at tempus lectus varius vel. Nullam in elementum mauris. Aenean faucibus sagittis lacus, a viverra ante. Vestibulum a pharetra nibh. Nullam sit amet est a nisi tincidunt blandit in tristique dui. Integer sed viverra risus. Vivamus orci tortor, fermentum ac euismod eu, iaculis bibendum lectus. -
-

-

Usage:

-
- 
<!-- Link with href -->
-<a class="btn btn-primary btn-toggle" role="button" data-toggle="collapse" 
-   href="#collapseLinkExample" aria-expanded="false" aria-controls="collapseLinkExample">
-</a>
-<label>Link with href</label>
-<div class="collapse" id="collapseLinkExample">
- <div class="well">
-  ...
- </div>
-</div>
-
-<!-- Button with data-target -->
-<button class="btn btn-default btn-toggle" type="button" data-toggle="collapse" 
-   data-target="#collapseDataTargetExample" aria-expanded="false" aria-controls="collapseDataTargetExample">
-</button>
-<label>Button with data-target</label>
-<div class="collapse" id="collapseDataTargetExample">
- <div class="well">
-  ...
- </div>
-</div>
-
-
- -

Checkbox styles In 7 pure CSS flavours

-

Use the .chkbox class only on <input type="checkbox"> elements. Don't forget to add a <label> after it and link it to the checkbox's id. There are seven flavours of checkboxes, similar to the classic Bootstrap buttons:

-
    -
  • .chkbox-default
    • -
  • .chkbox-primary
    • -
  • .chkbox-success
    • -
  • .chkbox-info
    • -
  • .chkbox-warning
    • -
  • .chkbox-danger
    • -
  • .chkbox-notice
    • -
-

You can also use the .chkbox-lg, .chkbox-sm and .chkbox-xs classes to change the size of your checkboxes.

-
-
-

Examples

-
-
-

Checkbox variants:

- - - - - - - -
-

Usage:

-
- 
<input type="checkbox" class="chkbox chkbox-default" id="chk-default"><label for="chk-default">Default</label>
-<input type="checkbox" class="chkbox chkbox-primary" id="chk-primary"><label for="chk-primary">Primary</label>
-<input type="checkbox" class="chkbox chkbox-success" id="chk-success"><label for="chk-success">Success</label>
-<input type="checkbox" class="chkbox chkbox-info" id="chk-info"><label for="chk-info">Info</label>
-<input type="checkbox" class="chkbox chkbox-warning" id="chk-warning"><label for="chk-warning">Warning</label>
-<input type="checkbox" class="chkbox chkbox-danger" id="chk-danger"><label for="chk-danger">Danger</label>
-<input type="checkbox" class="chkbox chkbox-notice" id="chk-notice"><label for="chk-notice">Notice</label>

-

Checkbox sizes:

- - - - -

Usage:

-
- 
<input id="chL" class="chkbox chkbox-primary chkbox-lg" type="checkbox"> <label for="chL">Large checkbox</label>
-<input id="chN" class="chkbox chkbox-primary" type="checkbox"> <label for="chN">Normal checkbox</label>
-<input id="chS" class="chkbox chkbox-primary chkbox-sm" type="checkbox"> <label for="chS">Small checkbox</label>
-<input id="chXS" class="chkbox chkbox-primary chkbox-xs" type="checkbox"> <label for="chXS">Extra small checkbox</label>
-
-
- -

Radio button styles In 7 pure CSS flavours

-

Use the .rdbtn class only on <input type="radio"> elements. Don't forget to add a <label> after it and link it to the radio button's id. There are seven flavours of radio buttons, similar to the classic Bootstrap buttons:

-
    -
  • .rdbtn-default
    • -
  • .rdbtn-primary
    • -
  • .rdbtn-success
    • -
  • .rdbtn-info
    • -
  • .rdbtn-warning
    • -
  • .rdbtn-danger
    • -
  • .rdbtn-notice
    • -
-

You can also use the .rdbtn-lg, .rdbtn-sm and .rdbtn-xs classes to change the size of your radio buttons.

-
-
-

Examples

-
-
-

Radio button variants:

- - - - - - - -
-

Usage:

-
- 
<input type="radio" class="rdbtn rdbtn-default" id="rdb-default"><label for="rdb-default">Default</label>
-<input type="radio" class="rdbtn rdbtn-primary" id="rdb-primary" name="rd-group"><label for="rdb-primary">Primary</label>
-<input type="radio" class="rdbtn rdbtn-success" id="rdb-success" name="rd-group"><label for="rdb-success">Success</label>
-<input type="radio" class="rdbtn rdbtn-info" id="rdb-info" name="rd-group"><label for="rdb-info">Info</label>
-<input type="radio" class="rdbtn rdbtn-warning" id="rdb-warning" name="rd-group"><label for="rdb-warning">Warning</label>
-<input type="radio" class="rdbtn rdbtn-danger" id="rdb-danger" name="rd-group"><label for="rdb-danger">Danger</label>
-<input type="radio" class="rdbtn rdbtn-notice" id="rdb-notice" name="rd-group"><label for="rdb-notice">Notice</label>

-

Radio button sizes:

- - - - -

Usage:

-
- 
<input id="rdL" class="rdbtn rdbtn-primary rdbtn-lg" name="test-s" type="radio"> <label for="rdL">Large radio  </label>
-<input id="rdN" class="rdbtn rdbtn-primary" name="test-s" type="radio"> <label for="rdL">Normal radio  </label>
-<input id="rdS" class="rdbtn rdbtn-primary rdbtn-sm" name="test-s" type="radio"> <label for="rdL">Small radio  </label>
-<input id="rdXS" class="rdbtn rdbtn-primary rdbtn-xs" name="test-s" type="radio"> <label for="rdL">Extra small radio  </label>
-
-
- -

List element styles Lots of pure CSS options

-

Use the .urd class for unordered lists or the .ord class for ordered lists in combination with one of the three styles (disc, circle and square). Apart from that, you can use the .urd-big to make your unordered list bullets larger. There are 7 color combinations, along with the above options:

-
    -
  • .urd-disc-default, .urd-circle-default and .urd-square-default
    • -
  • .urd-disc-primary, .urd-circle-primary and .urd-square-primary
    • -
  • .urd-disc-success, .urd-circle-success and .urd-square-success
    • -
  • .urd-disc-info, .urd-circle-info and .urd-square-info
    • -
  • .urd-disc-warning, .urd-circle-warning and .urd-square-warning
    • -
  • .urd-disc-danger, .urd-circle-danger and .urd-square-danger
    • -
  • .urd-disc-notice, .urd-circle-notice and .urd-square-notice
    • -
-

Similarly, you can use the classes for ordered lists by replacing .urd- with .ord-. Note that ordered lists using these classes only use the decimal value for the list-style attribute and different values will not be taken into account.

- -
-
-

Examples

-
-
-

Unordered lists

-
    -
  • This is a list element
    • -
  • This is a list element
    • -
  • This is a list element
    • -
-
    -
  • This is a list element
    • -
  • This is a list element
    • -
  • This is a list element
    • -
-
    -
  • This is a list element
    • -
  • This is a list element
    • -
  • This is a list element
    • -
-

Usage:

-
- 
<ul class="urd urd-disc-primary">
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-</ul>
-
-<ul class="urd urd-circle-default">
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-</ul>
-
-<ul class="urd urd-square-success">
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-</ul>
-

Unordered lists - larger bullets

-
    -
  • This is a list element
    • -
  • This is a list element
    • -
  • This is a list element
    • -
-
    -
  • This is a list element
    • -
  • This is a list element
    • -
  • This is a list element
    • -
-
    -
  • This is a list element
    • -
  • This is a list element
    • -
  • This is a list element
    • -
-

Usage:

-
- 
<ul class="urd urd-disc-warning urd-big">
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-</ul>
-
-<ul class="urd urd-circle-danger urd-big">
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-</ul>
-
-<ul class="urd urd-square-notice urd-big">
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-</ul>
-

Ordered lists

-
    -
  1. This is a list element
    2. -
  2. This is a list element
    3. -
  3. This is a list element
    4. -
-
    -
  1. This is a list element
    2. -
  2. This is a list element
    3. -
  3. This is a list element
    4. -
-
    -
  1. This is a list element
    2. -
  2. This is a list element
    3. -
  3. This is a list element
    4. -
-

Usage:

-
- 
<ol class="ord ord-disc-primary">
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-</ol>
-
-<ol class="ord ord-circle-default">
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-</ol>
-
-<ol class="ord ord-square-info">
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-  <li>This is a list element</li>
-</ol>
-
-
- - - -
-
- - \ No newline at end of file