构建自己的css框架:仿照purecss

pure.css更加简易的Bootstrap框架,定制度更高.比Tailwind轻量. 诸如此类的简单css框架能帮助我们快速搭建页面. 这里仿照它们写一个自己的css框架,涉及布局,自定义大小,颜色等

中文官方文档开始使用 - Pure | Pure中文站 | Purecss学习网

注意,下面代码需要使用sass处理

normalize

首先,需要一些css用于使得不同浏览器表现一致.

:root {
  box-sizing: border-box;
  font-size: 62.5%;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

此外也可以引入Normalize.css: Make browsers render all elements more consistently. (necolas.github.io)

排版

众所周知,我们需要Grid,这里Grid并不是指css中的display:grid,而是更加简单的每行多个block元素.

.pro-col {
  max-width: $grid-width;
  @include clearfix;
  & [class^="pro-col-"] {
    display: float;
    &:not(:last-child) {
      margin-right: $horizontal-gap;
    }
  }
  &-1-2 {
    width: calc((100% - #{$gutter-horizontal}) / 2);
  }
  &-1-3 {
    width: calc((100% - 2 *#{$gutter-horizontal}) / 3);
  }
  &-2-3 {
    width: calc((100% - #{$gutter-horizontal}) / 3 * 2);
  }
  &-1-4 {
    width: calc((100% - 3 *#{$gutter-horizontal}) / 4);
  }
  &-3-4 {
    width: calc((100% - #{$gutter-horizontal}) / 4 * 3);
  }
}

目前css支持更加先进的CSS Flexbox Layout Guide | CSS-Tricks与CSS Grid Layout Guide | CSS-Tricks

组件

可以实现自己的一些组件,这些组件不受页面限制

Buttons

.btn {
  &--white {
    background-color: $color-white;
    color: $text-color-dark;
    &::after {
      background-color: $color-white;
    }
  }
  &--green {
    background-color: $color-primary;
    color: $color-white;
    &::after {
      background-color: $color-primary;
    }
  }
  &--animated {
    animation: moveInBottom 1s ease-out 0.75s;
    animation-fill-mode: backwards;
  }

  &:link,
  &:visited {
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid $color-primary;
    display: inline-block;
    padding: 1.5rem 4rem;
    border-radius: 10rem;
    transition: all 0.5s;
    position: relative;
  }
  &:hover {
    transform: translateY(-0.3rem);
    box-shadow: 0 1rem 2rem rgba($color-black, 0.2);
    &::after {
      transform: scaleX(1.4) scaleY(1.6);
    }
  }
  &:active {
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 1rem rgba($color-black, 0.2);
  }
  &::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 10rem;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.2s;
    z-index: -1;
  }
}

.btn-text {
  &:link,
  &:visited {
    color: $color-primary;
    display: inline-block;
    text-decoration: none;
    border-bottom: 1px solid $color-primary;
    padding: 3px;
    transition: all 0.5s;
  }
  &:hover {
    background-color: $color-primary;
    color: $text-color-white;
    box-shadow: 0 1rem 2rem rgba($color-black, 0.15);
    transform: translateY(-2px);
  }
  &:active {
    box-shadow: 0 0.5rem 1rem rgba($color-black, 0.15);
    transform: translateY(0);
  }
}

自定义变量

// TEXT COLOR
$text-color-dark: #000;
$text-color-gray: #777;
$text-color-light: #fff;

// BACKGROUND COLOR
$bg-color-dark: #000;
$bg-color-gray: #777;
$bg-color-light: #fff;

// DIMENSION ,MARGIN AND PADDING
$grid-width: 114rem;
$gutter-vertical: 8rem;
$gutter-horizontal: 6rem;

// FONT SIZE
$default-font-size: 1.6rem;

还可以设置一些mixin,类似函数.

@mixin clearfix {
  &::after {
    content: "";
    clear: both;
    display: table;
  }
}

还可以设置一些工具/原子类

.u-margin-bottom-small {
  margin-bottom: 1.5rem;
}

.u-margin-bottom-medium {
  margin-bottom: 3rem;
}
.u-margin-bottom-big {
  margin-bottom: 5rem;
}
.u-margin-boottom-huge {
  margin-bottom: 7rem;
}

.u-margin-top-small {
  margin-top: 1.5rem;
}
.u-margin-top-medium {
  margin-top: 3rem;
}
.u-margin-top-big {
  margin-top: 5rem;
}
.u-margin-top-huge {
  margin-top: 7rem;
}

hidden {
  display: none !important;
}

还需要什么

首先,为了响应式

使用max-width优于width,使用%,rem与em优于px. 针对屏幕大小使用media query

其次,考虑原子式或尽可能提供更多现有组件

事实上上面两者并不冲突,但是为了简单,可以考虑尽可能向一个方向考虑.

使得整个格式保持一致

预设的风格需要尽可能保持一致. 比如如果页面整体风格是灰白的,button风格也要保持一致

首先，CSS框架必须包含页面布局，比如网格系统。如今，网格系统在网页设计中非常重要。您的网格系统应该是灵活的和可定制的。
其次，CSS框架必须包含很多组件。对于您的框架来说，只有网格系统是不够的。它还应该包括一些组件，如警报、按钮等。此外，它们应该是可定制的。
最后，CSS框架应该最小化。你知道网页的大小会影响加载时间。因此，如果CSS文件的大小大于300-400KB，那么这里就有问题了

Sekyoro的博客小屋