Blunt – A CSS Layout Framework for Minimalists

栏目: IT技术 · 发布时间: 3年前

内容简介: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.There seem to be hundreds of these things out there. So why bother

Blunt

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.

Why another CSS framework...?

There seem to be hundreds of these things out there. So why bother with another one? Well, I was sick of fighting with the other options. Most are overly opinionated and result in spending time fighting the framework instead of it boosting productivity. I have tried so many different ones. Some do too 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 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).

That means that I never want to write display: flex; or display: grid; but I have no problem writing color: var(--off-white); .

I also never want to write another @media query again. I want all of my positioning code to get done within the HTML itself.

I also dont want something that does more than this. I don't want to have to install an NPM package to get what I need. I just want to include the CSS file and be done with it.

As a result, Blunt does the following:

  1. Provides a responsive container for 3 different screen sizes (sm, md, lg)
  2. Provides margin classes
  3. Provides padding classes
  4. Provides width classes
  5. Provides height classes
  6. Provides font size and line height classes
  7. Provides grid classes
  8. Provides a row and column class
  9. Provides classes to align text and elements
  10. Never requires me to write CSS for positioning.

It does nothing else.

Getting Started

src/blunt.css
<link rel='stylesheet' type='text/css' href='/path/to/blunt.css'>

Example

Let's create a simple responsive card using Blunt.

<div>
  <div>
    <div>
      <div>
        <img src="https://randomuser.me/api/portraits/women/12.jpg">
      </div>
      <div>
        <div>Erin May</div>
        <div>Software Engineer</div>
        <div>emay@example.com</div>
        <div>(123) 456-7890</div>
      </div>
    </div>
  </div>
</div>  

<style>
  html {
    font-family: sans-serif;
  }

  .purple {
    color: #A010F0;
  }

  .rounded { 
    border-radius: 100%;
  }

  .card {
    border: 1px solid #efefef;
    box-shadow: 3px 3px 3px #efefef;
  }
</style>

Large

Blunt – A CSS Layout Framework for Minimalists

Medium

Blunt – A CSS Layout Framework for Minimalists

Small

Blunt – A CSS Layout Framework for Minimalists

Classes

Blunt supports three screen sizes:

sm
md
lg

Blunt supports decimal values on some classes using the following syntax {integer}p{fraction} where fraction is a number from 1 to 9

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 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. Whole numbers do not use the {number}p{fraction} syntax. For a font size of 1rem the following class is used: font-1 .

All Blunt classes

container - Responsive container class

{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-ml-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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

轻营销

轻营销

唐文 / 机械工业出版社 / 2015-6 / 35元

《轻营销》,中国第一本全面讲述如何在互联网新时代用小预算做大营销的书籍,以求把中小微企业从那些以大预算为基础而难以落地的营销理论和案例中解脱出来。用“轻”但真正起作用的方法,帮助传统企业抓住互联网新一波浪潮的机遇,转型升级。 “怒打价格战、拼命砸广告、渠道金字塔”是过去中国企业做营销的基本功课,背后的逻辑是花钱。今天这三招已经不太管用了,广告费用的多少不再是决定性因素。取而代之的是直面客户的......一起来看看 《轻营销》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具