https://github.com/samuelmc/foundation-select
Select plugin for Foundation sites 6
https://github.com/samuelmc/foundation-select
bower custom-select custom-styling foundation scss select
Last synced: 12 months ago
JSON representation
Select plugin for Foundation sites 6
- Host: GitHub
- URL: https://github.com/samuelmc/foundation-select
- Owner: samuelmc
- License: mit
- Created: 2016-08-21T03:06:18.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2018-04-29T21:57:18.000Z (about 8 years ago)
- Last Synced: 2025-06-12T03:54:27.413Z (about 1 year ago)
- Topics: bower, custom-select, custom-styling, foundation, scss, select
- Language: CSS
- Homepage: https://samuelmc.github.io/
- Size: 120 KB
- Stars: 3
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# foundation-select
Select plugin for Foundation sites 6
[](https://travis-ci.org/samuelmc/foundation-select)
## Installation
**With bower:**
[]()
```shell
bower install --save foundation-select
```
Add all nessesary files to your html. This plugin only works with foundation and requires foundation-perfect-scrollbar and font-awesome.
```html
...
```
If you are using foundation's scss with gulp, the best way add the styles is by adding it to the sass paths in your gulpfile.
```js
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var sassPaths = [
'bower_components/normalize.scss/sass',
'bower_components/foundation-sites/scss',
'bower_components/foundation-perfect-scrollbar/src/scss/plugin',
'bower_components/foundation-select/src/scss/plugin',
'bower_components/motion-ui/src',
'bower_components/font-awesome/scss'
];
gulp.task('sass', function() {
...
```
Then add these settings to your _settings.scss file for customization
```scss
$select-background: $input-background !default;
$select-border: $input-border !default;
$select-color: $input-color !default;
$select-dropdown-height: rem-calc(300);
```
## Usage
Just add a data-select attribute to your select tag.
```html
Placeholder
Option 1
Option 2
...
```
Run foundation and it will automaticaly initialize all the selects
```js
$(document).foundation();
```
**Plugin options**
|Name |Default |Descrition|
|---------|---------|----------|
|data-icon-class|'fa-caret-down'|The FontAwesome class for the select triangle icon.|
|data-placeholder|''|Custom placeholder.|
|data-value|''|The default value of the select.|
|data-mousewheel|true|If set to true scrolling over the element will change the value if the element has focus.|
## Licence
[](https://opensource.org/licenses/mit-license.php)
© Samuel Moncarey