https://github.com/taylorpzreal/primary-style

A library for basic style write with scss
https://github.com/taylorpzreal/primary-style

css css-styles primary-style scss

Last synced: 17 days ago
JSON representation

A library for basic style write with scss

• Host: GitHub
• URL: https://github.com/taylorpzreal/primary-style
• Owner: TaylorPzreal
• License: mit
• Created: 2017-08-15T01:51:21.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-01-02T23:50:09.000Z (about 7 years ago)
• Last Synced: 2024-12-22T06:47:50.354Z (about 2 months ago)
• Topics: css, css-styles, primary-style, scss
• Language: CSS
• Homepage:
• Size: 35.2 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# primary-style

Browser basic styles and useful class.

## Installation And Usage

```bash

yarn add primary-style

```

```js

import 'primary-style';

```

## Features

* Page defaults

From [Bootstrap](https://getbootstrap.com/docs/4.0/content/reboot/)

```HTML

The  and  elements are updated to provide better page-wide defaults. More specifically:

* The box-sizing is globally set on every element—including *::before and *::after, to border-box. This ensures that the declared width of element is never exceeded due to padding or border.

* No base font-size is declared on the , but 16px is assumed (the browser default). font-size: 1rem is applied on the  for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach.

* The  also sets a global font-family, line-height, and text-align. This is inherited later by some form elements to prevent font inconsistencies.

* For safety, the  has a declared background-color, defaulting to #fff.

```

```css

html {

  box-sizing: border-box;

  line-height: 1.15; // Correct the line height in all browsers.

  height: 100%; // make full height

  -webkit-text-size-adjust: 100%; // 4

  -ms-text-size-adjust: 100%; // 4

  -ms-overflow-style: scrollbar; // 5

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6

}

*,

*::before,

*::after {

  box-sizing: inherit;

}

// 1. Set an explicit initial text-align value so that we can later use the

//    the `inherit` value on things like `` elements.

body {

  background-color: #fff;

  color: #34374c;

  display: flex;

  flex-direction: column;

  font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;

  font-size: 1rem;

  height: 100%;

  margin: 0;

  text-align: left; // 1

}

```

* Font size

Use class ___font-10___, the font size is 10px.

The size also could be oneof [10, 12, 14, 16, 18, 20, 22, 24, 28, 30, 32, 36, 48, 64, 72];

* Layout

${size} is oneOf

```js

[1, 2, 4, 5, 6, 8, 10, 12, 15, 16, 18, 20, 22, 24, 26, 28, 32, 48, 64, 72, 100, 120]

```

Support:

```css

.pl-${size} {

  padding-left: #{$size}px;

}

/* Others like this */

/*

pr-${size}

pt-${size}

pb-${size}

mr-${size}

ml-${size}

mt-${size}

mb-${size}

*/

.no-padding {

  padding: 0;

}

.no-margin {

  margin: 0;

}

.full-width {

  width: 100%;

}

.full-height {

  height: 100%;

}

```

* Definate Scrollbar default style

## Plan

* [ ] Add colors

* [ ] Could extention by scss variable