Skip to content

Commit b612bdb

Browse files
bassochettebassochette
committed
feat: basic responsive and animation helpers
1 parent 3e082e5 commit b612bdb

19 files changed

+4440
-5306
lines changed

‎.github/workflows/publish.yml

+1-15
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,6 @@ on:
55
types: [created]
66

77
jobs:
8-
test:
9-
runs-on: ubuntu-latest
10-
steps:
11-
- uses: actions/checkout@v2
12-
- uses: actions/setup-node@v2
13-
with:
14-
node-version: 14
15-
- run: npm ci
16-
- run: npm run build
17-
- run: npm test
188
publish-npm:
199
needs: test
2010
runs-on: ubuntu-latest
@@ -24,8 +14,6 @@ jobs:
2414
with:
2515
node-version: 14
2616
registry-url: https://registry.npmjs.org/
27-
- run: npm ci
28-
- run: npm run build
2917
- run: npm publish --access public
3018
env:
3119
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
@@ -38,8 +26,6 @@ jobs:
3826
with:
3927
node-version: 14
4028
registry-url: https://npm.pkg.github.com/
41-
- run: npm ci
42-
- run: npm run build
4329
- run: npm publish --access public
4430
env:
45-
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}
31+
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

‎.github/workflows/testing.yml

-27
This file was deleted.

‎.gitignore

-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.idea
22
*.swp
33
node_modules
4-
lib
54
coverage

‎.husky/pre-commit

-1
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,3 @@
22
. "$(dirname "$0")/_/husky.sh"
33

44
npx lint-staged
5-
npm test

‎.husky/pre-push

-4
This file was deleted.

‎.nvmrc

-1
This file was deleted.

‎CHANGELOG.md

-46
This file was deleted.

‎README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
# Webeleon npm package starter
1+
# Webeleon scss helper
22

33
## Install
44

55
```
6-
npm i package-name
6+
npm i @webeleon/scss-helper
77
```

‎jest.config.js

-12
This file was deleted.

‎lib/animations.scss

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@keyframes spin {
2+
from {
3+
transform: rotate(0deg);
4+
}
5+
to {
6+
transform: rotate(360deg);
7+
}
8+
}

‎lib/responsive.scss

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
$max-width-mobile: 767px;
2+
$max-width-tablet: 992px;
3+
$max-width-desktop: 1199px;
4+
$max-width-largedesktop: 1500px;
5+
$max-width-XL: 2000px;
6+
$min-width-XXL: 2001px;
7+
8+
/*
9+
* Responsive breakpoint mixins
10+
*/
11+
@mixin mobile {
12+
@media only screen and (max-width: $max-width-mobile) {
13+
@content;
14+
}
15+
}
16+
17+
@mixin tablet {
18+
@media only screen and (min-width: $max-width-mobile + 1) and (max-width: $max-width-tablet) {
19+
@content;
20+
}
21+
}
22+
23+
@mixin mobile-tablet {
24+
@media only screen and (max-width: $max-width-tablet) {
25+
@content;
26+
}
27+
}
28+
29+
@mixin desktop {
30+
@media only screen and (min-width: $max-width-tablet + 1) and (max-width: $max-width-desktop) {
31+
@content;
32+
}
33+
}
34+
@mixin large-desktop {
35+
@media only screen and (min-width: $max-width-desktop + 1) and (max-width: $max-width-largedesktop) {
36+
@content;
37+
}
38+
}
39+
@mixin XL {
40+
@media only screen and (min-width: $max-width-largedesktop + 1) and (max-width: $max-width-XL) {
41+
@content;
42+
}
43+
}
44+
45+
@mixin XXL {
46+
@media only screen and (min-width: $max-width-XL + 1) and (min-width: $min-width-XXL) {
47+
@content;
48+
}
49+
}
50+
51+
/*
52+
* Responsive Helper classes
53+
*/
54+
@include mobile {
55+
.hidden-mobile {
56+
display: none !important;
57+
}
58+
}
59+
@include tablet {
60+
.hidden-tablet {
61+
display: none !important;
62+
}
63+
}
64+
@include mobile-tablet {
65+
.hidden-mobile-tablet {
66+
display: none !important;
67+
}
68+
}
69+
@include desktop {
70+
.hidden-desktop {
71+
display: none !important;
72+
}
73+
}
74+
@include large-desktop {
75+
.hidden-desktop {
76+
display: none !important;
77+
}
78+
}
79+
@include XL {
80+
.hidden-desktop {
81+
display: none !important;
82+
}
83+
}
84+
@include XXL {
85+
.hidden-desktop {
86+
display: none !important;
87+
}
88+
}

‎lib/styles.scss

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
@import "./animations";
2+
@import "./responsive";
3+
4+
@include XXL {
5+
body {
6+
font-size: 36px;
7+
}
8+
}
9+
10+
@include XL {
11+
body {
12+
font-size: 18px;
13+
}
14+
}
15+
16+
@include large-desktop {
17+
body {
18+
font-size: 14px;
19+
}
20+
}
21+
22+
@include desktop {
23+
body {
24+
font-size: 13px;
25+
}
26+
}
27+
28+
@include tablet {
29+
body {
30+
font-size: 12px;
31+
}
32+
}
33+
34+
@include mobile {
35+
body {
36+
font-size: 10px;
37+
}
38+
}

0 commit comments

Comments
 (0)