{"id":19787545,"url":"https://github.com/themexpert/assets-helper","last_synced_at":"2026-06-05T21:31:33.121Z","repository":{"id":78840140,"uuid":"116458582","full_name":"themexpert/assets-helper","owner":"themexpert","description":"a Javascript Assets Helper library","archived":false,"fork":false,"pushed_at":"2018-03-19T04:34:35.000Z","size":473,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-24T18:55:49.034Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themexpert.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-01-06T06:09:43.000Z","updated_at":"2018-03-19T04:34:36.000Z","dependencies_parsed_at":"2024-01-23T21:28:21.002Z","dependency_job_id":"46dbda75-0e1e-4630-bf19-e56b9863d9d3","html_url":"https://github.com/themexpert/assets-helper","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themexpert%2Fassets-helper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themexpert%2Fassets-helper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themexpert%2Fassets-helper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themexpert%2Fassets-helper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themexpert","download_url":"https://codeload.github.com/themexpert/assets-helper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241120283,"owners_count":19913033,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-12T06:23:35.177Z","updated_at":"2026-06-05T21:31:33.068Z","avatar_url":"https://github.com/themexpert.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Assets Helper\n\n#### HTML Markup\n\n```html\n    \u003cdiv id=\"alert\"\u003e\n        \u003cp\u003e\n            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Porro debitis odio nisi. Odit eligendi necessitatibus maxime ab deleniti in voluptatem, obcaecati exercitationem ducimus adipisci soluta hic laboriosam dolorem animi. Facere.\n        \u003c/p\u003e\n    \u003c/div\u003e\n```\n\n\n#### Creating CSS Rules\n\n```js\n\n    /////////////////////////////////////////////////////////\n    //\n    // Loading Alert element assets\n    //\n    /////////////////////////////////////////////////////////\n    var AlertAssets = Object.assign({}, Assets);\n\n    // desktop rules\n    AlertAssets.desktop(\"#alert\", \"background: red; color: white; padding: 100px;\");\n\n    // tablet rules\n    AlertAssets.tablet(\"#alert\", \"background: green; color: white; padding: 50px;\");\n\n    // phone rules\n    AlertAssets.phone(\"#alert\", \"background: black; color: white; padding: 20px;\");\n\n    // responsive margin rules\n    AlertAssets.margin(\"#alert\", {\n        top: 10, bottom: 20, right: 10, left: 15, // desktop\n        responsive: true, // want responsive\n        tablet: {\n            top: 10, bottom: 20, right: 10, left: 15 // tablet\n        },\n        phone: {\n            top: 10, bottom: 20, right: 10, left: 15 // phone\n        }\n    })\n\n    // responsive padding rules\n    AlertAssets.padding(\"#alert\", {\n        top: 10, bottom: 20, right: 10, left: 15, // desktop\n        responsive: true, // want responsive\n        tablet: {\n            top: 10, bottom: 20, right: 10, left: 15 // tablet\n        },\n        phone: {\n            top: 10, bottom: 20, right: 10, left: 15 // phone\n        }\n    })\n\n    // width prop\n    AlertAssets.width('#alert', {\n        desktop: 20,\n        responsive: true,\n        tablet: 10,\n        phone: 18\n    })\n\n    // height prop\n    AlertAssets.height('#alert', {\n        desktop: 20,\n        responsive: true,\n        tablet: 10,\n        phone: 18\n    })\n\n    // alternative height prop\n    Assets.height(\"#alert\", 20)\n\n    // font weight\n    AlertAssets.fontWeight('#alert', 'regular')\n\n    // font size\n    AlertAssets.fontSize(\"#alert\", {\n        desktop: 20,\n        responsive: true,\n        tablet: 90,\n        phone: 80\n    })\n\n    // line height\n    AlertAssets.lineHeight(\"#alert\", {\n        desktop: 10,\n        responsive: true,\n        tablet: 8,\n        phone: 5\n    })\n\n    // text alignment\n    AlertAssets.alignment(\"#alert\", {\n        desktop: \"left\",\n        responsive: true,\n        tablet: \"right\",\n        phone: \"center\"\n    })\n\n    // setting float value ( with responsive )\n    AlertAssets.float(\"#alert\", {\n        desktop: \"left\",\n        responsive: true,\n        tablet: \"right\",\n        phone: \"right\"\n    })\n\n    // setting float value ( without responsive )\n    AlertAssets.float(\"#alert\", \"left\")\n\n    // setting hover box shadow\n    AlertAssets.hoverBoxShadow(\"#alert\", {\n        hover_shadow_horizontal: 10,\n        hover_shadow_vertical: 20,\n        hover_shadow_vertical: 30,\n        hover_shadow_blur: 40,\n        hover_shadow_spread: 50,\n        hover_shadow_color: \"blue\",\n        hover_scale_enabled: true,\n        hover_shadow_scale: \"1.5, 1.5\"\n    })\n\n    // getting hover box shadow css rules\n    AlertAssets.getHoverBoxShadow({\n        hover_shadow_horizontal: 10,\n        hover_shadow_vertical: 20,\n        hover_shadow_vertical: 30,\n        hover_shadow_blur: 40,\n        hover_shadow_spread: 50,\n        hover_shadow_color: \"blue\",\n        hover_scale_enabled: true,\n        hover_shadow_scale: \"1.5, 1.5\"\n    })\n\n    // typography\n    AlertAssets.typography(\"#alert\", {\n        family: \"arial\", // required\n        size: 20,\n        weight: '100italic',\n        height: 2,\n        case:  'uppercase'\n    })\n\n    // getting image url\n    AlertAssets.image(\"images/info.png\")\n\n    // loading alert assets\n    AlertAssets.load();\n\n```\n\n#### Template\n\n```html\n    \u003c!-- alert preivew ( showing alert template rendering ) --\u003e\n    \u003cdiv id=\"alert-preview\"\u003e\u003c/div\u003e\n\n    \u003c!-- alert template --\u003e\n    \u003cQuixTemplate id=\"alert-template\"\u003e\n        \n        \u003cstyle\u003e\n            body {\n                background: white\n            }\n        \u003c/style\u003e\n\n        \u003cQuixStyle\u003e\n             // loading css ( JS WAY )\n            var alert = Object.assign({}, Assets); \n            alert.desktop(\"#alert-2\", \"background: {{ color }}\");\n        \u003c/QuixStyle\u003e\n\n        \u003cQuixHtml\u003e\n            \u003cdiv id=\"alerts\"\u003e\n                \u003c!-- you can use twig sytax --\u003e\n                {% for alert in alerts %}\n                    \u003cdiv id=\"{{ alert }}\"\u003e\n                        \u003cp\u003e{{ alert }}\u003c/p\u003e\n                    \u003c/div\u003e\n                {% endfor %}\n            \u003c/div\u003e\n        \u003c/QuixHtml\u003e\n\n        \u003cQuixScript dependencies=\"\n            http://example.com/js/foo.js,\n            http://example.com/js/bar.js\n        \"\u003e\n            // you have access jQuery and lodash :) \n            // $(\"#alert-1\").html(\"updated element\")\n        \u003c/QuixScript\u003e\n\n    \u003c/QuixTemplate\u003e\n```  \n\n```js\n    // rendering template\n    AlertAssets.render(\"#alert-template\", {\n        alerts: [\"alert-1\", \"alert-2\"]\n    }, \"#alert-preview\");\n```\n\n## License\nThis library is licensed under the [MIT License](https://github.com/themexpert/assets-helper/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemexpert%2Fassets-helper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemexpert%2Fassets-helper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemexpert%2Fassets-helper/lists"}