Skip to content

Commit 8d9154a

Browse files
daggerokdaggerok
committed
basic-grid
1 parent 9e5434f commit 8d9154a

File tree

7 files changed

+210
-0
lines changed

7 files changed

+210
-0
lines changed

‎.github/workflows/ci.yml

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,40 @@
11
name: CI
22
on: [push]
33
jobs:
4+
basic-grid:
5+
strategy:
6+
matrix:
7+
os: [ubuntu-latest]
8+
nodejs-version: [12]
9+
python-version: [3.8]
10+
runs-on: ${{ matrix.os }}
11+
name: basic-grid (${{ matrix.os }} OS, python ${{ matrix.python-version }}, NodeJS ${{ matrix.nodejs-version }})
12+
steps:
13+
- name: Set up NodeJS ${{ matrix.nodejs-version }}
14+
uses: actions/setup-node@v1
15+
with:
16+
node-version: ${{ matrix.nodejs-version }}
17+
- name: Set up Python ${{ matrix.python-version }}
18+
uses: actions/setup-python@v1
19+
with:
20+
python-version: ${{ matrix.python-version }}
21+
- name: Install / upgrade pip
22+
run: python -m pip install --upgrade pip setuptools
23+
- name: Install HTTPie
24+
run: pip install --upgrade httpie
25+
- name: Install required npm packages globally
26+
run: npm install -g wait-port
27+
- name: Clone git project
28+
uses: actions/checkout@v2
29+
- name: Install, run, wait and test
30+
shell: bash
31+
run: |
32+
cd $GITHUB_WORKSPACE/basic-grid && npm i
33+
cd $GITHUB_WORKSPACE/basic-grid && npm start
34+
cd $GITHUB_WORKSPACE/basic-grid && npm run logs &
35+
wait-port 1234
36+
http get :1234
37+
cd $GITHUB_WORKSPACE/basic-grid && npm stop
438
css-variables:
539
strategy:
640
matrix:

‎basic-grid/package.json

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
{
2+
"name": "basic-grid",
3+
"version": "1.0.0",
4+
"description": "Grid CSS 20200311",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "parcel src/index.html --no-cache",
8+
"prebuild": "rimraf dist",
9+
"build": "parcel build src/index.html --no-cache",
10+
"preserve": "npm run build",
11+
"serve": "browser-sync start --no-notify --single -s ./dist/",
12+
"start": "pm2 start 'npm run dev' --name app",
13+
"restart": "pm2 restart app",
14+
"stop": "pm2 kill",
15+
"logs": "pm2 logs",
16+
"gh": "npm run build -- --public-url /css-examples/",
17+
"postgh": "ncp ./static ./dist --filter '**/*.*'",
18+
"predeploy": "npm run gh",
19+
"deploy": "gh-pages -e ./ -d ./dist -s '{*.*,.*,*,**}' --branch gh-pages --dotfiles=true -m \"Github Pages $(date +%Y-%m-%d) deployment\""
20+
},
21+
"keywords": [
22+
"ncp",
23+
"pm2",
24+
"scss",
25+
"rimraf",
26+
"parcel",
27+
"gh-pages",
28+
"webfontloader",
29+
"css-grid",
30+
"basic-grid",
31+
"auto-fit",
32+
"auto-fill"
33+
],
34+
"author": "Maksim Kostromin <daggerok@gmail.com> (https://github.com/daggerok)",
35+
"license": "MIT",
36+
"devDependencies": {
37+
"@types/node": "13.9.0",
38+
"babel-core": "6.26.3",
39+
"babel-preset-env": "1.7.0",
40+
"gh-pages": "2.2.0",
41+
"ncp": "2.0.0",
42+
"parcel-bundler": "1.12.4",
43+
"pm2": "4.2.3",
44+
"rimraf": "3.0.2",
45+
"sass": "1.26.2",
46+
"webfontloader": "1.6.28"
47+
},
48+
"babel": {
49+
"presets": [
50+
[
51+
"env",
52+
{
53+
"targets": {
54+
"browsers": [
55+
"last 2 versions",
56+
"safari >= 7",
57+
"chrome >= 36",
58+
"firefox >= 28"
59+
]
60+
}
61+
}
62+
]
63+
]
64+
}
65+
}

‎basic-grid/src/app.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import WebFont from 'webfontloader';
2+
3+
WebFont.load({
4+
google: {
5+
families: [
6+
'Roboto',
7+
],
8+
},
9+
});

‎basic-grid/src/base.scss

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
body,
2+
html {
3+
margin: 0;
4+
height: 100vh;
5+
}
6+
7+
body {
8+
font-family: 'Roboto', sans-serif;
9+
background: rgb(19, 19, 10);
10+
color: white;
11+
}
12+
13+
h1 {
14+
padding-left: 1rem;
15+
}
16+
17+
.card {
18+
display: flex;
19+
flex-direction: column;
20+
justify-content: center;
21+
align-items: center;
22+
background: #353535;
23+
color: white;
24+
font-size: 3rem;
25+
box-shadow: rgba(3, 8, 20, 0.1) 0 0.15rem 0.5rem, rgba(2, 8, 20, 0.1) 0 0.075rem 0.175rem;
26+
height: 100%;
27+
width: 100%;
28+
border-radius: 4px;
29+
transition: all 500ms;
30+
overflow: hidden;
31+
32+
background-size: cover;
33+
background-position: center;
34+
background-repeat: no-repeat;
35+
}
36+
37+
.card:hover {
38+
box-shadow: rgba(2, 8, 20, 0.1) 0 0.35em 1.175em, rgba(2, 8, 20, 0.08) 0 0.175em 0.5em;
39+
transform: translateY(-3px) scale(1.1);
40+
}

‎basic-grid/src/index.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="shortcut icon" href="../static/favicon.ico" type="image/x-icon">
8+
<link rel="stylesheet" href="./base.scss">
9+
<link rel="stylesheet" href="./main.scss">
10+
<title>basic-grid</title>
11+
</head>
12+
<body>
13+
<h1>Basic Grid</h1>
14+
<section class="basic-grid">
15+
<div class="card">1</div>
16+
<div class="card">2</div>
17+
<div class="card">3</div>
18+
<div class="card">4</div>
19+
<div class="card">5</div>
20+
<div class="card">6</div>
21+
<div class="card">7</div>
22+
<div class="card">8</div>
23+
<div class="card">9</div>
24+
<div class="card">10</div>
25+
<div class="card">11</div>
26+
<div class="card">12</div>
27+
</section>
28+
29+
<h1>auto-fit</h1>
30+
<section class="basic-grid">
31+
<div class="card">1</div>
32+
<div class="card">2</div>
33+
<div class="card">3</div>
34+
</section>
35+
<h1>auto-fill</h1>
36+
<section class="auto-fill-grid">
37+
<div class="card">1</div>
38+
<div class="card">2</div>
39+
<div class="card">3</div>
40+
</section>
41+
<script src="./app.js"></script>
42+
</body>
43+
</html>

‎basic-grid/src/main.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.basic-grid {
2+
display: grid;
3+
gap: 1rem;
4+
5+
/* 1 but no dry code */
6+
//grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
7+
/* 2 but not responsive */
8+
//grid-template-columns: repeat(12, 1fr);
9+
/* 3 but overflows... */
10+
//grid-template-columns: repeat(12, minmax(16em, 1fr));
11+
/* 4 auto-fit! */
12+
grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
13+
}
14+
15+
.auto-fill-grid {
16+
display: grid;
17+
gap: 1rem;
18+
grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
19+
}

‎basic-grid/static/favicon.ico

1.12 KB
Binary file not shown.

0 commit comments

Comments
 (0)