Skip to content

Commit 8968857

Browse files
CrackerakiUACrackerakiUA
committed
Merge branch 'master' of github.com:WebArtWork/ngx-platform
2 parents f2975cd + 8a4cbb3 commit 8968857

30 files changed

+2764
-0
lines changed

‎ngx-css/Classes.md

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# • HOW TO USE OUR CLASSES IN HTML •
2+
3+
## STRUCTURE
4+
### Components
5+
included file readme in components folder
6+
7+
### GRID
8+
row // row
9+
col-1 // column width 100%
10+
col-2 // column width 50%
11+
col-3 // column width 33.3%
12+
col-4 // column width 25%
13+
col-5 // column width 20%
14+
col-23 // column width 66.6%
15+
col-2m // column min-width 50%
16+
col-25 // column width 40%
17+
18+
### CARD
19+
w-card // card body
20+
w-card _pd // card with padding
21+
w-card__header // header card inside w-card
22+
23+
### Atom (should turn on in file app.scss)
24+
1. Display
25+
d-b //display-block:
26+
d-ib //display-inline-block
27+
d-f // display-flex
28+
fd-c // flex-direction-column
29+
jc-sb // justify-content-space-between
30+
jc-fs // justify-content-flex-start
31+
jc-c // justify-content-center
32+
jc-fe // justify-content-flex-end
33+
ai-c // align-items-center
34+
ai-fe // align-items-flex-end
35+
ai-fs // align-items-flex-start
36+
ai-sb // align-items-space-between
37+
fg-1 // flex-grow-1
38+
39+
2. Margin (should set numbers in margin.scss)
40+
m$ // margin $ px
41+
mx$ // margin left and right $px
42+
my$ // margin top and bottom $px
43+
example: m10 // margin: 10px;
44+
45+
3. Padding (should set numbers in padding.scss)
46+
p$ // padding $ px
47+
px$ // padding left and right $px
48+
py$ // padding top and bottom $px
49+
example: p10 // padding: 10px;
50+
4. Other
51+
pos-rel // position relative
52+
53+
5. Size
54+
w100p // width 100%
55+
h100p // height 100%\
56+
57+
6. Text
58+
ta-l // text-align-left
59+
ta-c // text-align-center
60+
ta-r // text-align-right
61+
ws-nw // white-space-no-wrap
62+
ws-pl // white-space-pre-line
63+
ws-n // white-space-normal
64+
fw400 // font-weight-400
65+
fw500 // font-weigh-500
66+
fw700 // font-weight-700
67+
tt-u // text-transform-uppercase
68+
### Icons
69+
<i>edit</i> // We can use material icons in these formats

‎ngx-css/Readme.md

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# • SCSS FOLDER PACK BY WAW •
2+
3+
## I. GET STARTED
4+
- Import app.scss to your global styles -> ```@import: "scss/waw";```
5+
6+
## II. STRUCTURE
7+
### Atom
8+
1. display
9+
2. margin
10+
3. other
11+
4. padding
12+
5. size
13+
6. text
14+
15+
### Components
16+
1. w-btn
17+
2. w-checkbox
18+
3. w-card
19+
4. w-forms
20+
5. w-radio
21+
6. w-switch
22+
7. w-table
23+
24+
### Layout
25+
1. base
26+
2. grid
27+
3. scroll
28+
29+
### Utils
30+
1. fonts
31+
2. icons
32+
3. media
33+
4. mixins
34+
5. vars
35+
6. angular
36+
37+
### Vendors
38+
1. normalize
39+
40+
## III. SETTINGS
41+
- Go to ```waw.scss``` and turn on/off imports scss files
42+
43+
## IV. INFO
44+
1. atom - include atomic classes.
45+
2. common - include styles which appears on few pages.
46+
3. components - include independent blocks
47+
4. layout - include global layout settings
48+
5. pages - include style for specifically page
49+
6. utils - include utilities styles
50+
7. vendors - include imports resets, normalize, libs
51+
52+
## V. HOW TO USE COMPONENTS
53+
- Go to ```scss/components/README.md``` - ready made html for components
54+
55+
## VI. HOW TO USE CLASESS
56+
- Go to ```scss/Classes.md``` - ready made htnl classes
57+
58+
## VII. HTML/SCSS RULES
59+
### We use BEM technology but changed a little for themselves (optional)
60+
#### a. HTML
61+
1. block -> "header"
62+
2. element -> "header__link"
63+
3. modifier -> "_active"
64+
65+
#### b. SCSS
66+
1. block -> "header {}"
67+
2. element -> "&__link {}"
68+
3. modifier -> "&._active {}"

‎ngx-css/atom/display.scss

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// ===== BLOCKS =====
2+
.d-b {
3+
display: block !important;
4+
}
5+
.d-ib {
6+
display: inline-block !important;
7+
}
8+
// ===== FLEXBOX =====
9+
.d-f {
10+
display: flex !important;
11+
}
12+
.fd-c {
13+
flex-direction: column !important;
14+
}
15+
.jc-sb {
16+
justify-content: space-between !important;
17+
}
18+
.jc-fs {
19+
justify-content: flex-start !important;
20+
}
21+
.jc-c {
22+
justify-content: center !important;
23+
}
24+
.jc-fe {
25+
justify-content: flex-end !important;
26+
}
27+
.ai-c {
28+
align-items: center !important;
29+
}
30+
.ai-fe {
31+
align-items: flex-end !important;
32+
}
33+
.ai-fs {
34+
align-items: flex-start !important;
35+
}
36+
.ai-sb {
37+
align-items: space-between !important;
38+
}
39+
.fg-1 {
40+
flex-grow: 1 !important;
41+
}

‎ngx-css/atom/margin.scss

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
2+
// ===== ADD NEEDED SIZED SEPARETED BY SPACE: $margin-px: 0 10 20 30; =====
3+
$margin-px: 0;
4+
$margin-x-px: 0;
5+
$margin-y-px: 0;
6+
$margin-top-px: 0 10;
7+
$margin-bottom-px: 0 15;
8+
$margin-left-px: 0;
9+
$margin-right-px: 0;
10+
11+
// ===== GENERATORS =====
12+
@mixin margin {
13+
@each $i in $margin-px {
14+
.m#{$i} {
15+
margin: #{$i}px !important;
16+
}
17+
}
18+
@each $i in $margin-x-px {
19+
.mx#{$i} {
20+
margin-left: #{$i}px !important;
21+
margin-right: #{$i}px !important;
22+
}
23+
}
24+
@each $i in $margin-y-px {
25+
.my#{$i} {
26+
margin-top: #{$i}px !important;
27+
margin-bottom: #{$i}px !important;
28+
}
29+
}
30+
@each $i in $margin-top-px {
31+
.mt#{$i} {
32+
margin-top: #{$i}px !important;
33+
}
34+
}
35+
@each $i in $margin-bottom-px {
36+
.mb#{$i} {
37+
margin-bottom: #{$i}px !important;
38+
}
39+
}
40+
@each $i in $margin-left-px {
41+
.ml#{$i} {
42+
margin-left: #{$i}px !important;
43+
}
44+
}
45+
@each $i in $margin-right-px {
46+
.mr#{$i} {
47+
margin-right: #{$i}px !important;
48+
}
49+
}
50+
}
51+
52+
@include margin;

‎ngx-css/atom/other.scss

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// ===== POSITION =====
2+
.pos-rel {
3+
position: relative !important;
4+
}

‎ngx-css/atom/padding.scss

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
// ===== ADD NEEDED SIZED SEPARETED BY SPACE: $padding-px: 0 10 20 30; =====
2+
$padding-px: 0;
3+
$padding-x-px: 0;
4+
$padding-y-px: 0;
5+
$padding-top-px: 0;
6+
$padding-bottom-px: 0;
7+
$padding-left-px: 0;
8+
$padding-right-px: 0;
9+
10+
/* Generators */
11+
@mixin padding {
12+
@each $i in $padding-px {
13+
.p#{$i} {
14+
padding: #{$i}px !important;
15+
}
16+
}
17+
@each $i in $padding-x-px {
18+
.px#{$i} {
19+
padding-left: #{$i}px !important;
20+
padding-right: #{$i}px !important;
21+
}
22+
}
23+
@each $i in $padding-y-px {
24+
.py#{$i} {
25+
padding-top: #{$i}px !important;
26+
padding-bottom: #{$i}px !important;
27+
}
28+
}
29+
@each $i in $padding-top-px {
30+
.pt#{$i} {
31+
padding-top: #{$i}px !important;
32+
}
33+
}
34+
@each $i in $padding-bottom-px {
35+
.pb#{$i} {
36+
padding-bottom: #{$i}px !important;
37+
}
38+
}
39+
@each $i in $padding-right-px {
40+
.pr#{$i} {
41+
padding-right: #{$i}px !important;
42+
}
43+
}
44+
@each $i in $padding-left-px {
45+
.pl#{$i} {
46+
padding-left: #{$i}px !important;
47+
}
48+
}
49+
}
50+
51+
@include padding;

‎ngx-css/atom/size.scss

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// ===== WIDTH =====
2+
.w100p {
3+
width: 100% !important;
4+
}
5+
6+
// ===== HEIGHT =====
7+
.h100p {
8+
height: 100%;
9+
}

‎ngx-css/atom/text.scss

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// ===== TEXT ALIGN =====
2+
.ta-l {
3+
text-align: left !important;
4+
}
5+
.ta-c {
6+
text-align: center !important;
7+
}
8+
.ta-r {
9+
text-align: right !important;
10+
}
11+
// ===== WHITE SPACE =====
12+
.ws-nw {
13+
white-space: nowrap !important;
14+
}
15+
.ws-pl {
16+
white-space: pre-line !important;
17+
}
18+
.ws-n {
19+
white-space: normal !important;
20+
}
21+
// ===== FONT WEIGHT =====
22+
.fw400 {
23+
font-weight: 400 !important;
24+
}
25+
.fw500 {
26+
font-weight: 500 !important;
27+
}
28+
.fw700 {
29+
font-weight: 700 !important;
30+
}
31+
// ===== TEXT TRANSFORM =====
32+
.tt-u {
33+
text-transform: uppercase !important;
34+
}

0 commit comments

Comments
 (0)