├── .npmignore ├── dist ├── demo.min.css.gz ├── bem-kit.min.css.gz ├── bem-kit.min.js.gz ├── bem-kit.js ├── bem-kit.min.js ├── demo.min.css ├── demo.css ├── bem-kit.min.css └── bem-kit.css ├── src ├── bem-kit.scss ├── _scss │ ├── helpers │ │ ├── _list.scss │ │ └── _colors.scss │ ├── components │ │ ├── _popover.scss │ │ ├── _radios.scss │ │ ├── _checkboxes.scss │ │ ├── _flex.scss │ │ ├── _select.scss │ │ ├── _pager.scss │ │ ├── _alert.scss │ │ ├── _tabs.scss │ │ ├── _table.scss │ │ ├── _label.scss │ │ ├── _grids.scss │ │ ├── _card.scss │ │ ├── _form.scss │ │ ├── _buttons.scss │ │ ├── _textfield.scss │ │ ├── _modal.scss │ │ └── _badge.scss │ ├── mixins │ │ ├── _appearance.scss │ │ ├── _image.scss │ │ ├── _background.scss │ │ ├── _clearfix.scss │ │ ├── _boxes.scss │ │ ├── _placeholders.scss │ │ ├── _border-radius.scss │ │ └── _transitions.scss │ ├── rules │ │ ├── _flex.scss │ │ ├── _label.scss │ │ ├── _form.scss │ │ ├── _popover.scss │ │ ├── _select.scss │ │ ├── _alert.scss │ │ ├── _grids.scss │ │ ├── _card.scss │ │ ├── _pager.scss │ │ ├── _textfield.scss │ │ ├── _table.scss │ │ ├── _tabs.scss │ │ ├── _radios.scss │ │ ├── _modal.scss │ │ ├── _checkboxes.scss │ │ └── _buttons.scss │ ├── _base.scss │ └── _normalize.scss ├── _bem-kit.scss ├── _all-mixins.scss ├── _all-rules.scss ├── _all-components.scss ├── bem-kit.js └── demo.scss ├── demo ├── images │ ├── brand-blue.png │ ├── brand-black.png │ └── brand-white.png └── index.html ├── test └── test.js ├── .gitignore ├── LICENSE ├── .csslintrc ├── package.json ├── README.md ├── Gulpfile.js ├── CONTRIBUTING.md └── index.html /.npmignore: -------------------------------------------------------------------------------- 1 | demo 2 | test 3 | node_modules -------------------------------------------------------------------------------- /dist/demo.min.css.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mazipan/bem-kit/HEAD/dist/demo.min.css.gz -------------------------------------------------------------------------------- /dist/bem-kit.min.css.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mazipan/bem-kit/HEAD/dist/bem-kit.min.css.gz -------------------------------------------------------------------------------- /dist/bem-kit.min.js.gz: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mazipan/bem-kit/HEAD/dist/bem-kit.min.js.gz -------------------------------------------------------------------------------- /src/bem-kit.scss: -------------------------------------------------------------------------------- 1 | @import "_bem-kit.scss"; 2 | 3 | // COMPONENT 4 | @import "_all-components.scss"; -------------------------------------------------------------------------------- /demo/images/brand-blue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mazipan/bem-kit/HEAD/demo/images/brand-blue.png -------------------------------------------------------------------------------- /src/_scss/helpers/_list.scss: -------------------------------------------------------------------------------- 1 | %reset-list { 2 | margin: 0; 3 | padding: 0; 4 | list-style: none; 5 | } -------------------------------------------------------------------------------- /demo/images/brand-black.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mazipan/bem-kit/HEAD/demo/images/brand-black.png -------------------------------------------------------------------------------- /demo/images/brand-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mazipan/bem-kit/HEAD/demo/images/brand-white.png -------------------------------------------------------------------------------- /src/_bem-kit.scss: -------------------------------------------------------------------------------- 1 | @import "_all-mixins"; 2 | 3 | // BASE 4 | @import "_scss/normalize"; 5 | @import "_scss/base"; 6 | 7 | @import "_all-rules"; -------------------------------------------------------------------------------- /src/_scss/components/_popover.scss: -------------------------------------------------------------------------------- 1 | .popover{ 2 | @extend %popover; 3 | 4 | &__content{ 5 | @extend %popover__content; 6 | } 7 | } -------------------------------------------------------------------------------- /src/_scss/components/_radios.scss: -------------------------------------------------------------------------------- 1 | .radio 2 | { 3 | @extend %radio; 4 | 5 | &--blue 6 | { 7 | @extend %radio--blue; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/_scss/components/_checkboxes.scss: -------------------------------------------------------------------------------- 1 | .checkbox 2 | { 3 | @extend %checkbox; 4 | 5 | &--blue 6 | { 7 | @extend %checkbox--blue; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/_scss/mixins/_appearance.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | @mixin appearance($param) 4 | { 5 | -webkit-appearance : $param; 6 | -moz-appearance : $param; 7 | appearance : $param; 8 | } 9 | -------------------------------------------------------------------------------- /src/_scss/mixins/_image.scss: -------------------------------------------------------------------------------- 1 | // Responsive Image 2 | @mixin img-responsive($display: block) 3 | { 4 | display: $display; 5 | 6 | max-width: 100%; 7 | height: auto; 8 | } 9 | -------------------------------------------------------------------------------- /src/_scss/components/_flex.scss: -------------------------------------------------------------------------------- 1 | .flex{ 2 | &__row{ 3 | @extend %flex__row; 4 | } 5 | &__col{ 6 | @extend %flex__col; 7 | } 8 | &__wrap{ 9 | @extend %flex__wrap; 10 | } 11 | } -------------------------------------------------------------------------------- /src/_scss/components/_select.scss: -------------------------------------------------------------------------------- 1 | .select 2 | { 3 | @extend %select; 4 | 5 | &--radius 6 | { 7 | @extend %select--radius; 8 | } 9 | 10 | &--shadow{ 11 | @extend %select--shadow !optional; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/_scss/mixins/_background.scss: -------------------------------------------------------------------------------- 1 | // Background Size 2 | @mixin background-size($size) 3 | { 4 | -webkit-background-size: $size; 5 | -moz-background-size: $size; 6 | -o-background-size: $size; 7 | background-size: $size; 8 | } 9 | -------------------------------------------------------------------------------- /src/_scss/components/_pager.scss: -------------------------------------------------------------------------------- 1 | .pager { 2 | @extend %pager; 3 | 4 | &__page{ 5 | @extend %pager__page; 6 | 7 | &--active{ 8 | @extend %pager__page--active; 9 | } 10 | } 11 | 12 | &--radius{ 13 | @extend %pager--radius; 14 | } 15 | 16 | } 17 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var should = require("should"); 2 | var assert = require('assert'); 3 | 4 | describe('Array', function() { 5 | describe('#indexOf()', function() { 6 | it('should return -1 when the value is not present', function() { 7 | assert.equal(-1, [1,2,3].indexOf(4)); 8 | }); 9 | }); 10 | }); -------------------------------------------------------------------------------- /src/_scss/rules/_flex.scss: -------------------------------------------------------------------------------- 1 | %flex{ 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | 6 | &__row{ 7 | display: flex; 8 | flex-direction: row; 9 | } 10 | 11 | &__col{ 12 | display: flex; 13 | flex-direction: column; 14 | } 15 | 16 | &__wrap{ 17 | flex-wrap: wrap; 18 | } 19 | } -------------------------------------------------------------------------------- /src/_scss/components/_alert.scss: -------------------------------------------------------------------------------- 1 | .alert{ 2 | @extend %alert; 3 | 4 | &--radius{ 5 | @extend %alert--radius; 6 | } 7 | 8 | @for $i from 1 through length($buttonVariansName) { 9 | &--#{nth($buttonVariansName, $i)} { 10 | @extend %alert--#{nth($buttonVariansName, $i)}; 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /src/_scss/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix() 2 | { 3 | *zoom: 1; 4 | &:before, 5 | &:after 6 | { 7 | display: table; 8 | content: ' '; 9 | } 10 | &:after 11 | { 12 | clear: both; 13 | } 14 | } 15 | 16 | @mixin row() 17 | { 18 | @include clearfix(); 19 | margin: 0 auto; 20 | max-width: 92.308em; 21 | } 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/_all-mixins.scss: -------------------------------------------------------------------------------- 1 | @import "_scss/mixins/appearance"; 2 | @import "_scss/mixins/background"; 3 | @import "_scss/mixins/border-radius"; 4 | @import "_scss/mixins/boxes"; 5 | @import "_scss/mixins/clearfix"; 6 | @import "_scss/mixins/image"; 7 | @import "_scss/mixins/placeholders"; 8 | @import "_scss/mixins/transitions"; 9 | 10 | // HELPER 11 | @import "_scss/helpers/colors"; 12 | @import "_scss/helpers/list"; -------------------------------------------------------------------------------- /src/_scss/components/_tabs.scss: -------------------------------------------------------------------------------- 1 | .tabs 2 | { 3 | @extend %tabs; 4 | 5 | &__item 6 | { 7 | @extend %tabs__item; 8 | 9 | &--active 10 | { 11 | @extend %tabs__item--active; 12 | } 13 | } 14 | 15 | // v stand for vertical 16 | &__itemv 17 | { 18 | @extend %tabs__itemv; 19 | 20 | &--active 21 | { 22 | @extend %tabs__itemv--active; 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/_scss/mixins/_boxes.scss: -------------------------------------------------------------------------------- 1 | // Drop Shadow 2 | @mixin box-shadow($shadow...) 3 | { 4 | -webkit-box-shadow: $shadow; 5 | -moz-box-shadow: $shadow; 6 | box-shadow: $shadow; 7 | } 8 | 9 | // Box Sizing 10 | @mixin box-sizing($box-size) 11 | { 12 | -webkit-box-sizing: $box-size; 13 | -moz-box-sizing: $box-size; 14 | box-sizing: $box-size; 15 | 16 | -o-box-sizing: $box-size; 17 | -ms-box-sizing: $box-size; 18 | } 19 | -------------------------------------------------------------------------------- /src/_scss/components/_table.scss: -------------------------------------------------------------------------------- 1 | .table 2 | { 3 | @extend %table; 4 | 5 | &__head 6 | { 7 | @extend %table__head; 8 | } 9 | 10 | &__body 11 | { 12 | @extend %table__body; 13 | } 14 | 15 | &__sort 16 | { 17 | @extend %table__sort !optional; 18 | 19 | &--asc 20 | { 21 | @extend %table__sort--asc; 22 | } 23 | &--desc 24 | { 25 | @extend %table__sort--desc; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/_scss/components/_label.scss: -------------------------------------------------------------------------------- 1 | .label{ 2 | @extend %label !optional; 3 | 4 | @for $i from 1 through length($buttonVariansName) { 5 | &--#{nth($buttonVariansName, $i)} { 6 | @extend %label--#{nth($buttonVariansName, $i)}; 7 | } 8 | 9 | &-outline--#{nth($buttonVariansName, $i)} { 10 | @extend %label-outline--#{nth($buttonVariansName, $i)}; 11 | } 12 | } 13 | 14 | &--radius{ 15 | @extend %label--radius !optional; 16 | } 17 | } -------------------------------------------------------------------------------- /src/_scss/components/_grids.scss: -------------------------------------------------------------------------------- 1 | $columnCount : 12 !default; 2 | 3 | .clearfix{ 4 | @extend %clearfix; 5 | } 6 | 7 | .container{ 8 | @extend %container; 9 | } 10 | 11 | .grid{ 12 | &__row{ 13 | @extend %row; 14 | } 15 | &__flex{ 16 | @extend %flex; 17 | } 18 | 19 | @for $i from 1 through $columnCount { 20 | &__col-#{$i}{ 21 | @extend %col-#{$i}; 22 | } 23 | } 24 | 25 | @for $i from 1 through $columnCount { 26 | &__offset-#{$i}{ 27 | @extend %offset-#{$i}; 28 | } 29 | } 30 | } 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/_scss/components/_card.scss: -------------------------------------------------------------------------------- 1 | .card{ 2 | @extend %card; 3 | 4 | &--radius{ 5 | @extend %card--radius; 6 | } 7 | 8 | @for $i from 1 through length($buttonVariansName) { 9 | &--#{nth($buttonVariansName, $i)} { 10 | @extend %card--#{nth($buttonVariansName, $i)}; 11 | } 12 | } 13 | 14 | &__title{ 15 | @extend %card__title; 16 | } 17 | &__tools{ 18 | @extend %card__tools !optional; 19 | } 20 | &__content{ 21 | @extend %card__content; 22 | } 23 | } -------------------------------------------------------------------------------- /src/_all-rules.scss: -------------------------------------------------------------------------------- 1 | @import "_scss/rules/flex"; 2 | @import "_scss/rules/grids"; 3 | @import "_scss/rules/buttons"; 4 | @import "_scss/rules/checkboxes"; 5 | @import "_scss/rules/radios"; 6 | @import "_scss/rules/tabs"; 7 | @import "_scss/rules/textfield"; 8 | @import "_scss/rules/select"; 9 | @import "_scss/rules/table"; 10 | @import "_scss/rules/pager"; 11 | @import "_scss/rules/alert"; 12 | @import "_scss/rules/card"; 13 | @import "_scss/rules/popover"; 14 | @import "_scss/rules/modal"; 15 | @import "_scss/rules/form"; 16 | @import "_scss/rules/label"; -------------------------------------------------------------------------------- /src/_scss/rules/_label.scss: -------------------------------------------------------------------------------- 1 | %label { 2 | padding: .1em .5em; 3 | 4 | @for $i from 1 through length($buttonVariansName) { 5 | &--#{nth($buttonVariansName, $i)} { 6 | background: nth($buttonVariansHex, $i); 7 | color: nth($buttonVariansFont, $i); 8 | } 9 | 10 | &-outline--#{nth($buttonVariansName, $i)} { 11 | border: 1px solid nth($buttonVariansHex, $i); 12 | color: nth($buttonVariansHex, $i); 13 | } 14 | 15 | } 16 | 17 | &--radius { 18 | border-radius: 2em; 19 | padding: .1em .8em .2em .8em; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/_all-components.scss: -------------------------------------------------------------------------------- 1 | @import "_scss/components/flex"; 2 | @import "_scss/components/grids"; 3 | @import "_scss/components/buttons"; 4 | @import "_scss/components/checkboxes"; 5 | @import "_scss/components/radios"; 6 | @import "_scss/components/tabs"; 7 | @import "_scss/components/textfield"; 8 | @import "_scss/components/select"; 9 | @import "_scss/components/table"; 10 | @import "_scss/components/pager"; 11 | @import "_scss/components/alert"; 12 | @import "_scss/components/card"; 13 | @import "_scss/components/popover"; 14 | @import "_scss/components/modal"; 15 | @import "_scss/components/form"; 16 | @import "_scss/components/label"; 17 | @import "_scss/components/badge"; -------------------------------------------------------------------------------- /src/_scss/components/_form.scss: -------------------------------------------------------------------------------- 1 | .form{ 2 | @extend %form !optional; 3 | 4 | &__group{ 5 | @extend %form__group !optional; 6 | } 7 | 8 | &__wrapper{ 9 | @extend %form__wrapper !optional; 10 | } 11 | 12 | &__label{ 13 | @extend %form__label !optional; 14 | 15 | &--required{ 16 | @extend %form__label--required !optional; 17 | } 18 | } 19 | 20 | &__icon{ 21 | @extend %form__icon !optional; 22 | 23 | &--radius-left{ 24 | @extend %form__icon--radius-left !optional; 25 | } 26 | 27 | &--radius-right{ 28 | @extend %form__icon--radius-right !optional; 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /src/_scss/mixins/_placeholders.scss: -------------------------------------------------------------------------------- 1 | // Placeholder text color 2 | @mixin placeholder-color($color) 3 | { 4 | ::-moz-placeholder 5 | { 6 | opacity: 1; 7 | color: $color; 8 | } 9 | :-ms-input-placeholder 10 | { 11 | color: $color; 12 | } 13 | ::-webkit-input-placeholder 14 | { 15 | color: $color; 16 | } 17 | } 18 | 19 | // Placeholder padding 20 | @mixin placeholder-padding($padding) 21 | { 22 | ::-moz-placeholder 23 | { 24 | padding: $padding; 25 | } 26 | :-ms-input-placeholder 27 | { 28 | padding: $padding; 29 | } 30 | ::-webkit-input-placeholder 31 | { 32 | padding: $padding; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/_scss/components/_buttons.scss: -------------------------------------------------------------------------------- 1 | .button 2 | { 3 | 4 | @extend %button; 5 | 6 | &--radius{ 7 | @extend %button--radius; 8 | } 9 | 10 | @for $i from 1 through length($buttonVariansName) { 11 | &--#{nth($buttonVariansName, $i)} { 12 | @extend %button--#{nth($buttonVariansName, $i)}; 13 | } 14 | } 15 | 16 | @for $j from 1 through length($buttonVariansName) { 17 | &-outline--#{nth($buttonVariansName, $j)} { 18 | @extend %button-outline--#{nth($buttonVariansName, $j)}; 19 | } 20 | } 21 | 22 | 23 | &--dropdown{ 24 | @extend %button--dropdown; 25 | } 26 | 27 | &__menu{ 28 | @extend %button__menu; 29 | } 30 | 31 | } 32 | -------------------------------------------------------------------------------- /src/_scss/mixins/_border-radius.scss: -------------------------------------------------------------------------------- 1 | // Border Radius 2 | @mixin border-radius($radius) 3 | { 4 | -webkit-border-radius: $radius; 5 | -moz-border-radius: $radius; 6 | border-radius: $radius; 7 | } 8 | 9 | @mixin border-top-radius($radius) { 10 | border-top-left-radius: $radius; 11 | border-top-right-radius: $radius; 12 | } 13 | 14 | @mixin border-right-radius($radius) { 15 | border-top-right-radius: $radius; 16 | border-bottom-right-radius: $radius; 17 | } 18 | 19 | @mixin border-bottom-radius($radius) { 20 | border-bottom-right-radius: $radius; 21 | border-bottom-left-radius: $radius; 22 | } 23 | 24 | @mixin border-left-radius($radius) { 25 | border-top-left-radius: $radius; 26 | border-bottom-left-radius: $radius; 27 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | js/temp 39 | .idea/ 40 | demo/dist 41 | -------------------------------------------------------------------------------- /src/_scss/components/_textfield.scss: -------------------------------------------------------------------------------- 1 | .textfield 2 | { 3 | @extend %textfield; 4 | 5 | &__helper { 6 | @extend %textfield__helper; 7 | } 8 | 9 | &__error { 10 | @extend %textfield__error; 11 | } 12 | 13 | &--error 14 | { 15 | @extend %textfield--error; 16 | } 17 | 18 | &--large 19 | { 20 | @extend %textfield--large; 21 | } 22 | 23 | &--radius 24 | { 25 | @extend %textfield--radius; 26 | } 27 | 28 | &--radius-left 29 | { 30 | @extend %textfield--radius-left; 31 | } 32 | 33 | &--radius-right 34 | { 35 | @extend %textfield--radius-right; 36 | } 37 | 38 | &--shadow{ 39 | @extend %textfield--shadow !optional; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/_scss/components/_modal.scss: -------------------------------------------------------------------------------- 1 | .modal 2 | { 3 | 4 | @extend %modal; 5 | 6 | &__header { 7 | @extend %modal__header; 8 | 9 | &--border{ 10 | @extend %modal__header--border; 11 | } 12 | 13 | &--blue{ 14 | @extend %modal__header--blue; 15 | } 16 | } 17 | 18 | &__content { 19 | @extend %modal__content; 20 | } 21 | 22 | &__body { 23 | @extend %modal__body; 24 | } 25 | 26 | &__footer { 27 | @extend %modal__footer; 28 | 29 | &--border{ 30 | @extend %modal__footer--border; 31 | } 32 | 33 | &--blue{ 34 | @extend %modal__footer--blue; 35 | } 36 | } 37 | 38 | &__close { 39 | @extend %modal__close; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/_scss/rules/_form.scss: -------------------------------------------------------------------------------- 1 | 2 | %form{ 3 | &__group{ 4 | @extend %flex; 5 | } 6 | 7 | &__wrapper{ 8 | width: 100%; 9 | padding: 7px 0; 10 | } 11 | 12 | &__label{ 13 | width: 20%; 14 | min-width: 100px; 15 | 16 | &--required{ 17 | &:after{ 18 | content: '*'; 19 | color: $red; 20 | } 21 | } 22 | } 23 | 24 | &__icon{ 25 | color: $black; 26 | background-color: $greyLight; 27 | padding: 13px; 28 | 29 | &--radius-left{ 30 | border-top-left-radius: 0.25em; 31 | border-bottom-left-radius: 0.25em; 32 | } 33 | 34 | &--radius-right{ 35 | border-top-right-radius: 0.25em; 36 | border-bottom-right-radius: 0.25em; 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /src/_scss/components/_badge.scss: -------------------------------------------------------------------------------- 1 | .badge{ 2 | @include border-radius(.25em); 3 | border: 1px solid $greyLight; 4 | 5 | &__item{ 6 | line-height: 1.5rem; 7 | padding: 10px 20px; 8 | display: block; 9 | margin: 0; 10 | border-bottom: 1px solid $greyLight; 11 | &:last-child{ 12 | border: 0; 13 | } 14 | } 15 | &__info{ 16 | min-width: 3rem; 17 | padding: 0 6px; 18 | text-align: center; 19 | font-size: 1.2rem; 20 | line-height: 22px; 21 | height: 22px; 22 | color: #757575; 23 | float: right; 24 | margin-top: calc(.75rem - 11px); 25 | } 26 | &--state{ 27 | &-new{ 28 | background-color: $lime; 29 | color: $white; 30 | font-size: .8rem; 31 | } 32 | } 33 | 34 | } -------------------------------------------------------------------------------- /src/_scss/rules/_popover.scss: -------------------------------------------------------------------------------- 1 | %popover{ 2 | position: relative; 3 | cursor: pointer; 4 | 5 | &__content{ 6 | visibility: hidden; 7 | background-color: $blackLight; 8 | color: $white; 9 | text-align: center; 10 | border-radius: 6px; 11 | padding: 1em; 12 | position: absolute; 13 | z-index: 1; 14 | bottom: 125%; 15 | left: 50%; 16 | margin-left: -60px; 17 | opacity: 0; 18 | 19 | @include transition(opacity 1s); 20 | 21 | &:after { 22 | content: ""; 23 | position: absolute; 24 | top: 100%; 25 | left: 50%; 26 | margin-left: -5px; 27 | border-width: 5px; 28 | border-style: solid; 29 | border-color: $blackLight transparent transparent transparent; 30 | } 31 | } 32 | 33 | &:hover { 34 | .popover__content{ 35 | visibility: visible; 36 | opacity: 1; 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /src/_scss/rules/_select.scss: -------------------------------------------------------------------------------- 1 | @import "textfield"; 2 | 3 | %select 4 | { 5 | @extend %textfield; 6 | @include appearance(none); 7 | 8 | background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAYAAAARx7TFAAAAAXNSR0IArs4c6QAAAJ1JREFUCB1jzMnJCWdkZBSdPHnyFAYk0NDQwPbmzZuVTExMk5iA4p7//v2bDFScC1OzatUqZqCC5f////cHyikwiYiIJAFNWgIUmARSCKQZDx48OAdIBwJNSZ8yZcp8RpBuoNFMQJ0LgRIxQO4hILYFKsgEOmEmSJ4ZRBw4cOC/l5fXxu/fvysDub5Ak3OAJswAyWEAkIm5ublu6BIADTRHW7YWzxEAAAAASUVORK5CYII='); 9 | background-position: right 7px center; 10 | background-repeat: no-repeat; 11 | 12 | &--radius 13 | { 14 | @include border-radius(0.25em); 15 | } 16 | 17 | &--shadow{ 18 | &:focus{ 19 | border-color: #51a7e8; 20 | outline: none; 21 | box-shadow: inset 0 1px 2px rgba(0,0,0,0.075),0 0 5px rgba(81,167,232,0.5); 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /src/_scss/_base.scss: -------------------------------------------------------------------------------- 1 | html { 2 | @include box-sizing(border-box); 3 | font-size: 62.5%; 4 | color: $black; 5 | -ms-overflow-style: scrollbar; 6 | -webkit-tap-highlight-color: transparent; 7 | } 8 | *, *:before, *:after { 9 | box-sizing: inherit; 10 | } 11 | body { 12 | font-size: 1.3rem; 13 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 14 | } 15 | 16 | a { 17 | color: $blue; 18 | text-decoration: none; 19 | 20 | &:hover, &:focus{ 21 | text-decoration: underline; 22 | } 23 | } 24 | 25 | code, kbd, pre, samp { 26 | background-color: $greyLighter; 27 | padding: .1em .5em; 28 | border-radius: .1em; 29 | } 30 | 31 | pre{ 32 | border-left: solid .25em $blue; 33 | } 34 | 35 | blockquote{ 36 | padding: 10px; 37 | margin: 0 0 20px; 38 | font-size: 1.6rem; 39 | border-left: 5px solid $blue; 40 | } 41 | 42 | textarea { 43 | resize: none; 44 | } 45 | -------------------------------------------------------------------------------- /src/_scss/rules/_alert.scss: -------------------------------------------------------------------------------- 1 | %alert-close-rule{ 2 | position: relative; 3 | top: -4px; 4 | right: -21px; 5 | padding: 0 20px; 6 | float: right; 7 | font-size: 1.6rem; 8 | cursor: pointer; 9 | text-decoration: none; 10 | } 11 | 12 | %alert{ 13 | padding: 15px; 14 | margin-bottom: 20px; 15 | background: none; 16 | 17 | &--radius{ 18 | @include border-radius(.25em); 19 | } 20 | 21 | @for $i from 1 through length($buttonVariansName) { 22 | &--#{nth($buttonVariansName, $i)} { 23 | border: 1px dashed nth($buttonVariansHex, $i); 24 | color: nth($buttonVariansHex, $i); 25 | 26 | .alert__close{ 27 | @extend %alert-close-rule; 28 | color: nth($buttonVariansHex, $i); 29 | 30 | &:hover{ 31 | text-decoration: none; 32 | } 33 | } 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /src/_scss/rules/_grids.scss: -------------------------------------------------------------------------------- 1 | %clearfix{ 2 | @include clearfix(); 3 | } 4 | 5 | %container { 6 | max-width: 1146px; 7 | margin: auto; 8 | @include clearfix(); 9 | 10 | @media (max-width: 980px) { 11 | padding: 0 15px; 12 | } 13 | 14 | @media (min-width: 960px) { 15 | max-width: 960px; 16 | } 17 | 18 | @media (min-width: 1080px) { 19 | max-width: 1040px; 20 | } 21 | 22 | @media (min-width: 1200px) { 23 | max-width: 1146px; 24 | } 25 | } 26 | 27 | %row { 28 | @include clearfix(); 29 | margin: 0 auto; 30 | max-width: 92.308em; 31 | } 32 | 33 | $column-count : 12 !default; 34 | $desktop : 768 !default; 35 | 36 | @for $i from 1 through $column-count { 37 | %col-#{$i}{ 38 | float: left; 39 | width: 100%; 40 | 41 | @media (min-width: 768px) { 42 | width: percentage($i/$column-count); 43 | } 44 | 45 | } 46 | 47 | %offset-#{$i}{ 48 | margin-left: percentage($i/$column-count); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/_scss/rules/_card.scss: -------------------------------------------------------------------------------- 1 | %card{ 2 | @include box-shadow(0 4px 8px 0 rgba(0,0,0,0.2)); 3 | @include transition(0.3s); 4 | 5 | &:hover { 6 | @include box-shadow(0 8px 16px 0 rgba(0,0,0,0.2)); 7 | } 8 | 9 | &--radius{ 10 | @include border-radius(.25em); 11 | } 12 | 13 | @for $i from 1 through length($buttonVariansName) { 14 | &--#{nth($buttonVariansName, $i)} { 15 | border: 1px solid nth($buttonVariansHex, $i); 16 | 17 | & > .card__header{ 18 | padding: 1em .5em; 19 | background-color: nth($buttonVariansHex, $i); 20 | color: nth($buttonVariansFont, $i); 21 | 22 | @extend %flex; 23 | 24 | } 25 | 26 | } 27 | } 28 | 29 | &__title{ 30 | font-size: 1.6rem; 31 | font-weight: bold; 32 | } 33 | &__tools{ 34 | & > i { 35 | margin: 0 .5em; 36 | cursor: pointer; 37 | } 38 | } 39 | &__content{ 40 | padding: 1em .5em; 41 | } 42 | 43 | 44 | } -------------------------------------------------------------------------------- /src/_scss/rules/_pager.scss: -------------------------------------------------------------------------------- 1 | %pager { 2 | font-size: 1.4rem; 3 | @extend %reset-list; 4 | 5 | &__page{ 6 | text-decoration: none; 7 | position: relative; 8 | float: left; 9 | padding: 8px 15px; 10 | margin-left: -5px; 11 | background-color: $white; 12 | color: $blue; 13 | border: 1px solid $greyLight; 14 | 15 | &--active{ 16 | text-decoration: none; 17 | color: $blackDarker; 18 | background-color: $greyLight; 19 | } 20 | 21 | &:focus{ 22 | text-decoration: none; 23 | } 24 | 25 | &:hover{ 26 | text-decoration: none; 27 | color: $blackDarker; 28 | background-color: $greyLight; 29 | } 30 | } 31 | 32 | li{ 33 | display: inline-block; 34 | } 35 | 36 | &--radius{ 37 | li{ 38 | &:first-child>a, &:first-child>span { 39 | border-top-left-radius: 0.25em; 40 | border-bottom-left-radius: 0.25em; 41 | } 42 | 43 | &:last-child>a, &:last-child>span { 44 | border-top-right-radius: 0.25em; 45 | border-bottom-right-radius: 0.25em; 46 | } 47 | } 48 | } 49 | 50 | } 51 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Irfan Maulana 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /.csslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "important": false, 3 | "adjoining-classes": false, 4 | "known-properties": false, 5 | "box-sizing": false, 6 | "box-model": false, 7 | "overqualified-elements": false, 8 | "display-property-grouping": false, 9 | "bulletproof-font-face": false, 10 | "compatible-vendor-prefixes": false, 11 | "regex-selectors": false, 12 | "errors": true, 13 | "duplicate-background-images": false, 14 | "duplicate-properties": false, 15 | "empty-rules": false, 16 | "selector-max-approaching": false, 17 | "gradients": false, 18 | "fallback-colors": false, 19 | "font-sizes": false, 20 | "font-faces": false, 21 | "floats": false, 22 | "star-property-hack": false, 23 | "order-alphabetical": false, 24 | "outline-none": false, 25 | "import": false, 26 | "ids": false, 27 | "underscore-property-hack": false, 28 | "rules-count": false, 29 | "qualified-headings": false, 30 | "selector-max": false, 31 | "shorthand": false, 32 | "text-indent": false, 33 | "unique-headings": false, 34 | "universal-selector": false, 35 | "unqualified-attributes": false, 36 | "vendor-prefix": false, 37 | "zero-units": false 38 | } -------------------------------------------------------------------------------- /src/_scss/rules/_textfield.scss: -------------------------------------------------------------------------------- 1 | %textfield 2 | { 3 | padding: 12px; 4 | margin: 3px 0; 5 | width: 100%; 6 | outline: none; 7 | border: 1px solid $greyLight; 8 | border-radius: 0; 9 | @include placeholder-color($white); 10 | 11 | &__helper { 12 | color: $greyDark; 13 | font-size: 1.2rem; 14 | line-height: 2; 15 | } 16 | 17 | &__error { 18 | color: $red; 19 | font-size: 1.2rem; 20 | line-height: 2; 21 | } 22 | 23 | &--error 24 | { 25 | border: 1px solid $red; 26 | } 27 | 28 | &--large 29 | { 30 | padding: 20px; 31 | } 32 | 33 | &--radius 34 | { 35 | @include border-radius(0.25em); 36 | } 37 | 38 | &--radius-left{ 39 | border-top-left-radius: 0.25em; 40 | border-bottom-left-radius: 0.25em; 41 | } 42 | 43 | &--radius-right{ 44 | border-top-right-radius: 0.25em; 45 | border-bottom-right-radius: 0.25em; 46 | } 47 | 48 | &--shadow{ 49 | &:focus{ 50 | border-color: #51a7e8; 51 | outline: none; 52 | box-shadow: inset 0 1px 2px rgba(0,0,0,0.075),0 0 5px rgba(81,167,232,0.5); 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bem-kit", 3 | "description": "CSS UI Kit Component for BEM Convention Fans", 4 | "version": "0.0.8", 5 | "keywords": [ 6 | "css", 7 | "bem", 8 | "bem sass", 9 | "bem css", 10 | "bem framework", 11 | "bem kit" 12 | ], 13 | "homepage": "https://mazipan.github.io/bem-kit/demo/", 14 | "author": "Irfan Maulana (https://github.com/mazipan/)", 15 | "scripts": { 16 | "dev": "gulp build:dev", 17 | "prod": "gulp build:prod", 18 | "dist": "gulp build:prod", 19 | "test": "echo \"Error: no test specified\" && exit 0" 20 | }, 21 | "files": [ 22 | "dist", 23 | "src" 24 | ], 25 | "repository": { 26 | "type": "git", 27 | "url": "https://github.com/mazipan/bem-kit.git" 28 | }, 29 | "bugs": { 30 | "url": "https://github.com/mazipan/bem-kit/issues" 31 | }, 32 | "engines": { 33 | "node": ">=4" 34 | }, 35 | "license": "MIT", 36 | "dependencies": {}, 37 | "devDependencies": { 38 | "autoprefixer": "^7.2.1", 39 | "browser-sync": "^2.18.13", 40 | "gulp": "^3.9.1", 41 | "gulp-autoprefixer": "^4.0.0", 42 | "gulp-clean": "^0.3.2", 43 | "gulp-clean-css": "^3.9.0", 44 | "gulp-connect": "^5.0.0", 45 | "gulp-gzip": "^1.4.0", 46 | "gulp-header": "^1.8.9", 47 | "gulp-rename": "^1.2.2", 48 | "gulp-sass": "^3.1.0", 49 | "gulp-sourcemaps": "^2.6.1", 50 | "gulp-uglify": "^3.0.0", 51 | "gulp-watch": "^4.3.11", 52 | "pump": "^2.0.0" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/_scss/rules/_table.scss: -------------------------------------------------------------------------------- 1 | %table 2 | { 3 | max-width: 100%; 4 | width: 100%; 5 | border: 1px solid $greyLight; 6 | border-spacing: 0; 7 | border-collapse: collapse; 8 | 9 | &__head 10 | { 11 | th 12 | { 13 | padding: 8px; 14 | border-right: 1px solid $greyLight; 15 | border-bottom: 2px solid $greyLight; 16 | text-align: left; 17 | 18 | &[sortable="true"]{ 19 | cursor: pointer; 20 | } 21 | } 22 | } 23 | 24 | &__body 25 | { 26 | & > tr 27 | { 28 | & > td 29 | { 30 | padding: 8px; 31 | border-right: 1px solid $greyLight; 32 | text-align: left; 33 | } 34 | &:nth-of-type(odd) 35 | { 36 | background-color: $greyLighter; 37 | } 38 | } 39 | } 40 | 41 | &__sort 42 | { 43 | &--asc 44 | { 45 | &:after{ 46 | content: '\25BE'; 47 | font-size: 2rem; 48 | position: relative; 49 | float: right; 50 | margin-top: -7px; 51 | height: 0; 52 | } 53 | } 54 | &--desc 55 | { 56 | &:after{ 57 | content: '\25B4'; 58 | font-size: 2rem; 59 | position: relative; 60 | float: right; 61 | margin-top: -7px; 62 | height: 0; 63 | } 64 | } 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/_scss/rules/_tabs.scss: -------------------------------------------------------------------------------- 1 | %tabs 2 | { 3 | @extend %reset-list; 4 | 5 | &__item 6 | { 7 | display: inline-block; 8 | a 9 | { 10 | position: relative; 11 | display: block; 12 | padding: 1.3em; 13 | text-decoration: none; 14 | 15 | &:hover 16 | { 17 | background-color: $greyLighter; 18 | text-decoration: none; 19 | } 20 | } 21 | &--active 22 | { 23 | border-bottom: 2px solid $blue; 24 | 25 | a 26 | { 27 | color: $blackDarker; 28 | } 29 | } 30 | } 31 | // v stand for vertical 32 | &__itemv 33 | { 34 | display: block; 35 | margin: .3em 0; 36 | max-width: 200px; 37 | 38 | a 39 | { 40 | position: relative; 41 | display: block; 42 | padding: 1.3em; 43 | background-color: $greyLighter; 44 | text-decoration: none; 45 | 46 | &:hover 47 | { 48 | background-color: $greyLight; 49 | text-decoration: none; 50 | } 51 | } 52 | &--active 53 | { 54 | border-left: 2px solid $blue; 55 | background-color: $greyLight; 56 | 57 | a 58 | { 59 | background-color: $greyLight; 60 | color: $blackDarker; 61 | } 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/_scss/rules/_radios.scss: -------------------------------------------------------------------------------- 1 | %radio 2 | { 3 | position: absolute; 4 | left: -9999px; 5 | & + label 6 | { 7 | position: relative; 8 | display: inline-block; 9 | padding: 2px 30px; 10 | cursor: pointer; 11 | 12 | &:before, 13 | &:after 14 | { 15 | position: absolute; 16 | top: 0; 17 | content: ''; 18 | transition: all .2s; 19 | } 20 | &:before 21 | { 22 | left: 3px; 23 | width: 12px; 24 | height: 12px; 25 | margin-top: 3px; 26 | border: 1px solid $black; 27 | border-radius: 50%; 28 | @include transition(background-color .25s); 29 | } 30 | &:after 31 | { 32 | left: 0; 33 | width: 18px; 34 | height: 18px; 35 | border: 1px solid $black; 36 | border-radius: 50%; 37 | } 38 | } 39 | &:checked 40 | { 41 | & + label:before 42 | { 43 | background-color: $black; 44 | } 45 | } 46 | &:disabled 47 | { 48 | & + label 49 | { 50 | color: $greyLight; 51 | } 52 | & + label:before 53 | { 54 | border: 1px solid $greyLight; 55 | } 56 | & + label:after 57 | { 58 | border: 1px solid $greyLight; 59 | } 60 | } 61 | 62 | 63 | &--blue 64 | { 65 | & + label { 66 | &:before, 67 | &:after 68 | { 69 | border: 1px solid $blue; 70 | } 71 | } 72 | &:checked 73 | { 74 | & + label:before 75 | { 76 | background-color: $blue; 77 | } 78 | } 79 | } 80 | 81 | } 82 | -------------------------------------------------------------------------------- /src/_scss/rules/_modal.scss: -------------------------------------------------------------------------------- 1 | %modal 2 | { 3 | display: none; 4 | position: fixed; 5 | z-index: 999; 6 | left: 0; 7 | top: 0; 8 | width: 100%; 9 | height: 100%; 10 | overflow: auto; 11 | background-color: rgb(0,0,0); 12 | background-color: rgba(0,0,0,0.4); 13 | 14 | &__header{ 15 | padding: 2px 16px; 16 | 17 | &--border{ 18 | border-bottom: 1px solid $grey; 19 | } 20 | 21 | &--blue{ 22 | background-color: $blue; 23 | color: white; 24 | .modal__close { 25 | color: $white; 26 | } 27 | } 28 | } 29 | 30 | &__content { 31 | position: relative; 32 | background-color: $white; 33 | margin: 15% auto; 34 | padding: 0; 35 | width: 80%; 36 | 37 | box-shadow : 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 38 | 39 | -webkit-animation-name: animatetop; 40 | -webkit-animation-duration: 0.4s; 41 | animation-name: animatetop; 42 | animation-duration: 0.4s; 43 | 44 | } 45 | 46 | &__body { 47 | padding: 2px 16px; 48 | } 49 | 50 | &__footer { 51 | padding: 2px 16px; 52 | 53 | &--border{ 54 | border-top: 1px solid $grey; 55 | } 56 | 57 | &--blue{ 58 | background-color: $blue; 59 | color: white; 60 | } 61 | } 62 | 63 | &__close { 64 | float: right; 65 | font-size: 28px; 66 | font-weight: bold; 67 | color: $grey; 68 | cursor: pointer; 69 | text-decoration: none; 70 | 71 | &:hover, &:focus { 72 | text-decoration: none; 73 | } 74 | } 75 | } 76 | 77 | @-webkit-keyframes animatetop { 78 | from {top: -300px; opacity: 0} 79 | to {top: 0; opacity: 1} 80 | } 81 | 82 | @keyframes animatetop { 83 | from {top: -300px; opacity: 0} 84 | to {top: 0; opacity: 1} 85 | } 86 | -------------------------------------------------------------------------------- /dist/bem-kit.js: -------------------------------------------------------------------------------- 1 | function setActiveTab(t){var i=$(".tabs").find("[data-target='"+t+"']");$.each(i,function(t,i){$(i).hasClass("tabs__item")?($(i).siblings().removeClass("tabs__item--active"),$(i).addClass("tabs__item--active")):$(i).hasClass("tabs__itemv")&&($(i).siblings().removeClass("tabs__itemv--active"),$(i).addClass("tabs__itemv--active"))}),$("html, body").animate({scrollTop:$(t).offset().top},1e3)}function initTab(t,i,a){$("."+t).on("click",function(){var t=$(this).attr("data-target");return setActiveTab(t),window.location.hash=t,!1})}function modalShow(t){$("#"+modalId).show()}function modalHide(t){$("#"+modalId).hide()}var initDropdown=function(){var t=$(".button--dropdown");t.on("click",function(){var t=$(this).find(".button__menu");$(t).stop(!0,!0).delay(50).slideToggle(200)}),t.hover(function(){$(this).stop(!0,!0)},function(){var t=$(this).find(".button__menu");$(t).stop(!0,!0).delay(1e3).slideUp(200)}),$(".button__menu").hover(function(){$(this).stop(!0,!0)},function(){$(this).stop(!0,!0).delay(1e3).slideUp(200)})}(),initTabsEvent=function(){initTab("tabs__item","tabs__item--active","tabs__itemv--active"),initTab("tabs__itemv","tabs__itemv--active","tabs__item--active");var t=window.location.hash;""!==t&&setActiveTab(t)}(),initAlertClose=void $(".alert__close").on("click",function(){return $(this).parent().hide(),!1}),initTableSort=void $(".table__sort--asc, .table__sort--desc").on("click",function(){var t=$(this).attr("sortable");return t&&"true"===t&&$(this).toggleClass("table__sort--asc table__sort--desc"),!1}),initPagination=void $(".pager__page").on("click",function(){var t=$(this).parent().siblings().find(".pager__page");return $(t).removeClass("pager__page--active"),$(this).addClass("pager__page--active"),!1}),initModal=function(){$("[data-show=modal]").click(function(t){var i=$(this).attr("data-target");$("#"+i).show()});$(".modal__close").click(function(t){$(this).parents(".modal").hide()}),$(window).click(function(t){"modal"===t.target.className&&$(t.target).hide()})}();$(document).ready(function(){"use strict"}),$(window).load(function(){"use strict"}); -------------------------------------------------------------------------------- /dist/bem-kit.min.js: -------------------------------------------------------------------------------- 1 | function setActiveTab(t){var i=$(".tabs").find("[data-target='"+t+"']");$.each(i,function(t,i){$(i).hasClass("tabs__item")?($(i).siblings().removeClass("tabs__item--active"),$(i).addClass("tabs__item--active")):$(i).hasClass("tabs__itemv")&&($(i).siblings().removeClass("tabs__itemv--active"),$(i).addClass("tabs__itemv--active"))}),$("html, body").animate({scrollTop:$(t).offset().top},1e3)}function initTab(t,i,a){$("."+t).on("click",function(){var t=$(this).attr("data-target");return setActiveTab(t),window.location.hash=t,!1})}function modalShow(t){$("#"+modalId).show()}function modalHide(t){$("#"+modalId).hide()}var initDropdown=function(){var t=$(".button--dropdown");t.on("click",function(){var t=$(this).find(".button__menu");$(t).stop(!0,!0).delay(50).slideToggle(200)}),t.hover(function(){$(this).stop(!0,!0)},function(){var t=$(this).find(".button__menu");$(t).stop(!0,!0).delay(1e3).slideUp(200)}),$(".button__menu").hover(function(){$(this).stop(!0,!0)},function(){$(this).stop(!0,!0).delay(1e3).slideUp(200)})}(),initTabsEvent=function(){initTab("tabs__item","tabs__item--active","tabs__itemv--active"),initTab("tabs__itemv","tabs__itemv--active","tabs__item--active");var t=window.location.hash;""!==t&&setActiveTab(t)}(),initAlertClose=void $(".alert__close").on("click",function(){return $(this).parent().hide(),!1}),initTableSort=void $(".table__sort--asc, .table__sort--desc").on("click",function(){var t=$(this).attr("sortable");return t&&"true"===t&&$(this).toggleClass("table__sort--asc table__sort--desc"),!1}),initPagination=void $(".pager__page").on("click",function(){var t=$(this).parent().siblings().find(".pager__page");return $(t).removeClass("pager__page--active"),$(this).addClass("pager__page--active"),!1}),initModal=function(){$("[data-show=modal]").click(function(t){var i=$(this).attr("data-target");$("#"+i).show()});$(".modal__close").click(function(t){$(this).parents(".modal").hide()}),$(window).click(function(t){"modal"===t.target.className&&$(t.target).hide()})}();$(document).ready(function(){"use strict"}),$(window).load(function(){"use strict"}); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # :ok_woman: BEM-Kit 2 | 3 | ![BEM-KIT CSS](https://raw.githubusercontent.com/mazipan/bem-kit/master/demo/images/brand-blue.png) 4 | 5 | > CSS UI kit with BEM convention and SASS 6 | 7 | [![License](https://img.shields.io/github/license/mazipan/bem-kit.svg?maxAge=3600)](https://github.com/mazipan/bem-kit) [![GitHub Star](https://img.shields.io/github/stars/mazipan/bem-kit.svg?maxAge=3600)](https://github.com/mazipan/bem-kit/stargazers) [![version](https://img.shields.io/npm/v/bem-kit.svg?maxAge=3600)](https://www.npmjs.com/package/bem-kit) 8 | 9 | ## Homepage 10 | 11 | https://mazipan.github.io/bem-kit/ 12 | 13 | ## Why BEM-Kit ? 14 | 15 | - Using beautiful classname with BEM standard. 16 | - All component was crafted from zero. 17 | - You can choose to import RULES only without produce any css classes. 18 | - You can customize your own classname with rules we provided. 19 | - You can partialy import from our available component. 20 | - Full SASS modular code. 21 | 22 | ## Downloads 23 | 24 | https://github.com/mazipan/bem-kit/wiki/Downloads 25 | 26 | ## How to use 27 | 28 | https://github.com/mazipan/bem-kit/wiki/How-to-use 29 | 30 | ## Supported Components 31 | 32 | https://github.com/mazipan/bem-kit/wiki/Supported-Components 33 | 34 | ## Cheatsheets 35 | 36 | https://github.com/mazipan/bem-kit/wiki/Cheatsheets 37 | 38 | ## Contributing 39 | 40 | If you'd like to contribute, head to the [contributing guidelines](/CONTRIBUTING.md). Inside you'll find directions for opening issues, coding standards, and notes on development. 41 | 42 | Contact Me : 43 | 44 | [![Email](https://img.shields.io/badge/mazipanneh-Email-yellow.svg?maxAge=3600)](mailto:mazipanneh@gmail.com) 45 | [![Website](https://img.shields.io/badge/mazipanneh-Blog-brightgreen.svg?maxAge=3600)](https://mazipanneh.com/blog/) 46 | [![Facebook](https://img.shields.io/badge/mazipanneh-Facebook-blue.svg?maxAge=3600)](https://facebook.com/mazipanneh) 47 | 48 | [![Twitter](https://img.shields.io/badge/Maz_Ipan-Twitter-55acee.svg?maxAge=3600)](https://twitter.com/Maz_Ipan) 49 | [![Linkedin](https://img.shields.io/badge/irfanmaulanamazipan-Linkedin-0077b5.svg?maxAge=3600)](https://id.linkedin.com/in/irfanmaulanamazipan) 50 | [![Slideshare](https://img.shields.io/badge/IrfanMaulana21-Slideshare-0077b5.svg?maxAge=3600)](https://www.slideshare.net/IrfanMaulana21) 51 | -------------------------------------------------------------------------------- /src/_scss/mixins/_transitions.scss: -------------------------------------------------------------------------------- 1 | // Transform: translate3d 2 | @mixin translate3d($x, $y, $z) 3 | { 4 | -webkit-transform: translate3d($x, $y, $z); 5 | transform: translate3d($x, $y, $z); 6 | } 7 | 8 | // Transform: translate XY 9 | @mixin translate($x, $y) 10 | { 11 | -webkit-transform: translate($x, $y); 12 | -ms-transform: translate($x, $y); 13 | -o-transform: translate($x, $y); 14 | transform: translate($x, $y); 15 | } 16 | 17 | // Transform: translate X 18 | @mixin translateX($x) 19 | { 20 | -webkit-transform: translateX($x); 21 | -ms-transform: translateX($x); 22 | -o-transform: translateX($x); 23 | transform: translateX($x); 24 | } 25 | // Transform: translate Y 26 | @mixin translateY($y) 27 | { 28 | -webkit-transform: translateY($y); 29 | -ms-transform: translateY($y); 30 | -o-transform: translateY($y); 31 | transform: translateY($y); 32 | } 33 | 34 | // Backface-visibility 35 | @mixin backface-visibility($backface) 36 | { 37 | -webkit-backface-visibility: $backface; 38 | -moz-backface-visibility: $backface; 39 | -ms-backface-visibility: $backface; 40 | -o-backface-visibility: $backface; 41 | backface-visibility: $backface; 42 | } 43 | 44 | // Transform: rotate 45 | @mixin rotate($degrees) 46 | { 47 | -webkit-transform: rotate($degrees); 48 | -ms-transform: rotate($degrees); 49 | -o-transform: rotate($degrees); 50 | transform: rotate($degrees); 51 | } 52 | 53 | // Transitions 54 | @mixin transition($transition...) 55 | { 56 | -webkit-transition: $transition; 57 | -moz-transition: $transition; 58 | -ms-transition: $transition; 59 | -o-transition: $transition; 60 | transition: $transition; 61 | } 62 | 63 | // Transition Delay 64 | @mixin transition-delay($transition-delay) 65 | { 66 | -webkit-transition-delay: $transition-delay; 67 | transition-delay: $transition-delay; 68 | } 69 | 70 | // Transitions : transform 71 | @mixin transition-transform($transition...) 72 | { 73 | -webkit-transition: -webkit-transform $transition; 74 | -moz-transition: -moz-transform $transition; 75 | -o-transition: -o-transform $transition; 76 | transition: transform $transition; 77 | } 78 | -------------------------------------------------------------------------------- /src/_scss/rules/_checkboxes.scss: -------------------------------------------------------------------------------- 1 | %checkbox 2 | { 3 | position: absolute; 4 | left: -9999px; 5 | 6 | & + label 7 | { 8 | position: relative; 9 | display: inline-block; 10 | padding: 6px 30px; 11 | cursor: pointer; 12 | 13 | &:before 14 | { 15 | position: absolute; 16 | top: 4px; 17 | left: 0; 18 | width: 18px; 19 | height: 18px; 20 | border: 1px solid $greyLight; 21 | border-radius: 1px; 22 | background-color: $white; 23 | content: ''; 24 | } 25 | &:after 26 | { 27 | position: absolute; 28 | color: $white; 29 | content: ''; 30 | 31 | border-top: 2px solid transparent; 32 | border-left: 2px solid transparent; 33 | border-right: 2px solid $white; 34 | border-bottom: 2px solid $white; 35 | 36 | @include rotate(37deg); 37 | @include transition(border .25s, background-color .25s); 38 | 39 | -webkit-transform-origin: 100% 100%; 40 | transform-origin: 100% 100%; 41 | } 42 | } 43 | &:not(:checked) + label:after 44 | { 45 | width: 0; 46 | height: 0; 47 | top: 6px; 48 | left: 1px; 49 | } 50 | &:checked 51 | { 52 | & + label:before 53 | { 54 | border-color: $black; 55 | background-color: $black; 56 | } 57 | & + label:after 58 | { 59 | width: 8px; 60 | height: 13px; 61 | top: 6px; 62 | left: 1px; 63 | } 64 | } 65 | &:disabled 66 | { 67 | & + label 68 | { 69 | color: $greyLight; 70 | } 71 | & + label:before 72 | { 73 | border-color: $greyLight; 74 | background-color: $greyLighter; 75 | box-shadow: none; 76 | } 77 | & + label:after 78 | { 79 | display: none; 80 | } 81 | } 82 | 83 | &--blue 84 | { 85 | &:checked 86 | { 87 | & + label:before 88 | { 89 | border-color: $blue; 90 | background-color: $blue; 91 | } 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /src/_scss/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 2 | html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"], 3 | [type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,/* 1 */ 4 | menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none} -------------------------------------------------------------------------------- /src/_scss/helpers/_colors.scss: -------------------------------------------------------------------------------- 1 | 2 | // primary color 3 | $white : #fff !default; 4 | $black : #000 !default; 5 | $grey : #999 !default; 6 | $red : #F8011E !default; 7 | $green : #00B35E !default; 8 | $lime : #89C747 !default; 9 | $blue : #0096D9 !default; 10 | $yellow : #ff9700 !default; 11 | $orange : #F7931E !default; 12 | $brown : #6A453C !default; 13 | $magenta : #F50089 !default; 14 | 15 | // social media 16 | $facebook-color : #4C66A4; 17 | $googleplus-color : #DD4B39; 18 | $pinterest-color : #CB2027; 19 | $twitter-color : #2FC2EF; 20 | $youtube-color : #CD201F; 21 | $instagram-color : #262626; 22 | 23 | // secondary color 24 | $blackDark : darken($black,10%) !default; 25 | $blackDarker : darken($black,20%) !default; 26 | $blackLight : lighten($black,10%) !default; 27 | $blackLighter : lighten($black,20%) !default; 28 | 29 | $blueDark : darken($blue,10%) !default; 30 | $blueDarker : darken($blue,20%) !default; 31 | $blueLight : lighten($blue,10%) !default; 32 | $blueLighter : lighten($blue,20%) !default; 33 | 34 | $greenDark : darken($green,10%) !default; 35 | $greenDarker : darken($green,20%) !default; 36 | $greenLight : lighten($green,10%) !default; 37 | $greenLighter : lighten($green,20%) !default; 38 | 39 | $greyDark : #333 !default; 40 | $greyDarker : #666 !default; 41 | $greyLight : #CCC !default; 42 | $greyLighter : #F2F2F2 !default; 43 | 44 | $orangeDark : darken($orange,10%) !default; 45 | $orangeDarker : darken($orange,20%) !default; 46 | $orangeLight : lighten($orange,10%) !default; 47 | $orangeLighter : lighten($orange,20%) !default; 48 | 49 | $redDark : darken($red,10%) !default; 50 | $redDarker : darken($red,20%) !default; 51 | $redLight : lighten($red,10%) !default; 52 | $redLighter : lighten($red,20%) !default; 53 | 54 | $brownDark : darken($brown,10%) !default; 55 | $brownDarker : darken($brown,20%) !default; 56 | $brownLight : lighten($brown,10%) !default; 57 | $brownLighter : lighten($brown,20%) !default; 58 | 59 | $yellowLighter : lighten(yellow,20%) !default;; 60 | 61 | $buttonVariansName : green, red, blue, orange, gray, white; 62 | $buttonVariansHex : $green, $red, $blue, $orange, $grey, $white; 63 | $buttonVariansHover : $greenLight, $redLight, $blueLight, $orangeLight, $greyLight, $white; 64 | $buttonVariansFont : $white, $white, $white, $white, $black, $black; -------------------------------------------------------------------------------- /src/_scss/rules/_buttons.scss: -------------------------------------------------------------------------------- 1 | %button 2 | { 3 | 4 | display: inline-block; 5 | padding: 13px 20px; 6 | outline: none; 7 | border: none; 8 | text-align: center; 9 | text-decoration: none; 10 | cursor: pointer; 11 | 12 | @include appearance(none); 13 | 14 | &:hover, &:focus, &:active 15 | { 16 | text-decoration: none; 17 | } 18 | 19 | &--radius{ 20 | @include border-radius(.25em); 21 | } 22 | 23 | @for $i from 1 through length($buttonVariansName) { 24 | &--#{nth($buttonVariansName, $i)} { 25 | background: nth($buttonVariansHex, $i); 26 | color: nth($buttonVariansFont, $i); 27 | 28 | &:hover 29 | { 30 | background: nth($buttonVariansHover, $i); 31 | color: nth($buttonVariansFont, $i); 32 | } 33 | } 34 | } 35 | 36 | @for $j from 1 through length($buttonVariansName) { 37 | &-outline--#{nth($buttonVariansName, $j)} { 38 | border: 1px solid nth($buttonVariansHex, $j); 39 | background: transparent; 40 | color: nth($buttonVariansHex, $j); 41 | 42 | &:hover 43 | { 44 | border: 1px solid nth($buttonVariansHover, $j); 45 | color: nth($buttonVariansHover, $j); 46 | } 47 | } 48 | } 49 | 50 | 51 | &--dropdown{ 52 | padding: 10px 12px 10px 0; 53 | 54 | &:after{ 55 | content: '\25BE'; 56 | font-size: 2rem; 57 | position: relative; 58 | float: right; 59 | padding-left: 1em; 60 | margin-top: -6px; 61 | height: 0; 62 | } 63 | } 64 | 65 | &__menu{ 66 | display: none; 67 | position: absolute; 68 | z-index: 2; 69 | min-width: 160px; 70 | border: 1px solid $greyLight; 71 | background-color: $white; 72 | margin-top: .8em; 73 | text-align: left; 74 | @extend %reset-list; 75 | 76 | li{ 77 | a{ 78 | text-decoration: none; 79 | display: block; 80 | padding: 7px 20px; 81 | clear: both; 82 | white-space: nowrap; 83 | color: $black; 84 | border-bottom: 1px solid $greyLight; 85 | 86 | &:hover{ 87 | background-color: $greyLight; 88 | } 89 | } 90 | 91 | &:last-child{ 92 | a{ 93 | border: 0; 94 | } 95 | } 96 | } 97 | } 98 | 99 | } 100 | -------------------------------------------------------------------------------- /Gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | 3 | var autoprefixer = require('gulp-autoprefixer'); 4 | var browserSync = require('browser-sync').create(); 5 | var clean = require('gulp-clean'); 6 | var cleanCSS = require('gulp-clean-css'); 7 | var header = require('gulp-header'); 8 | var pump = require('pump'); 9 | var rename = require("gulp-rename"); 10 | var sass = require('gulp-sass'); 11 | var sourcemaps = require('gulp-sourcemaps'); 12 | var uglify = require('gulp-uglify'); 13 | var gzip = require('gulp-gzip'); 14 | 15 | var input = ['./src/**/*.scss']; 16 | var output = './dist'; 17 | 18 | var pkg = require('./package.json'); 19 | var banner = ['/*!', 20 | ' * <%= pkg.name %> v<%= pkg.version %>', 21 | ' * @author : Irfan Maulana', 22 | ' * https://github.com/mazipan/bem-kit', 23 | ' */', 24 | '' 25 | ].join('\n'); 26 | 27 | var autoprefixerOptions = { 28 | browsers: ['last 2 versions', '> 5%', 'Firefox ESR'] 29 | }; 30 | 31 | var sassOptions = { 32 | outputStyle: 'compact' 33 | }; 34 | 35 | gulp.task('clean', function() { 36 | return gulp.src([output], { read: false }) 37 | .pipe(clean({ force: true })); 38 | }); 39 | 40 | gulp.task('serve', ['simple-sass'], function() { 41 | 42 | browserSync.init({ 43 | port: 3000, 44 | server: "./demo" 45 | }); 46 | 47 | gulp.watch(input, ['simple-sass']); 48 | gulp.watch("./demo/*.html").on('change', browserSync.reload); 49 | }); 50 | 51 | gulp.task('simple-sass', function() { 52 | return gulp 53 | .src(input) 54 | .pipe(sass(sassOptions).on('error', sass.logError)) 55 | .pipe(autoprefixer(autoprefixerOptions)) 56 | .pipe(gulp.dest('./demo/dist')) 57 | .pipe(browserSync.stream()); 58 | }); 59 | 60 | gulp.task('sass', ['clean'], function() { 61 | return gulp 62 | .src(input) 63 | .pipe(sass(sassOptions)) 64 | .pipe(autoprefixer(autoprefixerOptions)) 65 | .pipe(header(banner, { pkg: pkg })) 66 | .pipe(gulp.dest(output)); 67 | }); 68 | 69 | gulp.task('uglify-js', ['clean'], function(cb) { 70 | 71 | var uglifyOptions = { 72 | mangle: true, 73 | preserveComments: 'license' 74 | }; 75 | 76 | pump([ 77 | gulp.src('./src/*.js'), 78 | uglify(), 79 | gulp.dest(output) 80 | ], cb); 81 | 82 | }); 83 | 84 | gulp.task('rename', ['sass', 'uglify-js'], function() { 85 | return gulp.src(["./dist/*.css", "./dist/*.js"]) 86 | .pipe(rename(function(path) { 87 | path.basename += ".min"; 88 | })) 89 | .pipe(gulp.dest(output)); 90 | }); 91 | 92 | gulp.task('minify-css', ['rename'], function() { 93 | return gulp.src('./dist/*.min.css') 94 | .pipe(cleanCSS({ compatibility: 'ie8' })) 95 | .pipe(gulp.dest(output)); 96 | }); 97 | 98 | 99 | gulp.task('gzip', ['rename'], function() { 100 | return gulp.src(["./dist/*.min.css", "./dist/*.min.js"]) 101 | .pipe(gzip()) 102 | .pipe(gulp.dest(output)); 103 | }); 104 | 105 | 106 | gulp.task('build:prod', ['clean', 'sass', 'uglify-js', 'rename', 'minify-css', 'gzip']); 107 | gulp.task('build:dev', ['clean', 'sass', 'serve']); 108 | gulp.task('default', ['build:dev']); 109 | -------------------------------------------------------------------------------- /src/bem-kit.js: -------------------------------------------------------------------------------- 1 | /* 2 | DROPDOWN 3 | */ 4 | var initDropdown = (function(){ 5 | var item = $('.button--dropdown'); 6 | item.on('click', function(){ 7 | var target = $(this).find('.button__menu'); 8 | $(target).stop(true, true).delay(50).slideToggle(200); 9 | }); 10 | 11 | item.hover(function(){ 12 | $(this).stop(true, true); 13 | }, function(){ 14 | var target = $(this).find('.button__menu'); 15 | $(target).stop(true, true).delay(1000).slideUp(200); 16 | }); 17 | 18 | var menu = $('.button__menu'); 19 | menu.hover(function(){ 20 | $(this).stop(true, true); 21 | }, function(){ 22 | $(this).stop(true, true).delay(1000).slideUp(200); 23 | }); 24 | 25 | })(); 26 | 27 | /* 28 | TABS 29 | */ 30 | function setActiveTab(target){ 31 | var tabsActive = $(".tabs").find("[data-target='" + target + "']"); 32 | 33 | $.each(tabsActive, function(i, el){ 34 | if($(el).hasClass('tabs__item')){ 35 | $(el).siblings().removeClass('tabs__item--active'); 36 | $(el).addClass('tabs__item--active'); 37 | }else if($(el).hasClass('tabs__itemv')){ 38 | $(el).siblings().removeClass('tabs__itemv--active'); 39 | $(el).addClass('tabs__itemv--active'); 40 | } 41 | }); 42 | 43 | $('html, body').animate({ 44 | scrollTop: $(target).offset().top 45 | }, 1000); 46 | } 47 | 48 | function initTab(tabClass, tabActiveClass, otherTabActiveClass){ 49 | var itemv = $('.' + tabClass); 50 | itemv.on('click', function(){ 51 | var target = $(this).attr('data-target'); 52 | setActiveTab(target); 53 | 54 | window.location.hash = target; 55 | return false; 56 | }); 57 | } 58 | 59 | var initTabsEvent = (function(){ 60 | 61 | initTab('tabs__item', 'tabs__item--active', 62 | 'tabs__itemv--active'); 63 | 64 | initTab('tabs__itemv', 'tabs__itemv--active', 65 | 'tabs__item--active'); 66 | 67 | var urlHash = window.location.hash; 68 | if (urlHash !== "") { 69 | setActiveTab(urlHash); 70 | } 71 | })(); 72 | 73 | /* 74 | ALERT 75 | */ 76 | var initAlertClose = (function(){ 77 | var item = $('.alert__close'); 78 | item.on('click', function(){ 79 | $(this).parent().hide(); 80 | return false; 81 | }); 82 | })(); 83 | 84 | /* 85 | SORT TABLE 86 | */ 87 | var initTableSort = (function(){ 88 | var item = $('.table__sort--asc, .table__sort--desc'); 89 | item.on('click', function(){ 90 | var sortable = $(this).attr('sortable'); 91 | if(sortable && sortable === 'true'){ 92 | $(this).toggleClass('table__sort--asc table__sort--desc'); 93 | } 94 | return false; 95 | }); 96 | })(); 97 | 98 | /* 99 | PAGINATION 100 | */ 101 | var initPagination = (function(){ 102 | var item = $('.pager__page'); 103 | item.on('click', function(){ 104 | var allPager = $(this).parent().siblings().find('.pager__page'); 105 | $(allPager).removeClass('pager__page--active'); 106 | 107 | $(this).addClass('pager__page--active'); 108 | 109 | return false; 110 | }); 111 | })(); 112 | 113 | /* 114 | MODAL 115 | */ 116 | var initModal = (function(){ 117 | 118 | var triggerBtn = $('[data-show=modal]').click(function(event){ 119 | var modalId = $(this).attr('data-target'); 120 | $('#' + modalId).show(); 121 | }); 122 | 123 | $('.modal__close').click(function(event){ 124 | $(this).parents('.modal').hide(); 125 | }); 126 | 127 | $(window).click(function(event){ 128 | if (event.target.className === 'modal') { 129 | $(event.target).hide(); 130 | } 131 | }); 132 | 133 | })(); 134 | 135 | function modalShow(elementId){ 136 | $('#' + modalId).show(); 137 | } 138 | 139 | function modalHide(elementId){ 140 | $('#' + modalId).hide(); 141 | } 142 | 143 | $(document).ready(function () { 144 | 'use strict'; 145 | 146 | initDropdown; 147 | initTabsEvent; 148 | initAlertClose; 149 | initTableSort; 150 | initPagination; 151 | initModal; 152 | 153 | }); 154 | 155 | $(window).load(function(){ 156 | 'use strict'; 157 | }); -------------------------------------------------------------------------------- /dist/demo.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * bem-kit v0.0.8 3 | * @author : Irfan Maulana 4 | * https://github.com/mazipan/bem-kit 5 | */.main__usp,.nav__tabs{margin:0;padding:0;list-style:none}.site__main{*zoom:1}.site__main:after,.site__main:before{display:table;content:' '}.site__main:after{clear:both}.content__wrapper,.main__row{*zoom:1;margin:0 auto;max-width:92.308em}.content__wrapper:after,.content__wrapper:before,.main__row:after,.main__row:before{display:table;content:' '}.content__wrapper:after,.main__row:after{clear:both}.main__nav{float:left;width:100%}@media (min-width:768px){.main__nav{width:16.66667%}}.content__col-sm{float:left;width:100%}@media (min-width:768px){.content__col-sm{width:33.33333%}}.content__col-lg{float:left;width:100%}@media (min-width:768px){.content__col-lg{width:66.66667%}}.main__content{float:left;width:100%}@media (min-width:768px){.main__content{width:83.33333%}}@-webkit-keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}@keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}.site{margin:0}.site__main{margin-top:60px}.main--center{text-align:center}.main__title{font-size:4rem}.main__usp{margin:0 0 5em 0}.main__usp li{padding:.5em 0;font-size:2rem}.main__jumbotron{width:100%;height:500px;background-color:#0096d9;text-align:center}.main__jumbotron h1{color:#fff;font-size:5rem}.main__jumbotron h2{color:#fff;font-weight:400}.main__jumbotron-wrapper{margin:0 auto;padding-top:10em;padding-left:3em}@media screen and (max-width:640px){.main__nav{display:none}}.main__content{padding:20px}.header{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.075);box-shadow:0 1px 2px rgba(0,0,0,.075);position:fixed;top:0;z-index:100;width:100%;height:60px;background:rgba(255,255,255,.95294)}.header__wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.header__brand{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:.2em}.header__brand img{height:45px}.header__title{font-style:italic;font-size:1.8rem;font-weight:500;margin-left:.5em}.header__nav{margin-right:2em}.header__nav a{color:#1a1a1a;text-decoration:none;font-size:1.2rem}.header__nav a:hover{color:#000}@media screen and (max-width:640px){.header__nav{display:none}}.content__title{padding:7px 0;border-bottom:1px solid #999}.content__wrapper{padding:10px 0}.grid__flex,.grid__row{margin:2px 0}.grid__item{width:100%;padding:1em 0;border:1px solid #999;text-align:center}.grid__col-1{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-2{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-3{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-4{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-5{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-6{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-7{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-8{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-9{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-10{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-11{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-12{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-13{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-14{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-15{padding:1em 0;border:1px solid #999;text-align:center}.grid__col-16{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-1{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-2{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-3{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-4{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-5{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-6{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-7{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-8{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-9{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-10{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-11{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-12{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-13{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-14{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-15{padding:1em 0;border:1px solid #999;text-align:center}.grid__offset-16{padding:1em 0;border:1px solid #999;text-align:center}.button,.label{margin:.1em}.popover{text-align:center;padding:1em 0;border:1px solid #999}.card{display:inline-block;width:25%;margin:1em 0 0 1em;height:150px}.footer{margin:0 auto;padding:20px 0;background:#0096d9;color:#fff}.footer__wrapper{text-align:center}.footer__text{font-size:.9rem}.footer__list{display:block;margin:0;padding:0;list-style:none}.footer__icon{display:inline-block;margin:0 5px;font-size:1.6rem}.footer__icon i{color:#fff} -------------------------------------------------------------------------------- /src/demo.scss: -------------------------------------------------------------------------------- 1 | @import "_all-mixins"; 2 | @import "_all-rules"; 3 | 4 | /* 5 | -- SITE BLOCK -- 6 | * every block should in seperate file 7 | * for demo I combine into one file 8 | */ 9 | 10 | .site { 11 | margin: 0; 12 | &__main { 13 | margin-top: 60px; 14 | @extend %clearfix; 15 | } 16 | } 17 | 18 | 19 | /* 20 | -- MAIN BLOCK -- 21 | */ 22 | 23 | .main { 24 | &--center { 25 | text-align: center; 26 | } 27 | &__usp{ 28 | 29 | } 30 | &__title { 31 | font-size: 4rem; 32 | } 33 | &__usp{ 34 | @extend %reset-list; 35 | margin: 0 0 5em 0; 36 | 37 | li{ 38 | padding: .5em 0; 39 | font-size: 2rem; 40 | } 41 | } 42 | &__jumbotron { 43 | width: 100%; 44 | height: 500px; 45 | background-color: $blue; 46 | text-align: center; 47 | h1 { 48 | color: #fff; 49 | font-size: 5rem; 50 | } 51 | h2 { 52 | color: #fff; 53 | font-weight: normal; 54 | } 55 | &-wrapper { 56 | margin: 0 auto; 57 | padding-top: 10em; 58 | padding-left: 3em; 59 | } 60 | } 61 | &__row { 62 | @extend %row; 63 | } 64 | &__nav { 65 | @extend %col-2; 66 | @media screen and (max-width: 640px) { 67 | display: none; 68 | } 69 | } 70 | &__content { 71 | @extend %col-10; 72 | padding: 20px; 73 | } 74 | } 75 | 76 | 77 | /* 78 | -- HEADER BLOCK -- 79 | */ 80 | 81 | .header { 82 | @include box-shadow(0 1px 2px rgba(0, 0, 0, 0.075)); 83 | position: fixed; 84 | top: 0; 85 | z-index: 100; 86 | width: 100%; 87 | height: 60px; 88 | background: rgba(255, 255, 255, .95294); 89 | &__wrapper { 90 | display: flex; 91 | justify-content: space-between; 92 | align-items: center; 93 | } 94 | &__brand { 95 | display: flex; 96 | justify-content: space-between; 97 | align-items: center; 98 | margin: .2em; 99 | img { 100 | height: 45px; 101 | } 102 | } 103 | &__title { 104 | font-style: italic; 105 | font-size: 1.8rem; 106 | font-weight: 500; 107 | margin-left: .5em; 108 | } 109 | &__nav { 110 | margin-right: 2em; 111 | a { 112 | color: $blackLight; 113 | text-decoration: none; 114 | font-size: 1.2rem; 115 | &:hover { 116 | color: $blackDark; 117 | } 118 | } 119 | @media screen and (max-width:640px) { 120 | display: none; 121 | } 122 | } 123 | } 124 | 125 | 126 | /* 127 | -- NAVIGATION BLOCK -- 128 | */ 129 | 130 | .nav { 131 | &__tabs { 132 | @extend %tabs; 133 | } 134 | } 135 | 136 | 137 | /* 138 | -- CONTENT BLOCK -- 139 | */ 140 | 141 | .content { 142 | &__title { 143 | padding: 7px 0; 144 | border-bottom: 1px solid $grey; 145 | } 146 | &__wrapper { 147 | @extend %row; 148 | padding: 10px 0; 149 | } 150 | &__col-sm { 151 | @extend %col-4; 152 | } 153 | &__col-lg { 154 | @extend %col-8; 155 | } 156 | } 157 | 158 | 159 | /* 160 | -- GRID BLOCK -- 161 | */ 162 | 163 | .grid { 164 | &__flex, 165 | &__row { 166 | margin: 2px 0; 167 | } 168 | &__item { 169 | width: 100%; 170 | padding: 1em 0; 171 | border: 1px solid $grey; 172 | text-align: center; 173 | } 174 | $columnCount: 16 !default; 175 | $break-medium: 63.750em; 176 | @for $i from 1 through $columnCount { 177 | &__col-#{$i} { 178 | padding: 1em 0; 179 | border: 1px solid $grey; 180 | text-align: center; 181 | } 182 | } 183 | @for $i from 1 through $columnCount { 184 | &__offset-#{$i} { 185 | padding: 1em 0; 186 | border: 1px solid $grey; 187 | text-align: center; 188 | } 189 | } 190 | } 191 | 192 | 193 | /* 194 | -- FOR DEMO ONLY -- 195 | */ 196 | 197 | .button, .label { 198 | margin: .1em; 199 | } 200 | 201 | .popover { 202 | text-align: center; 203 | padding: 1em 0; 204 | border: 1px solid $grey; 205 | } 206 | 207 | .card { 208 | display: inline-block; 209 | width: 25%; 210 | margin: 1em 0 0 1em; 211 | height: 150px; 212 | } 213 | 214 | 215 | /* 216 | -- FOOTER BLOCK -- 217 | */ 218 | 219 | .footer { 220 | margin: 0 auto; 221 | padding: 20px 0; 222 | background: $blue; 223 | color: #fff; 224 | &__wrapper { 225 | text-align: center; 226 | } 227 | &__text { 228 | font-size: .9rem; 229 | } 230 | &__list { 231 | display: block; 232 | margin: 0; 233 | padding: 0; 234 | list-style: none; 235 | } 236 | &__icon { 237 | display: inline-block; 238 | margin: 0 5px; 239 | font-size: 1.6rem; 240 | i { 241 | color: #fff; 242 | } 243 | } 244 | } 245 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to BEM-Kit 2 | 3 | Looking to contribute something? **Here's how you can help.** 4 | 5 | Please take a moment to review this document in order to make the contribution process easy and effective for everyone in the community. 6 | 7 | ## Using the issue tracker 8 | 9 | The issue tracker is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](#pull-requests), but please respect the following 10 | restrictions: 11 | 12 | * Please **do not** use the issue tracker for personal support requests. Please [email me](mailto:mazipanneh@gmail.com) or [send me a tweet](https://twitter.com/Maz_Ipan) as they are better places to get help. 13 | 14 | * Please **do not** derail or troll issues. Keep the discussion on topic and respect the opinions of others. 15 | 16 | ## Bug reports 17 | 18 | A bug is a _demonstrable problem_ that is caused by the code in the repository. Good bug reports are extremely helpful, so thanks! 19 | 20 | Guidelines for bug reports: 21 | 22 | 1. **Use the GitHub issue search** — check if the issue has already been reported. 23 | 24 | 2. **Check if the issue has been fixed** — try to reproduce it using the latest `master` or development branch in the repository. 25 | 26 | 3. **Isolate the problem** — ideally create a [reduced test case](https://css-tricks.com/reduced-test-cases/). 27 | 28 | 29 | A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? Do other browsers show the bug differently? What would you expect to be the outcome? All these details will help people to fix any potential bugs. 30 | 31 | Example: 32 | 33 | > Short and descriptive example bug report title 34 | > 35 | > A summary of the issue and the browser/OS environment in which it occurs. If 36 | > suitable, include the steps required to reproduce the bug. 37 | > 38 | > 1. This is the first step 39 | > 2. This is the second step 40 | > 3. Further steps, etc. 41 | > 42 | > `` - a link to the reduced test case 43 | > 44 | > Any other information you want to share that is relevant to the issue being 45 | > reported. This might include the lines of code that you have identified as 46 | > causing the bug, and potential solutions (and your opinions on their 47 | > merits). 48 | 49 | 50 | ## Feature requests 51 | 52 | Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project. It's up to *you* to make a strong case to convince the project's developers of the merits of this feature. Please provide as much detail and context as possible. 53 | 54 | 55 | ## Pull requests 56 | 57 | Good pull requests—patches, improvements, new features—are a fantastic help. They should remain focused in scope and avoid containing unrelated commits. 58 | 59 | **Please ask first** before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project. 60 | 61 | Please adhere to the [coding guidelines](#code-guidelines) used throughout the project (indentation, accurate comments, etc.) and any other requirements (such as test coverage). 62 | 63 | Adhering to the following process is the best way to get your work included in the project: 64 | 65 | 1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork, 66 | and configure the remotes: 67 | 68 | ```bash 69 | # Clone your fork of the repo into the current directory 70 | git clone https://github.com// 71 | # Navigate to the newly cloned directory 72 | cd 73 | # Assign the original repo to a remote called "upstream" 74 | git remote add upstream https://github.com/mazipan/vue-currency-filter 75 | ``` 76 | 77 | 2. If you cloned a while ago, get the latest changes from upstream: 78 | 79 | ```bash 80 | git checkout master 81 | git pull upstream master 82 | ``` 83 | 84 | 3. Create a new topic branch (off the main project development branch) to 85 | contain your feature, change, or fix: 86 | 87 | ```bash 88 | git checkout -b 89 | ``` 90 | 91 | 4. Make sure to update, or add to the tests when appropriate. **Patches and 92 | features will not be accepted without tests.** Run `npm test` to check that 93 | all tests pass after you've made changes. 94 | 95 | 5. Locally merge (or rebase) the upstream development branch into your topic branch: 96 | 97 | ```bash 98 | git pull [--rebase] upstream master 99 | ``` 100 | 101 | 6. Push your topic branch up to your fork: 102 | 103 | ```bash 104 | git push origin 105 | ``` 106 | 107 | 7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) 108 | with a clear title and description against the `master` branch. 109 | 110 | **IMPORTANT**: By submitting a patch, you agree to allow the project owners to 111 | license your work under the terms of the [MIT License](LICENSE). 112 | 113 | 114 | ## Code guidelines 115 | 116 | ### HTML 117 | 118 | - Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags). 119 | 120 | ### JS 121 | 122 | - No semicolons (in client-side JS) 123 | - 2 spaces (no tabs) 124 | - Don't use jQuery (no "$" allowed) 125 | 126 | ### Checking code 127 | 128 | Run `npm run dev` before committing to ensure your changes follow our coding standards. 129 | 130 | 131 | ## License 132 | 133 | By contributing your code, you agree to license your contribution under the [MIT License](LICENSE). 134 | -------------------------------------------------------------------------------- /dist/demo.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * bem-kit v0.0.8 3 | * @author : Irfan Maulana 4 | * https://github.com/mazipan/bem-kit 5 | */ 6 | .nav__tabs, .main__usp { margin: 0; padding: 0; list-style: none; } 7 | 8 | .site__main { *zoom: 1; } 9 | 10 | .site__main:before, .site__main:after { display: table; content: ' '; } 11 | 12 | .site__main:after { clear: both; } 13 | 14 | .main__row, .content__wrapper { *zoom: 1; margin: 0 auto; max-width: 92.308em; } 15 | 16 | .main__row:before, .content__wrapper:before, .main__row:after, .content__wrapper:after { display: table; content: ' '; } 17 | 18 | .main__row:after, .content__wrapper:after { clear: both; } 19 | 20 | .main__nav { float: left; width: 100%; } 21 | 22 | @media (min-width: 768px) { .main__nav { width: 16.66667%; } } 23 | 24 | .content__col-sm { float: left; width: 100%; } 25 | 26 | @media (min-width: 768px) { .content__col-sm { width: 33.33333%; } } 27 | 28 | .content__col-lg { float: left; width: 100%; } 29 | 30 | @media (min-width: 768px) { .content__col-lg { width: 66.66667%; } } 31 | 32 | .main__content { float: left; width: 100%; } 33 | 34 | @media (min-width: 768px) { .main__content { width: 83.33333%; } } 35 | 36 | @-webkit-keyframes animatetop { from { top: -300px; 37 | opacity: 0; } 38 | to { top: 0; 39 | opacity: 1; } } 40 | 41 | @keyframes animatetop { from { top: -300px; 42 | opacity: 0; } 43 | to { top: 0; 44 | opacity: 1; } } 45 | 46 | /* -- SITE BLOCK -- every block should in seperate file for demo I combine into one file */ 47 | .site { margin: 0; } 48 | 49 | .site__main { margin-top: 60px; } 50 | 51 | /* 52 | -- MAIN BLOCK -- 53 | */ 54 | .main--center { text-align: center; } 55 | 56 | .main__title { font-size: 4rem; } 57 | 58 | .main__usp { margin: 0 0 5em 0; } 59 | 60 | .main__usp li { padding: .5em 0; font-size: 2rem; } 61 | 62 | .main__jumbotron { width: 100%; height: 500px; background-color: #0096D9; text-align: center; } 63 | 64 | .main__jumbotron h1 { color: #fff; font-size: 5rem; } 65 | 66 | .main__jumbotron h2 { color: #fff; font-weight: normal; } 67 | 68 | .main__jumbotron-wrapper { margin: 0 auto; padding-top: 10em; padding-left: 3em; } 69 | 70 | @media screen and (max-width: 640px) { .main__nav { display: none; } } 71 | 72 | .main__content { padding: 20px; } 73 | 74 | /* 75 | -- HEADER BLOCK -- 76 | */ 77 | .header { -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075); position: fixed; top: 0; z-index: 100; width: 100%; height: 60px; background: rgba(255, 255, 255, 0.95294); } 78 | 79 | .header__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 80 | 81 | .header__brand { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: .2em; } 82 | 83 | .header__brand img { height: 45px; } 84 | 85 | .header__title { font-style: italic; font-size: 1.8rem; font-weight: 500; margin-left: .5em; } 86 | 87 | .header__nav { margin-right: 2em; } 88 | 89 | .header__nav a { color: #1a1a1a; text-decoration: none; font-size: 1.2rem; } 90 | 91 | .header__nav a:hover { color: black; } 92 | 93 | @media screen and (max-width: 640px) { .header__nav { display: none; } } 94 | 95 | /* 96 | -- NAVIGATION BLOCK -- 97 | */ 98 | /* 99 | -- CONTENT BLOCK -- 100 | */ 101 | .content__title { padding: 7px 0; border-bottom: 1px solid #999; } 102 | 103 | .content__wrapper { padding: 10px 0; } 104 | 105 | /* 106 | -- GRID BLOCK -- 107 | */ 108 | .grid__flex, .grid__row { margin: 2px 0; } 109 | 110 | .grid__item { width: 100%; padding: 1em 0; border: 1px solid #999; text-align: center; } 111 | 112 | .grid__col-1 { padding: 1em 0; border: 1px solid #999; text-align: center; } 113 | 114 | .grid__col-2 { padding: 1em 0; border: 1px solid #999; text-align: center; } 115 | 116 | .grid__col-3 { padding: 1em 0; border: 1px solid #999; text-align: center; } 117 | 118 | .grid__col-4 { padding: 1em 0; border: 1px solid #999; text-align: center; } 119 | 120 | .grid__col-5 { padding: 1em 0; border: 1px solid #999; text-align: center; } 121 | 122 | .grid__col-6 { padding: 1em 0; border: 1px solid #999; text-align: center; } 123 | 124 | .grid__col-7 { padding: 1em 0; border: 1px solid #999; text-align: center; } 125 | 126 | .grid__col-8 { padding: 1em 0; border: 1px solid #999; text-align: center; } 127 | 128 | .grid__col-9 { padding: 1em 0; border: 1px solid #999; text-align: center; } 129 | 130 | .grid__col-10 { padding: 1em 0; border: 1px solid #999; text-align: center; } 131 | 132 | .grid__col-11 { padding: 1em 0; border: 1px solid #999; text-align: center; } 133 | 134 | .grid__col-12 { padding: 1em 0; border: 1px solid #999; text-align: center; } 135 | 136 | .grid__col-13 { padding: 1em 0; border: 1px solid #999; text-align: center; } 137 | 138 | .grid__col-14 { padding: 1em 0; border: 1px solid #999; text-align: center; } 139 | 140 | .grid__col-15 { padding: 1em 0; border: 1px solid #999; text-align: center; } 141 | 142 | .grid__col-16 { padding: 1em 0; border: 1px solid #999; text-align: center; } 143 | 144 | .grid__offset-1 { padding: 1em 0; border: 1px solid #999; text-align: center; } 145 | 146 | .grid__offset-2 { padding: 1em 0; border: 1px solid #999; text-align: center; } 147 | 148 | .grid__offset-3 { padding: 1em 0; border: 1px solid #999; text-align: center; } 149 | 150 | .grid__offset-4 { padding: 1em 0; border: 1px solid #999; text-align: center; } 151 | 152 | .grid__offset-5 { padding: 1em 0; border: 1px solid #999; text-align: center; } 153 | 154 | .grid__offset-6 { padding: 1em 0; border: 1px solid #999; text-align: center; } 155 | 156 | .grid__offset-7 { padding: 1em 0; border: 1px solid #999; text-align: center; } 157 | 158 | .grid__offset-8 { padding: 1em 0; border: 1px solid #999; text-align: center; } 159 | 160 | .grid__offset-9 { padding: 1em 0; border: 1px solid #999; text-align: center; } 161 | 162 | .grid__offset-10 { padding: 1em 0; border: 1px solid #999; text-align: center; } 163 | 164 | .grid__offset-11 { padding: 1em 0; border: 1px solid #999; text-align: center; } 165 | 166 | .grid__offset-12 { padding: 1em 0; border: 1px solid #999; text-align: center; } 167 | 168 | .grid__offset-13 { padding: 1em 0; border: 1px solid #999; text-align: center; } 169 | 170 | .grid__offset-14 { padding: 1em 0; border: 1px solid #999; text-align: center; } 171 | 172 | .grid__offset-15 { padding: 1em 0; border: 1px solid #999; text-align: center; } 173 | 174 | .grid__offset-16 { padding: 1em 0; border: 1px solid #999; text-align: center; } 175 | 176 | /* 177 | -- FOR DEMO ONLY -- 178 | */ 179 | .button, .label { margin: .1em; } 180 | 181 | .popover { text-align: center; padding: 1em 0; border: 1px solid #999; } 182 | 183 | .card { display: inline-block; width: 25%; margin: 1em 0 0 1em; height: 150px; } 184 | 185 | /* 186 | -- FOOTER BLOCK -- 187 | */ 188 | .footer { margin: 0 auto; padding: 20px 0; background: #0096D9; color: #fff; } 189 | 190 | .footer__wrapper { text-align: center; } 191 | 192 | .footer__text { font-size: .9rem; } 193 | 194 | .footer__list { display: block; margin: 0; padding: 0; list-style: none; } 195 | 196 | .footer__icon { display: inline-block; margin: 0 5px; font-size: 1.6rem; } 197 | 198 | .footer__icon i { color: #fff; } 199 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | BEM KIT - HOMEPAGE 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 56 | 57 | 58 | 64 | 65 | 66 | 67 | 68 | 69 |
70 |
71 |
72 | 73 | 74 | 75 |
76 |
77 |
78 | 79 | 80 |
81 | 82 |
83 |
84 |
85 |

86 | BEM KIT 87 |

88 |

89 | CSS UI Kit using BEM in class naming standard 90 |

91 |
92 |
93 | 94 | 96 | Demo And Cheatsheet 97 | 98 | 100 | Download 101 | 102 | 104 | Source Code 105 | 106 | 107 |
108 |
109 |
110 | 111 |
112 |

Why BEM-KIT ?

113 | 114 |
115 | 116 |
    117 |
  • Using beautiful classname with BEM standard.
    • 118 |
  • All component was crafted from zero.
    • 119 |
  • You can choose to import RULES only without produce any css classes.
    • 120 |
  • You can customize your own classname with rules we provided.
    • 121 |
  • You can partialy import from our available component.
    • 122 |
  • Full SASS modular code.
    • 123 |
124 | 125 |
126 |
127 | 128 |
129 | 130 | 181 | 182 | 183 | 201 | 202 | 203 | 204 | 207 | 208 | 209 | 240 | 241 | 242 | 243 | -------------------------------------------------------------------------------- /dist/bem-kit.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * bem-kit v0.0.8 3 | * @author : Irfan Maulana 4 | * https://github.com/mazipan/bem-kit 5 | */.button__menu,.pager,.tabs{margin:0;padding:0;list-style:none}/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}html{-webkit-box-sizing:border-box;box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;font-size:62.5%;color:#000;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}body{font-size:1.3rem;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}a{color:#0096d9;text-decoration:none}a:focus,a:hover{text-decoration:underline}code,kbd,pre,samp{background-color:#f2f2f2;padding:.1em .5em;border-radius:.1em}pre{border-left:solid .25em #0096d9}blockquote{padding:10px;margin:0 0 20px;font-size:1.6rem;border-left:5px solid #0096d9}textarea{resize:none}.card--blue>.card__header,.card--gray>.card__header,.card--green>.card__header,.card--orange>.card__header,.card--red>.card__header,.card--white>.card__header,.form__group,.grid__flex{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.flex__row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.flex__col{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex__wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.clearfix{*zoom:1}.clearfix:after,.clearfix:before{display:table;content:' '}.clearfix:after{clear:both}.container{max-width:1146px;margin:auto;*zoom:1}.container:after,.container:before{display:table;content:' '}.container:after{clear:both}@media (max-width:980px){.container{padding:0 15px}}@media (min-width:960px){.container{max-width:960px}}@media (min-width:1080px){.container{max-width:1040px}}@media (min-width:1200px){.container{max-width:1146px}}.grid__row{*zoom:1;margin:0 auto;max-width:92.308em}.grid__row:after,.grid__row:before{display:table;content:' '}.grid__row:after{clear:both}.grid__col-1{float:left;width:100%}@media (min-width:768px){.grid__col-1{width:8.33333%}}.grid__offset-1{margin-left:8.33333%}.grid__col-2{float:left;width:100%}@media (min-width:768px){.grid__col-2{width:16.66667%}}.grid__offset-2{margin-left:16.66667%}.grid__col-3{float:left;width:100%}@media (min-width:768px){.grid__col-3{width:25%}}.grid__offset-3{margin-left:25%}.grid__col-4{float:left;width:100%}@media (min-width:768px){.grid__col-4{width:33.33333%}}.grid__offset-4{margin-left:33.33333%}.grid__col-5{float:left;width:100%}@media (min-width:768px){.grid__col-5{width:41.66667%}}.grid__offset-5{margin-left:41.66667%}.grid__col-6{float:left;width:100%}@media (min-width:768px){.grid__col-6{width:50%}}.grid__offset-6{margin-left:50%}.grid__col-7{float:left;width:100%}@media (min-width:768px){.grid__col-7{width:58.33333%}}.grid__offset-7{margin-left:58.33333%}.grid__col-8{float:left;width:100%}@media (min-width:768px){.grid__col-8{width:66.66667%}}.grid__offset-8{margin-left:66.66667%}.grid__col-9{float:left;width:100%}@media (min-width:768px){.grid__col-9{width:75%}}.grid__offset-9{margin-left:75%}.grid__col-10{float:left;width:100%}@media (min-width:768px){.grid__col-10{width:83.33333%}}.grid__offset-10{margin-left:83.33333%}.grid__col-11{float:left;width:100%}@media (min-width:768px){.grid__col-11{width:91.66667%}}.grid__offset-11{margin-left:91.66667%}.grid__col-12{float:left;width:100%}@media (min-width:768px){.grid__col-12{width:100%}}.grid__offset-12{margin-left:100%}.button{display:inline-block;padding:13px 20px;outline:0;border:none;text-align:center;text-decoration:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.button:active,.button:focus,.button:hover{text-decoration:none}.button--radius{border-radius:.25em}.button--green{background:#00b35e;color:#fff}.button--green:hover{background:#00e679;color:#fff}.button--red{background:#f8011e;color:#fff}.button--red:hover{background:#fe2e46;color:#fff}.button--blue{background:#0096d9;color:#fff}.button--blue:hover{background:#0db4ff;color:#fff}.button--orange{background:#f7931e;color:#fff}.button--orange:hover{background:#f9ab4f;color:#fff}.button--gray{background:#999;color:#000}.button--gray:hover{background:#ccc;color:#000}.button--white{background:#fff;color:#000}.button--white:hover{background:#fff;color:#000}.button-outline--green{border:1px solid #00b35e;background:0 0;color:#00b35e}.button-outline--green:hover{border:1px solid #00e679;color:#00e679}.button-outline--red{border:1px solid #f8011e;background:0 0;color:#f8011e}.button-outline--red:hover{border:1px solid #fe2e46;color:#fe2e46}.button-outline--blue{border:1px solid #0096d9;background:0 0;color:#0096d9}.button-outline--blue:hover{border:1px solid #0db4ff;color:#0db4ff}.button-outline--orange{border:1px solid #f7931e;background:0 0;color:#f7931e}.button-outline--orange:hover{border:1px solid #f9ab4f;color:#f9ab4f}.button-outline--gray{border:1px solid #999;background:0 0;color:#999}.button-outline--gray:hover{border:1px solid #ccc;color:#ccc}.button-outline--white{border:1px solid #fff;background:0 0;color:#fff}.button-outline--white:hover{border:1px solid #fff;color:#fff}.button--dropdown{padding:10px 12px 10px 0}.button--dropdown:after{content:'\25BE';font-size:2rem;position:relative;float:right;padding-left:1em;margin-top:-6px;height:0}.button__menu{display:none;position:absolute;z-index:2;min-width:160px;border:1px solid #ccc;background-color:#fff;margin-top:.8em;text-align:left}.button__menu li a{text-decoration:none;display:block;padding:7px 20px;clear:both;white-space:nowrap;color:#000;border-bottom:1px solid #ccc}.button__menu li a:hover{background-color:#ccc}.button__menu li:last-child a{border:0}.checkbox{position:absolute;left:-9999px}.checkbox+label{position:relative;display:inline-block;padding:6px 30px;cursor:pointer}.checkbox+label:before{position:absolute;top:4px;left:0;width:18px;height:18px;border:1px solid #ccc;border-radius:1px;background-color:#fff;content:''}.checkbox+label:after{position:absolute;color:#fff;content:'';border-top:2px solid transparent;border-left:2px solid transparent;border-right:2px solid #fff;border-bottom:2px solid #fff;-webkit-transform:rotate(37deg);transform:rotate(37deg);-webkit-transition:border .25s,background-color .25s;transition:border .25s,background-color .25s;-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.checkbox:not(:checked)+label:after{width:0;height:0;top:6px;left:1px}.checkbox:checked+label:before{border-color:#000;background-color:#000}.checkbox:checked+label:after{width:8px;height:13px;top:6px;left:1px}.checkbox:disabled+label{color:#ccc}.checkbox:disabled+label:before{border-color:#ccc;background-color:#f2f2f2;-webkit-box-shadow:none;box-shadow:none}.checkbox:disabled+label:after{display:none}.checkbox--blue:checked+label:before{border-color:#0096d9;background-color:#0096d9}.radio{position:absolute;left:-9999px}.radio+label{position:relative;display:inline-block;padding:2px 30px;cursor:pointer}.radio+label:after,.radio+label:before{position:absolute;top:0;content:'';-webkit-transition:all .2s;transition:all .2s}.radio+label:before{left:3px;width:12px;height:12px;margin-top:3px;border:1px solid #000;border-radius:50%;-webkit-transition:background-color .25s;transition:background-color .25s}.radio+label:after{left:0;width:18px;height:18px;border:1px solid #000;border-radius:50%}.radio:checked+label:before{background-color:#000}.radio:disabled+label{color:#ccc}.radio:disabled+label:before{border:1px solid #ccc}.radio:disabled+label:after{border:1px solid #ccc}.radio--blue+label:after,.radio--blue+label:before{border:1px solid #0096d9}.radio--blue:checked+label:before{background-color:#0096d9}.tabs__item{display:inline-block}.tabs__item a{position:relative;display:block;padding:1.3em;text-decoration:none}.tabs__item a:hover{background-color:#f2f2f2;text-decoration:none}.tabs__item--active{border-bottom:2px solid #0096d9}.tabs__item--active a{color:#000}.tabs__itemv{display:block;margin:.3em 0;max-width:200px}.tabs__itemv a{position:relative;display:block;padding:1.3em;background-color:#f2f2f2;text-decoration:none}.tabs__itemv a:hover{background-color:#ccc;text-decoration:none}.tabs__itemv--active{border-left:2px solid #0096d9;background-color:#ccc}.tabs__itemv--active a{background-color:#ccc;color:#000}.select,.textfield{padding:12px;margin:3px 0;width:100%;outline:0;border:1px solid #ccc;border-radius:0}.select ::-moz-placeholder,.textfield ::-moz-placeholder{opacity:1;color:#fff}.select :-ms-input-placeholder,.textfield :-ms-input-placeholder{color:#fff}.select ::-webkit-input-placeholder,.textfield ::-webkit-input-placeholder{color:#fff}.textfield__helper{color:#333;font-size:1.2rem;line-height:2}.textfield__error{color:#f8011e;font-size:1.2rem;line-height:2}.textfield--error{border:1px solid #f8011e}.textfield--large{padding:20px}.textfield--radius{border-radius:.25em}.textfield--radius-left{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.textfield--radius-right{border-top-right-radius:.25em;border-bottom-right-radius:.25em}.textfield--shadow:focus{border-color:#51a7e8;outline:0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(81,167,232,.5);box-shadow:inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(81,167,232,.5)}.select,.textfield{padding:12px;margin:3px 0;width:100%;outline:0;border:1px solid #ccc;border-radius:0}.select ::-moz-placeholder,.textfield ::-moz-placeholder{opacity:1;color:#fff}.select :-ms-input-placeholder,.textfield :-ms-input-placeholder{color:#fff}.select ::-webkit-input-placeholder,.textfield ::-webkit-input-placeholder{color:#fff}.textfield__helper{color:#333;font-size:1.2rem;line-height:2}.textfield__error{color:#f8011e;font-size:1.2rem;line-height:2}.textfield--error{border:1px solid #f8011e}.textfield--large{padding:20px}.textfield--radius{border-radius:.25em}.textfield--radius-left{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.textfield--radius-right{border-top-right-radius:.25em;border-bottom-right-radius:.25em}.textfield--shadow:focus{border-color:#51a7e8;outline:0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(81,167,232,.5);box-shadow:inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(81,167,232,.5)}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAYAAAARx7TFAAAAAXNSR0IArs4c6QAAAJ1JREFUCB1jzMnJCWdkZBSdPHnyFAYk0NDQwPbmzZuVTExMk5iA4p7//v2bDFScC1OzatUqZqCC5f////cHyikwiYiIJAFNWgIUmARSCKQZDx48OAdIBwJNSZ8yZcp8RpBuoNFMQJ0LgRIxQO4hILYFKsgEOmEmSJ4ZRBw4cOC/l5fXxu/fvysDub5Ak3OAJswAyWEAkIm5ublu6BIADTRHW7YWzxEAAAAASUVORK5CYII=);background-position:right 7px center;background-repeat:no-repeat}.select--radius{border-radius:.25em}.select--shadow:focus{border-color:#51a7e8;outline:0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(81,167,232,.5);box-shadow:inset 0 1px 2px rgba(0,0,0,.075),0 0 5px rgba(81,167,232,.5)}.table{max-width:100%;width:100%;border:1px solid #ccc;border-spacing:0;border-collapse:collapse}.table__head th{padding:8px;border-right:1px solid #ccc;border-bottom:2px solid #ccc;text-align:left}.table__head th[sortable=true]{cursor:pointer}.table__body>tr>td{padding:8px;border-right:1px solid #ccc;text-align:left}.table__body>tr:nth-of-type(odd){background-color:#f2f2f2}.table__sort--asc:after{content:'\25BE';font-size:2rem;position:relative;float:right;margin-top:-7px;height:0}.table__sort--desc:after{content:'\25B4';font-size:2rem;position:relative;float:right;margin-top:-7px;height:0}.pager{font-size:1.4rem}.pager__page{text-decoration:none;position:relative;float:left;padding:8px 15px;margin-left:-5px;background-color:#fff;color:#0096d9;border:1px solid #ccc}.pager__page--active{text-decoration:none;color:#000;background-color:#ccc}.pager__page:focus{text-decoration:none}.pager__page:hover{text-decoration:none;color:#000;background-color:#ccc}.pager li{display:inline-block}.pager--radius li:first-child>a,.pager--radius li:first-child>span{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.pager--radius li:last-child>a,.pager--radius li:last-child>span{border-top-right-radius:.25em;border-bottom-right-radius:.25em}.alert--blue .alert__close,.alert--gray .alert__close,.alert--green .alert__close,.alert--orange .alert__close,.alert--red .alert__close,.alert--white .alert__close{position:relative;top:-4px;right:-21px;padding:0 20px;float:right;font-size:1.6rem;cursor:pointer;text-decoration:none}.alert{padding:15px;margin-bottom:20px;background:0 0}.alert--radius{border-radius:.25em}.alert--green{border:1px dashed #00b35e;color:#00b35e}.alert--green .alert__close{color:#00b35e}.alert--green .alert__close:hover{text-decoration:none}.alert--red{border:1px dashed #f8011e;color:#f8011e}.alert--red .alert__close{color:#f8011e}.alert--red .alert__close:hover{text-decoration:none}.alert--blue{border:1px dashed #0096d9;color:#0096d9}.alert--blue .alert__close{color:#0096d9}.alert--blue .alert__close:hover{text-decoration:none}.alert--orange{border:1px dashed #f7931e;color:#f7931e}.alert--orange .alert__close{color:#f7931e}.alert--orange .alert__close:hover{text-decoration:none}.alert--gray{border:1px dashed #999;color:#999}.alert--gray .alert__close{color:#999}.alert--gray .alert__close:hover{text-decoration:none}.alert--white{border:1px dashed #fff;color:#fff}.alert--white .alert__close{color:#fff}.alert--white .alert__close:hover{text-decoration:none}.card{-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2);box-shadow:0 4px 8px 0 rgba(0,0,0,.2);-webkit-transition:.3s;transition:.3s}.card:hover{-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2)}.card--radius{border-radius:.25em}.card--green{border:1px solid #00b35e}.card--green>.card__header{padding:1em .5em;background-color:#00b35e;color:#fff}.card--red{border:1px solid #f8011e}.card--red>.card__header{padding:1em .5em;background-color:#f8011e;color:#fff}.card--blue{border:1px solid #0096d9}.card--blue>.card__header{padding:1em .5em;background-color:#0096d9;color:#fff}.card--orange{border:1px solid #f7931e}.card--orange>.card__header{padding:1em .5em;background-color:#f7931e;color:#fff}.card--gray{border:1px solid #999}.card--gray>.card__header{padding:1em .5em;background-color:#999;color:#000}.card--white{border:1px solid #fff}.card--white>.card__header{padding:1em .5em;background-color:#fff;color:#000}.card__title{font-size:1.6rem;font-weight:700}.card__tools>i{margin:0 .5em;cursor:pointer}.card__content{padding:1em .5em}.popover{position:relative;cursor:pointer}.popover__content{visibility:hidden;background-color:#1a1a1a;color:#fff;text-align:center;border-radius:6px;padding:1em;position:absolute;z-index:1;bottom:125%;left:50%;margin-left:-60px;opacity:0;-webkit-transition:opacity 1s;transition:opacity 1s}.popover__content:after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;border-width:5px;border-style:solid;border-color:#1a1a1a transparent transparent transparent}.popover:hover .popover__content{visibility:visible;opacity:1}.modal{display:none;position:fixed;z-index:999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4)}.modal__header{padding:2px 16px}.modal__header--border{border-bottom:1px solid #999}.modal__header--blue{background-color:#0096d9;color:#fff}.modal__header--blue .modal__close{color:#fff}.modal__content{position:relative;background-color:#fff;margin:15% auto;padding:0;width:80%;-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);box-shadow:0 4px 8px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19);-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s}.modal__body{padding:2px 16px}.modal__footer{padding:2px 16px}.modal__footer--border{border-top:1px solid #999}.modal__footer--blue{background-color:#0096d9;color:#fff}.modal__close{float:right;font-size:28px;font-weight:700;color:#999;cursor:pointer;text-decoration:none}.modal__close:focus,.modal__close:hover{text-decoration:none}@-webkit-keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}@keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}.form__wrapper{width:100%;padding:7px 0}.form__label{width:20%;min-width:100px}.form__label--required:after{content:'*';color:#f8011e}.form__icon{color:#000;background-color:#ccc;padding:13px}.form__icon--radius-left{border-top-left-radius:.25em;border-bottom-left-radius:.25em}.form__icon--radius-right{border-top-right-radius:.25em;border-bottom-right-radius:.25em}.label{padding:.1em .5em}.label--green{background:#00b35e;color:#fff}.label-outline--green{border:1px solid #00b35e;color:#00b35e}.label--red{background:#f8011e;color:#fff}.label-outline--red{border:1px solid #f8011e;color:#f8011e}.label--blue{background:#0096d9;color:#fff}.label-outline--blue{border:1px solid #0096d9;color:#0096d9}.label--orange{background:#f7931e;color:#fff}.label-outline--orange{border:1px solid #f7931e;color:#f7931e}.label--gray{background:#999;color:#000}.label-outline--gray{border:1px solid #999;color:#999}.label--white{background:#fff;color:#000}.label-outline--white{border:1px solid #fff;color:#fff}.label--radius{border-radius:2em;padding:.1em .8em .2em .8em}.badge{border-radius:.25em;border:1px solid #ccc}.badge__item{line-height:1.5rem;padding:10px 20px;display:block;margin:0;border-bottom:1px solid #ccc}.badge__item:last-child{border:0}.badge__info{min-width:3rem;padding:0 6px;text-align:center;font-size:1.2rem;line-height:22px;height:22px;color:#757575;float:right;margin-top:calc(.75rem - 11px)}.badge--state-new{background-color:#89c747;color:#fff;font-size:.8rem} -------------------------------------------------------------------------------- /dist/bem-kit.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * bem-kit v0.0.8 3 | * @author : Irfan Maulana 4 | * https://github.com/mazipan/bem-kit 5 | */ 6 | .button__menu, .tabs, .pager { margin: 0; padding: 0; list-style: none; } 7 | 8 | /*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */ 9 | html { font-family: sans-serif; line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } 10 | 11 | body { margin: 0; } 12 | 13 | article, aside, footer, header, nav, section { display: block; } 14 | 15 | h1 { font-size: 2em; margin: .67em 0; } 16 | 17 | figcaption, figure, main { display: block; } 18 | 19 | figure { margin: 1em 40px; } 20 | 21 | hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; } 22 | 23 | pre { font-family: monospace,monospace; font-size: 1em; } 24 | 25 | a { background-color: transparent; -webkit-text-decoration-skip: objects; } 26 | 27 | a:active, a:hover { outline-width: 0; } 28 | 29 | abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } 30 | 31 | b, strong { font-weight: inherit; font-weight: bolder; } 32 | 33 | code, kbd, samp { font-family: monospace,monospace; font-size: 1em; } 34 | 35 | dfn { font-style: italic; } 36 | 37 | mark { background-color: #ff0; color: #000; } 38 | 39 | small { font-size: 80%; } 40 | 41 | sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } 42 | 43 | sub { bottom: -.25em; } 44 | 45 | sup { top: -.5em; } 46 | 47 | audio, video { display: inline-block; } 48 | 49 | audio:not([controls]) { display: none; height: 0; } 50 | 51 | img { border-style: none; } 52 | 53 | svg:not(:root) { overflow: hidden; } 54 | 55 | button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } 56 | 57 | button, input { overflow: visible; } 58 | 59 | button, select { text-transform: none; } 60 | 61 | button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } 62 | 63 | button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } 64 | 65 | button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } 66 | 67 | fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; } 68 | 69 | legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } 70 | 71 | progress { display: inline-block; vertical-align: baseline; } 72 | 73 | textarea { overflow: auto; } 74 | 75 | [type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } 76 | 77 | [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } 78 | 79 | [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } 80 | 81 | [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } 82 | 83 | ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } 84 | 85 | details, menu { display: block; } 86 | 87 | summary { display: list-item; } 88 | 89 | canvas { display: inline-block; } 90 | 91 | template { display: none; } 92 | 93 | [hidden] { display: none; } 94 | 95 | html { -webkit-box-sizing: border-box; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; font-size: 62.5%; color: #000; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; } 96 | 97 | *, *:before, *:after { -webkit-box-sizing: inherit; box-sizing: inherit; } 98 | 99 | body { font-size: 1.3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } 100 | 101 | a { color: #0096D9; text-decoration: none; } 102 | 103 | a:hover, a:focus { text-decoration: underline; } 104 | 105 | code, kbd, pre, samp { background-color: #F2F2F2; padding: .1em .5em; border-radius: .1em; } 106 | 107 | pre { border-left: solid 0.25em #0096D9; } 108 | 109 | blockquote { padding: 10px; margin: 0 0 20px; font-size: 1.6rem; border-left: 5px solid #0096D9; } 110 | 111 | textarea { resize: none; } 112 | 113 | .card--green > .card__header, .card--red > .card__header, .card--blue > .card__header, .card--orange > .card__header, .card--gray > .card__header, .card--white > .card__header, .form__group, .grid__flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } 114 | 115 | .flex__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } 116 | 117 | .flex__col { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } 118 | 119 | .flex__wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } 120 | 121 | .clearfix { *zoom: 1; } 122 | 123 | .clearfix:before, .clearfix:after { display: table; content: ' '; } 124 | 125 | .clearfix:after { clear: both; } 126 | 127 | .container { max-width: 1146px; margin: auto; *zoom: 1; } 128 | 129 | .container:before, .container:after { display: table; content: ' '; } 130 | 131 | .container:after { clear: both; } 132 | 133 | @media (max-width: 980px) { .container { padding: 0 15px; } } 134 | 135 | @media (min-width: 960px) { .container { max-width: 960px; } } 136 | 137 | @media (min-width: 1080px) { .container { max-width: 1040px; } } 138 | 139 | @media (min-width: 1200px) { .container { max-width: 1146px; } } 140 | 141 | .grid__row { *zoom: 1; margin: 0 auto; max-width: 92.308em; } 142 | 143 | .grid__row:before, .grid__row:after { display: table; content: ' '; } 144 | 145 | .grid__row:after { clear: both; } 146 | 147 | .grid__col-1 { float: left; width: 100%; } 148 | 149 | @media (min-width: 768px) { .grid__col-1 { width: 8.33333%; } } 150 | 151 | .grid__offset-1 { margin-left: 8.33333%; } 152 | 153 | .grid__col-2 { float: left; width: 100%; } 154 | 155 | @media (min-width: 768px) { .grid__col-2 { width: 16.66667%; } } 156 | 157 | .grid__offset-2 { margin-left: 16.66667%; } 158 | 159 | .grid__col-3 { float: left; width: 100%; } 160 | 161 | @media (min-width: 768px) { .grid__col-3 { width: 25%; } } 162 | 163 | .grid__offset-3 { margin-left: 25%; } 164 | 165 | .grid__col-4 { float: left; width: 100%; } 166 | 167 | @media (min-width: 768px) { .grid__col-4 { width: 33.33333%; } } 168 | 169 | .grid__offset-4 { margin-left: 33.33333%; } 170 | 171 | .grid__col-5 { float: left; width: 100%; } 172 | 173 | @media (min-width: 768px) { .grid__col-5 { width: 41.66667%; } } 174 | 175 | .grid__offset-5 { margin-left: 41.66667%; } 176 | 177 | .grid__col-6 { float: left; width: 100%; } 178 | 179 | @media (min-width: 768px) { .grid__col-6 { width: 50%; } } 180 | 181 | .grid__offset-6 { margin-left: 50%; } 182 | 183 | .grid__col-7 { float: left; width: 100%; } 184 | 185 | @media (min-width: 768px) { .grid__col-7 { width: 58.33333%; } } 186 | 187 | .grid__offset-7 { margin-left: 58.33333%; } 188 | 189 | .grid__col-8 { float: left; width: 100%; } 190 | 191 | @media (min-width: 768px) { .grid__col-8 { width: 66.66667%; } } 192 | 193 | .grid__offset-8 { margin-left: 66.66667%; } 194 | 195 | .grid__col-9 { float: left; width: 100%; } 196 | 197 | @media (min-width: 768px) { .grid__col-9 { width: 75%; } } 198 | 199 | .grid__offset-9 { margin-left: 75%; } 200 | 201 | .grid__col-10 { float: left; width: 100%; } 202 | 203 | @media (min-width: 768px) { .grid__col-10 { width: 83.33333%; } } 204 | 205 | .grid__offset-10 { margin-left: 83.33333%; } 206 | 207 | .grid__col-11 { float: left; width: 100%; } 208 | 209 | @media (min-width: 768px) { .grid__col-11 { width: 91.66667%; } } 210 | 211 | .grid__offset-11 { margin-left: 91.66667%; } 212 | 213 | .grid__col-12 { float: left; width: 100%; } 214 | 215 | @media (min-width: 768px) { .grid__col-12 { width: 100%; } } 216 | 217 | .grid__offset-12 { margin-left: 100%; } 218 | 219 | .button { display: inline-block; padding: 13px 20px; outline: none; border: none; text-align: center; text-decoration: none; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; } 220 | 221 | .button:hover, .button:focus, .button:active { text-decoration: none; } 222 | 223 | .button--radius { border-radius: 0.25em; } 224 | 225 | .button--green { background: #00B35E; color: #fff; } 226 | 227 | .button--green:hover { background: #00e679; color: #fff; } 228 | 229 | .button--red { background: #F8011E; color: #fff; } 230 | 231 | .button--red:hover { background: #fe2e46; color: #fff; } 232 | 233 | .button--blue { background: #0096D9; color: #fff; } 234 | 235 | .button--blue:hover { background: #0db4ff; color: #fff; } 236 | 237 | .button--orange { background: #F7931E; color: #fff; } 238 | 239 | .button--orange:hover { background: #f9ab4f; color: #fff; } 240 | 241 | .button--gray { background: #999; color: #000; } 242 | 243 | .button--gray:hover { background: #CCC; color: #000; } 244 | 245 | .button--white { background: #fff; color: #000; } 246 | 247 | .button--white:hover { background: #fff; color: #000; } 248 | 249 | .button-outline--green { border: 1px solid #00B35E; background: transparent; color: #00B35E; } 250 | 251 | .button-outline--green:hover { border: 1px solid #00e679; color: #00e679; } 252 | 253 | .button-outline--red { border: 1px solid #F8011E; background: transparent; color: #F8011E; } 254 | 255 | .button-outline--red:hover { border: 1px solid #fe2e46; color: #fe2e46; } 256 | 257 | .button-outline--blue { border: 1px solid #0096D9; background: transparent; color: #0096D9; } 258 | 259 | .button-outline--blue:hover { border: 1px solid #0db4ff; color: #0db4ff; } 260 | 261 | .button-outline--orange { border: 1px solid #F7931E; background: transparent; color: #F7931E; } 262 | 263 | .button-outline--orange:hover { border: 1px solid #f9ab4f; color: #f9ab4f; } 264 | 265 | .button-outline--gray { border: 1px solid #999; background: transparent; color: #999; } 266 | 267 | .button-outline--gray:hover { border: 1px solid #CCC; color: #CCC; } 268 | 269 | .button-outline--white { border: 1px solid #fff; background: transparent; color: #fff; } 270 | 271 | .button-outline--white:hover { border: 1px solid #fff; color: #fff; } 272 | 273 | .button--dropdown { padding: 10px 12px 10px 0; } 274 | 275 | .button--dropdown:after { content: '\25BE'; font-size: 2rem; position: relative; float: right; padding-left: 1em; margin-top: -6px; height: 0; } 276 | 277 | .button__menu { display: none; position: absolute; z-index: 2; min-width: 160px; border: 1px solid #CCC; background-color: #fff; margin-top: .8em; text-align: left; } 278 | 279 | .button__menu li a { text-decoration: none; display: block; padding: 7px 20px; clear: both; white-space: nowrap; color: #000; border-bottom: 1px solid #CCC; } 280 | 281 | .button__menu li a:hover { background-color: #CCC; } 282 | 283 | .button__menu li:last-child a { border: 0; } 284 | 285 | .checkbox { position: absolute; left: -9999px; } 286 | 287 | .checkbox + label { position: relative; display: inline-block; padding: 6px 30px; cursor: pointer; } 288 | 289 | .checkbox + label:before { position: absolute; top: 4px; left: 0; width: 18px; height: 18px; border: 1px solid #CCC; border-radius: 1px; background-color: #fff; content: ''; } 290 | 291 | .checkbox + label:after { position: absolute; color: #fff; content: ''; border-top: 2px solid transparent; border-left: 2px solid transparent; border-right: 2px solid #fff; border-bottom: 2px solid #fff; -webkit-transform: rotate(37deg); transform: rotate(37deg); -webkit-transition: border 0.25s, background-color 0.25s; transition: border 0.25s, background-color 0.25s; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; } 292 | 293 | .checkbox:not(:checked) + label:after { width: 0; height: 0; top: 6px; left: 1px; } 294 | 295 | .checkbox:checked + label:before { border-color: #000; background-color: #000; } 296 | 297 | .checkbox:checked + label:after { width: 8px; height: 13px; top: 6px; left: 1px; } 298 | 299 | .checkbox:disabled + label { color: #CCC; } 300 | 301 | .checkbox:disabled + label:before { border-color: #CCC; background-color: #F2F2F2; -webkit-box-shadow: none; box-shadow: none; } 302 | 303 | .checkbox:disabled + label:after { display: none; } 304 | 305 | .checkbox--blue:checked + label:before { border-color: #0096D9; background-color: #0096D9; } 306 | 307 | .radio { position: absolute; left: -9999px; } 308 | 309 | .radio + label { position: relative; display: inline-block; padding: 2px 30px; cursor: pointer; } 310 | 311 | .radio + label:before, .radio + label:after { position: absolute; top: 0; content: ''; -webkit-transition: all .2s; transition: all .2s; } 312 | 313 | .radio + label:before { left: 3px; width: 12px; height: 12px; margin-top: 3px; border: 1px solid #000; border-radius: 50%; -webkit-transition: background-color 0.25s; transition: background-color 0.25s; } 314 | 315 | .radio + label:after { left: 0; width: 18px; height: 18px; border: 1px solid #000; border-radius: 50%; } 316 | 317 | .radio:checked + label:before { background-color: #000; } 318 | 319 | .radio:disabled + label { color: #CCC; } 320 | 321 | .radio:disabled + label:before { border: 1px solid #CCC; } 322 | 323 | .radio:disabled + label:after { border: 1px solid #CCC; } 324 | 325 | .radio--blue + label:before, .radio--blue + label:after { border: 1px solid #0096D9; } 326 | 327 | .radio--blue:checked + label:before { background-color: #0096D9; } 328 | 329 | .tabs__item { display: inline-block; } 330 | 331 | .tabs__item a { position: relative; display: block; padding: 1.3em; text-decoration: none; } 332 | 333 | .tabs__item a:hover { background-color: #F2F2F2; text-decoration: none; } 334 | 335 | .tabs__item--active { border-bottom: 2px solid #0096D9; } 336 | 337 | .tabs__item--active a { color: black; } 338 | 339 | .tabs__itemv { display: block; margin: .3em 0; max-width: 200px; } 340 | 341 | .tabs__itemv a { position: relative; display: block; padding: 1.3em; background-color: #F2F2F2; text-decoration: none; } 342 | 343 | .tabs__itemv a:hover { background-color: #CCC; text-decoration: none; } 344 | 345 | .tabs__itemv--active { border-left: 2px solid #0096D9; background-color: #CCC; } 346 | 347 | .tabs__itemv--active a { background-color: #CCC; color: black; } 348 | 349 | .select, .textfield { padding: 12px; margin: 3px 0; width: 100%; outline: none; border: 1px solid #CCC; border-radius: 0; } 350 | 351 | .select ::-moz-placeholder, .textfield ::-moz-placeholder { opacity: 1; color: #fff; } 352 | 353 | .select :-ms-input-placeholder, .textfield :-ms-input-placeholder { color: #fff; } 354 | 355 | .select ::-webkit-input-placeholder, .textfield ::-webkit-input-placeholder { color: #fff; } 356 | 357 | .textfield__helper { color: #333; font-size: 1.2rem; line-height: 2; } 358 | 359 | .textfield__error { color: #F8011E; font-size: 1.2rem; line-height: 2; } 360 | 361 | .textfield--error { border: 1px solid #F8011E; } 362 | 363 | .textfield--large { padding: 20px; } 364 | 365 | .textfield--radius { border-radius: 0.25em; } 366 | 367 | .textfield--radius-left { border-top-left-radius: 0.25em; border-bottom-left-radius: 0.25em; } 368 | 369 | .textfield--radius-right { border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em; } 370 | 371 | .textfield--shadow:focus { border-color: #51a7e8; outline: none; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); } 372 | 373 | .select, .textfield { padding: 12px; margin: 3px 0; width: 100%; outline: none; border: 1px solid #CCC; border-radius: 0; } 374 | 375 | .select ::-moz-placeholder, .textfield ::-moz-placeholder { opacity: 1; color: #fff; } 376 | 377 | .select :-ms-input-placeholder, .textfield :-ms-input-placeholder { color: #fff; } 378 | 379 | .select ::-webkit-input-placeholder, .textfield ::-webkit-input-placeholder { color: #fff; } 380 | 381 | .textfield__helper { color: #333; font-size: 1.2rem; line-height: 2; } 382 | 383 | .textfield__error { color: #F8011E; font-size: 1.2rem; line-height: 2; } 384 | 385 | .textfield--error { border: 1px solid #F8011E; } 386 | 387 | .textfield--large { padding: 20px; } 388 | 389 | .textfield--radius { border-radius: 0.25em; } 390 | 391 | .textfield--radius-left { border-top-left-radius: 0.25em; border-bottom-left-radius: 0.25em; } 392 | 393 | .textfield--radius-right { border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em; } 394 | 395 | .textfield--shadow:focus { border-color: #51a7e8; outline: none; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); } 396 | 397 | .select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAYAAAARx7TFAAAAAXNSR0IArs4c6QAAAJ1JREFUCB1jzMnJCWdkZBSdPHnyFAYk0NDQwPbmzZuVTExMk5iA4p7//v2bDFScC1OzatUqZqCC5f////cHyikwiYiIJAFNWgIUmARSCKQZDx48OAdIBwJNSZ8yZcp8RpBuoNFMQJ0LgRIxQO4hILYFKsgEOmEmSJ4ZRBw4cOC/l5fXxu/fvysDub5Ak3OAJswAyWEAkIm5ublu6BIADTRHW7YWzxEAAAAASUVORK5CYII="); background-position: right 7px center; background-repeat: no-repeat; } 398 | 399 | .select--radius { border-radius: 0.25em; } 400 | 401 | .select--shadow:focus { border-color: #51a7e8; outline: none; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5); } 402 | 403 | .table { max-width: 100%; width: 100%; border: 1px solid #CCC; border-spacing: 0; border-collapse: collapse; } 404 | 405 | .table__head th { padding: 8px; border-right: 1px solid #CCC; border-bottom: 2px solid #CCC; text-align: left; } 406 | 407 | .table__head th[sortable="true"] { cursor: pointer; } 408 | 409 | .table__body > tr > td { padding: 8px; border-right: 1px solid #CCC; text-align: left; } 410 | 411 | .table__body > tr:nth-of-type(odd) { background-color: #F2F2F2; } 412 | 413 | .table__sort--asc:after { content: '\25BE'; font-size: 2rem; position: relative; float: right; margin-top: -7px; height: 0; } 414 | 415 | .table__sort--desc:after { content: '\25B4'; font-size: 2rem; position: relative; float: right; margin-top: -7px; height: 0; } 416 | 417 | .pager { font-size: 1.4rem; } 418 | 419 | .pager__page { text-decoration: none; position: relative; float: left; padding: 8px 15px; margin-left: -5px; background-color: #fff; color: #0096D9; border: 1px solid #CCC; } 420 | 421 | .pager__page--active { text-decoration: none; color: black; background-color: #CCC; } 422 | 423 | .pager__page:focus { text-decoration: none; } 424 | 425 | .pager__page:hover { text-decoration: none; color: black; background-color: #CCC; } 426 | 427 | .pager li { display: inline-block; } 428 | 429 | .pager--radius li:first-child > a, .pager--radius li:first-child > span { border-top-left-radius: 0.25em; border-bottom-left-radius: 0.25em; } 430 | 431 | .pager--radius li:last-child > a, .pager--radius li:last-child > span { border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em; } 432 | 433 | .alert--green .alert__close, .alert--red .alert__close, .alert--blue .alert__close, .alert--orange .alert__close, .alert--gray .alert__close, .alert--white .alert__close { position: relative; top: -4px; right: -21px; padding: 0 20px; float: right; font-size: 1.6rem; cursor: pointer; text-decoration: none; } 434 | 435 | .alert { padding: 15px; margin-bottom: 20px; background: none; } 436 | 437 | .alert--radius { border-radius: 0.25em; } 438 | 439 | .alert--green { border: 1px dashed #00B35E; color: #00B35E; } 440 | 441 | .alert--green .alert__close { color: #00B35E; } 442 | 443 | .alert--green .alert__close:hover { text-decoration: none; } 444 | 445 | .alert--red { border: 1px dashed #F8011E; color: #F8011E; } 446 | 447 | .alert--red .alert__close { color: #F8011E; } 448 | 449 | .alert--red .alert__close:hover { text-decoration: none; } 450 | 451 | .alert--blue { border: 1px dashed #0096D9; color: #0096D9; } 452 | 453 | .alert--blue .alert__close { color: #0096D9; } 454 | 455 | .alert--blue .alert__close:hover { text-decoration: none; } 456 | 457 | .alert--orange { border: 1px dashed #F7931E; color: #F7931E; } 458 | 459 | .alert--orange .alert__close { color: #F7931E; } 460 | 461 | .alert--orange .alert__close:hover { text-decoration: none; } 462 | 463 | .alert--gray { border: 1px dashed #999; color: #999; } 464 | 465 | .alert--gray .alert__close { color: #999; } 466 | 467 | .alert--gray .alert__close:hover { text-decoration: none; } 468 | 469 | .alert--white { border: 1px dashed #fff; color: #fff; } 470 | 471 | .alert--white .alert__close { color: #fff; } 472 | 473 | .alert--white .alert__close:hover { text-decoration: none; } 474 | 475 | .card { -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); -webkit-transition: 0.3s; transition: 0.3s; } 476 | 477 | .card:hover { -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } 478 | 479 | .card--radius { border-radius: 0.25em; } 480 | 481 | .card--green { border: 1px solid #00B35E; } 482 | 483 | .card--green > .card__header { padding: 1em .5em; background-color: #00B35E; color: #fff; } 484 | 485 | .card--red { border: 1px solid #F8011E; } 486 | 487 | .card--red > .card__header { padding: 1em .5em; background-color: #F8011E; color: #fff; } 488 | 489 | .card--blue { border: 1px solid #0096D9; } 490 | 491 | .card--blue > .card__header { padding: 1em .5em; background-color: #0096D9; color: #fff; } 492 | 493 | .card--orange { border: 1px solid #F7931E; } 494 | 495 | .card--orange > .card__header { padding: 1em .5em; background-color: #F7931E; color: #fff; } 496 | 497 | .card--gray { border: 1px solid #999; } 498 | 499 | .card--gray > .card__header { padding: 1em .5em; background-color: #999; color: #000; } 500 | 501 | .card--white { border: 1px solid #fff; } 502 | 503 | .card--white > .card__header { padding: 1em .5em; background-color: #fff; color: #000; } 504 | 505 | .card__title { font-size: 1.6rem; font-weight: bold; } 506 | 507 | .card__tools > i { margin: 0 .5em; cursor: pointer; } 508 | 509 | .card__content { padding: 1em .5em; } 510 | 511 | .popover { position: relative; cursor: pointer; } 512 | 513 | .popover__content { visibility: hidden; background-color: #1a1a1a; color: #fff; text-align: center; border-radius: 6px; padding: 1em; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -60px; opacity: 0; -webkit-transition: opacity 1s; transition: opacity 1s; } 514 | 515 | .popover__content:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #1a1a1a transparent transparent transparent; } 516 | 517 | .popover:hover .popover__content { visibility: visible; opacity: 1; } 518 | 519 | .modal { display: none; position: fixed; z-index: 999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; background-color: rgba(0, 0, 0, 0.4); } 520 | 521 | .modal__header { padding: 2px 16px; } 522 | 523 | .modal__header--border { border-bottom: 1px solid #999; } 524 | 525 | .modal__header--blue { background-color: #0096D9; color: white; } 526 | 527 | .modal__header--blue .modal__close { color: #fff; } 528 | 529 | .modal__content { position: relative; background-color: #fff; margin: 15% auto; padding: 0; width: 80%; -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s; } 530 | 531 | .modal__body { padding: 2px 16px; } 532 | 533 | .modal__footer { padding: 2px 16px; } 534 | 535 | .modal__footer--border { border-top: 1px solid #999; } 536 | 537 | .modal__footer--blue { background-color: #0096D9; color: white; } 538 | 539 | .modal__close { float: right; font-size: 28px; font-weight: bold; color: #999; cursor: pointer; text-decoration: none; } 540 | 541 | .modal__close:hover, .modal__close:focus { text-decoration: none; } 542 | 543 | @-webkit-keyframes animatetop { from { top: -300px; 544 | opacity: 0; } 545 | to { top: 0; 546 | opacity: 1; } } 547 | 548 | @keyframes animatetop { from { top: -300px; 549 | opacity: 0; } 550 | to { top: 0; 551 | opacity: 1; } } 552 | 553 | .form__wrapper { width: 100%; padding: 7px 0; } 554 | 555 | .form__label { width: 20%; min-width: 100px; } 556 | 557 | .form__label--required:after { content: '*'; color: #F8011E; } 558 | 559 | .form__icon { color: #000; background-color: #CCC; padding: 13px; } 560 | 561 | .form__icon--radius-left { border-top-left-radius: 0.25em; border-bottom-left-radius: 0.25em; } 562 | 563 | .form__icon--radius-right { border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em; } 564 | 565 | .label { padding: .1em .5em; } 566 | 567 | .label--green { background: #00B35E; color: #fff; } 568 | 569 | .label-outline--green { border: 1px solid #00B35E; color: #00B35E; } 570 | 571 | .label--red { background: #F8011E; color: #fff; } 572 | 573 | .label-outline--red { border: 1px solid #F8011E; color: #F8011E; } 574 | 575 | .label--blue { background: #0096D9; color: #fff; } 576 | 577 | .label-outline--blue { border: 1px solid #0096D9; color: #0096D9; } 578 | 579 | .label--orange { background: #F7931E; color: #fff; } 580 | 581 | .label-outline--orange { border: 1px solid #F7931E; color: #F7931E; } 582 | 583 | .label--gray { background: #999; color: #000; } 584 | 585 | .label-outline--gray { border: 1px solid #999; color: #999; } 586 | 587 | .label--white { background: #fff; color: #000; } 588 | 589 | .label-outline--white { border: 1px solid #fff; color: #fff; } 590 | 591 | .label--radius { border-radius: 2em; padding: .1em .8em .2em .8em; } 592 | 593 | .badge { border-radius: 0.25em; border: 1px solid #CCC; } 594 | 595 | .badge__item { line-height: 1.5rem; padding: 10px 20px; display: block; margin: 0; border-bottom: 1px solid #CCC; } 596 | 597 | .badge__item:last-child { border: 0; } 598 | 599 | .badge__info { min-width: 3rem; padding: 0 6px; text-align: center; font-size: 1.2rem; line-height: 22px; height: 22px; color: #757575; float: right; margin-top: calc(.75rem - 11px); } 600 | 601 | .badge--state-new { background-color: #89C747; color: #fff; font-size: .8rem; } 602 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | BEM KIT - Demo & Cheatsheet 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 57 | 58 | 59 | 60 | 61 | 62 |
63 |
64 |
65 | 66 | 67 | 68 |
69 |
70 |
71 | 72 | 73 |
74 |
75 |
76 |
77 |

78 | BEM KIT 79 |

80 |

81 | CSS UI Kit using BEM in class naming standard 82 |

83 |
84 |
85 | 86 | 88 | Homepage 89 | 90 | 92 | Download 93 | 94 | 96 | Source Code 97 | 98 | 99 |
100 |
101 |
102 | 103 |
104 |

BEM KIT 105 | (demo and cheatsheet) 106 |

107 |
108 |
109 | 110 | 141 | 142 |
143 | 144 |
145 |

Overview

146 |

Blocks, Elements and Modifiers

147 |

148 | Blocks : Standalone entity that is meaningful on its own. 149 |
150 | Examples : header, container, menu, checkbox, input 151 |

152 |

153 | Element : Parts of a block and have no standalone meaning. They are semantically tied to its block. 154 |
155 | Examples : menu item, list item, checkbox caption, header title 156 |

157 |

158 | Modifier : Flags on blocks or elements. Use them to change appearance or behavior. 159 |
160 | Examples : disabled, highlighted, checked, fixed, size big, color yellow 161 |

162 |

163 | Further Reading : http://getbem.com/introduction/ 164 |

165 |

166 | See Github Repo : https://github.com/mazipan/bem-kit 167 |

168 | 169 |

How to use

170 | 171 | 172 | Using CSS Native : 173 | 
 174 | 
 175 | <link  rel="stylesheet" href="{URL_PATH}/css/bem-kit.min.css" rel="stylesheet"/>
 176 |
177 | 178 | Using SASS Import : 179 | 
 180 | 
 181 | // if you want import all classes
 182 | @import "./bem-kit/src/_bem-kit";
 183 | 
 184 | // if you want import RULES only without classes
 185 | @import "./bem-kit/src/_bem-kit";
 186 | 
 187 |
188 | 189 | Added Javascript Functionality (Optional) : 190 | 
 191 | 
 192 | <!-- jquery library {optional - if you want use the script} -->
 193 | <script type="text/javascript" src="{URL_PATH}/js/jquery.min.js"></script>
 194 | 
 195 | <!-- bem-kit js depedency - {optional - if you want use the script} -->
 196 | <script type="text/javascript" src="{URL_PATH}/js/bem-kit.min.js"></script>
 197 | 
 198 |
199 | 200 |
201 | 202 |
203 |

Typography

204 |
205 |
206 |

Heading

207 |

h1

208 |

h2

209 |

h3

210 |

h4

211 |
h5
212 |
213 |
214 |

Paragraph

215 |

216 | Lorem ipsum dolor sit amet 217 | Lorem ipsum dolor sit amet 218 | Lorem ipsum dolor sit amet 219 | Lorem ipsum dolor sit amet 220 | Lorem ipsum dolor sit amet 221 | Lorem ipsum dolor sit amet 222 | Lorem ipsum dolor sit amet 223 | Lorem ipsum dolor sit amet 224 | Lorem ipsum dolor sit amet 225 | Lorem ipsum dolor sit amet 226 | Lorem ipsum dolor sit amet 227 | Lorem ipsum dolor sit amet 228 |

229 | 230 |

Blockquote

231 |
232 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

233 |
234 | 235 |
236 |
237 |
238 | 239 |
240 |

Grids

241 |

Row And Columns

242 |
243 |
grid__row (total col in row = 12)
244 |
245 |
grid__col-12
246 |
247 |
248 |
grid__col-3
249 |
grid__col-3
250 |
grid__col-10
251 |
252 |
253 |
grid__offset-1
254 |
255 |
256 |
grid__offset-2
257 |
258 |
259 |
grid__offset-3
260 |
261 |
262 | 263 | 

 264 | <!-- snippet code for grid -->
 265 | <div class="grid">
 266 |   <div class="grid__row">grid__row (total col in row = 12)</div>
 267 |   <div class="grid__row">
 268 |     <div class="grid__col-12">grid__col-12</div>
 269 |   </div> 
 270 |   <div class="grid__row">
 271 |     <div class="grid__col-3">grid__col-3</div>
 272 |     <div class="grid__col-3">grid__col-3</div>
 273 |     <div class="grid__col-6">grid__col-6</div>
 274 |   </div>
 275 |   <div class="grid__row">
 276 |     <div class="grid__offset-1">grid__offset-1</div>
 277 |   </div>
 278 |   <div class="grid__row">
 279 |     <div class="grid__offset-2">grid__offset-2</div>
 280 |   </div>
 281 |   <div class="grid__row">
 282 |     <div class="grid__offset-3">grid__offset-3</div>
 283 |   </div>
 284 | </div>
285 | 286 |

Flex Box

287 |
288 |
289 |
div in flex box
290 |
div in flex box
291 |
div in flex box
292 |
div in flex box
293 |
294 |
295 |
div in flex box
296 |
div in flex box
297 |
div in flex box
298 |
299 |
300 | 301 | 

 302 | <!-- snippet code for grid with flex -->
 303 | <div class="grid__flex">
 304 |   <div class="grid__item">div in flex box</div>
 305 |   <div class="grid__item">div in flex box</div>
 306 |   <div class="grid__item">div in flex box</div>
 307 | </div>
308 | 309 |
310 | 311 |
312 |

Labels

313 |

Label Flat

314 |
315 | label--green 316 | 99 317 | label--red 318 | 99 319 | label--blue 320 | 99 321 | label--orange 322 | 99 323 | label--gray 324 | 99 325 |
326 |

Label Radius

327 |
328 | label--green 329 | 99 330 | label--red 331 | 99 332 | label--blue 333 | 99 334 | label--orange 335 | 99 336 | label--gray 337 | 99 338 |
339 |

Label Outline

340 |
341 | label--green 342 | 99 343 | label--red 344 | 99 345 | label--blue 346 | 99 347 | label--orange 348 | 99 349 | label--gray 350 | 99 351 |
352 |

Label Outline Radius

353 |
354 | label--green 355 | 99 356 | label--red 357 | 99 358 | label--blue 359 | 99 360 | label--orange 361 | 99 362 | label--gray 363 | 99 364 |
365 | 366 |
367 | 368 |
369 |

Buttons

370 |

Button

371 |
372 | 373 | 374 | 375 | 376 | 377 |
378 | 379 | 

 380 | <!-- snippet code for button -->
 381 | <button class="button button--green">button button--green</button>
 382 | <button class="button button--red">button button--red</button>
 383 | <button class="button button--blue">button button--blue</button>
 384 | <button class="button button--orange">button button--orange</button>
 385 | <button class="button button--gray">button button--gray</button>
386 | 387 |

Button Link

388 |
389 | button--green 390 | button--red 391 | button--blue 392 | button--orange 393 | button--gray 394 |
395 | 396 | 

 397 | <!-- snippet code for button -->
 398 | <a href="javascript:void(0)" class="button button--green">button button--green</a>
 399 | <a href="javascript:void(0)" class="button button--red">button button--red</a>
 400 | <a href="javascript:void(0)" class="button button--blue">button button--blue</a>
 401 | <a href="javascript:void(0)" class="button button--orange">button button--orange</a>
 402 | <a href="javascript:void(0)" class="button button--gray">button button--gray</a>
403 | 404 |

Buttons Outline

405 |
406 | 407 | 408 | 409 | 410 | 411 |
412 | 413 | 

 414 | <!-- snippet code for button -->
 415 | <button class="button button-outline--green">button button-outline--green</button>
 416 | <button class="button button-outline--red">button button-outline--red</button>
 417 | <button class="button button-outline--blue">button button-outline--blue</button>
 418 | <button class="button button-outline--orange">button button-outline--orange</button>
 419 | <button class="button button-outline--gray">button button-outline--gray</button>
420 | 421 |

Button Radius

422 |
423 | 424 | 425 | 426 | 427 | 428 |
429 | 430 | 

 431 | <!-- snippet code for button -->
 432 | <button class="button button--radius button--green">button button--radius button--green</button>
 433 | <button class="button button--radius button--red">button button--radius button--red</button>
 434 | <button class="button button--radius button--blue">button button--radius button--blue</button>
 435 | <button class="button button--radius button--orange">button button--radius button--orange</button>
 436 | <button class="button button--radius button--gray">button button--radius button--gray</button>
437 | 438 |

Buttons Dropdown

439 |
440 | 449 | 458 | 467 | 476 | 485 |
486 | 487 | 

 488 | <!-- snippet code for button--dropdown -->
 489 | <button class="button button--dropdown button--gray">
 490 |   <i class="fa fa-cog"></i> 
 491 | 
 492 |   <ul class="button__menu" role="menu">
 493 |     <li><a href="#">25</a></li>
 494 |     <li><a href="#">50</a></li>
 495 |     <li><a href="#">100</a></li>
 496 |   </ul>
 497 | </button>
498 | 499 |
500 | 501 |
502 |

Forms

503 |

Textfield

504 |
505 | 506 | 507 | 508 | 509 | 510 | This is helper text 511 | This is helper error message 512 |
513 | 514 |

Text Area

515 |
516 | 517 | 518 |
519 | 520 | 

 521 | <!-- snippet code for textfield -->
 522 | <input class="textfield" id="textfield-1" placeholder="textfield" />
 523 | <input class="textfield textfield--shadow" id="textfield-2" placeholder="textfield textfield--shadow"/>
 524 | <input class="textfield textfield--error" id="textfield-3" placeholder="textfield textfield--error"/>
 525 | <input class="textfield textfield--radius" id="textfield-4" placeholder="textfield textfield--radius"/>
 526 | <input class="textfield textfield--large" id="textfield-5" placeholder="textfield textfield--large" />
 527 | <span class="textfield__helper">This is helper text<span>
 528 | <span class="textfield__error">This is helper error message<span>
529 | 530 |

Input Select Box

531 |
532 | 537 | 542 | 547 | 552 |
553 | 554 | 

 555 | <!-- snippet code for select -->
 556 | <select class="select" id="select_box-1">
 557 |   <option value="1">1</option>
 558 |   <option value="2">2</option>
 559 |   <option value="3">3</option>
 560 | </select>
561 | 562 |

Checkboxes

563 |
564 | 565 | 566 | 567 | 568 | 569 | 570 |
571 | 572 |
573 | 574 | 575 | 576 | 577 | 578 | 579 |
580 | 581 |
582 | 

 583 | <!-- snippet code for checkbox -->
 584 | <input class="checkbox" type="checkbox" id="checkbox-1" name"checkbox"/>
 585 | <label for="checkbox-1">Check 1</label>
 586 | <input class="checkbox" type="checkbox" id="checkbox-2" name"checkbox"/>
 587 | <label for="checkbox-2">Check 2</label>
 588 | <input class="checkbox" type="checkbox" id="checkbox-3" name"checkbox"/>
 589 | <label for="checkbox-3">Check 3</label>
590 |
591 | 592 |

Radio

593 |
594 | 595 | 596 | 597 | 598 | 599 | 600 |
601 |
602 | 603 | 604 | 605 | 606 | 607 | 608 |
609 | 610 |
611 | 

 612 | <!-- snippet code for radio -->
 613 | <input class="radio" type="radio" id="radio-1" name"radio"/>
 614 | <label for="radio-1">Yes</label>
 615 | <input class="radio" type="radio" id="radio-2" name"radio"/>
 616 | <label for="radio-2">No</label>
 617 | <input class="radio" type="radio" id="radio-3" name"radio--blue"/>
 618 | <label for="radio-3">Yes</label>
 619 | <input class="radio" type="radio" id="radio-4" name"radio--blue"/>
 620 | <label for="radio-4">No</label>
621 |
622 | 623 |

Form Group

624 |
625 |
626 |
627 | I am label : 628 |
629 | 630 |
631 |
632 |
633 | I am required label : 634 |
635 | 636 |
637 |
638 |
639 | I am label : 640 |
641 |
642 | 643 | 644 | 645 | 646 |
647 |
648 |
649 |
650 | I am label : 651 |
652 |
653 | 654 | 655 | 656 | 657 |
658 |
659 |
660 |
661 | Rp. 662 |
663 | 664 |
665 |
666 | 667 |
668 | @gmail.com 669 |
670 |
671 |
672 | 673 |

Alert

674 |
675 |
676 | x 677 | Info! alert alert--radius alert--green 678 |
679 |
680 | x 681 | Info! alert alert--radius alert--red 682 |
683 |
684 | x 685 | Info! alert alert--radius alert--blue 686 |
687 |
688 | x 689 | Info! alert alert--radius alert--orange 690 |
691 |
692 | x 693 | Info! alert alert--radius alert--gray 694 |
695 |
696 | 697 |
698 | 

 699 | <!-- snippet code for alert -->
 700 | <div class="alert alert--radius alert--green">
 701 |   <a href="javascript:void(0)" class="alert__close">x</a>
 702 |   <strong>Info!</strong> alert alert--radius alert--green
 703 | </div> 
 704 | <div class="alert alert--radius alert--red">
 705 |   <a href="javascript:void(0)" class="alert__close">x</a>
 706 |   <strong>Info!</strong> alert alert--radius alert--red
 707 | </div> 
 708 | <div class="alert alert--radius alert--blue">
 709 |   <a href="javascript:void(0)" class="alert__close">x</a>
 710 |   <strong>Info!</strong> alert alert--radius alert--blue
 711 | </div> 
 712 | <div class="alert alert--radius alert--orange">
 713 |   <a href="javascript:void(0)" class="alert__close">x</a>
 714 |   <strong>Info!</strong> alert alert--radius alert--orange
 715 | </div> 
 716 | <div class="alert alert--radius alert--gray">
 717 |   <a href="javascript:void(0)" class="alert__close">x</a>
 718 |   <strong>Info!</strong> alert alert--radius alert--gray
 719 | </div>
720 |
721 | 722 |

Popover

723 |
724 |
725 | Hover Me, I am popover ! 726 |
727 | Hello, I am popover__content ! 728 |
729 |
730 |
731 | 732 |
733 | 

 734 | <!-- snippet code for popover -->
 735 | <div class="popover">
 736 |   <span>Hover Me, I am popover !</span>
 737 |   <div class="popover__content">
 738 |     Hello, I am popover__content !
 739 |   </div>
 740 | </div>
741 |
742 | 743 |

Tabs

744 |
745 | 746 |
Tabs Horizontal
747 | 767 | 768 | 

 769 | <!-- snippet code for tabs -->
 770 | <ul class="tabs">
 771 |   <li class="tabs__item tabs__item--active" data-target="#overview">
 772 |     <a href="#overview">Overview</a>
 773 |   </li>
 774 |   <li class="tabs__item" data-target="#typography">
 775 |     <a href="#typography">Typography</a>
 776 |   </li>
 777 |   <li class="tabs__item" data-target="#grids">
 778 |     <a href="#grids">Grids</a>
 779 |   </li>
 780 |   <li class="tabs__item" data-target="#buttons">
 781 |     <a href="#buttons">Buttons</a>
 782 |   </li>
 783 |   <li class="tabs__item" data-target="#forms">
 784 |     <a href="#forms">Forms</a>
 785 |   </li>
 786 |   <li class="tabs__item" data-target="#table">
 787 |     <a href="#table">Table</a>
 788 |   </li>
 789 | </ul>
790 | 791 |
Tabs Vertical
792 | 812 | 813 | 

 814 | <!-- snippet code for tabs vertical -->
 815 | <ul class="tabs tabs--vertical">
 816 |   <li class="tabs__itemv tabs__itemv--active" data-target="#overview">
 817 |     <a href="#overview">Overview</a>
 818 |   </li>
 819 |   <li class="tabs__itemv" data-target="#typography">
 820 |     <a href="#typography">Typography</a>
 821 |   </li>
 822 |   <li class="tabs__itemv" data-target="#grids">
 823 |     <a href="#grids">Grids</a>
 824 |   </li>
 825 |   <li class="tabs__itemv" data-target="#buttons">
 826 |     <a href="#buttons">Buttons</a>
 827 |   </li>
 828 |   <li class="tabs__itemv" data-target="#forms">
 829 |     <a href="#forms">Forms</a>
 830 |   </li>
 831 |   <li class="tabs__itemv" data-target="#table">
 832 |     <a href="#table">Table</a>
 833 |   </li>
 834 | </ul>
835 | 836 |
837 | 838 |
839 | 840 |
841 |

Card

842 | 843 |

Card Flat

844 |
845 | 846 |
847 |
848 |
Title Card
849 |
850 | 851 |
852 |
853 |
854 | Sample of content 855 |
856 |
857 | 858 |
859 |
860 |
Title Card
861 |
862 | 863 |
864 |
865 |
866 | Sample of content 867 |
868 |
869 | 870 |
871 |
872 |
Title Card
873 |
874 | 875 |
876 |
877 |
878 | Sample of content 879 |
880 |
881 | 882 |
883 |
884 |
Title Card
885 |
886 | 887 |
888 |
889 |
890 | Sample of content 891 |
892 |
893 | 894 |
895 |
896 |
Title Card
897 |
898 | 899 |
900 |
901 |
902 | Sample of content 903 |
904 |
905 | 906 |
907 | 908 |

Card Radius

909 |
910 | 911 |
912 |
913 |
Title Card
914 |
915 | 916 |
917 |
918 |
919 | Sample of content 920 |
921 |
922 | 923 |
924 |
925 |
Title Card
926 |
927 | 928 |
929 |
930 |
931 | Sample of content 932 |
933 |
934 | 935 |
936 |
937 |
Title Card
938 |
939 | 940 |
941 |
942 |
943 | Sample of content 944 |
945 |
946 | 947 |
948 |
949 |
Title Card
950 |
951 | 952 |
953 |
954 |
955 | Sample of content 956 |
957 |
958 | 959 |
960 |
961 |
Title Card
962 |
963 | 964 |
965 |
966 |
967 | Sample of content 968 |
969 |
970 | 971 |
972 | 973 |
974 | 

 975 | <!-- snippet code for card -->
 976 | <div class="card card--green">card card--green</div>
 977 | <div class="card card--green card--radius">card card--gray card--radius</div>
978 |
979 | 980 |
981 | 982 |
983 |

Modal

984 |
985 | 986 | 991 | 996 | 1001 | 1002 | 1016 | 1017 | 1031 | 1032 | 1046 | 1047 | 1048 | 

1049 | <!-- snippet code for modal button trigger -->
1050 | <button class="button button--blue" data-show="modal" data-target="modalPlain">
1051 |   Open Modal 
1052 | </button>
1053 | <button class="button button--blue" data-show="modal" data-target="modalBlue">
1054 |   Open Modal 
1055 | </button>
1056 | <button class="button button--blue" data-show="modal" data-target="modalBorder">
1057 |   Open Modal 
1058 | </button>
1059 | 
1060 | <!-- snippet code for modal varian -->
1061 | <div id="modalPlain" class="modal" role="modal">
1062 |   <div class="modal__content">
1063 |     <div class="modal__header">
1064 |       <span class="modal__close">×</span>
1065 |       <h2>Modal Header</h2>
1066 |     </div>
1067 |     <div class="modal__body">
1068 |       <p>Some text in the Modal Body</p>
1069 |     </div>
1070 |     <div class="modal__footer">
1071 |       <h3>Modal Footer</h3>
1072 |     </div>
1073 |   </div>
1074 | </div>
1075 | 
1076 | <div id="modalBlue" class="modal" role="modal">
1077 |   <div class="modal__content">
1078 |     <div class="modal__header modal__header--blue">
1079 |       <span class="modal__close">×</span>
1080 |       <h2>Modal Header</h2>
1081 |     </div>
1082 |     <div class="modal__body">
1083 |       <p>Some text in the Modal Body</p>
1084 |     </div>
1085 |     <div class="modal__footer modal__footer--blue">
1086 |       <h3>Modal Footer</h3>
1087 |     </div>
1088 |   </div>
1089 | </div>
1090 | 
1091 | <div id="modalBorder" class="modal" role="modal">
1092 |   <div class="modal__content">
1093 |     <div class="modal__header modal__header--border">
1094 |       <span class="modal__close">×</span>
1095 |       <h2>Modal Header</h2>
1096 |     </div>
1097 |     <div class="modal__body">
1098 |       <p>Some text in the Modal Body</p>
1099 |     </div>
1100 |     <div class="modal__footer modal__footer--border">
1101 |       <h3>Modal Footer</h3>
1102 |     </div>
1103 |   </div>
1104 | </div>
1105 | 1106 |
1107 |
1108 | 1109 |
1110 |

Table

1111 |
1112 | 1113 |

Table

1114 | 1115 | 1116 | 1117 | 1118 | 1119 | 1120 | 1121 | 1122 | 1123 | 1124 | 1125 | 1126 | 1127 | 1128 | 1129 | 1130 | 1131 | 1132 | 1133 | 1134 | 1135 | 1136 | 1137 | 1138 | 1139 | 1140 | 1141 | 1142 | 1143 |
#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
1144 | 1145 | 

1146 | <!-- snippet code for table -->
1147 | <table class="table">
1148 |   <thead class="table__head">
1149 |     <tr>
1150 |       <th class="table__sort--asc" sortable="true">#</th>
1151 |       <th class="table__sort--desc" sortable="true">First Name</th>
1152 |       <th>Last Name</th>
1153 |       <th>Username</th>
1154 |     </tr>
1155 |   </thead>
1156 |   <tbody class="table__body">
1157 |     <tr>
1158 |       <td>1</td>
1159 |       <td>Mark</td>
1160 |       <td>Otto</td>
1161 |       <td>@mdo</td>
 </tr>
1162 |     <tr>
1163 |       <td>2</td>
1164 |       <td>Jacob</td>
1165 |       <td>Thornton</td>
1166 |       <td>@fat</td>
1167 |     </tr>
1168 |     <tr>
1169 |       <td>3</td>
1170 |       <td>Larry</td>
1171 |       <td>the Bird</td>
1172 |       <td>@twitter</td>
1173 |     </tr>
1174 |   </tbody>
1175 | </table>
1176 | 1177 |

Pagination

1178 |
    1179 |
  • 1180 | Previous 1181 |
    • 1182 |
  • 1183 | 1 1184 |
    • 1185 |
  • 1186 | 2 1187 |
    • 1188 |
  • 1189 | 3 1190 |
    • 1191 |
  • 1192 | 4 1193 |
    • 1194 |
  • 1195 | 5 1196 |
    • 1197 |
  • 1198 | Next 1199 |
    • 1200 |
1201 | 1202 |
    1203 |
  • 1204 | Previous 1205 |
    • 1206 |
  • 1207 | 1 1208 |
    • 1209 |
  • 1210 | 2 1211 |
    • 1212 |
  • 1213 | 3 1214 |
    • 1215 |
  • 1216 | 4 1217 |
    • 1218 |
  • 1219 | 5 1220 |
    • 1221 |
  • 1222 | Next 1223 |
    • 1224 |
1225 | 1226 | 

1227 | <!-- snippet code for pager -->
1228 | <ul class="pager"> 
1229 |   <li> 
1230 |     <a href="javascript:void(0)" class="pager__page">Previous</a> 
1231 |   </li> 
1232 |   <li>
1233 |     <a href="javascript:void(0)" class="pager__page">1</a>
1234 |   </li> 
1235 |   <li>
1236 |     <a href="javascript:void(0)" class="pager__page">2</a>
1237 |   </li> 
1238 |   <li>
1239 |     <a href="javascript:void(0)" class="pager__page">3</a>
1240 |   </li> 
1241 |   <li>
1242 |     <a href="javascript:void(0)" class="pager__page">4</a>
1243 |   </li> 
1244 |   <li>
1245 |     <a href="javascript:void(0)" class="pager__page">5</a>
1246 |   </li> 
1247 |   <li> 
1248 |     <a href="javascript:void(0)" class="pager__page">Next</a> 
1249 |   </li> 
1250 | </ul>
1251 | 
1252 | <!-- snippet code for pager--radius -->
1253 | <ul class="pager pager--radius"> 
1254 |   <li> 
1255 |     <a href="javascript:void(0)" class="pager__page">Previous</a> 
1256 |   </li> 
1257 |   <li>
1258 |     <a href="javascript:void(0)" class="pager__page">1</a>
1259 |   </li> 
1260 |   <li>
1261 |     <a href="javascript:void(0)" class="pager__page">2</a>
1262 |   </li> 
1263 |   <li>
1264 |     <a href="javascript:void(0)" class="pager__page">3</a>
1265 |   </li> 
1266 |   <li>
1267 |     <a href="javascript:void(0)" class="pager__page">4</a>
1268 |   </li> 
1269 |   <li>
1270 |     <a href="javascript:void(0)" class="pager__page">5</a>
1271 |   </li> 
1272 |   <li> 
1273 |     <a href="javascript:void(0)" class="pager__page">Next</a> 
1274 |   </li> 
1275 | </ul>
1276 | 1277 |
1278 |
1279 | 1280 |
1281 |

Badge

1282 |
1283 |
1284 | Mazipan 1 1285 | Mazipan 1 new 1286 |
1287 |
1288 | 

1289 | <!-- snippet code for Badge -->
1290 | <div class="badge">
1291 |   <a href="javascript:void(0)" class="badge__item">Mazipan <span class="badge__info ">1</span></a>
1292 |   <a href="javascript:void(0)" class="badge__item">Mazipan <span class="badge__info badge--state-new">1 new</span></a>
1293 | </div>
1294 |
1295 |
1296 | 1297 |
1298 | 1299 |
1300 |
1301 | 1302 | 1353 | 1354 | 1355 | 1356 | 1357 | 1358 | 1377 | 1378 | 1379 | 1410 | 1411 | 1412 | 1413 | --------------------------------------------------------------------------------