Skip to content

Commit

Permalink
Add prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@PowerKiKi
PowerKiKi committed Apr 26, 2024
1 parent 13b4c89 commit 9545b4b
Show file tree
Hide file tree
Showing 8 changed files with 93 additions and 63 deletions.
10 changes: 10 additions & 0 deletions .github/workflows/main.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,13 @@ jobs:
cache: 'yarn'
- run: yarn --frozen-lockfile
- run: yarn build

prettier:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
cache: 'yarn'
- run: yarn --frozen-lockfile
- run: ./node_modules/.bin/prettier --check .
3 changes: 3 additions & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/dist/
/docs/*.css
/docs/*.map
17 changes: 17 additions & 0 deletions .prettierrc.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
{
"$schema": "http://json.schemastore.org/prettierrc",
"tabWidth": 4,
"singleQuote": true,
"trailingComma": "all",
"printWidth": 120,
"arrowParens": "avoid",
"bracketSpacing": false,
"overrides": [
{
"files": ["*.md"],
"options": {
"tabWidth": 2
}
}
]
}
13 changes: 7 additions & 6 deletions docs/docs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ html {
font-family: Roboto, 'Helvetica Neue', sans-serif;
}

h1, h2, h3 {
h1,
h2,
h3 {
margin-top: 1.5em;
margin-bottom: 0.5em;
}
Expand All @@ -20,7 +22,7 @@ p {
}

.comment {
color: rgba(0, 0, 0, 0.5)
color: rgba(0, 0, 0, 0.5);
}

pre,
Expand Down Expand Up @@ -50,7 +52,6 @@ pre,
}
}


#current-breakpoint {
position: fixed;
top: 20px;
Expand All @@ -62,15 +63,14 @@ pre,
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
padding: 20px;
border-radius: 10px;
text-align: center
text-align: center;
}
}

#inner-width {
background: rgb(63, 63, 63) !important;
}


.docs-xs {
color: white !important;
border: none !important;
Expand Down Expand Up @@ -119,7 +119,8 @@ a:hover {
color: red;
}

ul, li {
ul,
li {
list-style: none;
margin: 0;
padding: 0;
Expand Down
95 changes: 49 additions & 46 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<title>@ecodev/natural-layout</title>
<link rel="stylesheet" href="natural-layout.css">
<link rel="stylesheet" href="docs.css">
<link rel="stylesheet" href="natural-layout.css" />
<link rel="stylesheet" href="docs.css" />
</head>
<body>

<script type="module">
const element = document.getElementById('inner-width');
function update() {
element.innerText = window.visualViewport.width.toFixed(3) +' px';
element.innerText = window.visualViewport.width.toFixed(3) + ' px';
}

window.onresize = update
window.onresize = update;
update();
</script>

Expand All @@ -34,15 +33,16 @@ <h1>@ecodev/natural-layout</h1>
<li><a href="#section-start">Start</a></li>
<li><a href="#section-scss">SCSS media query usage</a></li>
<li>
<li><strong>Unresponsive classes</strong>
<strong>Unresponsive classes</strong>
<ul>
<li><a href="#section-padding">Padding</a></li>
<li><a href="#section-margin">Margin</a></li>
<li><a href="#section-alignments">Alignments</a></li>
<li><a href="#section-center">Center</a></li>
</ul>
</li>
<li><strong>Responsive classes</strong>
<li>
<strong>Responsive classes</strong>
<ul>
<li><a href="#section-hide">Show/Hide</a></li>
<li><a href="#section-gap">Gap</a></li>
Expand All @@ -61,13 +61,10 @@ <h1 id="section-start">Getting started</h1>

<strong>Examples : </strong>
<p>Greater than medium (included) change layout to horizontal</p>
<pre>
class="nat-vertical nat-md-horizontal" </pre>
<pre>class="nat-vertical nat-md-horizontal" </pre>

<p>Greater than medium (included) increase gap</p>
<pre>
class="nat-gap nat-md-gap-50" </pre>

<pre>class="nat-gap nat-md-gap-50" </pre>

<h1 id="section-scss">SCSS usage : media query</h1>

Expand All @@ -77,7 +74,8 @@ <h1 id="section-scss">SCSS usage : media query</h1>
md: 960px,
lg: 1280px,
xl: 1920px,
)</pre>
)</pre
>

<pre class="media-scss-test">
@use '@ecodev/natural-layout' as nat;
Expand All @@ -102,14 +100,13 @@ <h1 id="section-scss">SCSS usage : media query</h1>
<h1>Unresponsive html markup</h1>

<h2 id="section-padding">nat-padding</h2>
<p>Padding on all sides / top and down / left and right : </p>
<p>Padding on all sides / top and down / left and right :</p>
<div class="test docs-no-padding">
<div class="nat-padding">nat-padding</div>
<div class="nat-padding-vertical">nat-padding-vertical</div>
<div class="nat-padding-horizontal">nat-padding-horizontal</div>
</div>


<h2 id="section-margin">nat-margin</h2>
<p>Margin on all sides / top and bottom / left and right :</p>
<div class="test docs-no-margin">
Expand All @@ -122,111 +119,118 @@ <h2 id="section-alignments">Alignments</h2>
<p>Alignments <strong>nat-bottom, nat-top, nat-left, nat-right</strong> can be combined.</p>
<p>Align bottom right</p>
<span class="docs-class">nat-horizontal nat-bottom nat-right</span>
<div class="test nat-horizontal nat-bottom nat-right" style="height:100px">
<div class="test nat-horizontal nat-bottom nat-right" style="height: 100px">
<div>xxx</div>
<div>xxx
<br/>
<div>
xxx
<br />
xxx
</div>
<div>xxx</div>
</div>

<p>Distribute uses space-around</p>
<span class="docs-class">nat-distribute</span>
<div class="test nat-horizontal nat-distribute" style="height:100px;">
<div class="test nat-horizontal nat-distribute" style="height: 100px">
<div>xxx</div>
<div>xxxxxxx
<br/>
<div>
xxxxxxx
<br />
xxxxxxx
</div>
<div>xxx</div>
</div>

<h2 id="section-center">nat-center</h2>
<p><strong>nat-center</strong> is magic. If used alone it centers both axis. If used with another axis, centers on the complementary axis.</p>
<p>
<strong>nat-center</strong> is magic. If used alone it centers both axis. If used with another axis, centers
on the complementary axis.
</p>

<p>Horizontal center</p>
<span class="docs-class">nat-horizontal nat-center</span>
<div class="test nat-horizontal nat-center" style="height:100px;">
<div class="test nat-horizontal nat-center" style="height: 100px">
<div>xxx</div>
<div>xxxxxxx
<br/>
<div>
xxxxxxx
<br />
xxxxxxx
</div>
<div>xxx</div>
</div>

<p>Vertical center</p>
<span class="docs-class">nat-vertical nat-center</span>
<div class="test nat-vertical nat-center" style="height:150px;">
<div class="test nat-vertical nat-center" style="height: 150px">
<div>xxx</div>
<div>xxxxxxx
<br/>
<div>
xxxxxxx
<br />
xxxxxxx
</div>
<div>xxx</div>
</div>

<p>Grid center :</p>
<span class="docs-class">nat-center</span>
<div class="test nat-center" style="height:150px;">
<div class="test nat-center" style="height: 150px">
<div>xxx</div>
<div>xxxxxxx
<br/>
<div>
xxxxxxx
<br />
xxxxxxx
</div>
<div>xxx</div>
</div>

<p>Horizontal top centered</p>
<span class="docs-class">nat-horizontal nat-center nat-top</span>
<div class="test nat-horizontal nat-center nat-top" style="height:100px;">
<div class="test nat-horizontal nat-center nat-top" style="height: 100px">
<div>xxx</div>
<div>
xxxxxxx
<br/>
<br />
xxxxxxx
</div>
<div>xxx</div>
</div>

<p>Horizontal right centered</p>
<span class="docs-class">nat-horizontal nat-center nat-right</span>
<div class="test nat-horizontal nat-center nat-right" style="height:100px;">
<div class="test nat-horizontal nat-center nat-right" style="height: 100px">
<div>xxx</div>
<div>
xxxxxxx
<br/>
<br />
xxxxxxx
</div>
<div>xxx</div>
</div>

<p>Vertical top centered</p>
<span class="docs-class">nat-vertical nat-center nat-top</span>
<div class="test nat-vertical nat-center nat-top" style="height:200px;">
<div class="test nat-vertical nat-center nat-top" style="height: 200px">
<div>xxx</div>
<div>
xxxxxxx
<br/>
<br />
xxxxxxx
</div>
<div>xxx</div>
</div>

<p>Vertical right centered</p>
<span class="docs-class">nat-vertical nat-center nat-right</span>
<div class="test nat-vertical nat-center nat-right" style="height:200px;">
<div class="test nat-vertical nat-center nat-right" style="height: 200px">
<div>xxx</div>
<div>
xxxxxxx
<br/>
<br />
xxxxxxx
</div>
<div>xxx</div>
</div>


<h1>Responsive HTML markup</h1>
<h2 id="section-hide">nat-hide</h2>
<p>Usage : <span class="docs-class">nat-hide / nat-sm-hide / nat-show / nat-sm-show</span></p>
Expand Down Expand Up @@ -274,7 +278,7 @@ <h2 id="section-gap">nat-gap</h2>
<p>Must be combined with nat-horizontal or nat-vertical.</p>
<p>Sizes : <strong>1, 5, 10, 15, 20, 30, 50</strong></p>
<p>Example where gap increases with screen size :</p>
<span class="docs-class">nat-gap-1 nat-gap-1 nat-sm-gap-20 nat-md-gap-50</span>
<span class="docs-class">nat-gap-1 nat-gap-1 nat-sm-gap-20 nat-md-gap-50</span>
<div class="test nat-horizontal nat-gap-1 nat-sm-gap-20 nat-md-gap-50">
<div>xxx</div>
<div>xxx</div>
Expand Down Expand Up @@ -320,7 +324,7 @@ <h2 id="section-vertical">nat-vertical</h2>

<p>Align bottom right</p>
<span class="docs-class">nat-vertical nat-bottom nat-right</span>
<div class="test nat-vertical nat-bottom nat-right" style="height:200px">
<div class="test nat-vertical nat-bottom nat-right" style="height: 200px">
<div>xxx</div>
<div>xxx</div>
<div>xxx</div>
Expand All @@ -342,11 +346,10 @@ <h2 id="section-expand">expand</h2>
<div>xxx</div>
</div>

<p>Proportions change when greater than medium (included) : </p>
<p>Proportions change when greater than medium (included) :</p>
<div class="test nat-horizontal nat-gap">
<div class="nat-expand-33 nat-md-expand-66">nat-expand-33 nat-md-expand-66</div>
<div class="nat-expand-66 nat-md-expand-33">nat-expand-66 nat-md-expand-33</div>
</div>

</body>
</html>
7 changes: 3 additions & 4 deletions src/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,13 @@
Get from starting size/breakpoint to ending $size/breakpoint (excluding it).
*/
@mixin media($start: null, $end: null) {

$query: "";
$query: '';
@if $start != null {
$query: $query + " and (min-width: #{get-size($start)})";
$query: $query + ' and (min-width: #{get-size($start)})';
}

@if $end != null {
$query: $query + " and (max-width: #{get-size($end) - 0.2} )";
$query: $query + ' and (max-width: #{get-size($end) - 0.2} )';
}

@media screen #{$query} {
Expand Down
3 changes: 0 additions & 3 deletions src/_orientation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@
justify-content: center;
}


@mixin nat-center() {
display: grid;
place-content: center center;
Expand Down Expand Up @@ -74,7 +73,6 @@
}
}


@mixin nat-expand() {
flex: 1;

Expand All @@ -99,7 +97,6 @@
}
}


.nat-vertical {
@include nat-vertical();

Expand Down
Loading

0 comments on commit 9545b4b

Please sign in to comment.