{"id":13517302,"url":"https://github.com/guisouza/DSS","last_synced_at":"2025-03-31T08:31:32.506Z","repository":{"id":54053418,"uuid":"42619250","full_name":"guisouza/DSS","owner":"guisouza","description":":fire: Dynamic Style Sheets","archived":false,"fork":false,"pushed_at":"2016-04-29T00:39:19.000Z","size":165,"stargazers_count":511,"open_issues_count":2,"forks_count":38,"subscribers_count":43,"default_branch":"master","last_synced_at":"2024-12-15T09:20:56.784Z","etag":null,"topics":["dss","dynamic","dynamic-style-sheets"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/guisouza.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}},"created_at":"2015-09-16T23:40:33.000Z","updated_at":"2024-10-22T09:59:42.000Z","dependencies_parsed_at":"2022-08-13T06:20:31.321Z","dependency_job_id":null,"html_url":"https://github.com/guisouza/DSS","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guisouza%2FDSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guisouza%2FDSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guisouza%2FDSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guisouza%2FDSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guisouza","download_url":"https://codeload.github.com/guisouza/DSS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246441528,"owners_count":20778048,"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":["dss","dynamic","dynamic-style-sheets"],"created_at":"2024-08-01T05:01:32.339Z","updated_at":"2025-03-31T08:31:32.056Z","avatar_url":"https://github.com/guisouza.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# DSS (NOT SAFE FOR PRODUCTION)\nDynamic Style Sheets\nfor dynamic projects\n\n\n[![Join the chat at https://gitter.im/guisouza/dss](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/guisouza/dss?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n\n\n\n\n![Alt text](http://i.imgur.com/tPRotMv.png \"DSS\")\n\n![Alt text](https://media.giphy.com/media/3oEduWDd4lpTE5yPMk/giphy.gif \"DSS\")\n\n\n***[LIVE DEMO (Apple TV)](https://s3-sa-east-1.amazonaws.com/dss-examples/Interstellar/index.html \"LIVE DEMO (Apple TV)\")***\n\n\n\n\n# Dynamic Style Sheets\n\nDynamic Style Sheets gives you the ability to dynamically set values to your css properties on the go.\n\n***First things first ...***\n\n```bash\nbower install dss;\n```\n\n\n```html\n\u003c!--load the dss--\u003e\n\u003cscript src=\"dss.js\"\u003e\u003c/script\u003e\n```\n***then ...***\n\n\n```html\n\u003c!--\nlink your css\nNOTE : use the **dynamic-stylesheet** rel attribute so I can put poison in your css.\n--\u003e\n\u003clink rel=\"dynamic-stylesheet\" href=\"style.css\"\u003e\n```\n\n***DSS loaded!***\n***Now you can put DSS declarations in your sheet in three different flavours:***\n\n##### - Double pipe\n```css\n\n.box{\n\twidth: 50px;\n\theight: 50px;\n\tbackground: ||companyColor:red||;\n\tposition: absolute;\n\ttop: ||mouseY-25||px;\n\tleft: ||mouseX-25||px;\n}\n```\n\n\n##### - Pseudo dss selector\n```css\n.box:dss{\n\twidth: 50px;\n\theight: 50px;\n\tbackground: companyColor:red;\n\tposition: absolute;\n\ttop: mouseY-25;\n\tleft: mouseX-25;\n}\n```\n\n\n##### - \"dss-\" preffix property\n```css\n.box{\n\twidth: 50px;\n\theight: 50px;\n\tdss-background: companyColor:red;\n\tposition: absolute;\n\tdss-top: mouseY-25;\n\tdss-left: mouseX-25;\n}\n```\n\nThe **mouseY** and **mouseX** identifiers will automatically receive the mouse position on the screen, every time it changes. \n\nThe **companyColor** identifier must be set over javascript, but until you do, it will receive the default value **red**.\n\n```js\ndss.setProperty('companyColor','#1616FF')\n```\n\n# Default Auto-Binded Properties\n\n##### **mouseX**\nAutomatically receives the x position of the cursor related to the document.\n\n##### **mouseY**\nAutomatically receives the y position of the cursor related to the document.\n\n##### **mouseClientX**\nAutomatically receives the x position of the cursor related to the viewport\n\n##### **mouseClientY**\nAutomatically receives the y position of the cursor related to the viewport\n\n##### **scrollX**\nAutomatically receives the x position of the window scroll.\n\n##### **scrollY**\nAutomatically receives the y position of the window scroll.\n\n##### **windowWidth**\nAutomatically receives the window width.\n\n##### **windowHeight**\nAutomatically receives the window height.\n\n\n\n# DSS Helpers\n\n**dss.floor**\n```css\n/*margin-top will aways be 200 or more*/\n header{\n  margin-top : ||dss.floor(200)(scrollY)||px;\n }\n```\n\n**dss.ceil**\n```css\n/*margin-top will aways be 200 or less*/\n header{\n  margin-top : ||dss.ceil(200)(scrollY)||px;\n }\n```\n\n**dss.bounds**\n```css\n/*margin-top will aways be something between 100 and 200*/\n header{\n  margin-top : ||dss.bounds(100,200)(scrollY)||px;\n }\n```\n\n**dss.pon**\n```css\n/*return a positive number or 0, opacity will never be less than 0*/\n header{\n  opacity : ||dss.pon(-200+scrollX)||;\n }\n```\n\n**dss.if**\n```css\n/*if the scrollX is greater than 200 so opacity will be 1 else will be 0*/\n header{\n  opacity : ||dss.if(scrollX \u003e 200)(1)(0)||;\n }\n```\n\n\n# Javascript API\n\n## Managing properties\n\n**dss.setProperty**\n```js\t\ndss.setProperty('companyColor','#1616FF')\n\n//OR\n\ndss.setProperty({\n\tcompanyColor:'#1616FF'\n})\n\n```\n\n**dss.setDynamicProperty**\n```js\n//will generate mouseX and mouseY property everytime document fires mousemove\ndss.setDynamicProperty('mouse',function(){\n\treturn{\n\t\tcontext : document,\n\n\t\tevent : 'mousemove',\n\n\t\tgetter : function(e){\n\t\t\treturn {\n\t\t\t\tx : e.pageX,\n\t\t\t\ty : e.pageY,\n\t\t\t};\n\t\t}\n\t};\n});\n```\n\n## Events\n\n**init**\n```javascript\ndss.on('init',function(){\nconsole.log('DSS initialized with its first render Cycle =D ')\n})\n```\n\n**render**\n```javascript\ndss.on('render',function(){\nconsole.log('there is a render cycle =D')\n})\n```\n\n# Version \n0.1.2 **Beta**\n\n# Building\n```bash\nnpm install \u0026\u0026 grunt\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguisouza%2FDSS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguisouza%2FDSS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguisouza%2FDSS/lists"}