Turn your classes to CSS
74 | ``` 75 | 76 | Changing the font size to `15px` 77 | ``` 78 |You can combine formulas as well
79 | ``` 80 | 81 | ## Contributing 82 | 83 | You can contribute to this project by 84 | 85 | - Adding the support for other CSS attributes. (Fork it, add your feature, create the pull request) 86 | - Pointing out any bugs or issues 87 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "furnish-js", 3 | "description": "Let the classes on DOM elements generate the CSS for you", 4 | "version": "1.0", 5 | "main": [ 6 | "./dist/dom-furnish.min.js" 7 | ], 8 | "moduleType": [], 9 | "keywords": [ 10 | "javascript", 11 | "inline-style", 12 | "css", 13 | "javascript-css", 14 | "furnish", 15 | "furnish-js", 16 | "js-furnish" 17 | ], 18 | "authors": [ 19 | "Adnan Ahmed" 20 | ], 21 | "license": "MIT", 22 | "homepage": "https://github.com/idnan", 23 | "ignore": [ 24 | "**/.*", 25 | "node_modules", 26 | "bower_components", 27 | "test", 28 | "tests", 29 | "README.md" 30 | ], 31 | "dependencies": { 32 | } 33 | } -------------------------------------------------------------------------------- /dist/dom-furnish.min.js: -------------------------------------------------------------------------------- 1 | ; 2 | // Inline JS. Easily turn your classes into the style 3 | // v1.0 4 | !function(t,a){function e(t){var a=t&&t.className&&t.className.split(" ")||[];a.forEach(function(a){var e=n(a);e&&e.key&&(t.style[e.key]=e.value)})}function n(t){var a=t.match(/(^[a-z]{1,23})([0-9]{1,4})?/),e=a&&r[a[1]],n=a&&a[3]||"px";return e&&{key:e,value:a[2]+n}}function i(a){var n=a||t.document,i=n.getElementsByTagName("*");for(var r in i){var s=i[r];"object"==typeof s&&(e(s),o.observe(s,{attributes:!0,attributeFilter:["class"]}))}}var r={t:"top",b:"bottom",l:"left",r:"right",w:"width",h:"height",p:"padding",m:"margin",br:"borderRadius",fs:"fontSize",fw:"fontWeight",lh:"lineHeight",mt:"marginTop",mb:"marginBottom",ml:"marginLeft",mr:"marginRight",pt:"paddingTop",pb:"paddingBottom",pl:"paddingLeft",pr:"paddingRight"},o=new MutationObserver(function(t,a){t.forEach(function(t){var a=t.target;a.lastClassName!==a.className&&e(a),a.lastClassName=a.className})});return Furnish={apply:i}}(window,document); -------------------------------------------------------------------------------- /src/dom-furnish.js: -------------------------------------------------------------------------------- 1 | ; 2 | // Inline JS. Easily turn your classes into the style 3 | // v1.0 4 | (function(window, document ) { 5 | 6 | /** 7 | * CSS property aliases. Defines the mapping with CSS properties 8 | * @type {Object} 9 | */ 10 | var propertyAlias = { 11 | t: 'top', 12 | b: 'bottom', 13 | l: 'left', 14 | r: 'right', 15 | 16 | w: 'width', 17 | h: 'height', 18 | 19 | p: 'padding', 20 | m: 'margin', 21 | 22 | br: 'borderRadius', 23 | fs: 'fontSize', 24 | fw: 'fontWeight', 25 | lh: 'lineHeight', 26 | 27 | mt: 'marginTop', 28 | mb: 'marginBottom', 29 | ml: 'marginLeft', 30 | mr: 'marginRight', 31 | 32 | pt: 'paddingTop', 33 | pb: 'paddingBottom', 34 | pl: 'paddingLeft', 35 | pr: 'paddingRight' 36 | }; 37 | 38 | /** 39 | * Observer to keep an eye on element changes and furnishing elements 40 | */ 41 | var observer = new MutationObserver(function(mutations, observer) { 42 | mutations.forEach(function(mutation) { 43 | var target = mutation.target; 44 | target.lastClassName !== target.className && furnishElement(target); 45 | target.lastClassName = target.className; 46 | }); 47 | }); 48 | 49 | /** 50 | * Checks the passed element for applied classes and checks 51 | * to see if the element can be furnished i.e. if any of the known classes are available 52 | * 53 | * @param {object} element The object to be furnisged 54 | * @return {void} 55 | */ 56 | function furnishElement(element) { 57 | var classNames = element && element.className && element.className.split(' ') || []; 58 | // For each of the class names, see if we can furnish the element by this class 59 | classNames.forEach(function(className) { 60 | var style = generateStyle(className); 61 | style && style.key && (element.style[style.key] = style.value); 62 | }); 63 | } 64 | 65 | /** 66 | * Generates the style object from the passed class name 67 | 68 | * @param {string} className The name of from which style is to be generated 69 | * @return {object} An object specifying the CSS property and value 70 | */ 71 | function generateStyle(className) { 72 | var pieces = className.match(/(^[a-z]{1,23})([0-9]{1,4})?/), 73 | cssProperty = pieces && propertyAlias[pieces[1]], 74 | unit = pieces && pieces[3] || 'px'; 75 | 76 | return cssProperty && { 77 | key: cssProperty, 78 | value: pieces[2] + unit 79 | }; 80 | } 81 | 82 | /** 83 | * Furnish the elements in side the passed element 84 | * 85 | * @param {null|object} observeElement The dom element to which the style is applied 86 | * @return {void} 87 | */ 88 | function apply(observeElement) { 89 | 90 | var scope = observeElement || window.document; 91 | var elements = scope.getElementsByTagName('*'); 92 | for (var i in elements) { 93 | var element = elements[i]; 94 | if (typeof element === 'object') { 95 | furnishElement(element); 96 | observer.observe(element, { attributes: true, attributeFilter: ['class'] }); 97 | } 98 | } 99 | } 100 | 101 | return Furnish = { 102 | apply: apply 103 | }; 104 | 105 | })(window, document); --------------------------------------------------------------------------------