{"id":13858909,"url":"https://github.com/f-prime/Blunt","last_synced_at":"2025-07-14T01:32:08.616Z","repository":{"id":39030830,"uuid":"264076753","full_name":"f-prime/Blunt","owner":"f-prime","description":"A CSS framework that helps with layouts and leaves your styling alone.","archived":false,"fork":false,"pushed_at":"2024-06-27T23:49:30.000Z","size":2532,"stargazers_count":617,"open_issues_count":2,"forks_count":15,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-06-22T02:17:40.190Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/f-prime.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":"2020-05-15T02:31:07.000Z","updated_at":"2025-04-01T17:43:07.000Z","dependencies_parsed_at":"2024-11-22T17:42:30.005Z","dependency_job_id":null,"html_url":"https://github.com/f-prime/Blunt","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/f-prime/Blunt","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f-prime%2FBlunt","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f-prime%2FBlunt/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f-prime%2FBlunt/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f-prime%2FBlunt/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/f-prime","download_url":"https://codeload.github.com/f-prime/Blunt/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/f-prime%2FBlunt/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265231228,"owners_count":23731545,"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-08-05T03:02:25.761Z","updated_at":"2025-07-14T01:32:07.959Z","avatar_url":"https://github.com/f-prime.png","language":"SCSS","funding_links":[],"categories":["SCSS","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"# Blunt\n\n[Join the Discord](https://discord.gg/EZJEwsP)\n\nVersion: 1.1.0\n\nA CSS framework without all the fluff. \n\nBlunt doesn't have any opinions on how your applications should look. It only provides helper classes to make positioning and responsive design easier.\n\n# Why another CSS framework...?\n\nThere seem to be hundreds of these things out there. So why bother with another one? \nWell, I was sick of fighting with the other options. Most are overly opinionated and result in spending time\nfighting the framework instead of it boosting productivity. I have tried so many different ones. Some do too\nmuch, others do too little. I needed some middle ground that worked for _specifically_ what I wanted. I don't want to write any CSS\nthat does positioning elements. I want to write CSS that only does the _styling_ of my elements (e.g. text color, borders, background colors, etc).\n\nThat means that I never want to write `display: flex;` or `display: grid;` but I have no problem writing `color: var(--off-white);`.\n\nI also never want to write another `@media` query again. I want all of my positioning code to get done within the HTML itself.\n\nI also don't want something that does more than this. I don't want to have to install an NPM package to get what I need.\nI just want to include the CSS file and be done with it.\n\nAs a result, Blunt does the following:\n\n1. Provides a responsive container for 3 different screen sizes (sm, md, lg)\n2. Provides margin classes \n3. Provides padding classes\n4. Provides width classes \n5. Provides height classes \n6. Provides font size and line height classes\n7. Provides grid classes\n8. Provides a row and column class \n9. Provides classes to align text and elements\n10. Never requires me to write CSS for positioning.\n\nIt does nothing else.\n\n# Getting Started\n\nSimply add the following line to your HTML file.\n\n```\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/gh/f-prime/blunt/dist/blunt.min.css\"\u003e\n```\n\nor install it through npm\n\n```\nnpm install blunt-css\n```\n\nNOTE: Blunt is big at around 1mb minified. Along with standard gzip compression, it is highly suggested that in a production environment a tool like [purify-css](https://www.npmjs.com/package/purify-css) is used to minimize blunt as much as possible. There will be a noticable performance decrease if not.\n\n# Building the CSS\n\nBlunt is written in SCSS. To generate the CSS code clone the repo and run the following command:\n\n`sass src/blunt.scss blunt.css`\n\nor run\n\n`npm install`\n`npm run build`\n\n# Example\n\nLet's create a simple responsive card using Blunt.\n\n```html\n\u003cdiv class=\"container mx-auto h-100 row v-center h-center\"\u003e\n  \u003cdiv class=\"card lg-w-30 md-w-40 sm-w-90 pt-2 pb-2 pl-2 pr-2\"\u003e\n    \u003cdiv class=\"sm-col md-row lg-row md-v-center lg-v-center\"\u003e\n      \u003cdiv class=\"sm-mx-auto\"\u003e\n        \u003cimg class=\"rounded\" src=\"https://randomuser.me/api/portraits/women/12.jpg\"\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"sm-mx-auto sm-text-center font-1p2 lg-ml-2 md-ml-2\"\u003e\n        \u003cdiv class=\"sm-pt-1p3 pb-1p3 font-2p2\"\u003eErin May\u003c/div\u003e\n        \u003cdiv class=\"purple\"\u003eSoftware Engineer\u003c/div\u003e\n        \u003cdiv class=\"pt-0p5 pb-0p5\"\u003eemay@example.com\u003c/div\u003e\n        \u003cdiv\u003e(123) 456-7890\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e  \n\n\u003cstyle\u003e\n  html {\n    font-family: sans-serif;\n  }\n\n  .purple {\n    color: #A010F0;\n  }\n\n  .rounded { \n    border-radius: 100%;\n  }\n\n  .card {\n    border: 1px solid #efefef;\n    box-shadow: 3px 3px 3px #efefef;\n  }\n\u003c/style\u003e\n```\n\nLarge\n\n![](examples/imgs/large.png)\n\nMedium\n\n![](examples/imgs/medium.png)\n\nSmall\n\n![](examples/imgs/small.png)\n\n# Classes\n\nBlunt supports three screen sizes:\n\n1. `sm` which has a max width of 900px\n2. `md` which has a max width of 1500px\n3. `lg` which is anything above 1500px\n\nBlunt supports decimal values on some classes using the following syntax `{integer}p{fraction}` where `fraction` is a number from 1 to 9\n\nAs an example, if we want to set the font size on a small screen we can use the class `sm-font-1p2` which will sent the font size on small screens to `1.2rem`\nIf we want the font size to be 1.2rem on all screen sizes we can remove the `sm` and use the class `font-1p2`. Screen size specific classes override the global values for their respective screen sizes.\nWhole numbers do not use the `{number}p{fraction}` syntax. For a font size of `1rem` the following class is used: `font-1`.\n\n### All Blunt classes\n\n`container` - Responsive container class\n\n`{size}-grid` - Sets display of element to `grid`\n\n`{size}-grid-h-center` - Center aligns grid items horizontally \n\n`{size}-grid-v-center` - Center aligns grid items vertically\n\n`{size}-grid-h-end` - Aligns grid items to their horizontal end\n\n`{size}-grid-v-end` - Aligns grid items to their vertical end\n\n`{size}-grid-{1-10}` - Defines number of columns in grid (between 1 and 10 columns)\n\n`{size}-gap-{0-4}p{1-9}` - Defines the grid gap between 0.1 and 4 rem\n\n`{size}-m{l,r,t,b}-auto` - Margin class `ml-auto` does `margin-left: auto`\n\n`{size}-auto-center, {size}-mx-auto` - Does `margin-left: auto; margin-right: auto;`\n\n`{size}-my-auto` - Does `margin-top: auto; margin-bottom: auto;`\n\n`{size}-text-{left, right, center}` - Aligns text in one of three locations: left, right, or center\n\n`{size}-m{t,l,r,b,x,y}-{0-15}p{0-9}` - Margin class `sm-mt-3p3` will resolve to  `margin-top: 3.3vh` for the small screen size\n\n`{size}-p{t,l,r,b,x,y}-{0-15}p{0-9}` - Padding class `md-pl-3p3` will resolve to  `padding-left: 3.3vw` for the medium screen size.\n\n`{size}-pxm{t,l,r,b,x,y}-{0-1000}` - Margin class `lg-pxmt-50` will resolve to `margin-top: 50px` for the large screen size.\n\n`{size}-pxp{t,l,r,b,x,y}-{0-1000}` - Padding class `sm-pxpl-25` will resolve to `padding-left: 25px` for the small screen size.\n\n NOTE: For padding Blunt also provides bidirectional padding and margin `px-`, `py-`, `mx-`, `my-`. `px-5` will resolve to `padding-left: 5vw; padding-right: 5vw;` and the equivalent for `mx-5` \n\n`{size}-lh-{0-4}p{0-9}` - Line height class `lg-lh-1p3` will resolve to `line-height: 1.3rem` for the large screen \n\n`{size}-font-{0-4}p{0-9}` - Font size class `font-2` will resolve to `font-size: 2rem;` for all screen sizes\n\n`{size}-w-{0-100}` - Width class `sm-w-80` will resolve to `width: 100%;` on small screens.\n\n`{size}-vw-{0-100}` - Width class `sm-vw-80` will resolve to `width: 100vw;` on small screens.\n\n`{size}-{min,max}-w-{0-100}` - Width calss `min-w-50` resolves to `min-width: 50%`\n\n`{size}-{min,max}-vw-{0-100}` - Width class `max-vw-50` resolves to `max-width: 50vw`\n\n`{size}-{min,max}-h-{0-100}` - Height calss `min-h-50` resolves to `min-height: 50%`\n\n`{size}-{min,max}-vh-{0-100}` - Height class `max-vh-50` resolves to `max-height: 50vw`\n\n`{size}-h-{0-100}` - Height class `md-h-100` will resolve to `height:100%;` on medium screens.\n\n`{size}-vh-{0-100}` - Height class `md-vh-100` will resolve to `height:100vh;` on medium screens.\n\n`{size}-row` - `sm-row` will resolve to `width: 100%; display: flex; flex-direction: row;` for small screens\n\n`{size}-col` - `lg-col` will resolve to `width: 100%; display: flex; flex-direction: column;` for large screens\n\n`{size}-{v, h, align, justify}-{start, center, end, inherit, initial, space-evenly, space-around, space-between}` - `lg-h-center` will center the row items horizontally on large screens \n\n`{size}-{wrap, no-wrap, wrap-reverse, wrap-initial, wrap-inherit}` - `sm-wrap` outputs `flex-wrap: wrap;` for small screens.\n\n`{size}-text-{center, left, right}` - `text-center` will center text\n\n`{size}-hidden` - `lg-hidden` will hide an element on large screens\n\n`{size}-px{w,h}-{0-1000}` - `lg-pxw-300` will resolve to `width: 300px` on large screens `md-pxh-200` will resolve to `height: 200px` on medium screens.\n\n`{size}-{min,max}-px{w, h}-{0-1000}` - `sm-min-pxw-600` resolves to `min-width: 600px` on small screens\n\n`{size}-{absolute, static, sticky, fixed}` - `lg-fixed` will resolve to `position: fixed;` for large screens \n\n`{size}-{top, left, right, bottom}-{1-100}` - `md-top-5` will resolve to `top:5vh;` for medium screens \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff-prime%2FBlunt","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ff-prime%2FBlunt","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ff-prime%2FBlunt/lists"}