{"id":22177285,"url":"https://github.com/derekbtw/marginal","last_synced_at":"2025-03-24T18:24:26.662Z","repository":{"id":257765978,"uuid":"49229154","full_name":"derekbtw/marginal","owner":"derekbtw","description":"CSS margins \u0026 padding made easy.","archived":false,"fork":false,"pushed_at":"2017-03-04T10:27:06.000Z","size":12,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-01-29T23:14:15.566Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","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/derekbtw.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-01-07T20:34:09.000Z","updated_at":"2018-02-15T21:34:46.000Z","dependencies_parsed_at":"2024-09-18T15:44:01.378Z","dependency_job_id":"c6b651e5-8746-4106-8b80-85d1dfeee4e7","html_url":"https://github.com/derekbtw/marginal","commit_stats":null,"previous_names":["derekbtw/marginal"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derekbtw%2Fmarginal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derekbtw%2Fmarginal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derekbtw%2Fmarginal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/derekbtw%2Fmarginal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/derekbtw","download_url":"https://codeload.github.com/derekbtw/marginal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245326302,"owners_count":20597008,"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-12-02T08:26:49.126Z","updated_at":"2025-03-24T18:24:26.624Z","avatar_url":"https://github.com/derekbtw.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# marginal\nCSS margins \u0026amp; padding made easy.\n\nWebsite and Demo: http://labs.struck.io/marginal\n\nIt's pretty simple, really. The class names are easy to remember and are very short. If you want a right margin\nof 50 just use \u003ccode\u003e.mr50\u003c/code\u003e, if you want a negative left margin of 25 use \u003ccode\u003e.ml-25\u003c/code\u003e. You can do\nthe same thing with padding as well using something like \u003ccode\u003e.pr95\u003c/code\u003e.\n\n## Quick Start\n\n```html\n\u003c!-- minified --\u003e\n\u003clink rel=\"stylesheet\" href=\"http://cdn.struck.io/marginal/1.0/marginal.min.css\" /\u003e\n\n\u003c!-- non-minified --\u003e\n\u003clink rel=\"stylesheet\" href=\"http://cdn.struck.io/marginal/1.0/marginal.css\" /\u003e\n```\n      \n## Useage\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"mr50\"\u003e\u003c/div\u003e\n  \u003cdiv\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv\u003e\u003c/div\u003e\n  \u003cdiv class=\"ml-25\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"pr95\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## CSS\n\n```css\n/* margin */\n.m1 {margin:1px;}\n.m2 {margin:2px;}\n.m3 {margin:3px;}\n.m4 {margin:4px;}\n.m5 {margin:5px;}\n.m6 {margin:6px;}\n.m7 {margin:7px;}\n.m8 {margin:8px;}\n.m9 {margin:9px;}\n.m10 {margin:10px;}\n.m15 {margin:15px;}\n.m20 {margin:20px;}\n.m25 {margin:25px;}\n.m30 {margin:30px;}\n.m35 {margin:35px;}\n.m40 {margin:40px;}\n.m45 {margin:45px;}\n.m50 {margin:50px;}\n.m55 {margin:55px;}\n.m60 {margin:60px;}\n.m65 {margin:65px;}\n.m70 {margin:70px;}\n.m75 {margin:75px;}\n.m80 {margin:80px;}\n.m85 {margin:85px;}\n.m90 {margin:90px;}\n.m95 {margin:95px;}\n.m100 {margin:100px;}\n\n/* negative margin */\n.m-1 {margin:-1px;}\n.m-2 {margin:-2px;}\n.m-3 {margin:-3px;}\n.m-4 {margin:-4px;}\n.m-5 {margin:-5px;}\n.m-6 {margin:-6px;}\n.m-7 {margin:-7px;}\n.m-8 {margin:-8px;}\n.m-9 {margin:-9px;}\n.m-10 {margin:-10px;}\n.m-15 {margin:-15px;}\n.m-20 {margin:-20px;}\n.m-25 {margin:-25px;}\n.m-30 {margin:-30px;}\n.m-35 {margin:-35px;}\n.m-40 {margin:-40px;}\n.m-45 {margin:-45px;}\n.m-50 {margin:-50px;}\n.m-55 {margin:-55px;}\n.m-60 {margin:-60px;}\n.m-65 {margin:-65px;}\n.m-70 {margin:-70px;}\n.m-75 {margin:-75px;}\n.m-80 {margin:-80px;}\n.m-85 {margin:-85px;}\n.m-90 {margin:-90px;}\n.m-95 {margin:-95px;}\n.m-100 {margin:-100px;}\n\n/* margin top */\n.mt1 {margin-top:1px;}\n.mt2 {margin-top:2px;}\n.mt3 {margin-top:3px;}\n.mt4 {margin-top:4px;}\n.mt5 {margin-top:5px;}\n.mt6 {margin-top:6px;}\n.mt7 {margin-top:7px;}\n.mt8 {margin-top:8px;}\n.mt9 {margin-top:9px;}\n.mt10 {margin-top:10px;}\n.mt15 {margin-top:15px;}\n.mt20 {margin-top:20px;}\n.mt25 {margin-top:25px;}\n.mt30 {margin-top:30px;}\n.mt35 {margin-top:35px;}\n.mt40 {margin-top:40px;}\n.mt45 {margin-top:45px;}\n.mt50 {margin-top:50px;}\n.mt55 {margin-top:55px;}\n.mt60 {margin-top:60px;}\n.mt65 {margin-top:65px;}\n.mt70 {margin-top:70px;}\n.mt75 {margin-top:75px;}\n.mt80 {margin-top:80px;}\n.mt85 {margin-top:85px;}\n.mt90 {margin-top:90px;}\n.mt95 {margin-top:95px;}\n.mt100 {margin-top:100px;}\n\n/* negative margin top */\n.mt-1 {margin-top:-1px;}\n.mt-2 {margin-top:-2px;}\n.mt-3 {margin-top:-3px;}\n.mt-4 {margin-top:-4px;}\n.mt-5 {margin-top:-5px;}\n.mt-6 {margin-top:-6px;}\n.mt-7 {margin-top:-7px;}\n.mt-8 {margin-top:-8px;}\n.mt-9 {margin-top:-9px;}\n.mt-10 {margin-top:-10px;}\n.mt-15 {margin-top:-15px;}\n.mt-20 {margin-top:-20px;}\n.mt-25 {margin-top:-25px;}\n.mt-30 {margin-top:-30px;}\n.mt-35 {margin-top:-35px;}\n.mt-40 {margin-top:-40px;}\n.mt-45 {margin-top:-45px;}\n.mt-50 {margin-top:-50px;}\n.mt-55 {margin-top:-55px;}\n.mt-60 {margin-top:-60px;}\n.mt-65 {margin-top:-65px;}\n.mt-70 {margin-top:-70px;}\n.mt-75 {margin-top:-75px;}\n.mt-80 {margin-top:-80px;}\n.mt-85 {margin-top:-85px;}\n.mt-90 {margin-top:-90px;}\n.mt-95 {margin-top:-95px;}\n.mt-100 {margin-top:-100px;}\n\n/* margin right */\n.mr1 {margin-right:1px;}\n.mr2 {margin-right:2px;}\n.mr3 {margin-right:3px;}\n.mr4 {margin-right:4px;}\n.mr5 {margin-right:5px;}\n.mr6 {margin-right:6px;}\n.mr7 {margin-right:7px;}\n.mr8 {margin-right:8px;}\n.mr9 {margin-right:9px;}\n.mr10 {margin-right:10px;}\n.mr15 {margin-right:15px;}\n.mr20 {margin-right:20px;}\n.mr25 {margin-right:25px;}\n.mr30 {margin-right:30px;}\n.mr35 {margin-right:35px;}\n.mr40 {margin-right:40px;}\n.mr45 {margin-right:45px;}\n.mr50 {margin-right:50px;}\n.mr55 {margin-right:55px;}\n.mr60 {margin-right:60px;}\n.mr65 {margin-right:65px;}\n.mr70 {margin-right:70px;}\n.mr75 {margin-right:75px;}\n.mr80 {margin-right:80px;}\n.mr85 {margin-right:85px;}\n.mr90 {margin-right:90px;}\n.mr95 {margin-right:95px;}\n.mr100 {margin-right:100px;}\n\n/* negative margin right */\n.mr-1 {margin-right:-1px;}\n.mr-2 {margin-right:-2px;}\n.mr-3 {margin-right:-3px;}\n.mr-4 {margin-right:-4px;}\n.mr-5 {margin-right:-5px;}\n.mr-6 {margin-right:-6px;}\n.mr-7 {margin-right:-7px;}\n.mr-8 {margin-right:-8px;}\n.mr-9 {margin-right:-9px;}\n.mr-10 {margin-right:-10px;}\n.mr-15 {margin-right:-15px;}\n.mr-20 {margin-right:-20px;}\n.mr-25 {margin-right:-25px;}\n.mr-30 {margin-right:-30px;}\n.mr-35 {margin-right:-35px;}\n.mr-40 {margin-right:-40px;}\n.mr-45 {margin-right:-45px;}\n.mr-50 {margin-right:-50px;}\n.mr-55 {margin-right:-55px;}\n.mr-60 {margin-right:-60px;}\n.mr-65 {margin-right:-65px;}\n.mr-70 {margin-right:-70px;}\n.mr-75 {margin-right:-75px;}\n.mr-80 {margin-right:-80px;}\n.mr-85 {margin-right:-85px;}\n.mr-90 {margin-right:-90px;}\n.mr-95 {margin-right:-95px;}\n.mr-100 {margin-right:-100px;}\n\n/* margin bottom */\n.mb1 {margin-bottom:1px;}\n.mb2 {margin-bottom:2px;}\n.mb3 {margin-bottom:3px;}\n.mb4 {margin-bottom:4px;}\n.mb5 {margin-bottom:5px;}\n.mb6 {margin-bottom:6px;}\n.mb7 {margin-bottom:7px;}\n.mb8 {margin-bottom:8px;}\n.mb9 {margin-bottom:9px;}\n.mb10 {margin-bottom:10px;}\n.mb15 {margin-bottom:15px;}\n.mb20 {margin-bottom:20px;}\n.mb25 {margin-bottom:25px;}\n.mb30 {margin-bottom:30px;}\n.mb35 {margin-bottom:35px;}\n.mb40 {margin-bottom:40px;}\n.mb45 {margin-bottom:45px;}\n.mb50 {margin-bottom:50px;}\n.mb55 {margin-bottom:55px;}\n.mb60 {margin-bottom:60px;}\n.mb65 {margin-bottom:65px;}\n.mb70 {margin-bottom:70px;}\n.mb75 {margin-bottom:75px;}\n.mb80 {margin-bottom:80px;}\n.mb85 {margin-bottom:85px;}\n.mb90 {margin-bottom:90px;}\n.mb95 {margin-bottom:95px;}\n.mb100 {margin-bottom:100px;}\n\n/* negative margin bottom */\n.mb-1 {margin-bottom:-1px;}\n.mb-2 {margin-bottom:-2px;}\n.mb-3 {margin-bottom:-3px;}\n.mb-4 {margin-bottom:-4px;}\n.mb-5 {margin-bottom:-5px;}\n.mb-6 {margin-bottom:-6px;}\n.mb-7 {margin-bottom:-7px;}\n.mb-8 {margin-bottom:-8px;}\n.mb-9 {margin-bottom:-9px;}\n.mb-10 {margin-bottom:-10px;}\n.mb-15 {margin-bottom:-15px;}\n.mb-20 {margin-bottom:-20px;}\n.mb-25 {margin-bottom:-25px;}\n.mb-30 {margin-bottom:-30px;}\n.mb-35 {margin-bottom:-35px;}\n.mb-40 {margin-bottom:-40px;}\n.mb-45 {margin-bottom:-45px;}\n.mb-50 {margin-bottom:-50px;}\n.mb-55 {margin-bottom:-55px;}\n.mb-60 {margin-bottom:-60px;}\n.mb-65 {margin-bottom:-65px;}\n.mb-70 {margin-bottom:-70px;}\n.mb-75 {margin-bottom:-75px;}\n.mb-80 {margin-bottom:-80px;}\n.mb-85 {margin-bottom:-85px;}\n.mb-90 {margin-bottom:-90px;}\n.mb-95 {margin-bottom:-95px;}\n.mb-100 {margin-bottom:-100px;}\n\n/* margin left */\n.ml1 {margin-left:1px;}\n.ml2 {margin-left:2px;}\n.ml3 {margin-left:3px;}\n.ml4 {margin-left:4px;}\n.ml5 {margin-left:5px;}\n.ml6 {margin-left:6px;}\n.ml7 {margin-left:7px;}\n.ml8 {margin-left:8px;}\n.ml9 {margin-left:9px;}\n.ml10 {margin-left:10px;}\n.ml15 {margin-left:15px;}\n.ml20 {margin-left:20px;}\n.ml25 {margin-left:25px;}\n.ml30 {margin-left:30px;}\n.ml35 {margin-left:35px;}\n.ml40 {margin-left:40px;}\n.ml45 {margin-left:45px;}\n.ml50 {margin-left:50px;}\n.ml55 {margin-left:55px;}\n.ml60 {margin-left:60px;}\n.ml65 {margin-left:65px;}\n.ml70 {margin-left:70px;}\n.ml75 {margin-left:75px;}\n.ml80 {margin-left:80px;}\n.ml85 {margin-left:85px;}\n.ml90 {margin-left:90px;}\n.ml95 {margin-left:95px;}\n.ml100 {margin-left:100px;}\n\n/* negative margin left */\n.ml-1 {margin-left:-1px;}\n.ml-2 {margin-left:-2px;}\n.ml-3 {margin-left:-3px;}\n.ml-4 {margin-left:-4px;}\n.ml-5 {margin-left:-5px;}\n.ml-6 {margin-left:-6px;}\n.ml-7 {margin-left:-7px;}\n.ml-8 {margin-left:-8px;}\n.ml-9 {margin-left:-9px;}\n.ml-10 {margin-left:-10px;}\n.ml-15 {margin-left:-15px;}\n.ml-20 {margin-left:-20px;}\n.ml-25 {margin-left:-25px;}\n.ml-30 {margin-left:-30px;}\n.ml-35 {margin-left:-35px;}\n.ml-40 {margin-left:-40px;}\n.ml-45 {margin-left:-45px;}\n.ml-50 {margin-left:-50px;}\n.ml-55 {margin-left:-55px;}\n.ml-60 {margin-left:-60px;}\n.ml-65 {margin-left:-65px;}\n.ml-70 {margin-left:-70px;}\n.ml-75 {margin-left:-75px;}\n.ml-80 {margin-left:-80px;}\n.ml-85 {margin-left:-85px;}\n.ml-90 {margin-left:-90px;}\n.ml-95 {margin-left:-95px;}\n.ml-100 {margin-left:-100px;}\n\n/* padding */\n.p1 {padding:1px;}\n.p2 {padding:2px;}\n.p3 {padding:3px;}\n.p4 {padding:4px;}\n.p5 {padding:5px;}\n.p6 {padding:6px;}\n.p7 {padding:7px;}\n.p8 {padding:8px;}\n.p9 {padding:9px;}\n.p10 {padding:10px;}\n.p15 {padding:15px;}\n.p20 {padding:20px;}\n.p25 {padding:25px;}\n.p30 {padding:30px;}\n.p35 {padding:35px;}\n.p40 {padding:40px;}\n.p45 {padding:45px;}\n.p50 {padding:50px;}\n.p55 {padding:55px;}\n.p60 {padding:60px;}\n.p65 {padding:65px;}\n.p70 {padding:70px;}\n.p75 {padding:75px;}\n.p80 {padding:80px;}\n.p85 {padding:85px;}\n.p90 {padding:90px;}\n.p95 {padding:95px;}\n. p100 {padding:100px;}\n\n/* padding top */\n.pt1 {padding-top:1px;}\n.pt2 {padding-top:2px;}\n.pt3 {padding-top:3px;}\n.pt4 {padding-top:4px;}\n.pt5 {padding-top:5px;}\n.pt6 {padding-top:6px;}\n.pt7 {padding-top:7px;}\n.pt8 {padding-top:8px;}\n.pt9 {padding-top:9px;}\n.pt10 {padding-top:10px;}\n.pt15 {padding-top:15px;}\n.pt20 {padding-top:20px;}\n.pt25 {padding-top:25px;}\n.pt30 {padding-top:30px;}\n.pt35 {padding-top:35px;}\n.pt40 {padding-top:40px;}\n.pt45 {padding-top:45px;}\n.pt50 {padding-top:50px;}\n.pt55 {padding-top:55px;}\n.pt60 {padding-top:60px;}\n.pt65 {padding-top:65px;}\n.pt70 {padding-top:70px;}\n.pt75 {padding-top:75px;}\n.pt80 {padding-top:80px;}\n.pt85 {padding-top:85px;}\n.pt90 {padding-top:90px;}\n.pt95 {padding-top:95px;}\n.pt100 {padding-top:100px;}\n\n/* padding right */\n.pr1 {padding-right:1px;}\n.pr2 {padding-right:2px;}\n.pr3 {padding-right:3px;}\n.pr4 {padding-right:4px;}\n.pr5 {padding-right:5px;}\n.pr6 {padding-right:6px;}\n.pr7 {padding-right:7px;}\n.pr8 {padding-right:8px;}\n.pr9 {padding-right:9px;}\n.pr10 {padding-right:10px;}\n.pr15 {padding-right:15px;}\n.pr20 {padding-right:20px;}\n.pr25 {padding-right:25px;}\n.pr30 {padding-right:30px;}\n.pr35 {padding-right:35px;}\n.pr40 {padding-right:40px;}\n.pr45 {padding-right:45px;}\n.pr50 {padding-right:50px;}\n.pr55 {padding-right:55px;}\n.pr60 {padding-right:60px;}\n.pr65 {padding-right:65px;}\n.pr70 {padding-right:70px;}\n.pr75 {padding-right:75px;}\n.pr80 {padding-right:80px;}\n.pr85 {padding-right:85px;}\n.pr90 {padding-right:90px;}\n.pr95 {padding-right:95px;}\n.pr100 {padding-right:100px;}\n\n/* padding bottom */\n.pb1 {padding-bottom:1px;}\n.pb2 {padding-bottom:2px;}\n.pb3 {padding-bottom:3px;}\n.pb4 {padding-bottom:4px;}\n.pb5 {padding-bottom:5px;}\n.pb6 {padding-bottom:6px;}\n.pb7 {padding-bottom:7px;}\n.pb8 {padding-bottom:8px;}\n.pb9 {padding-bottom:9px;}\n.pb10 {padding-bottom:10px;}\n.pb15 {padding-bottom:15px;}\n.pb20 {padding-bottom:20px;}\n.pb25 {padding-bottom:25px;}\n.pb30 {padding-bottom:30px;}\n.pb35 {padding-bottom:35px;}\n.pb40 {padding-bottom:40px;}\n.pb45 {padding-bottom:45px;}\n.pb50 {padding-bottom:50px;}\n.pb55 {padding-bottom:55px;}\n.pb60 {padding-bottom:60px;}\n.pb65 {padding-bottom:65px;}\n.pb70 {padding-bottom:70px;}\n.pb75 {padding-bottom:75px;}\n.pb80 {padding-bottom:80px;}\n.pb85 {padding-bottom:85px;}\n.pb90 {padding-bottom:90px;}\n.pb95 {padding-bottom:95px;}\n.pb100 {padding-bottom:100px;}\n\n/* padding left */\n.pl1 {padding-left:1px;}\n.pl2 {padding-left:2px;}\n.pl3 {padding-left:3px;}\n.pl4 {padding-left:4px;}\n.pl5 {padding-left:5px;}\n.pl6 {padding-left:6px;}\n.pl7 {padding-left:7px;}\n.pl8 {padding-left:8px;}\n.pl9 {padding-left:9px;}\n.pl10 {padding-left:10px;}\n.pl15 {padding-left:15px;}\n.pl20 {padding-left:20px;}\n.pl25 {padding-left:25px;}\n.pl30 {padding-left:30px;}\n.pl35 {padding-left:35px;}\n.pl40 {padding-left:40px;}\n.pl45 {padding-left:45px;}\n.pl50 {padding-left:50px;}\n.pl55 {padding-left:55px;}\n.pl60 {padding-left:60px;}\n.pl65 {padding-left:65px;}\n.pl70 {padding-left:70px;}\n.pl75 {padding-left:75px;}\n.pl80 {padding-left:80px;}\n.pl85 {padding-left:85px;}\n.pl90 {padding-left:90px;}\n.pl95 {padding-left:95px;}\n.pl100 {padding-left:100px;}\n```\n\nWebsite and Demo: http://labs.struck.io/marginal\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderekbtw%2Fmarginal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fderekbtw%2Fmarginal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fderekbtw%2Fmarginal/lists"}