Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/istuffs/62.5percent
:mag_right: rem unit to base 10 normaliser for your front-end developpement.
https://github.com/istuffs/62.5percent
eyeglass-module
Last synced: about 1 month ago
JSON representation
:mag_right: rem unit to base 10 normaliser for your front-end developpement.
- Host: GitHub
- URL: https://github.com/istuffs/62.5percent
- Owner: iStuffs
- Created: 2018-07-14T11:29:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-16T14:23:48.000Z (over 3 years ago)
- Last Synced: 2024-11-28T15:47:14.161Z (about 2 months ago)
- Topics: eyeglass-module
- Language: HTML
- Homepage:
- Size: 7.81 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# 62.5percent
62.5 is an easy way to use rem with no math complication.
## What it does
The browser set the default font size to 16px, but it's not convenient for rem unit use.
So we take 62.5% of 16px to have a font size base at 10px.
Now you can set size in rem with a 10 base maths.
_Example: 2.4rem is 24px._**It only adds the following code to your css**
```css
html {
font-size: .625em;
font-size: calc(1em * .625);
}
```Now you can use rem easily with low maths.
## Use with CDN
You can simply add this before your own stylesheet.
```html
```## Import with eyeglass or NPM
**With eyeglass**
```bash
npm i -D eyeglass
npm i -S 62.5percent
``````javascript
/* gulpfile.js */
const gulp = require('gulp');
const sass = require('gulp-sass');
const eyeglass = require("eyeglass");gulp.task('css', function () {
return gulp.src('sass/**/*.{sass,scss}')
.pipe(sass(eyeglass())
.pipe(gulp.dest('./dist/css/')
);
});
```
**_or_ With NPM**
```bash
npm i -S 62.5percent
``````javascript
/* gulpfile.js */
const css625 = require("62.5percent").includePaths;gulp.task('cssTask', function () {
return gulp.src(PATH.css.src)
.pipe(sass(
{ includePaths: [css625] }
).on('error', sass.logError))
// ...
.pipe(gulp.dest(PATH.css.dest));
});
```## easy use
```scss
@import '62.5percent';body {
font-size: 1.4rem; // equivalent to 14px
@media screen and (min-width: 76.8rem) { // equivalent to 768px
font-size: 1.5rem; // equivalent to 15px
}
@media screen and (min-width: 99.2rem) { // equivalent to 992px
font-size: 1.6rem; // equivalent to 16px
}
}
```