https://github.com/firede/archer

Mobile mixin library based on Stylus.
https://github.com/firede/archer

Last synced: about 2 months ago
JSON representation

Mobile mixin library based on Stylus.

• Host: GitHub
• URL: https://github.com/firede/archer
• Owner: firede
• Created: 2013-10-23T12:01:14.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2013-10-24T08:13:43.000Z (about 11 years ago)
• Last Synced: 2024-04-09T23:06:29.242Z (9 months ago)
• Size: 180 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# archer

Mobile mixin library based on Stylus.

## API

### Normalize

#### normalize()

基于 `normalize.css`，用来归一化不同浏览器下的页面样式。

    normalize()

### Functions

函数主要用于对样式的 `value` 进行处理。

#### px2rem(pixel)

将值的单位从 `px` 转为 `rem`。

    .entry p

      font-size: px2rem(14)

      line-height: px2rem(22)

#### hidpi(ratio = 1.3)

基于 `min-device-pixel-ratio` 生成针对高分辨率模式的 media query，默认值为 `1.3`。

    .img

      media_query = hidpi()

      @media media_query

        background-image: url('[email protected]')

### Utils

常用工具型 Mixin。

#### clearfix()

建立 BFC 清除元素内部的浮动，使元素获得应有的高度。

    .list-container

      .clearfix()

      li

        float: left

#### size(width, height)

设定元素的尺寸，当参数只写1个时生成正方形。

    .square

      size: 20px

    .rect

      size: 200px 80px

#### retina-image(path, width, height)

高清屏图片支持。

    .icon

      retina-image: "../img/icon.png" 32px 32px

      size: 32px

#### hide-text()

隐藏文字。

    .icon

      size: 32px

      hide-text()