├── logo.png
├── examples
    ├── imgs
    │   ├── large.png
    │   ├── medium.png
    │   └── small.png
    └── card.html
├── src
    ├── gridCol.scss
    ├── font.scss
    ├── gridGap.scss
    ├── lineHeight.scss
    ├── positioning.scss
    ├── width.scss
    ├── height.scss
    ├── margin.scss
    ├── padding.scss
    └── blunt.scss
├── package.json
├── LICENSE
├── .gitignore
├── index.html
└── README.md


/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/f-prime/Blunt/HEAD/logo.png


--------------------------------------------------------------------------------
/examples/imgs/large.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/f-prime/Blunt/HEAD/examples/imgs/large.png


--------------------------------------------------------------------------------
/examples/imgs/medium.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/f-prime/Blunt/HEAD/examples/imgs/medium.png


--------------------------------------------------------------------------------
/examples/imgs/small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/f-prime/Blunt/HEAD/examples/imgs/small.png


--------------------------------------------------------------------------------
/src/gridCol.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:string';
 2 | 
 3 | $grid-col-max: 10;
 4 | $grid-col-increment: 1;
 5 | $grid-col-start: 0;
 6 | 
 7 | @mixin gridColGen($prefix, $number) {
 8 |   .#{$prefix}grid-#{$number} { grid-template-columns: repeat($number, 1fr); }
 9 | }
10 | 
11 | @mixin gridCol($prefix) {
12 |   @while($grid-col-start <= $grid-col-max) {
13 |     @include gridColGen($prefix, $grid-col-start);
14 |     $grid-col-start: $grid-col-start + $grid-col-increment;
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/font.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:string';
 2 | 
 3 | $font-max: 5;
 4 | $font-number: 0;
 5 | $font-decimal: 0;
 6 | $font-decimal-inc: 1;
 7 | 
 8 | @mixin fontGen($prefix, $number, $decimal) {
 9 |   @if($decimal > 0) {
10 |     .#{$prefix}font-#{$number}p#{$decimal} { font-size: string.unquote("#{$number}.#{$decimal}rem"); }
11 |   } @else {
12 |     .#{$prefix}font-#{$number} { font-size: #{$number}rem; }
13 |   }
14 | }
15 | 
16 | @mixin font($prefix) {
17 |   @while($font-number <= $font-max) {
18 |     @include fontGen($prefix, $font-number, $font-decimal);
19 |     @while($font-decimal < 10 and $font-decimal-inc > 0) {
20 |       $font-decimal: $font-decimal + $font-decimal-inc;
21 |       @if($font-decimal != 10) {
22 |         @include fontGen($prefix, $font-number, $font-decimal);
23 |       }
24 |     }
25 | 
26 |     $font-number: $font-number + 1;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/gridGap.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:string';
 2 | 
 3 | $grid-max: 5;
 4 | $grid-number: 0;
 5 | $grid-decimal: 0;
 6 | $grid-decimal-inc: 1;
 7 | 
 8 | @mixin gridGen($prefix, $number, $decimal) {
 9 |   @if($decimal > 0) {
10 |     .#{$prefix}gap-#{$number}p#{$decimal} { grid-gap: string.unquote("#{$number}.#{$decimal}rem"); }
11 |   } @else {
12 |     .#{$prefix}gap-#{$number} { grid-gap: #{$number}rem; }
13 |   }
14 | }
15 | 
16 | @mixin gridGap($prefix) {
17 |   @while($grid-number <= $grid-max) {
18 |     @include gridGen($prefix, $grid-number, $grid-decimal);
19 |     @while($grid-decimal < 10 and $grid-decimal-inc > 0) {
20 |       $grid-decimal: $grid-decimal + $grid-decimal-inc;
21 |       @if($grid-decimal != 10) {
22 |         @include gridGen($prefix, $grid-number, $grid-decimal);
23 |       }
24 |     }
25 | 
26 |     $grid-number: $grid-number + 1;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/lineHeight.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:string';
 2 | 
 3 | $line-height-max: 5;
 4 | $line-height-number: 0;
 5 | $line-height-decimal: 0;
 6 | $line-height-decimal-inc: 1;
 7 | 
 8 | @mixin lineHeightGen($prefix, $number, $decimal) {
 9 |   @if($decimal > 0 and $decimal < 10){
10 |     .#{$prefix}lh-#{$number}p#{$decimal} { line-height: string.unquote("#{$number}.#{$decimal}rem"); }
11 |   } @else {
12 |     .#{$prefix}lh-#{$number} { line-height: #{$number}rem; }
13 |   }
14 | }
15 | 
16 | @mixin lineHeight($prefix) {
17 |   @while($line-height-number <= $line-height-max) {
18 |     @include lineHeightGen($prefix, $line-height-number, $line-height-decimal);
19 |     @while($line-height-decimal < 10 and $line-height-decimal-inc > 0) {
20 |       $line-height-decimal: $line-height-decimal + $line-height-decimal-inc;
21 |       @if($line-height-decimal != 10) {
22 |         @include lineHeightGen($prefix, $line-height-number, $line-height-decimal);
23 |       }
24 |     }
25 | 
26 |     $line-height-number: $line-height-number + 1;
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "blunt-css",
 3 |   "version": "1.1.0",
 4 |   "description": "A CSS framework without all the fluff. Blunt doesn't have any opinions on how your applications should look. It only provides helper classes to make positioning and responsive design easier.",
 5 |   "main": "index.js",
 6 |   "directories": {
 7 |     "example": "examples"
 8 |   },
 9 |   "scripts": {
10 |     "compile": "sass ./src/blunt.scss ./dist/blunt.css",
11 |     "uglify": "uglifycss ./dist/blunt.css > ./blunt.min.css",
12 |     "build": "npm run compile; npm run uglify"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/f-prime/blunt.git"
17 |   },
18 |   "keywords": [
19 |     "css",
20 |     "framework",
21 |     "blunt",
22 |     "scss",
23 |     "sass"
24 |   ],
25 |   "author": "Frankie Primerano",
26 |   "license": "MIT",
27 |   "bugs": {
28 |     "url": "https://github.com/f-prime/blunt/issues"
29 |   },
30 |   "homepage": "https://github.com/f-prime/blunt#readme",
31 |   "dependencies": {
32 |     "sass": "^1.32.8",
33 |     "uglifycss": "^0.0.29"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Frankie
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/examples/card.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |   <head>
 3 |     <link rel="stylesheet" href="../dist/blunt.css" type="text/css">
 4 |   </head>
 5 |   <body>
 6 | 
 7 |     <div class="container auto-center h-100 row v-center h-center">
 8 |       <div class="card lg-w-30 md-w-40 sm-w-90 pt-2 pb-2 pl-2 pr-2">
 9 |         <div class="sm-col md-row lg-row md-v-center lg-v-center">
10 |           <div class="sm-auto-center">
11 |             <img class="rounded" src="https://randomuser.me/api/portraits/women/12.jpg">
12 |           </div>
13 |           <div class="sm-auto-center sm-text-center font-1p2 lg-ml-2 md-ml-2">
14 |             <div class="sm-pt-1p3 pb-1p3 font-2p2">Erin May</div>
15 |             <div class="purple">Software Engineer</div>
16 |             <div class="pt-0p5 pb-0p5">emay@example.com</div>
17 |             <div>(123) 456-7890</div>
18 |           </div>
19 |         </div>
20 |       </div>
21 |     </div>  
22 | 
23 |     <style>
24 |       html {
25 |         font-family: sans-serif;
26 |       }
27 | 
28 |       .purple {
29 |         color: #A010F0;
30 |       }
31 | 
32 |       .rounded { 
33 |         border-radius: 100%;
34 |       }
35 | 
36 |       .card {
37 |         border: 1px solid #efefef;
38 |         box-shadow: 3px 3px 3px #efefef;
39 |       }
40 |     </style>
41 | 
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/positioning.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:string';
 2 | 
 3 | $positioning-max: 100;
 4 | $positioning-number: 0;
 5 | $positioning-decimal: 0;
 6 | $positioning-decimal-inc: 1;
 7 | 
 8 | @mixin positioningGen($prefix, $number, $decimal) {
 9 |   @if($decimal > 0) {
10 |     .#{$prefix}top-#{$number}p#{$decimal} { top: string.unquote("#{$number}.#{$decimal}%"); }
11 |     .#{$prefix}bottom-#{$number}p#{$decimal} { bottom: string.unquote("#{$number}.#{$decimal}%"); }
12 |     .#{$prefix}left-#{$number}p#{$decimal} { left: string.unquote("#{$number}.#{$decimal}%"); }
13 |     .#{$prefix}right-#{$number}p#{$decimal} { right: string.unquote("#{$number}.#{$decimal}%"); }
14 |   } @else {
15 |     .#{$prefix}top-#{$number} { top: string.unquote("#{$number}%"); }
16 |     .#{$prefix}bottom-#{$number} { bottom: string.unquote("#{$number}%"); }
17 |     .#{$prefix}left-#{$number} { left: string.unquote("#{$number}%"); }
18 |     .#{$prefix}right-#{$number} { right: string.unquote("#{$number}%"); }
19 |   }
20 | }
21 | 
22 | @mixin positioning($prefix) {
23 |   @while($positioning-number <= $positioning-max) {
24 |     @include positioningGen($prefix, $positioning-number, $positioning-decimal);
25 |     @while($positioning-decimal < 10 and $positioning-decimal-inc > 0) {
26 |       $positioning-decimal: $positioning-decimal + $positioning-decimal-inc;
27 |       @if($positioning-decimal != 10) {
28 |         @include positioningGen($prefix, $positioning-number, $positioning-decimal);
29 |       }
30 |     }
31 | 
32 |     $positioning-number: $positioning-number + 1;
33 |   }
34 | }
35 | 
36 | 
37 | 


--------------------------------------------------------------------------------
/src/width.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:math';
 2 | @use 'sass:string';
 3 | 
 4 | $width-percent-max: 100;
 5 | $width-percent-number: 0;
 6 | $width-percent-decimal: 0;
 7 | $width-percent-decimal-inc: 1;
 8 | 
 9 | $width-max-px: 1000;
10 | $width-increment-px: 1;
11 | $width-start-px: 0;
12 | 
13 | @mixin widthPxGen($prefix, $val) {
14 |   .#{$prefix}pxw-#{$val} { width: #{$val}px; }
15 |   .#{$prefix}max-pxw-#{$val} { max-width: #{$val}px; }
16 |   .#{$prefix}min-pxw-#{$val} { min-width: #{$val}px; }
17 | }
18 | 
19 | @mixin widthPercentGen($prefix, $number, $decimal) {
20 |   @if($decimal > 0 and $decimal < 10){
21 |     .#{$prefix}w-#{$number}p#{$decimal} { width: string.unquote("#{$number}.#{$decimal}%"); }
22 |     .#{$prefix}vw-#{$number}p#{$decimal} { width: string.unquote("#{$number}.#{$decimal}vw"); }
23 |     .#{$prefix}min-w-#{$number}p#{$decimal} { min-width: string.unquote("#{$number}.#{$decimal}%"); }
24 |     .#{$prefix}min-vw-#{$number}p#{$decimal} { min-width: string.unquote("#{$number}.#{$decimal}vw"); }
25 |     .#{$prefix}max-w-#{$number}p#{$decimal} { max-width: string.unquote("#{$number}.#{$decimal}%"); }
26 |     .#{$prefix}max-vw-#{$number}p#{$decimal} { max-width: string.unquote("#{$number}.#{$decimal}vw"); }
27 |   } @else {
28 |     .#{$prefix}w-#{$number} { width: string.unquote("#{$number}%"); }
29 |     .#{$prefix}vw-#{$number} { width: string.unquote("#{$number}vw"); }
30 |     .#{$prefix}min-w-#{$number} { min-width: string.unquote("#{$number}%"); }
31 |     .#{$prefix}min-vw-#{$number} { min-width: string.unquote("#{$number}vw"); }
32 |     .#{$prefix}max-w-#{$number} { max-width: string.unquote("#{$number}%"); }
33 |     .#{$prefix}max-vw-#{$number} { max-width: string.unquote("#{$number}vw"); }
34 |   }
35 | }
36 | 
37 | @mixin widthPercent($prefix) {
38 |   @while($width-percent-number <= $width-percent-max) {
39 |     @include widthPercentGen($prefix, $width-percent-number, $width-percent-decimal);
40 |     @while($width-percent-decimal < 10 and $width-percent-decimal-inc > 0) {
41 |       $width-percent-decimal: $width-percent-decimal + $width-percent-decimal-inc;
42 |       @if($width-percent-decimal != 10) {
43 |         @include widthPercentGen($prefix, $width-percent-number, $width-percent-decimal);
44 |       }
45 |     }
46 | 
47 |     $width-percent-number: $width-percent-number + 1;
48 |   }
49 | }
50 | 
51 | @mixin widthPx($prefix) {
52 |   @while($width-start-px <= $width-max-px) {
53 |     @include widthPxGen($prefix, $width-start-px);
54 |     $width-start-px: $width-start-px + $width-increment-px;
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/height.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:math';
 2 | @use 'sass:string';
 3 | 
 4 | $height-percent-max: 100;
 5 | $height-percent-number: 0;
 6 | $height-percent-decimal: 0;
 7 | $height-percent-decimal-inc: 1;
 8 | 
 9 | $height-max-px: 1000;
10 | $height-increment-px: 1;
11 | $height-start-px: 0;
12 | 
13 | @mixin heightPxGen($prefix, $val) {
14 |   .#{$prefix}pxh-#{$val} { height: #{$val}px; }
15 |   .#{$prefix}max-pxh-#{$val} { max-height: #{$val}px; }
16 |   .#{$prefix}min-pxh-#{$val} { min-height: #{$val}px; }
17 | }
18 | 
19 | @mixin heightPercentGen($prefix, $number, $decimal) {
20 |   @if($decimal > 0 and $decimal < 10){
21 |     .#{$prefix}h-#{$number}p#{$decimal} { height: string.unquote("#{$number}.#{$decimal}%"); }
22 |     .#{$prefix}vh-#{$number}p#{$decimal} { height: string.unquote("#{$number}.#{$decimal}vh"); }
23 |     .#{$prefix}max-h-#{$number}p#{$decimal} { max-height: string.unquote("#{$number}.#{$decimal}%"); }
24 |     .#{$prefix}max-vh-#{$number}p#{$decimal} { max-height: string.unquote("#{$number}.#{$decimal}vh"); }
25 |     .#{$prefix}min-h-#{$number}p#{$decimal} { min-height: string.unquote("#{$number}.#{$decimal}%"); }
26 |     .#{$prefix}min-vh-#{$number}p#{$decimal} { min-height: string.unquote("#{$number}.#{$decimal}vh"); }
27 |   } @else {
28 |     .#{$prefix}h-#{$number} { height: string.unquote("#{$number}%"); }
29 |     .#{$prefix}vh-#{$number} { height: string.unquote("#{$number}vh"); }
30 |     .#{$prefix}min-h-#{$number} { min-height: string.unquote("#{$number}%"); }
31 |     .#{$prefix}min-vh-#{$number} { min-height: string.unquote("#{$number}vh"); }
32 |     .#{$prefix}max-h-#{$number} { max-height: string.unquote("#{$number}%"); }
33 |     .#{$prefix}max-vh-#{$number} { max-height: string.unquote("#{$number}vh"); }
34 |   }
35 | }
36 | 
37 | @mixin heightPercent($prefix) {
38 |   @while($height-percent-number <= $height-percent-max) {
39 |     @include heightPercentGen($prefix, $height-percent-number, $height-percent-decimal);
40 |     @while($height-percent-decimal < 10 and $height-percent-decimal-inc > 0) {
41 |       $height-percent-decimal: $height-percent-decimal + $height-percent-decimal-inc;
42 |       @if($height-percent-decimal != 10) {
43 |         @include heightPercentGen($prefix, $height-percent-number, $height-percent-decimal);
44 |       }
45 |     }
46 | 
47 |     $height-percent-number: $height-percent-number + 1;
48 |   }
49 | }
50 | 
51 | @mixin heightPx($prefix) {
52 |   @while($height-start-px <= $height-max-px) {
53 |     @include heightPxGen($prefix, $height-start-px);
54 |     $height-start-px: $height-start-px + $height-increment-px;
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | *.sw[a-z]
  2 | 
  3 | # Created by https://www.toptal.com/developers/gitignore/api/node
  4 | # Edit at https://www.toptal.com/developers/gitignore?templates=node
  5 | 
  6 | ### Node ###
  7 | # Logs
  8 | logs
  9 | *.log
 10 | npm-debug.log*
 11 | yarn-debug.log*
 12 | yarn-error.log*
 13 | lerna-debug.log*
 14 | 
 15 | # Diagnostic reports (https://nodejs.org/api/report.html)
 16 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 17 | 
 18 | # Runtime data
 19 | pids
 20 | *.pid
 21 | *.seed
 22 | *.pid.lock
 23 | 
 24 | # Directory for instrumented libs generated by jscoverage/JSCover
 25 | lib-cov
 26 | 
 27 | # Coverage directory used by tools like istanbul
 28 | coverage
 29 | *.lcov
 30 | 
 31 | # nyc test coverage
 32 | .nyc_output
 33 | 
 34 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 35 | .grunt
 36 | 
 37 | # Bower dependency directory (https://bower.io/)
 38 | bower_components
 39 | 
 40 | # node-waf configuration
 41 | .lock-wscript
 42 | 
 43 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 44 | build/Release
 45 | 
 46 | # Dependency directories
 47 | node_modules/
 48 | jspm_packages/
 49 | 
 50 | # TypeScript v1 declaration files
 51 | typings/
 52 | 
 53 | # TypeScript cache
 54 | *.tsbuildinfo
 55 | 
 56 | # Optional npm cache directory
 57 | .npm
 58 | 
 59 | # Optional eslint cache
 60 | .eslintcache
 61 | 
 62 | # Optional stylelint cache
 63 | .stylelintcache
 64 | 
 65 | # Microbundle cache
 66 | .rpt2_cache/
 67 | .rts2_cache_cjs/
 68 | .rts2_cache_es/
 69 | .rts2_cache_umd/
 70 | 
 71 | # Optional REPL history
 72 | .node_repl_history
 73 | 
 74 | # Output of 'npm pack'
 75 | *.tgz
 76 | 
 77 | # Yarn Integrity file
 78 | .yarn-integrity
 79 | 
 80 | # dotenv environment variables file
 81 | .env
 82 | .env.test
 83 | .env*.local
 84 | 
 85 | # parcel-bundler cache (https://parceljs.org/)
 86 | .cache
 87 | .parcel-cache
 88 | 
 89 | # Next.js build output
 90 | .next
 91 | 
 92 | # Nuxt.js build / generate output
 93 | .nuxt
 94 | dist
 95 | 
 96 | # Gatsby files
 97 | .cache/
 98 | # Comment in the public line in if your project uses Gatsby and not Next.js
 99 | # https://nextjs.org/blog/next-9-1#public-directory-support
100 | # public
101 | 
102 | # vuepress build output
103 | .vuepress/dist
104 | 
105 | # Serverless directories
106 | .serverless/
107 | 
108 | # FuseBox cache
109 | .fusebox/
110 | 
111 | # DynamoDB Local files
112 | .dynamodb/
113 | 
114 | # TernJS port file
115 | .tern-port
116 | 
117 | # Stores VSCode versions used for testing VSCode extensions
118 | .vscode-test
119 | 
120 | # End of https://www.toptal.com/developers/gitignore/api/node
121 | 
122 | 


--------------------------------------------------------------------------------
/src/margin.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:string';
 2 | 
 3 | $margin-max: 20;
 4 | $margin-number: 0;
 5 | $margin-decimal: 0;
 6 | $margin-decimal-inc: 1;
 7 | 
 8 | $margin-px-max: 1000;
 9 | $margin-px-number: 0;
10 | 
11 | @mixin marginGen($prefix, $number, $decimal) {
12 |   @if($decimal > 0) {
13 |     .#{$prefix}mt-#{$number}p#{$decimal} { margin-top: string.unquote("#{$number}.#{$decimal}vh"); }
14 |     .#{$prefix}mb-#{$number}p#{$decimal} { margin-bottom: string.unquote("#{$number}.#{$decimal}vh"); }
15 |     .#{$prefix}ml-#{$number}p#{$decimal} { margin-left: string.unquote("#{$number}.#{$decimal}vw"); }
16 |     .#{$prefix}mr-#{$number}p#{$decimal} { margin-right: string.unquote("#{$number}.#{$decimal}vw"); }
17 |     .#{$prefix}my-#{$number}p#{$decimal} { margin-top: string.unquote("#{$number}.#{$decimal}vh"); margin-bottom: string.unquote("#{$number}.#{$decimal}vh"); }
18 |     .#{$prefix}mx-#{$number}p#{$decimal} { margin-left: string.unquote("#{$number}.#{$decimal}vw"); margin-right: string.unquote("#{$number}.#{$decimal}vw"); }
19 |     .#{$prefix}m-#{$number}p#{$decimal} { margin: string.unquote("#{$number}.#{$decimal}rem"); }
20 |   } @else {
21 |     .#{$prefix}my-#{$number} { margin-top: #{$number}vh; margin-bottom: #{$number}vh;}
22 |     .#{$prefix}mx-#{$number} { margin-left: #{$number}vw; margin-right: #{$number}vw;}
23 |     .#{$prefix}mt-#{$number} { margin-top: #{$number}vh; }
24 |     .#{$prefix}mb-#{$number} { margin-bottom: #{$number}vh; }
25 |     .#{$prefix}ml-#{$number} { margin-left: #{$number}vw; }
26 |     .#{$prefix}mr-#{$number} { margin-right: #{$number}vw; }
27 |     .#{$prefix}m-#{$number} { margin: #{$number}rem; }
28 |   }
29 | }
30 | 
31 | @mixin marginPxGen($prefix, $number) {
32 |   .#{$prefix}pxmy-#{$number} { margin-top: #{$number}px; margin-bottom: #{$number}px;}
33 |   .#{$prefix}pxmx-#{$number} { margin-left: #{$number}px; margin-right: #{$number}px; }
34 |   .#{$prefix}pxmt-#{$number} { margin-top: #{$number}px; }
35 |   .#{$prefix}pxmb-#{$number} { margin-bottom: #{$number}px; }
36 |   .#{$prefix}pxml-#{$number} { margin-left: #{$number}px; }
37 |   .#{$prefix}pxmr-#{$number} { margin-right: #{$number}px; }
38 |   .#{$prefix}pxm-#{$number} { margin: #{$number}px; } 
39 | }
40 | 
41 | @mixin marginPx($prefix) {
42 |   @while($margin-px-number <= $margin-px-max) {
43 |     @include marginPxGen($prefix, $margin-px-number);
44 |     $margin-px-number: $margin-px-number + 1;
45 |   }
46 | }
47 | 
48 | @mixin margin($prefix) {
49 |   @while($margin-number <= $margin-max) {
50 |     @include marginGen($prefix, $margin-number, $margin-decimal);
51 |     @while($margin-decimal < 10 and $margin-decimal-inc > 0) {
52 |       $margin-decimal: $margin-decimal + $margin-decimal-inc;
53 |       @if($margin-decimal != 10) {
54 |         @include marginGen($prefix, $margin-number, $margin-decimal);
55 |       }
56 |     }
57 | 
58 |     $margin-number: $margin-number + 1;
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/padding.scss:
--------------------------------------------------------------------------------
 1 | @use 'sass:string';
 2 | 
 3 | $padding-max: 20;
 4 | $padding-number: 0;
 5 | $padding-decimal: 0;
 6 | $padding-decimal-inc: 1;
 7 | 
 8 | $padding-px-max: 1000;
 9 | $padding-px-number: 0;
10 | 
11 | @mixin paddingGen($prefix, $number, $decimal) {
12 |   @if($decimal > 0) {
13 |     .#{$prefix}pt-#{$number}p#{$decimal} { padding-top: string.unquote("#{$number}.#{$decimal}vh"); }
14 |     .#{$prefix}pb-#{$number}p#{$decimal} { padding-bottom: string.unquote("#{$number}.#{$decimal}vh"); }
15 |     .#{$prefix}pl-#{$number}p#{$decimal} { padding-left: string.unquote("#{$number}.#{$decimal}vw"); }
16 |     .#{$prefix}pr-#{$number}p#{$decimal} { padding-right: string.unquote("#{$number}.#{$decimal}vw"); }
17 |     .#{$prefix}p-#{$number}p#{$decimal} { padding: string.unquote("#{$number}.#{$decimal}rem"); }
18 |     .#{$prefix}py-#{$number}p#{$decimal} { padding-top: string.unquote("#{$number}.#{$decimal}vh"); padding-bottom: string.unquote("#{$number}.#{$decimal}vh"); }
19 |     .#{$prefix}px-#{$number}p#{$decimal} { padding-left: string.unquote("#{$number}.#{$decimal}vw"); padding-right: string.unquote("#{$number}.#{$decimal}vw"); } 
20 |   } @else {
21 |     .#{$prefix}py-#{$number} { padding-top: #{$number}vh; padding-bottom: #{$number}vh;}
22 |     .#{$prefix}px-#{$number} { padding-left: #{$number}vw; padding-right: #{$number}vw;}
23 |     .#{$prefix}pt-#{$number} { padding-top: #{$number}vh; }
24 |     .#{$prefix}pb-#{$number} { padding-bottom: #{$number}vh; }
25 |     .#{$prefix}pl-#{$number} { padding-left: #{$number}vw; }
26 |     .#{$prefix}pr-#{$number} { padding-right: #{$number}vw; }
27 |     .#{$prefix}p-#{$number} { padding: #{$number}rem; }
28 |   }
29 | }
30 | 
31 | @mixin paddingPxGen($prefix, $number) {
32 |   .#{$prefix}pxpy-#{$number} { padding-top: #{$number}px; padding-bottom: #{$number}px;}
33 |   .#{$prefix}pxpx-#{$number} { padding-left: #{$number}px; padding-right: #{$number}px; }
34 |   .#{$prefix}pxpt-#{$number} { padding-top: #{$number}px; }
35 |   .#{$prefix}pxpb-#{$number} { padding-bottom: #{$number}px; }
36 |   .#{$prefix}pxpl-#{$number} { padding-left: #{$number}px; }
37 |   .#{$prefix}pxpr-#{$number} { padding-right: #{$number}px; }
38 |   .#{$prefix}pxp-#{$number} { padding: #{$number}px; } 
39 | }
40 | 
41 | @mixin paddingPx($prefix) {
42 |   @while($padding-px-number <= $padding-px-max) {
43 |     @include paddingPxGen($prefix, $padding-px-number);
44 |     $padding-px-number: $padding-px-number + 1;
45 |   }
46 | }
47 | 
48 | @mixin padding($prefix) {
49 |   @while($padding-number <= $padding-max) {
50 |     @include paddingGen($prefix, $padding-number, $padding-decimal);
51 |     @while($padding-decimal < 10 and $padding-decimal-inc > 0) {
52 |       $padding-decimal: $padding-decimal + $padding-decimal-inc;
53 |       @if($padding-decimal != 10) {
54 |         @include paddingGen($prefix, $padding-number, $padding-decimal);
55 |       }
56 |     }
57 | 
58 |     $padding-number: $padding-number + 1;
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/blunt.scss:
--------------------------------------------------------------------------------
  1 | /* Blunt Version 1.1.0 */
  2 | 
  3 | @use 'padding.scss' as padding;
  4 | @use 'margin.scss' as margin;
  5 | @use 'positioning.scss' as positioning;
  6 | @use 'gridCol.scss' as gridCol;
  7 | @use 'gridGap.scss' as gridGap;
  8 | @use 'lineHeight.scss' as lineHeight;
  9 | @use 'font.scss' as font;
 10 | @use 'width.scss' as width;
 11 | @use 'height.scss' as height;
 12 | 
 13 | html, body { 
 14 |   margin: 0;
 15 |   padding: 0;
 16 | }
 17 | 
 18 | @mixin genCode($prefix) {
 19 |   .#{$prefix}absolute { position: absolute; }
 20 |   .#{$prefix}static { position: static; }
 21 |   .#{$prefix}fixed { position: fixed; }
 22 |   .#{$prefix}sticky { position: sticky; }
 23 |   .#{$prefix}relative { position: relative; }
 24 | 
 25 |   .#{$prefix}grid { display: grid; }
 26 | 
 27 |   .#{$prefix}grid-v-center { align-items: center; }
 28 |   .#{$prefix}grid-h-center { justify-items: center; }
 29 |   .#{$prefix}grid-h-end { justify-items: end; }
 30 |   .#{$prefix}grid-v-end { align-items: end; }
 31 | 
 32 |   .#{$prefix}auto-center { 
 33 |     margin-left: auto;
 34 |     margin-right: auto;
 35 |   }
 36 | 
 37 |   .#{$prefix}m-auto {
 38 |     margin: auto;
 39 |   }
 40 | 
 41 |   .#{$prefix}mx-auto {
 42 |     margin-left: auto;
 43 |     margin-right: auto;
 44 |   }
 45 | 
 46 |   .#{$prefix}my-auto {
 47 |     margin-top: auto;
 48 |     margin-bottom: auto;
 49 |   }
 50 | 
 51 |   .#{$prefix}ml-auto { margin-left: auto; }
 52 |   .#{$prefix}mr-auto { margin-right: auto; }
 53 |   .#{$prefix}mt-auto { margin-top: auto; }
 54 |   .#{$prefix}mb-auto { margin-bottom: auto; }
 55 | 
 56 |   .#{$prefix}text-center { text-align: center; }
 57 |   .#{$prefix}text-left { text-align: left; }
 58 |   .#{$prefix}text-right { text-align: right; }
 59 | 
 60 |   .#{$prefix}col { 
 61 |     display: flex;
 62 |     flex-direction: column; 
 63 |   }
 64 | 
 65 |   .#{$prefix}row {
 66 |     display: flex;
 67 |     flex-direction: row;
 68 |   }
 69 | 
 70 |   .#{$prefix}hidden { display: none !important; }
 71 | 
 72 |   .#{$prefix}h-start { justify-content: flex-start; }
 73 |   .#{$prefix}v-start { align-items: flex-start; }
 74 |   .#{$prefix}h-end { justify-content: flex-end; }
 75 |   .#{$prefix}v-end { align-items: flex-end; }
 76 |   .#{$prefix}v-center { align-items: center; }
 77 |   .#{$prefix}h-center { justify-content: center; }
 78 |   .#{$prefix}h-space-between { justify-content: space-between; }
 79 |   .#{$prefix}h-space-around { justify-content: space-around; }
 80 |   .#{$prefix}v-space-between { align-items: space-between; }
 81 |   .#{$prefix}v-space-around { align-items: space-around; }
 82 | 
 83 |   .#{$prefix}justify-start { justify-content: flex-start; }
 84 |   .#{$prefix}justify-end { justify-content: flex-end; }
 85 |   .#{$prefix}justify-center { justify-content: center; }
 86 |   .#{$prefix}justify-space-between { justify-content: space-between; }
 87 |   .#{$prefix}justify-space-around { justify-content: space-around; }
 88 |   .#{$prefix}justify-space-evenly { justify-content: space-evenly; }
 89 |   .#{$prefix}justify-initial { justify-content: initial; }
 90 |   .#{$prefix}justify-inherit { justify-content: inherit; }
 91 | 
 92 |   .#{$prefix}align-start { align-items: flex-start; }
 93 |   .#{$prefix}align-end { align-items: flex-end; }
 94 |   .#{$prefix}align-center { align-items: center; }
 95 |   .#{$prefix}align-space-evenly { align-items: space-evenly; }
 96 |   .#{$prefix}align-initial { align-items: initial; }
 97 |   .#{$prefix}align-inherit { align-items: inherit; }
 98 |   .#{$prefix}align-space-between { align-items: space-between; }
 99 |   .#{$prefix}align-space-around { align-items: space-around; }
100 | 
101 |   .#{$prefix}wrap { flex-wrap: wrap; }
102 |   .#{$prefix}no-wrap { flex-wrap: nowrap; }
103 |   .#{$prefix}wrap-reverse { flex-wrap: wrap-reverse; }
104 |   .#{$prefix}wrap-initail { flex-wrap: initial; }
105 |   .#{$prefix}wrap-inherit { flex-wrap: inherit; }
106 |   
107 |   @include padding.padding($prefix);
108 |   @include padding.paddingPx($prefix);
109 |   @include margin.margin($prefix);
110 |   @include margin.marginPx($prefix);
111 |   @include positioning.positioning($prefix);
112 |   @include gridCol.gridCol($prefix);
113 |   @include gridGap.gridGap($prefix);
114 |   @include lineHeight.lineHeight($prefix);
115 |   @include font.font($prefix);
116 |   @include width.widthPercent($prefix);
117 |   @include width.widthPx($prefix);
118 |   @include height.heightPx($prefix);
119 |   @include height.heightPercent($prefix);
120 | }
121 | 
122 | @include genCode(''); 
123 | 
124 | @media only screen and (max-width: 900px) {
125 |   .container { width: 95% }
126 |   @include genCode('sm-');
127 | }
128 | 
129 | @media only screen and (min-width: 551px) and (max-width: 900px) {
130 |   .container { width: 90%; }
131 | }
132 | 
133 | @media only screen and (min-width: 901px) and (max-width: 1350px) {
134 |   .container { width: 90%; }
135 |   @include genCode('md-');
136 | }
137 | 
138 | @media only screen and (min-width: 1351px) {
139 |   .container { width: 90%; }
140 |   @include genCode('lg-');
141 | }
142 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  7 |     <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&display=swap" rel="stylesheet">
  8 |     <title>Blunt</title>
  9 |     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/f-prime/blunt/dist/blunt.min.css">    
 10 |     <link rel="icon" type="image/png" href="logo.png"> 
 11 |     <script async defer src="https://buttons.github.io/buttons.js"></script>
 12 |   </head>
 13 |   <body>
 14 |     <style>
 15 | :root {
 16 |   --blue: #4585c5;
 17 |   --light-blue: #4585c533;
 18 | }
 19 | 
 20 | html, body { 
 21 |   padding: 0;
 22 |   margin: 0;
 23 |   font-family: monospace;
 24 | }
 25 | 
 26 | a {
 27 |   text-decoration: none;
 28 |   color: var(--blue);
 29 | }
 30 | 
 31 | a:hover {
 32 |   text-decoration: underline;
 33 | }
 34 | 
 35 | .code {
 36 |   border-radius: 5px;
 37 |   background-color: var(--light-blue);
 38 |   font-family: 'Fira Code', monospace;
 39 |   display: block;
 40 |   white-space: pre;
 41 | }
 42 | 
 43 | .links {
 44 |   border: 1px solid var(--light-blue);
 45 |   border-radius: 5px;
 46 | }
 47 | 
 48 |     </style>
 49 |     <div class="md-vw-60 sm-vw-90 lg-vw-60 auto-center pt-5 pb-5 lh-2 font-1p2">
 50 |       <section>
 51 |         <header class="font-2 ">Blunt</header>
 52 |         <p>A CSS layout framework that gets to the point and stays out of your way.</p>
 53 |         <p class="mt-3">
 54 |           <a class="github-button" href="https://github.com/f-prime/blunt" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star f-prime/Blunt on GitHub">Star</a>
 55 |         </p>
 56 |         <p class="font-1p2">
 57 |           Blunt is designed to make creating page layouts a easy. It provides a host of general CSS classes to position elements, add padding and margins to elements, create responsive grids, and more.
 58 |           It has no opinions on how your page should look. This means that you won't have to fight with Blunt to overwrite default colors and button styles. All of that is left up to you.
 59 |         </p>
 60 |         <p class="mt-3">
 61 |           You can find Blunt on <a href="https://github.com/f-prime/Blunt">GitHub</a>
 62 |           and join the discussion on <a href="https://gitter.im/Blunt-css">Gitter</a>.
 63 |         </p>
 64 |       </section>
 65 |       <section>
 66 |         <header class="font-2 mt-5">Getting Started</header>
 67 |         <p>
 68 |           Include Blunt into your project with the this single line of code.
 69 |         </p>
 70 |         <p class="code pt-1 pb-1 pl-1 pr-1 text-center">
 71 |           &lt;link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/f-prime/blunt/src/blunt.css"&gt;
 72 |         </p>
 73 |       </section>
 74 |       <section>
 75 |         <header class="font-2 mt-5">Documentation</header>
 76 |         <div class="mt-3 links col lg-row h-space-around pt-1 pb-1">
 77 |           <a class="col" href="#basic">Basics</a>
 78 |           <a class="col" href="#container">Container</a>
 79 |           <a class="col" href="#width-height">Width and Height</a>
 80 |           <a class="col" href="#row-col">Row and Col</a>
 81 |           <a class="col" href="#grid">Grid</a>
 82 |           <a class="col" href="#font-lineheight">Font and Line Height</a>
 83 |           <a class="col" href="#position">Positioning</a>
 84 |         </div>
 85 |         <header class="font-1p7 mt-5" id="basics">Basics</header>
 86 |         <div class="mt-2">
 87 |           <p>
 88 |             With the exception of the container class, all classes in Blunt follow the same structure.
 89 |           </p>
 90 |           <p class="code pt-1 pb-1 pl-1 pr-1">
 91 |             {size}-{className}-{value}
 92 |           </p>
 93 |           <p>
 94 |             Where {size} is replaced with a screen size lg, md, or sm, {className} is replaced with the specific Blunt class and {value} is replaced with a number.
 95 |           </p>
 96 | 
 97 |           <p>
 98 |             Blunt currently supports three screen sizes sm (max width 900px) md (max width 1500px) and lg (min width 1500px)  
 99 |           </p>
100 | 
101 |           <p>
102 |           As a practical example, let's say we wanted to add padding to the top of an element. <br/>
103 |           If we wanted to do this for all screen sizes we would do this.
104 |           </p>
105 | 
106 |           <p class="code pt-1 pb-1 pl-1 pr-1">&lt;div class="pt-1"&gt;</p>
107 | 
108 |           <p>
109 |             If we wanted to have this padding on only spall screens (screen size &lt; 900px) we would do the following
110 |           </p>
111 | 
112 |           <p class="code pt-1 pb-1 pl-1 pr-1">&lt;div class="sm-pt-1"&gt;</p>
113 | 
114 |           <p>The padding class along with some other classes also support decimal values using the notation <div class="mt-1 code pt-1 pb-1 pl-1 pr-1">{number}p{fraction}</div></p>
115 | 
116 |           <p>So if we wanted to add, say, a padding of 1.3 to the top of an element we could do the following.</p>
117 | 
118 |           <p class="code pt-1 pb-1 pl-1 pr-1">&lt;div class="pt-1p3"&gt;</p>
119 |         </div>
120 |         <header class="font-1p7 mt-3" id="container">Container</header>
121 |         <div class="mt-2">
122 |           <p>The container class creates an element with responsive width.</p>
123 | 
124 |           <div class="code pt-1 pb-1 pl-1 pr-1">&lt;div class="container"&gt;
125 |   Other stuff              
126 | &lt;/div&gt;</div>
127 |         </div>
128 |         <header class="font-1p7 mt-3" id="width-height">Width and Height</header>
129 |           
130 |         <p>Blunt provides 3 different width and height classes</p>
131 |         <p>{h,w}-{1-100}, px{h,w}-{1-1000} and v{h,w}-{1-100}</p>
132 |         <p>
133 |           <div class="code pt-1 pb-1 pl-1 pr-1">&lt;div class="w-50"&gt;</div>
134 |         </p>
135 |         <p>
136 |           Makes the div's width 50%
137 |         </p>
138 |         <p>
139 |           <div class="code pt-1 pb-1 pl-1 pr-1">&lt;div class="vh-50"&gt;</div>
140 |         </p>
141 |         <p>
142 |           Makes the div's height 50vh
143 |         </p>
144 |         <p>
145 |           <div class="code pt-1 pb-1 pl-1 pr-1">&lt;div class="md-pxw-500"&gt;</div>
146 |         </p>
147 |         <p>
148 |           Makes the div's width 500px on medium sized screens
149 |         </p>
150 |         <header class="font-1p7 mt-3" id="margin-padding">Margin and Padding</header>
151 |         <div class="mt-2">
152 |           <p>The following padding and margin classes are provided</p>
153 |           <p>{m,p}{l,r,t,b}-{0-15}p{1-9}</p>
154 |           <p>
155 |             <div class="code pt-1 pb-1 pl-1 pr-1">&lt;div class="mt-5"&gt;</div>
156 |           </p>
157 |           <p>Adds a top margin of 5vh to the div</p>
158 |           <p><div class="code pt-1 pb-1 pl-1 pr-1">&lt;div class="pl-3"&gt;</div></p>
159 |           <p>Adds a padding left of 3vw to the div</p>
160 |           <p><div class="code pt-1 pb-1 pl-1 pr-1">&lt;div class="sm-mb-2p5"&gt;</div></p>
161 |           <p>Adds a margin of 2.5vh to the div on small screens</p>
162 |           <p><div class="code pt-1 pb-1 pl-1 pr-1">&lt;div class="md-pr-10"&gt;</div></p>
163 |           <p>Adds a padding right of 10vw to the div on medium screens</p>
164 |         </div>
165 |         <header class="font-1p7 mt-3" id="row-col">Row and Col</header>
166 |         <header class="font-1p7 mt-3" id="grid">Grid</header>
167 |         <header class="font-1p7 mt-3" id="font-lineheight">Font and Line Height</header>
168 |         <header class="font-1p7 mt-3" id="position">Positioning</header>
169 |       </section>
170 |       <section class="mt-2">
171 |         <header class="font-2 mt-3">Simple Card</header>
172 |       </section>
173 |     </div>
174 |   </body>
175 | </html>
176 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Blunt
  2 | 
  3 | [Join the Discord](https://discord.gg/EZJEwsP)
  4 | 
  5 | Version: 1.1.0
  6 | 
  7 | A CSS framework without all the fluff. 
  8 | 
  9 | Blunt doesn't have any opinions on how your applications should look. It only provides helper classes to make positioning and responsive design easier.
 10 | 
 11 | # Why another CSS framework...?
 12 | 
 13 | There seem to be hundreds of these things out there. So why bother with another one? 
 14 | Well, I was sick of fighting with the other options. Most are overly opinionated and result in spending time
 15 | fighting the framework instead of it boosting productivity. I have tried so many different ones. Some do too
 16 | much, others do too little. I needed some middle ground that worked for _specifically_ what I wanted. I don't want to write any CSS
 17 | that does positioning elements. I want to write CSS that only does the _styling_ of my elements (e.g. text color, borders, background colors, etc).
 18 | 
 19 | That means that I never want to write `display: flex;` or `display: grid;` but I have no problem writing `color: var(--off-white);`.
 20 | 
 21 | I also never want to write another `@media` query again. I want all of my positioning code to get done within the HTML itself.
 22 | 
 23 | I 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.
 24 | I just want to include the CSS file and be done with it.
 25 | 
 26 | As a result, Blunt does the following:
 27 | 
 28 | 1. Provides a responsive container for 3 different screen sizes (sm, md, lg)
 29 | 2. Provides margin classes 
 30 | 3. Provides padding classes
 31 | 4. Provides width classes 
 32 | 5. Provides height classes 
 33 | 6. Provides font size and line height classes
 34 | 7. Provides grid classes
 35 | 8. Provides a row and column class 
 36 | 9. Provides classes to align text and elements
 37 | 10. Never requires me to write CSS for positioning.
 38 | 
 39 | It does nothing else.
 40 | 
 41 | # Getting Started
 42 | 
 43 | Simply add the following line to your HTML file.
 44 | 
 45 | ```
 46 | <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/f-prime/blunt/dist/blunt.min.css">
 47 | ```
 48 | 
 49 | or install it through npm
 50 | 
 51 | ```
 52 | npm install blunt-css
 53 | ```
 54 | 
 55 | NOTE: 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.
 56 | 
 57 | # Building the CSS
 58 | 
 59 | Blunt is written in SCSS. To generate the CSS code clone the repo and run the following command:
 60 | 
 61 | `sass src/blunt.scss blunt.css`
 62 | 
 63 | or run
 64 | 
 65 | `npm install`
 66 | `npm run build`
 67 | 
 68 | # Example
 69 | 
 70 | Let's create a simple responsive card using Blunt.
 71 | 
 72 | ```html
 73 | <div class="container mx-auto h-100 row v-center h-center">
 74 |   <div class="card lg-w-30 md-w-40 sm-w-90 pt-2 pb-2 pl-2 pr-2">
 75 |     <div class="sm-col md-row lg-row md-v-center lg-v-center">
 76 |       <div class="sm-mx-auto">
 77 |         <img class="rounded" src="https://randomuser.me/api/portraits/women/12.jpg">
 78 |       </div>
 79 |       <div class="sm-mx-auto sm-text-center font-1p2 lg-ml-2 md-ml-2">
 80 |         <div class="sm-pt-1p3 pb-1p3 font-2p2">Erin May</div>
 81 |         <div class="purple">Software Engineer</div>
 82 |         <div class="pt-0p5 pb-0p5">emay@example.com</div>
 83 |         <div>(123) 456-7890</div>
 84 |       </div>
 85 |     </div>
 86 |   </div>
 87 | </div>  
 88 | 
 89 | <style>
 90 |   html {
 91 |     font-family: sans-serif;
 92 |   }
 93 | 
 94 |   .purple {
 95 |     color: #A010F0;
 96 |   }
 97 | 
 98 |   .rounded { 
 99 |     border-radius: 100%;
100 |   }
101 | 
102 |   .card {
103 |     border: 1px solid #efefef;
104 |     box-shadow: 3px 3px 3px #efefef;
105 |   }
106 | </style>
107 | ```
108 | 
109 | Large
110 | 
111 | ![](examples/imgs/large.png)
112 | 
113 | Medium
114 | 
115 | ![](examples/imgs/medium.png)
116 | 
117 | Small
118 | 
119 | ![](examples/imgs/small.png)
120 | 
121 | # Classes
122 | 
123 | Blunt supports three screen sizes:
124 | 
125 | 1. `sm` which has a max width of 900px
126 | 2. `md` which has a max width of 1500px
127 | 3. `lg` which is anything above 1500px
128 | 
129 | Blunt supports decimal values on some classes using the following syntax `{integer}p{fraction}` where `fraction` is a number from 1 to 9
130 | 
131 | As 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`
132 | If 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.
133 | Whole numbers do not use the `{number}p{fraction}` syntax. For a font size of `1rem` the following class is used: `font-1`.
134 | 
135 | ### All Blunt classes
136 | 
137 | `container` - Responsive container class
138 | 
139 | `{size}-grid` - Sets display of element to `grid`
140 | 
141 | `{size}-grid-h-center` - Center aligns grid items horizontally 
142 | 
143 | `{size}-grid-v-center` - Center aligns grid items vertically
144 | 
145 | `{size}-grid-h-end` - Aligns grid items to their horizontal end
146 | 
147 | `{size}-grid-v-end` - Aligns grid items to their vertical end
148 | 
149 | `{size}-grid-{1-10}` - Defines number of columns in grid (between 1 and 10 columns)
150 | 
151 | `{size}-gap-{0-4}p{1-9}` - Defines the grid gap between 0.1 and 4 rem
152 | 
153 | `{size}-m{l,r,t,b}-auto` - Margin class `ml-auto` does `margin-left: auto`
154 | 
155 | `{size}-auto-center, {size}-mx-auto` - Does `margin-left: auto; margin-right: auto;`
156 | 
157 | `{size}-my-auto` - Does `margin-top: auto; margin-bottom: auto;`
158 | 
159 | `{size}-text-{left, right, center}` - Aligns text in one of three locations: left, right, or center
160 | 
161 | `{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
162 | 
163 | `{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.
164 | 
165 | `{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.
166 | 
167 | `{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.
168 | 
169 |  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` 
170 | 
171 | `{size}-lh-{0-4}p{0-9}` - Line height class `lg-lh-1p3` will resolve to `line-height: 1.3rem` for the large screen 
172 | 
173 | `{size}-font-{0-4}p{0-9}` - Font size class `font-2` will resolve to `font-size: 2rem;` for all screen sizes
174 | 
175 | `{size}-w-{0-100}` - Width class `sm-w-80` will resolve to `width: 100%;` on small screens.
176 | 
177 | `{size}-vw-{0-100}` - Width class `sm-vw-80` will resolve to `width: 100vw;` on small screens.
178 | 
179 | `{size}-{min,max}-w-{0-100}` - Width calss `min-w-50` resolves to `min-width: 50%`
180 | 
181 | `{size}-{min,max}-vw-{0-100}` - Width class `max-vw-50` resolves to `max-width: 50vw`
182 | 
183 | `{size}-{min,max}-h-{0-100}` - Height calss `min-h-50` resolves to `min-height: 50%`
184 | 
185 | `{size}-{min,max}-vh-{0-100}` - Height class `max-vh-50` resolves to `max-height: 50vw`
186 | 
187 | `{size}-h-{0-100}` - Height class `md-h-100` will resolve to `height:100%;` on medium screens.
188 | 
189 | `{size}-vh-{0-100}` - Height class `md-vh-100` will resolve to `height:100vh;` on medium screens.
190 | 
191 | `{size}-row` - `sm-row` will resolve to `width: 100%; display: flex; flex-direction: row;` for small screens
192 | 
193 | `{size}-col` - `lg-col` will resolve to `width: 100%; display: flex; flex-direction: column;` for large screens
194 | 
195 | `{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 
196 | 
197 | `{size}-{wrap, no-wrap, wrap-reverse, wrap-initial, wrap-inherit}` - `sm-wrap` outputs `flex-wrap: wrap;` for small screens.
198 | 
199 | `{size}-text-{center, left, right}` - `text-center` will center text
200 | 
201 | `{size}-hidden` - `lg-hidden` will hide an element on large screens
202 | 
203 | `{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.
204 | 
205 | `{size}-{min,max}-px{w, h}-{0-1000}` - `sm-min-pxw-600` resolves to `min-width: 600px` on small screens
206 | 
207 | `{size}-{absolute, static, sticky, fixed}` - `lg-fixed` will resolve to `position: fixed;` for large screens 
208 | 
209 | `{size}-{top, left, right, bottom}-{1-100}` - `md-top-5` will resolve to `top:5vh;` for medium screens 
210 | 


--------------------------------------------------------------------------------