Powerful Responsive Layout & Positioning Library – Blunt.css

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