Skip to content

Commit 693e260

Browse files
ZeeCoderZeeCoder
committed
README update
1 parent 454df0a commit 693e260

File tree

8 files changed

+667
-141
lines changed

8 files changed

+667
-141
lines changed

‎README.md‎

Lines changed: 576 additions & 52 deletions
Large diffs are not rendered by default.

‎demo/gulpfile.js‎

Lines changed: 49 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,60 @@
1-
'use strict';
1+
"use strict";
22

3-
const gulp = require('gulp');
4-
const fs = require('fs');
5-
const path = require('path');
6-
const postcss = require('gulp-postcss');
7-
const rename = require('gulp-rename');
8-
const nested = require('postcss-nested');
9-
const autoprefixer = require('autoprefixer');
10-
const postcssImport = require('postcss-import');
11-
const containerQuery = require('@zeecoder/container-query/containerQuery');
12-
const writeFileSync = require('fs').writeFileSync;
3+
const gulp = require("gulp");
4+
const fs = require("fs");
5+
const path = require("path");
6+
const postcss = require("gulp-postcss");
7+
const rename = require("gulp-rename");
8+
const nested = require("postcss-nested");
9+
const autoprefixer = require("autoprefixer");
10+
const postcssImport = require("postcss-import");
11+
const containerQuery = require("@zeecoder/container-query/containerQuery");
12+
const writeFileSync = require("fs").writeFileSync;
1313

14-
function containerSelectorToFilename (selector) {
14+
function containerSelectorToFilename(selector) {
1515
return selector.substr(1);
1616
}
1717

18-
gulp.task('css', function () {
19-
return gulp.src('src/css/main.pcss')
20-
.pipe(postcss([
21-
postcssImport(),
22-
nested(),
23-
autoprefixer(),
24-
containerQuery({
25-
getJSON: (cssPath, containers) => {
26-
// Saving the container query stats individually
27-
for (let containerSelector in containers) {
28-
let component = containerSelectorToFilename(containerSelector);
18+
gulp.task("css", function() {
19+
return gulp
20+
.src("src/css/main.pcss")
21+
.pipe(
22+
postcss([
23+
postcssImport(),
24+
nested({
25+
bubble: ["container"]
26+
}),
27+
autoprefixer(),
28+
containerQuery({
29+
getJSON: (cssPath, containers) => {
30+
// Saving the container query stats individually
31+
for (let containerSelector in containers) {
32+
let component = containerSelectorToFilename(
33+
containerSelector
34+
);
35+
writeFileSync(
36+
`${__dirname}/src/css/components/${component}/${component}.json`,
37+
JSON.stringify(containers[containerSelector])
38+
);
39+
}
40+
41+
// Then saving the container names
2942
writeFileSync(
30-
`${__dirname}/src/css/components/${component}/${component}.json`,
31-
JSON.stringify(containers[containerSelector])
43+
`${__dirname}/src/js/containers.json`,
44+
JSON.stringify(
45+
Object.keys(containers).map(
46+
containerSelectorToFilename
47+
)
48+
)
3249
);
3350
}
34-
35-
// Then saving the container names
36-
writeFileSync(
37-
`${__dirname}/src/js/containers.json`,
38-
JSON.stringify(Object.keys(containers).map(containerSelectorToFilename))
39-
);
40-
}
41-
}),
42-
]))
43-
.pipe( rename('main.css') )
44-
.pipe( gulp.dest('web/dist') );
51+
})
52+
])
53+
)
54+
.pipe(rename("main.css"))
55+
.pipe(gulp.dest("web/dist"));
4556
});
4657

47-
gulp.task('watch', function() {
48-
gulp.watch('src/**/*.pcss', ['css']);
58+
gulp.task("watch", function() {
59+
gulp.watch("src/**/*.pcss", ["css"]);
4960
});

‎demo/src/css/components/social-container/social-container.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"selector":".social-container","queries":[{"elements":[{"selector":".social-container","styles":{}},{"selector":".social-container__cell","styles":{}},{"selector":".social-container__cell:nth-child(1)","styles":{"width":""}},{"selector":".social-container__cell:nth-child(2)","styles":{"width":""}},{"selector":".social-container__cell:nth-child(3)","styles":{"width":""}},{"selector":".social-container__cell:nth-child(4)","styles":{"width":""}},{"selector":".social-container__cell:nth-child(5)","styles":{"width":""}}]},{"conditions":[[["width",">",250]]],"elements":[{"selector":".social-container__cell:nth-child(1)","styles":{"width":"50%"}},{"selector":".social-container__cell:nth-child(2)","styles":{"width":"50%"}},{"selector":".social-container__cell:nth-child(3)","styles":{"width":"33%"}},{"selector":".social-container__cell:nth-child(4)","styles":{"width":"34%"}},{"selector":".social-container__cell:nth-child(5)","styles":{"width":"33%"}}]}]}
1+
{"selector":".social-container","queries":[{"elements":[{"selector":".social-container","styles":{}},{"selector":".social-container__cell","styles":{}},{"selector":".social-container__cell:nth-child(1)","styles":{"width":""}},{"selector":".social-container__cell:nth-child(2)","styles":{"width":""}},{"selector":".social-container__cell:nth-child(3)","styles":{"width":""}},{"selector":".social-container__cell:nth-child(4)","styles":{"width":""}},{"selector":".social-container__cell:nth-child(5)","styles":{"width":""}},{"selector":".social-container__cell:nth-child(6)","styles":{"width":""}}]},{"conditions":[[["width",">",250]]],"elements":[{"selector":".social-container__cell:nth-child(1)","styles":{"width":"50%"}},{"selector":".social-container__cell:nth-child(2)","styles":{"width":"50%"}},{"selector":".social-container__cell:nth-child(3)","styles":{"width":"33%"}},{"selector":".social-container__cell:nth-child(4)","styles":{"width":"34%"}},{"selector":".social-container__cell:nth-child(5)","styles":{"width":"33%"}},{"selector":".social-container__cell:nth-child(6)","styles":{"width":"40%"}}]}]}

‎demo/src/css/components/social-container/social-container.pcss‎

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,38 @@
11
.social-container {
22
@define-container;
3-
43
display: flex;
5-
flex-direction: column;
64
overflow: hidden;
75
position: absolute;
86
top: 0;
97
left: 0;
108
width: 100%;
119
height: 100%;
12-
}
13-
.social-container {
1410
flex-direction: row;
1511
flex-wrap: wrap;
1612
}
1713

1814
.social-container__cell {
1915
width: 100%;
2016
position: relative;
21-
}
2217

23-
@container (width > 250px) {
24-
.social-container__cell:nth-child(1) {
25-
width: 50%;
26-
}
27-
.social-container__cell:nth-child(2) {
28-
width: 50%;
29-
}
30-
.social-container__cell:nth-child(3) {
31-
width: 33%;
32-
}
33-
.social-container__cell:nth-child(4) {
34-
width: 34%;
35-
}
36-
.social-container__cell:nth-child(5) {
37-
width: 33%;
18+
@container (width > 250px) {
19+
&:nth-child(1) {
20+
width: 50%;
21+
}
22+
&:nth-child(2) {
23+
width: 50%;
24+
}
25+
&:nth-child(3) {
26+
width: 33%;
27+
}
28+
&:nth-child(4) {
29+
width: 34%;
30+
}
31+
&:nth-child(5) {
32+
width: 33%;
33+
}
34+
&:nth-child(6) {
35+
width: 40%;
36+
}
3837
}
3938
}

‎demo/src/css/components/social-link/social-link.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"selector":".social-link","queries":[{"elements":[{"selector":".social-link","styles":{"border":"calc(0.2chpx + 0.2cwpx) solid #999","borderRadius":"calc(0.3chpx + 0.3cwpx)","fontSize":"85cminpx"}},{"selector":".social-link:hover","styles":{}},{"selector":".social-link__icon","styles":{"marginLeft":""}},{"selector":".social-link__name","styles":{"display":"","marginLeft":"","marginRight":""}}]},{"conditions":[[["aspect-ratio",">",3]]],"elements":[{"selector":".social-link","styles":{"fontSize":"60chpx"}},{"selector":".social-link__icon","styles":{"marginLeft":"20chpx"}},{"selector":".social-link__name","styles":{"display":"block","marginLeft":"5cwpx","marginRight":"20chpx"}}]}]}
1+
{"selector":".social-link","queries":[{"elements":[{"selector":".social-link","styles":{"border":"calc(0.2chpx + 0.2cwpx) solid #999","borderRadius":"calc(0.3chpx + 0.3cwpx)","fontSize":"85cminpx"}},{"selector":".social-link:hover","styles":{}},{"selector":".social-link__icon","styles":{"marginLeft":""}},{"selector":".social-link__name","styles":{"display":"","marginLeft":"","marginRight":""}}]},{"conditions":[[["aspect-ratio",">",3]]],"elements":[{"selector":".social-link","styles":{"fontSize":"60chpx"}}]},{"conditions":[[["aspect-ratio",">",3]]],"elements":[{"selector":".social-link__icon","styles":{"marginLeft":"20chpx"}}]},{"conditions":[[["aspect-ratio",">",3]]],"elements":[{"selector":".social-link__name","styles":{"display":"block","marginLeft":"5cwpx","marginRight":"20chpx"}}]}]}

‎demo/src/css/components/social-link/social-link.pcss‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
.social-link {
22
@define-container;
3-
43
overflow: hidden;
54
background: #ccc;
65
border: calc(0.2chpx + 0.2cwpx) solid #999;
@@ -18,34 +17,31 @@
1817
height: 100%;
1918
transition: background-color .3s, color .3s;
2019

20+
@container (aspect-ratio > 3) {
21+
font-size: 60chpx;
22+
}
23+
2124
&:hover {
2225
background-color: #333;
2326
color: #eee;
2427
}
2528

2629
&__icon {
30+
@container (aspect-ratio > 3) {
31+
margin-left: 20chpx;
32+
}
2733
}
2834

2935
&__name {
3036
display: none;
3137
overflow: hidden;
3238
text-overflow: ellipsis;
3339
font-size: 0.5em;
34-
}
35-
}
36-
37-
@container (aspect-ratio > 3) {
38-
.social-link {
39-
font-size: 60chpx;
40-
}
41-
42-
.social-link__icon {
43-
margin-left: 20chpx;
44-
}
4540

46-
.social-link__name {
47-
display: block;
48-
margin-left: 5cwpx;
49-
margin-right: 20chpx;
41+
@container (aspect-ratio > 3) {
42+
display: block;
43+
margin-left: 5cwpx;
44+
margin-right: 20chpx;
45+
}
5046
}
5147
}

‎demo/src/css/components/user/user.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"selector":".user","queries":[{"elements":[{"selector":".user","styles":{"border":"0.5cmaxpx solid","borderRadius":"3cminpx"}},{"selector":".user__info","styles":{"padding":"1cmaxpx","webkitBoxOrient":"","webkitBoxDirection":"","msFlexDirection":"","flexDirection":""}},{"selector":".user__image","styles":{"height":"30cwpx"}},{"selector":".user__name","styles":{"paddingLeft":"5cwpx","display":""}},{"selector":".user__social","styles":{}},{"selector":".user--1","styles":{}},{"selector":".user--2","styles":{}}]},{"conditions":[[["width",">",200]]],"elements":[{"selector":".user__name","styles":{"display":"block"}}]},{"conditions":[[["width",">",300]]],"elements":[{"selector":".user__info","styles":{"webkitBoxOrient":"horizontal","webkitBoxDirection":"normal","msFlexDirection":"row","flexDirection":"row"}}]}]}
1+
{"selector":".user","queries":[{"elements":[{"selector":".user","styles":{"border":"0.5cmaxpx solid","borderRadius":"3cminpx"}},{"selector":".user__info","styles":{"padding":"1cmaxpx","webkitBoxOrient":"","webkitBoxDirection":"","msFlexDirection":"","flexDirection":""}},{"selector":".user__image","styles":{"height":"30cwpx"}},{"selector":".user__name","styles":{"paddingLeft":"5cwpx","display":""}},{"selector":".user__social","styles":{}},{"selector":".user--1","styles":{}},{"selector":".user--2","styles":{}}]},{"conditions":[[["width",">",300]]],"elements":[{"selector":".user__info","styles":{"webkitBoxOrient":"horizontal","webkitBoxDirection":"normal","msFlexDirection":"row","flexDirection":"row"}}]},{"conditions":[[["width",">",200]]],"elements":[{"selector":".user__name","styles":{"display":"block"}}]}]}

‎demo/src/css/components/user/user.pcss‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
flex-direction: column;
2020
align-items: center;
2121
padding: 1cmaxpx;
22+
23+
@container (width > 300px) {
24+
flex-direction: row;
25+
}
2226
}
2327

2428
&__image {
@@ -31,6 +35,10 @@
3135
flex: 1 0 0;
3236
padding-left: 5cwpx;
3337
display: none;
38+
39+
@container (width > 200px) {
40+
display: block;
41+
}
3442
}
3543

3644
&__social {
@@ -50,15 +58,3 @@
5058
height: 50%;
5159
}
5260
}
53-
54-
@container (width > 200px) {
55-
.user__name {
56-
display: block;
57-
}
58-
}
59-
60-
@container (width > 300px) {
61-
.user__info {
62-
flex-direction: row;
63-
}
64-
}

0 commit comments

Comments
 (0)