1.0.5 • Published 2 years ago

macro-styles v1.0.5

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

Минимальный набор готовых CSS-классов для повседневных задач по верстке.

Установка

NPM: npm install macro-styles

Yarn: yarn add macro-styles

Использование

Установить набор классов с помощью NPM или Yarn

React

Подключить в любом месте index.js: import 'macro-styles';

SASS/SCSS

Открыть самый главный файл со стилями и дописать в самом начале: @import 'macro-styles';

Внизу в таблице приведены примеры классов, которые можно использовать. Вместо символа "*" укажите одну букву любой стороны. Если не указывать сторону, то отступы будут задаваться со всех сторон.

Сторона => сокращение:

  • left => l
  • right => r
  • top => t
  • bottom => b

Например:

КлассЗначение
mr-10 mb-50margin-right: 10px; margin-bottom: 50px;
m-25margin: 25px;
p-50padding: 50px;
pr-10 mt-15 mb-15padding-right: 10px; margin-top: 15px; margin-bottom: 15px;

Значение:

  • mt-10 - margin-top: 10px
  • mr-40 - margin-right: 40px

Отступы margin

КлассЗначение
m*-5margin-*: 5px;
m*-10margin-*: 10px;
m*-15margin-*: 15px;
m*-20margin-*: 20px;
m*-25margin-*: 25px;
m*-30margin-*: 30px;
m*-35margin-*: 35px;
m*-40margin-*: 40px;
m*-45margin-*: 45px;
m*-50margin-*: 50px;

Отступы padding

КлассЗначение
p*-5padding-*: 5px;
p*-10padding-*: 10px;
p*-15padding-*: 15px;
p*-20padding-*: 20px;
p*-25padding-*: 25px;
p*-30padding-*: 30px;
p*-35padding-*: 35px;
p*-40padding-*: 40px;
p*-45padding-*: 45px;
p*-50padding-*: 50px;

Базовая очистка стилей

*box-sizing: border-box;
outline: none;
margin: 0;
padding: 0;
acolor: inherit;
text-decoration: none;
libox-sizing: border-box;
outline: none;

Container, row, col

КлассЗначение
containerwidth: 100% + margin-x: auto
rowdisplay: flex; flex-wrap
colflex: 1 0 0%;
col-1 sm-md-lg-xl-xxlflex: 0 0 auto;
sm-md-lg-xl-xxlwidth: 8.3333333333%;
col-2 sm-md-lg-xl-xxlflex: 0 0 auto;
sm-md-lg-xl-xxlwidth: 16.6666666667%;
col-3 sm-md-lg-xl-xxlflex: 0 0 auto;
sm-md-lg-xl-xxlwidth: 25%;
col-4 sm-md-lg-xl-xxlflex: 0 0 auto;
sm-md-lg-xl-xxlwidth: 33.3333333333%;
col-5 sm-md-lg-xl-xxlflex: 0 0 auto;
sm-md-lg-xl-xxlwidth: 41.6666666667%;
col-6 sm-md-lg-xl-xxlflex: 0 0 auto;
sm-md-lg-xl-xxlwidth: 50%;
col-7 sm-md-lg-xl-xxlflex: 0 0 auto;
sm-md-lg-xl-xxlwidth: 58.3333333333%;
col-8 sm-md-lg-xl-xxlflex: 0 0 auto;
sm-md-lg-xl-xxlwidth: 66.6666666667%;
col-9 sm-md-lg-xl-xxlflex: 0 0 auto;
sm-md-lg-xl-xxlwidth: 75%;
col-10 sm-md-lg-xl-xxlflex: 0 0 auto;
sm-md-lg-xl-xxlwidth: 83.3333333333%;
col-11 sm-md-lg-xl-xxlflex: 0 0 auto;
sm-md-lg-xl-xxlwidth: 91.6666666667%;
col-12 sm-md-lg-xl-xxlflex: 0 0 auto;
width: 100%;

Flex, позиционирование, размер

КлассЗначение
h100pheight: 100%;
w100pwidth: 100%;
d-ibdisplay: inline-block;
d-ifdisplay: inline-flex;
d-flexdisplay: flex;
d-blockdisplay: block;
j-betweenjustify-content: space-between;
j-aroundjustify-content: space-around;
j-centerjustify-content: center;
j-endjustify-content: flex-end;
j-evenlyjustify-content: space-evenly;
a-centeralign-items: center;
a-endalign-items: flex-end;
a-startalign-items: flex-start;
a-stretchalign-items: stretch;
a-betweenalign-content: space-between;
a-aroundalign-content: space-around;
a-s-autoalign-self: auto;
a-s-startalign-self: flex-start;
a-s-endalign-self: flex-end;
a-s-centeralign-self: center;
a-s-baselinealign-self: baseline;
a-s-stretchalign-self: stretch;
flex-columnflex-direction: column;
flex-rowflex-direction: row;
flex-wrapflex-wrap: wrap;
flex-autoflex: 1 1 auto;
flexflex: 1;
m-automargin: auto;
ml-automargin-left: auto;
mr-automargin-right: auto;
text-centertext-align: center;
pos-rposition: relative;
pos-aposition: absolute;
pos-fposition: fixed;
pos-sposition: sticky;
cu-pcursor: pointer;

Текст

КлассЗначение
text-centertext-align: center;
text-capitalizetext-transform: capitalize;
text-uppercasetext-transform: uppercase;
text-lowercasetext-transform: lowercase;
text-truncatewhite-space: nowrap; overflow: hidden; text-overflow: ellipsis;
fw-boldfont-weight: bold;

Opacity

КлассЗначение
opacity-1opacity: 0.1;
opacity-2opacity: 0.2;
opacity-3opacity: 0.3;
opacity-4opacity: 0.4;
opacity-5opacity: 0.5;
opacity-6opacity: 0.6;
opacity-7opacity: 0.7;
opacity-8opacity: 0.8;
opacity-9opacity: 0.9;
opacity-10opacity: 1;
@infinitebrahmanuniverse/nolb-macr@everything-registry/sub-chunk-2119@zalastax/nolb-mac
1.0.2

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago