- to provide as small as possible file size.
- deliver an extensible responsive framework in a single javascript file.
- instead of using media queries, use a simple concept of device type:
- mobile
- tablet
- desktop
- needs to render fast
- no screen flicker
- no dependencies; PERIOD!
- familiar 12 column layout concept
- to be easily customizeable and extendable
- drop in sass dependencies
- edit sass
- edit js
- recompile
- ez automatically pulls in roboto font and material design icons from googlefonts.
- ez has a throttled window listener to check body sizes.
- the device detection is basic at this time, and the logical precendence is important for the detection to work. you can see explanation in src/ez.js
getSize()function.
gridbasic size selectionimprove device size selectionbasic typography- scaling typography
- list & menu components (including navbar)
- form components
animated loading indicator
- clone repo
- install dependencies with
npm install - build with gulp
gulp
<!-- its really this simple -->
<script src="dist/ez.min.js"></script>none yet.
.row- a row of columns.container(.fluid)- a container element with max width of 1200px. add.fluidclass for full width..col- a column element. default width 100%, so in case of element having class.col.m-12width will be 100% since no selector other than.colwill match..col.m-{1-11}m stands for mobile. width of element is 100 / number (in percent), same as bootstrap and foundation..col.t-{1-11}t stands for tablet. width of element is 100 / number (in percent), same as bootstrap and foundation..col.d-{1-11}m stands for desktop. width of element is 100 / number (in percent), same as bootstrap and foundation..loading(.hide-contents)attaching this class will overlay an element with an loading indicator animation. add.hide-contentsto hide all other children of the element..inputworks on textarea,select,and inputs..btnto be used on buttons, links, and input[type="button"] extra classes coming soon..form-groupprovides a bottom margin to a group of form inputs. identical to the same concept in bootstrap..checkboxcoming soon.radiocoming soon.switchcoming soon.slidercoming soon