Skip to content

Commit

Permalink
Merge pull request #72 from fractures/improve/grid-flex-cleanup
Browse files Browse the repository at this point in the history 
Improve/grid flex cleanup
  • Loading branch information
Krisztian Puska committed Jan 13, 2018
2 parents b7f5a43 + 8e089b6 commit da43c65
Show file tree
Hide file tree
Showing 6 changed files with 61 additions and 98 deletions.
56 changes: 0 additions & 56 deletions .eslintrc
View file

This file was deleted.

46 changes: 21 additions & 25 deletions gulpfile.js
View file
@@ -1,32 +1,32 @@
const gulp = require("gulp")
const gzip = require("gulp-gzip")
const nano = require("gulp-cssnano")
const postcss = require("gulp-postcss")
const postcssimport = require("postcss-import")
const postcsscssnext = require("postcss-cssnext")
const nano = require("gulp-cssnano")
const postcssimport = require("postcss-import")
const rename = require("gulp-rename")
const gzip = require("gulp-gzip")
const size = require("gulp-size")
const stylelint = require("gulp-stylelint")

let files = ["./src/fractures.css"]
let postcssVanilla = [postcssimport(), postcsscssnext({ browsers: [""] })]
let postcssAutoprefix = [postcssimport(), postcsscssnext({ browsers: ["last 2 versions"] })]
const files = ["./src/fractures.css"]
const postcssVanilla = [postcssimport(), postcsscssnext({ browsers: [""] })]
const postcssAutoprefix = [postcssimport(), postcsscssnext({ browsers: ["last 2 versions"] })]

// Build
gulp.task("build", ["default", "build: vanilla", "build: autoprefixed"])

// Build only fractures.css
gulp.task("default", () => {
return gulp
gulp.task("default", () =>
gulp
.src(files)
.pipe(postcss(postcssVanilla))
.pipe(gulp.dest("./dist"))
.pipe(size({ showFiles: true }))
})
)

// Build without autoprefixing
gulp.task("build: vanilla", () => {
return gulp
gulp.task("build: vanilla", () =>
gulp
.src(files)
.pipe(postcss(postcssVanilla))
.pipe(nano())
Expand All @@ -37,11 +37,11 @@ gulp.task("build: vanilla", () => {
.pipe(rename("fractures.min.css.gz"))
.pipe(gulp.dest("./dist"))
.pipe(size({ showFiles: true, gzip: true }))
})
)

// Build autoprefixed version
gulp.task("build: autoprefixed", () => {
return gulp
gulp.task("build: autoprefixed", () =>
gulp
.src(files)
.pipe(postcss(postcssAutoprefix))
.pipe(nano())
Expand All @@ -52,21 +52,17 @@ gulp.task("build: autoprefixed", () => {
.pipe(rename("fractures.prefixed.min.css.gz"))
.pipe(gulp.dest("./dist"))
.pipe(size({ showFiles: true, gzip: true }))
})
)

// Lint
gulp.task("lint", ["default"], () => {
return gulp.src("./dist/fractures.css").pipe(
stylelint({
reporters: [{ formatter: "string", console: true }]
})
)
})
gulp.task("lint", ["default"], () =>
gulp
.src("./dist/fractures.css")
.pipe(stylelint({ reporters: [{ formatter: "string", console: true }] }))
)

// Report csslint after a build
gulp.task("test", ["lint"])

// Watch for css changes
gulp.task("watch", () => {
return gulp.watch("./src/*.css", ["default"])
})
gulp.task("watch", () => gulp.watch("./src/*.css", ["default"]))
2 changes: 1 addition & 1 deletion package.json
View file
@@ -1,6 +1,6 @@
{
"name": "fractures",
"version": "1.0.4",
"version": "1.1.0",
"author": "Krisztian Puska",
"description": "Atomic CSS toolkit.",
"scripts": {
Expand Down
44 changes: 31 additions & 13 deletions src/flex.css
View file
Expand Up @@ -21,19 +21,37 @@
.flex-end { align-items: flex-end; }
.flex-start { align-items: flex-start; }

.flex-gap-1:not(.flex-column) > *:not(:last-child) { margin-right: var(--box-1); }
.flex-gap-2:not(.flex-column) > *:not(:last-child) { margin-right: var(--box-2); }
.flex-gap-3:not(.flex-column) > *:not(:last-child) { margin-right: var(--box-3); }
.flex-gap-4:not(.flex-column) > *:not(:last-child) { margin-right: var(--box-4); }
.flex-gap-5:not(.flex-column) > *:not(:last-child) { margin-right: var(--box-5); }
.flex-gap-6:not(.flex-column) > *:not(:last-child) { margin-right: var(--box-6); }

.flex-gap-1.flex-column > *:not(:last-child) { margin-bottom: var(--box-1); }
.flex-gap-2.flex-column > *:not(:last-child) { margin-bottom: var(--box-2); }
.flex-gap-3.flex-column > *:not(:last-child) { margin-bottom: var(--box-3); }
.flex-gap-4.flex-column > *:not(:last-child) { margin-bottom: var(--box-4); }
.flex-gap-5.flex-column > *:not(:last-child) { margin-bottom: var(--box-5); }
.flex-gap-6.flex-column > *:not(:last-child) { margin-bottom: var(--box-6); }
/* Normal row gap */
.flex-gap-1:not(.flex-column):not(.flex-reverse) > *:not(:last-child) { margin-right: var(--box-1); }
.flex-gap-2:not(.flex-column):not(.flex-reverse) > *:not(:last-child) { margin-right: var(--box-2); }
.flex-gap-3:not(.flex-column):not(.flex-reverse) > *:not(:last-child) { margin-right: var(--box-3); }
.flex-gap-4:not(.flex-column):not(.flex-reverse) > *:not(:last-child) { margin-right: var(--box-4); }
.flex-gap-5:not(.flex-column):not(.flex-reverse) > *:not(:last-child) { margin-right: var(--box-5); }
.flex-gap-6:not(.flex-column):not(.flex-reverse) > *:not(:last-child) { margin-right: var(--box-6); }

/* Reversed row gap */
.flex-gap-1.flex-reverse:not(.flex-column) > *:not(:last-child) { margin-left: var(--box-1); }
.flex-gap-2.flex-reverse:not(.flex-column) > *:not(:last-child) { margin-left: var(--box-2); }
.flex-gap-3.flex-reverse:not(.flex-column) > *:not(:last-child) { margin-left: var(--box-3); }
.flex-gap-4.flex-reverse:not(.flex-column) > *:not(:last-child) { margin-left: var(--box-4); }
.flex-gap-5.flex-reverse:not(.flex-column) > *:not(:last-child) { margin-left: var(--box-5); }
.flex-gap-6.flex-reverse:not(.flex-column) > *:not(:last-child) { margin-left: var(--box-6); }

/* Normal column gap */
.flex-gap-1.flex-column:not(.flex-reverse) > *:not(:last-child) { margin-bottom: var(--box-1); }
.flex-gap-2.flex-column:not(.flex-reverse) > *:not(:last-child) { margin-bottom: var(--box-2); }
.flex-gap-3.flex-column:not(.flex-reverse) > *:not(:last-child) { margin-bottom: var(--box-3); }
.flex-gap-4.flex-column:not(.flex-reverse) > *:not(:last-child) { margin-bottom: var(--box-4); }
.flex-gap-5.flex-column:not(.flex-reverse) > *:not(:last-child) { margin-bottom: var(--box-5); }
.flex-gap-6.flex-column:not(.flex-reverse) > *:not(:last-child) { margin-bottom: var(--box-6); }

/* Reversed column gap */
.flex-gap-1.flex-column.flex-reverse > *:not(:first-child) { margin-bottom: var(--box-1); }
.flex-gap-2.flex-column.flex-reverse > *:not(:first-child) { margin-bottom: var(--box-2); }
.flex-gap-3.flex-column.flex-reverse > *:not(:first-child) { margin-bottom: var(--box-3); }
.flex-gap-4.flex-column.flex-reverse > *:not(:first-child) { margin-bottom: var(--box-4); }
.flex-gap-5.flex-column.flex-reverse > *:not(:first-child) { margin-bottom: var(--box-5); }
.flex-gap-6.flex-column.flex-reverse > *:not(:first-child) { margin-bottom: var(--box-6); }

.grow-1,
.grow-2,
Expand Down
8 changes: 5 additions & 3 deletions src/list.css
View file
@@ -1,10 +1,12 @@
.list-circle > li { list-style-type: circle; }
.list-decimal > li { list-style-type: decimal; }
.list-decimal-leading-zero > li { list-style-type: decimal-leading-zero; }
.list-disc > li { list-style-type: disc; }
.list-square > li { list-style-type: square; }
.list-none > li { list-style-type: none; }

.list-greek > li { list-style-type: lower-greek; }
.list-lower-latin > li { list-style-type: lower-latin; }
.list-lower-roman > li { list-style-type: lower-roman; }
.list-none > li { list-style-type: none; }
.list-square > li { list-style-type: square; }
.list-upper-latin > li { list-style-type: upper-latin; }
.list-upper-roman > li { list-style-type: upper-roman; }

Expand Down
3 changes: 3 additions & 0 deletions src/type.css
View file
Expand Up @@ -12,6 +12,9 @@ p,
h6 { font-size: 1em; }
small { font-size: .75em; }

sub { vertical-align: sub; }
sup { vertical-align: super; }

.ellipsis {
overflow: hidden;
max-width: 100%;
Expand Down

0 comments on commit da43c65

Please sign in to comment.