Skip to content
This repository has been archived by the owner on Nov 2, 2019. It is now read-only.

Commit

Permalink
Add responsive position module
Browse files Browse the repository at this point in the history
  • Loading branch information
jxnblk committed Jul 11, 2016
1 parent 527ec2d commit fa03d34
Show file tree
Hide file tree
Showing 8 changed files with 99 additions and 0 deletions.
2 changes: 2 additions & 0 deletions modules/responsive-position/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@

css
Empty file.
21 changes: 21 additions & 0 deletions modules/responsive-position/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
# Basscss Responsive Position

Responsive position utilities module for Basscss - http://basscss.com

## Prefix Naming Convention
These styles follow the same breakpoint prefix convention as other Basscss modules.

<div class="overflow-scroll">
<table class="mb2 table-light overflow-hidden border rounded">
<thead class="bg-darken-1">
<tr> <th>Prefix</th> <th>Description</th> </tr>
</thead>
<tbody>
<tr> <td>(no prefix)</td> <td>Not scoped to a breakpoint</td> </tr>
<tr> <td>sm-</td> <td>--breakpoint-sm (default: min-width 40em)</td> </tr>
<tr> <td>md-</td> <td>--breakpoint-md (default: min-width 52em)</td> </tr>
<tr> <td>lg-</td> <td>--breakpoint-lg (default: min-width 64em)</td> </tr>
</tbody>
</table>
</div>

10 changes: 10 additions & 0 deletions modules/responsive-position/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/* Basscss Responsive Position */

@import "./lib/sm-position";
@import "./lib/md-position";
@import "./lib/lg-position";

@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);

11 changes: 11 additions & 0 deletions modules/responsive-position/lib/lg-position.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@

@media (--breakpoint-lg) {
.lg-relative { position: relative }
.lg-absolute { position: absolute }
.lg-fixed { position: fixed }

.lg-top-0 { top: 0 }
.lg-right-0 { right: 0 }
.lg-bottom-0 { bottom: 0 }
.lg-left-0 { left: 0 }
}
11 changes: 11 additions & 0 deletions modules/responsive-position/lib/md-position.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@

@media (--breakpoint-md) {
.md-relative { position: relative }
.md-absolute { position: absolute }
.md-fixed { position: fixed }

.md-top-0 { top: 0 }
.md-right-0 { right: 0 }
.md-bottom-0 { bottom: 0 }
.md-left-0 { left: 0 }
}
11 changes: 11 additions & 0 deletions modules/responsive-position/lib/sm-position.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@

@media (--breakpoint-sm) {
.sm-relative { position: relative }
.sm-absolute { position: absolute }
.sm-fixed { position: fixed }

.sm-top-0 { top: 0 }
.sm-right-0 { right: 0 }
.sm-bottom-0 { bottom: 0 }
.sm-left-0 { left: 0 }
}
33 changes: 33 additions & 0 deletions modules/responsive-position/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{
"name": "basscss-responsive-position",
"version": "1.0.0",
"description": "Responsive position utilities module for Basscss",
"scripts": {
"prepublish": "mkdir -p css && postcss index.css -u postcss-import -u postcss-custom-media -u postcss-custom-properties -u autoprefixer -o css/responsive-position.css"
},
"devDependencies": {
"autoprefixer": "^6.3.1",
"postcss-cli": "^2.5.0",
"postcss-custom-media": "^5.0.1",
"postcss-custom-properties": "^5.0.0",
"postcss-import": "^8.0.2"
},
"repository": {
"type": "git",
"url": "https://github.com/basscss/addons.git"
},
"keywords": [
"css",
"oocss",
"fcss",
"functional-css",
"atomic",
"basscss"
],
"author": "Brent Jackson",
"license": "MIT",
"bugs": {
"url": "https://github.com/basscss/addons/issues"
},
"homepage": "https://github.com/basscss/addons"
}

0 comments on commit fa03d34

Please sign in to comment.