Author: | f-prime |
---|---|
Views Total: | 305 views |
Official Page: | Go to website |
Last Update: | June 8, 2020 |
License: | MIT |
Preview:

Description:
Blunt.css is a powerful CSS layout framework that makes it easier to arrange and position elements in your existing responsive web design.
How to use it:
1. Load the stylesheet blunt.css
from the dist
folder.
<link rel="stylesheet" href="./dist/blunt.css" />
2. Or from a CDN.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/f-prime/blunt/dist/blunt.min.css" />
3. Wrap your element into a DIV container with the CSS class of container
.
<div class="container"> ... element here ... </div>
4. Determine how to render your element on different devices using the {size} parameter:
- sm: Mobile. Max width = 900px
- md: Desktop. Max width = 1500px
- lg: Any device whose width > 1500px
5. Arrange & position your element using the following helper Classes.
- {size}-grid: Sets display of element to grid
- {size}-grid-h-center: Center aligns grid items horizontally
- {size}-grid-v-center: Center aligns grid items vertically
- {size}-grid-h-end: Aligns grid items to their horizontal end
- {size}-grid-v-end: Aligns grid items to their vertical end
- {size}-grid-{1-10}: Defines number of columns in grid (between 1 and 10 columns)
- {size}-gap-{0-4}p{1-9}: Defines the grid gap between 0.1 and 4 rem
- {size}-auto-center: Does margin-left: auto; margin-right: auto;
- {size}-text-{left, right, center}: Aligns text in one of three locations: left, right, or center
- {size}-m{t,l,r,b}-{0-15}p{0-9}: Margin class sm-mt-3p3 will resolve to margin-top: 3.3vh for the small screen size
- {size}-p{t,l,r,b}-{0-15}p{0-9}: Padding class md-pl-3p3 will resolve to padding-left: 3.3vw for the medium screen size
- {size}-lh-{0-4}p{0-9}: Line height class lg-lh-1p3 will resolve to line-height: 1.3rem for the large screen
- {size}-font-{0-4}p{0-9}: Font size class font-2 will resolve to font-size: 2rem; for all screen sizes
- {size}-w-{0-100}: Width class sm-w-80 will resolve to width: 100%; on small screens.
- {size}-vw-{0-100}: Width class sm-vw-80 will resolve to width: 100vw; on small screens.
- {size}-h-{0-100}: Height class md-h-100 will resolve to height:100%; on medium screens.
- {size}-vh-{0-100}: Height class md-vh-100 will resolve to height:100vh; on medium screens.
- {size}-row – sm-row: will resolve to width: 100%; display: flex; flex-direction: row; for small screens
- {size}-col – lg-col: will resolve to width: 100%; display: flex; flex-direction: column; for large screens
- {size}-{v, h}-{center, end, space-around, space-between} – lg-h-center: will center the row items horizontally on large screens
- {size}-text-{center, left, right} – text-center: will center text
- {size}-hidden – lg-hidden: will hide an element on large screens
- {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.
- {size}-{absolute, static, sticky, fixed} – lg-fixed: will resolve to position: fixed; for large screens
- {size}-{top, left, right, bottom}-{1-100} – md-top-5: will resolve to top:5vh; for medium screens