├── docs ├── js │ └── main.js └── images │ ├── favicon.ico │ ├── hero-1.png │ ├── hero-img.png │ ├── hero-img2.png │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── hero-img-full.png │ ├── mstile-150x150.png │ ├── apple-touch-icon.png │ ├── android-chrome-192x192.png │ ├── android-chrome-384x384.png │ ├── manifest.json │ └── safari-pinned-tab.svg ├── .gitignore ├── dist └── css │ ├── main.css │ ├── main.css.map │ ├── carbon-grid.css │ └── carbon-grid.css.map ├── src └── scss │ ├── partials │ ├── _reset.scss │ └── _variables.scss │ └── carbon-grid.scss ├── .whitesource ├── .stylelintrc.json ├── bower.json ├── README.md ├── package.json ├── gulpfile.js └── index.html /docs/js/main.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /dist/css/main.css: -------------------------------------------------------------------------------- 1 | 2 | /*# sourceMappingURL=main.css.map */ 3 | -------------------------------------------------------------------------------- /docs/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AustinGil/carbon-grid/HEAD/docs/images/favicon.ico -------------------------------------------------------------------------------- /docs/images/hero-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AustinGil/carbon-grid/HEAD/docs/images/hero-1.png -------------------------------------------------------------------------------- /docs/images/hero-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AustinGil/carbon-grid/HEAD/docs/images/hero-img.png -------------------------------------------------------------------------------- /docs/images/hero-img2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AustinGil/carbon-grid/HEAD/docs/images/hero-img2.png -------------------------------------------------------------------------------- /dist/css/main.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":[],"names":[],"mappings":"","file":"main.css","sourcesContent":[]} -------------------------------------------------------------------------------- /docs/images/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AustinGil/carbon-grid/HEAD/docs/images/favicon-16x16.png -------------------------------------------------------------------------------- /docs/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AustinGil/carbon-grid/HEAD/docs/images/favicon-32x32.png -------------------------------------------------------------------------------- /docs/images/hero-img-full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AustinGil/carbon-grid/HEAD/docs/images/hero-img-full.png -------------------------------------------------------------------------------- /docs/images/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AustinGil/carbon-grid/HEAD/docs/images/mstile-150x150.png -------------------------------------------------------------------------------- /docs/images/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AustinGil/carbon-grid/HEAD/docs/images/apple-touch-icon.png -------------------------------------------------------------------------------- /docs/images/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AustinGil/carbon-grid/HEAD/docs/images/android-chrome-192x192.png -------------------------------------------------------------------------------- /docs/images/android-chrome-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AustinGil/carbon-grid/HEAD/docs/images/android-chrome-384x384.png -------------------------------------------------------------------------------- /src/scss/partials/_reset.scss: -------------------------------------------------------------------------------- 1 | // Reset 2 | .container, 3 | .container-fluid { 4 | box-sizing: border-box; 5 | 6 | &::before, 7 | &::after { 8 | box-sizing: border-box; 9 | } 10 | 11 | *, 12 | *::before, 13 | *::after { 14 | box-sizing: border-box; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /.whitesource: -------------------------------------------------------------------------------- 1 | ########################################################## 2 | #### WhiteSource Integration configuration file #### 3 | ########################################################## 4 | 5 | # Configuration # 6 | #---------------# 7 | ws.repo.scan=true 8 | vulnerable.check.run.conclusion.level=failure 9 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "rules": { 4 | "indentation": "tab", 5 | "at-rule-no-unknown": [ 6 | true, 7 | { 8 | "ignoreAtRules": [ 9 | "if", 10 | "else", 11 | "function", 12 | "include", 13 | "mixin", 14 | "return", 15 | "content", 16 | "warn" 17 | ] 18 | } 19 | ], 20 | "no-missing-end-of-source-newline": null 21 | } 22 | } -------------------------------------------------------------------------------- /docs/images/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "icons": [ 4 | { 5 | "src": "/android-chrome-192x192.png", 6 | "sizes": "192x192", 7 | "type": "image/png" 8 | }, 9 | { 10 | "src": "/android-chrome-384x384.png", 11 | "sizes": "384x384", 12 | "type": "image/png" 13 | } 14 | ], 15 | "theme_color": "#ffffff", 16 | "background_color": "#ffffff", 17 | "display": "standalone" 18 | } -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "carbon-grid", 3 | "version": "1.1.2", 4 | "homepage": "https://carbon-grid.netlify.com/", 5 | "authors": [ 6 | "Stegosource " 7 | ], 8 | "description": "A simple, lightweight, responsive CSS grid system built on flexbox.", 9 | "main": "dist/css/carbon-grid.css", 10 | "keywords": [ 11 | "browser", 12 | "flexbox", 13 | "grid", 14 | "css", 15 | "sass", 16 | "mobile-first", 17 | "responsive", 18 | "front-end", 19 | "framework", 20 | "web" 21 | ], 22 | "license": "MIT", 23 | "ignore": [ 24 | "**/.*", 25 | "node_modules", 26 | "bower_components", 27 | "test", 28 | "tests", 29 | "docs" 30 | ] 31 | } -------------------------------------------------------------------------------- /src/scss/partials/_variables.scss: -------------------------------------------------------------------------------- 1 | // Default HTML font size used for rem unit calculations 2 | $remBase: 16px; 3 | 4 | // Functions 5 | @function pxtorem($size) { 6 | $remSize: $size / $remBase; 7 | 8 | @return #{$remSize}rem; 9 | } 10 | 11 | // Variables 12 | $spacing: pxtorem(15px); 13 | $bp-small: pxtorem(576px); 14 | $bp-medium: pxtorem(768px); 15 | $bp-large: pxtorem(992px); 16 | $bp-xlarge: pxtorem(1200px); 17 | 18 | // Mixins 19 | @mixin breakpoint($bp) { 20 | @if $bp == small { 21 | @media (max-width: $bp-small) { @content; } 22 | } 23 | 24 | @else if $bp == medium { 25 | @media (min-width: $bp-medium) { @content; } 26 | } 27 | 28 | @else if $bp == large { 29 | @media (min-width: $bp-large) { @content; } 30 | } 31 | 32 | @else if $bp == xlarge { 33 | @media (min-width: $bp-xlarge) { @content; } 34 | } 35 | 36 | @else { 37 | // @warn "Breakpoint mixin supports: small, medium, large, xlarge"; 38 | @media (min-width: $bp) { @content; } 39 | } 40 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CARBON GRID 2 | **A simple, lightweight, responsive CSS grid system built on flexbox.** 3 | 4 | Carbon Grid was inspired by some of the most popular grid systems, but built to be lightweight and simple to use. In other words, for less than 5kb (unzipped) you get a CSS grid system that can hanlde almost any layout and takes about 5 minutes to learn. 5 | 6 | ### Getting Started 7 | 8 | Intro: Carbon Grid uses flexbox which is awesome and can do a lot, but this system is designed to only address the most common layout issues. If you need very specific flex features it's very easy to expand on the base styles. Flexbox is a relatively new addition to CSS, so make sure you check the browser support before using. It's been tested back to IE 9 and seems to work well. 9 | 10 | **Download:** 11 | [https://raw.githubusercontent.com/AustinGil/carbon-grid/master/dist/css/carbon-grid.css](http://carbon-grid.netlify.com/) 12 | 13 | **NPM:** 14 | ``` 15 | npm install carbon-grid --save 16 | ``` 17 | 18 | **Bower:** 19 | ``` 20 | bower install carbon-grid --save 21 | ``` 22 | 23 | **CDN:** 24 | ``` 25 | 26 | ``` 27 | 28 | ### Documentation 29 | 30 | To learn how to use Carbon Grid, check out the documentation at [http://carbon-grid.netlify.com/](http://carbon-grid.netlify.com/). 31 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "carbon-grid", 3 | "version": "1.1.2", 4 | "homepage": "https://carbon-grid.netlify.com/", 5 | "authors": [ 6 | "Stegosource " 7 | ], 8 | "scripts": { 9 | "dev": "npx gulp", 10 | "lint": "npx gulp lint-css", 11 | "build": "npx gulp build" 12 | }, 13 | "description": "A simple, lightweight, responsive CSS grid system built on flexbox.", 14 | "main": "dist/css/carbon-grid.css", 15 | "keywords": [ 16 | "browser", 17 | "flexbox", 18 | "grid", 19 | "css", 20 | "sass", 21 | "mobile-first", 22 | "responsive", 23 | "front-end", 24 | "framework", 25 | "web" 26 | ], 27 | "license": "MIT", 28 | "repository": { 29 | "type": "git", 30 | "url": "git://github.com/Stegosource/carbon-grid.git" 31 | }, 32 | "devDependencies": { 33 | "browser-sync": "^2.7.12", 34 | "del": "^2.0.2", 35 | "gulp": "^4.0.0", 36 | "gulp-autoprefixer": "^3.1.1", 37 | "gulp-cache": "^0.4.1", 38 | "gulp-concat": "^2.6.1", 39 | "gulp-cssnano": "^2.1.0", 40 | "gulp-if": "^2.0.0", 41 | "gulp-imagemin": "^2.3.0", 42 | "gulp-sass": "^3.0.0", 43 | "gulp-sourcemaps": "^1.5.2", 44 | "gulp-stylelint": "^5.0.0", 45 | "gulp-uglify": "^1.2.0", 46 | "gulp-useref": "^3.0.4", 47 | "run-sequence": "^1.1.2", 48 | "stylelint-config-standard": "^18.0.0" 49 | }, 50 | "files": [ 51 | "src", 52 | "dist" 53 | ] 54 | } -------------------------------------------------------------------------------- /docs/images/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | var sass = require('gulp-sass'); 3 | var autoprefixer = require('gulp-autoprefixer'); 4 | var sourcemaps = require('gulp-sourcemaps'); 5 | var browserSync = require('browser-sync'); 6 | var useref = require('gulp-useref'); 7 | var uglify = require('gulp-uglify'); 8 | var gulpIf = require('gulp-if'); 9 | var cssnano = require('gulp-cssnano'); 10 | var imagemin = require('gulp-imagemin'); 11 | var cache = require('gulp-cache'); 12 | var del = require('del'); 13 | var runSequence = require('run-sequence'); 14 | const gulpStylelint = require('gulp-stylelint'); 15 | 16 | 17 | // Development Tasks 18 | // ----------------- 19 | 20 | // Start browserSync server 21 | gulp.task('browserSync', function () { 22 | browserSync({ 23 | server: { 24 | baseDir: '' 25 | } 26 | }) 27 | }) 28 | 29 | gulp.task('sass', function () { 30 | return gulp.src('src/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs 31 | .pipe(sourcemaps.init()) 32 | .pipe(sass().on('error', sass.logError)) // Passes it through a gulp-sass, log errors to console 33 | .pipe(autoprefixer({ 34 | browsers: ['last 2 versions'], 35 | cascade: false 36 | })) 37 | .pipe(cssnano()) 38 | .pipe(sourcemaps.write('./')) 39 | .pipe(gulp.dest('dist/css')) // Outputs it in the css folder 40 | .pipe(browserSync.reload({ // Reloading with Browser Sync 41 | stream: true 42 | })); 43 | }) 44 | 45 | gulp.task('lint-css', function lintCssTask() { 46 | return gulp.src('src/scss/**/*.scss') 47 | .pipe(gulpStylelint({ 48 | reporters: [ 49 | { formatter: 'string', console: true } 50 | ] 51 | })); 52 | }); 53 | 54 | // Watchers 55 | gulp.task('watch', function () { 56 | gulp.watch('src/scss/**/*.scss', ['lint-css', 'sass']); 57 | gulp.watch('index.html', browserSync.reload); 58 | gulp.watch('src/js/**/*.js', browserSync.reload); 59 | }) 60 | 61 | // Optimization Tasks 62 | // ------------------ 63 | 64 | // Optimizing CSS and JavaScript 65 | gulp.task('useref', function () { 66 | 67 | return gulp.src('src/*.html') 68 | .pipe(useref()) 69 | .pipe(gulpIf('*.js', uglify())) 70 | .pipe(gulpIf('*.css', cssnano())) 71 | .pipe(gulp.dest('dist')); 72 | }); 73 | 74 | // Optimizing Images 75 | gulp.task('images', function () { 76 | return gulp.src('src/images/**/*.+(png|jpg|jpeg|gif|svg)') 77 | // Caching images that ran through imagemin 78 | .pipe(cache(imagemin({ 79 | interlaced: true, 80 | }))) 81 | .pipe(gulp.dest('dist/images')) 82 | }); 83 | 84 | // Copying fonts 85 | gulp.task('fonts', function () { 86 | return gulp.src('src/fonts/**/*') 87 | .pipe(gulp.dest('dist/fonts')) 88 | }) 89 | 90 | // Cleaning 91 | gulp.task('clean', function () { 92 | return del.sync('dist').then(function (cb) { 93 | return cache.clearAll(cb); 94 | }); 95 | }) 96 | 97 | gulp.task('clean:dist', function () { 98 | return del.sync(['dist/**/*', '!dist/images', '!dist/images/**/*']); 99 | }); 100 | 101 | // Build Sequences 102 | // --------------- 103 | 104 | gulp.task('default', function (callback) { 105 | runSequence(['sass', 'browserSync'], 'watch', 106 | callback 107 | ) 108 | }) 109 | 110 | gulp.task('build', function (callback) { 111 | runSequence( 112 | 'clean:dist', 113 | 'sass', 114 | ['useref', 'images', 'fonts'], 115 | callback 116 | ) 117 | }) 118 | -------------------------------------------------------------------------------- /dist/css/carbon-grid.css: -------------------------------------------------------------------------------- 1 | .container,.container *,.container-fluid,.container-fluid *,.container-fluid:after,.container-fluid :after,.container-fluid:before,.container-fluid :before,.container:after,.container :after,.container:before,.container :before{box-sizing:border-box}.container,.container-fluid{margin-left:auto;margin-right:auto;padding-left:.9375rem;padding-right:.9375rem}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-.9375rem;margin-right:-.9375rem}.row.justify-center{-ms-flex-pack:center;justify-content:center}.row.justify-right{-ms-flex-pack:end;justify-content:flex-end}.column{-ms-flex:0 0 100%;flex:0 0 100%;padding-left:.9375rem;padding-right:.9375rem}.container-fluid.fill .column,.container.fill .column{padding-left:0;padding-right:0}.column.xs-20{-ms-flex:0 0 20%;flex:0 0 20%}.column.xs-25{-ms-flex:0 0 25%;flex:0 0 25%}.column.xs-33{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%}.column.xs-40{-ms-flex:0 0 40%;flex:0 0 40%}.column.xs-50{-ms-flex:0 0 50%;flex:0 0 50%}.column.xs-60{-ms-flex:0 0 60%;flex:0 0 60%}.column.xs-67{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%}.column.xs-75{-ms-flex:0 0 75%;flex:0 0 75%}.column.xs-80{-ms-flex:0 0 80%;flex:0 0 80%}.column.xs-100{-ms-flex:0 0 100%;flex:0 0 100%}.column.xs-auto{-ms-flex:auto;flex:auto}@media (max-width:36rem){.row.sm-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.column.sm-20{-ms-flex:0 0 20%;flex:0 0 20%}.column.sm-25{-ms-flex:0 0 25%;flex:0 0 25%}.column.sm-33{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%}.column.sm-40{-ms-flex:0 0 40%;flex:0 0 40%}.column.sm-50{-ms-flex:0 0 50%;flex:0 0 50%}.column.sm-60{-ms-flex:0 0 60%;flex:0 0 60%}.column.sm-67{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%}.column.sm-75{-ms-flex:0 0 75%;flex:0 0 75%}.column.sm-80{-ms-flex:0 0 80%;flex:0 0 80%}.column.sm-100{-ms-flex:0 0 100%;flex:0 0 100%}.column.sm-auto{-ms-flex:auto;flex:auto}}@media (min-width:48rem){.container{width:46.875rem}.row.md-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.column{-ms-flex:1;flex:1}.column.md-20{-ms-flex:0 0 20%;flex:0 0 20%}.column.md-25{-ms-flex:0 0 25%;flex:0 0 25%}.column.md-33{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%}.column.md-40{-ms-flex:0 0 40%;flex:0 0 40%}.column.md-50{-ms-flex:0 0 50%;flex:0 0 50%}.column.md-60{-ms-flex:0 0 60%;flex:0 0 60%}.column.md-67{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%}.column.md-75{-ms-flex:0 0 75%;flex:0 0 75%}.column.md-80{-ms-flex:0 0 80%;flex:0 0 80%}.column.md-100{-ms-flex:0 0 100%;flex:0 0 100%}.column.md-auto{-ms-flex:auto;flex:auto}}@media (min-width:62rem){.container{width:60.625rem}.row.lg-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.column.lg-20{-ms-flex:0 0 20%;flex:0 0 20%}.column.lg-25{-ms-flex:0 0 25%;flex:0 0 25%}.column.lg-33{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%}.column.lg-40{-ms-flex:0 0 40%;flex:0 0 40%}.column.lg-50{-ms-flex:0 0 50%;flex:0 0 50%}.column.lg-60{-ms-flex:0 0 60%;flex:0 0 60%}.column.lg-67{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%}.column.lg-75{-ms-flex:0 0 75%;flex:0 0 75%}.column.lg-80{-ms-flex:0 0 80%;flex:0 0 80%}.column.lg-100{-ms-flex:0 0 100%;flex:0 0 100%}.column.lg-auto{-ms-flex:auto;flex:auto}}@media (min-width:75rem){.container{width:73.125rem}.row.xl-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.column.xl-20{-ms-flex:0 0 20%;flex:0 0 20%}.column.xl-25{-ms-flex:0 0 25%;flex:0 0 25%}.column.xl-33{-ms-flex:0 0 33.33333%;flex:0 0 33.33333%}.column.xl-40{-ms-flex:0 0 40%;flex:0 0 40%}.column.xl-50{-ms-flex:0 0 50%;flex:0 0 50%}.column.xl-60{-ms-flex:0 0 60%;flex:0 0 60%}.column.xl-67{-ms-flex:0 0 66.66667%;flex:0 0 66.66667%}.column.xl-75{-ms-flex:0 0 75%;flex:0 0 75%}.column.xl-80{-ms-flex:0 0 80%;flex:0 0 80%}.column.xl-100{-ms-flex:0 0 100%;flex:0 0 100%}.column.xl-auto{-ms-flex:auto;flex:auto}} 2 | /*# sourceMappingURL=carbon-grid.css.map */ 3 | -------------------------------------------------------------------------------- /src/scss/carbon-grid.scss: -------------------------------------------------------------------------------- 1 | @import 'partials/variables'; 2 | @import 'partials/reset'; 3 | 4 | .container, 5 | .container-fluid { 6 | margin-left: auto; 7 | margin-right: auto; 8 | padding-left: $spacing; 9 | padding-right: $spacing; 10 | } 11 | 12 | .row { 13 | display: flex; 14 | flex-wrap: wrap; 15 | margin-left: -$spacing; 16 | margin-right: -$spacing; 17 | 18 | &.justify-center { 19 | justify-content: center; 20 | } 21 | 22 | &.justify-right { 23 | justify-content: flex-end; 24 | } 25 | } 26 | 27 | .column { 28 | flex: 0 0 100%; 29 | padding-left: $spacing; 30 | padding-right: $spacing; 31 | 32 | .container.fill &, 33 | .container-fluid.fill & { 34 | padding-left: 0; 35 | padding-right: 0; 36 | } 37 | 38 | // Widths 39 | &.xs-20 { 40 | flex: 0 0 20%; 41 | } 42 | 43 | &.xs-25 { 44 | flex: 0 0 25%; 45 | } 46 | 47 | &.xs-33 { 48 | flex: 0 0 1/3*100%; 49 | } 50 | 51 | &.xs-40 { 52 | flex: 0 0 40%; 53 | } 54 | 55 | &.xs-50 { 56 | flex: 0 0 50%; 57 | } 58 | 59 | &.xs-60 { 60 | flex: 0 0 60%; 61 | } 62 | 63 | &.xs-67 { 64 | flex: 0 0 2/3*100%; 65 | } 66 | 67 | &.xs-75 { 68 | flex: 0 0 75%; 69 | } 70 | 71 | &.xs-80 { 72 | flex: 0 0 80%; 73 | } 74 | 75 | &.xs-100 { 76 | flex: 0 0 100%; 77 | } 78 | 79 | &.xs-auto { 80 | flex: auto; 81 | } 82 | // Offsets 83 | // &.xs-offset-25 { 84 | // margin-left: 25%; 85 | // } 86 | // &.xs-offset-33 { 87 | // margin-left: 1/3*100%; 88 | // } 89 | // &.xs-offset-50 { 90 | // margin-left: 50%; 91 | // } 92 | // &.xs-offset-67 { 93 | // margin-left: 2/3*100%; 94 | // } 95 | // &.xs-offset-75 { 96 | // margin-left: 75%; 97 | // } 98 | } 99 | 100 | @include breakpoint(small) { 101 | .row { 102 | &.sm-reverse { 103 | flex-direction: row-reverse; 104 | } 105 | } 106 | 107 | .column { 108 | &.sm-20 { 109 | flex: 0 0 20%; 110 | } 111 | 112 | &.sm-25 { 113 | flex: 0 0 25%; 114 | } 115 | 116 | &.sm-33 { 117 | flex: 0 0 1/3*100%; 118 | } 119 | 120 | &.sm-40 { 121 | flex: 0 0 40%; 122 | } 123 | 124 | &.sm-50 { 125 | flex: 0 0 50%; 126 | } 127 | 128 | &.sm-60 { 129 | flex: 0 0 60%; 130 | } 131 | 132 | &.sm-67 { 133 | flex: 0 0 2/3*100%; 134 | } 135 | 136 | &.sm-75 { 137 | flex: 0 0 75%; 138 | } 139 | 140 | &.sm-80 { 141 | flex: 0 0 80%; 142 | } 143 | 144 | &.sm-100 { 145 | flex: 0 0 100%; 146 | } 147 | 148 | &.sm-auto { 149 | flex: auto; 150 | } 151 | // Offsets 152 | // &.sm-offset-25 { 153 | // margin-left: 25%; 154 | // } 155 | // &.sm-offset-33 { 156 | // margin-left: 1/3*100%; 157 | // } 158 | // &.sm-offset-50 { 159 | // margin-left: 50%; 160 | // } 161 | // &.sm-offset-67 { 162 | // margin-left: 2/3*100%; 163 | // } 164 | // &.sm-offset-75 { 165 | // margin-left: 75%; 166 | // } 167 | } 168 | } 169 | 170 | @include breakpoint(medium) { 171 | .container { 172 | width: pxtorem(750px); 173 | } 174 | 175 | .row { 176 | &.md-reverse { 177 | flex-direction: row-reverse; 178 | } 179 | } 180 | 181 | .column { 182 | flex: 1; 183 | 184 | // Widths 185 | &.md-20 { 186 | flex: 0 0 20%; 187 | } 188 | 189 | &.md-25 { 190 | flex: 0 0 25%; 191 | } 192 | 193 | &.md-33 { 194 | flex: 0 0 1/3*100%; 195 | } 196 | 197 | &.md-40 { 198 | flex: 0 0 40%; 199 | } 200 | 201 | &.md-50 { 202 | flex: 0 0 50%; 203 | } 204 | 205 | &.md-60 { 206 | flex: 0 0 60%; 207 | } 208 | 209 | &.md-67 { 210 | flex: 0 0 2/3*100%; 211 | } 212 | 213 | &.md-75 { 214 | flex: 0 0 75%; 215 | } 216 | 217 | &.md-80 { 218 | flex: 0 0 80%; 219 | } 220 | 221 | &.md-100 { 222 | flex: 0 0 100%; 223 | } 224 | 225 | &.md-auto { 226 | flex: auto; 227 | } 228 | // Offsets 229 | // &.md-offset-25 { 230 | // margin-left: 25%; 231 | // } 232 | // &.md-offset-33 { 233 | // margin-left: 1/3*100%; 234 | // } 235 | // &.md-offset-50 { 236 | // margin-left: 50%; 237 | // } 238 | // &.md-offset-67 { 239 | // margin-left: 2/3*100%; 240 | // } 241 | // &.md-offset-75 { 242 | // margin-left: 75%; 243 | // } 244 | } 245 | } 246 | 247 | @include breakpoint(large) { 248 | .container { 249 | width: pxtorem(970px); 250 | } 251 | 252 | .row { 253 | &.lg-reverse { 254 | flex-direction: row-reverse; 255 | } 256 | } 257 | 258 | .column { 259 | // Widths 260 | &.lg-20 { 261 | flex: 0 0 20%; 262 | } 263 | 264 | &.lg-25 { 265 | flex: 0 0 25%; 266 | } 267 | 268 | &.lg-33 { 269 | flex: 0 0 1/3*100%; 270 | } 271 | 272 | &.lg-40 { 273 | flex: 0 0 40%; 274 | } 275 | 276 | &.lg-50 { 277 | flex: 0 0 50%; 278 | } 279 | 280 | &.lg-60 { 281 | flex: 0 0 60%; 282 | } 283 | 284 | &.lg-67 { 285 | flex: 0 0 2/3*100%; 286 | } 287 | 288 | &.lg-75 { 289 | flex: 0 0 75%; 290 | } 291 | 292 | &.lg-80 { 293 | flex: 0 0 80%; 294 | } 295 | 296 | &.lg-100 { 297 | flex: 0 0 100%; 298 | } 299 | 300 | &.lg-auto { 301 | flex: auto; 302 | } 303 | // Offsets 304 | // &.lg-offset-25 { 305 | // margin-left: 25%; 306 | // } 307 | // &.lg-offset-33 { 308 | // margin-left: 1/3*100%; 309 | // } 310 | // &.lg-offset-50 { 311 | // margin-left: 50%; 312 | // } 313 | // &.lg-offset-67 { 314 | // margin-left: 2/3*100%; 315 | // } 316 | // &.lg-offset-75 { 317 | // margin-left: 75%; 318 | // } 319 | } 320 | } 321 | 322 | @include breakpoint(xlarge) { 323 | .container { 324 | width: pxtorem(1170px); 325 | } 326 | 327 | .row { 328 | &.xl-reverse { 329 | flex-direction: row-reverse; 330 | } 331 | } 332 | 333 | .column { 334 | // Widths 335 | &.xl-20 { 336 | flex: 0 0 20%; 337 | } 338 | 339 | &.xl-25 { 340 | flex: 0 0 25%; 341 | } 342 | 343 | &.xl-33 { 344 | flex: 0 0 1/3*100%; 345 | } 346 | 347 | &.xl-40 { 348 | flex: 0 0 40%; 349 | } 350 | 351 | &.xl-50 { 352 | flex: 0 0 50%; 353 | } 354 | 355 | &.xl-60 { 356 | flex: 0 0 60%; 357 | } 358 | 359 | &.xl-67 { 360 | flex: 0 0 2/3*100%; 361 | } 362 | 363 | &.xl-75 { 364 | flex: 0 0 75%; 365 | } 366 | 367 | &.xl-80 { 368 | flex: 0 0 80%; 369 | } 370 | 371 | &.xl-100 { 372 | flex: 0 0 100%; 373 | } 374 | 375 | &.xl-auto { 376 | flex: auto; 377 | } 378 | // Offsets 379 | // &.xl-offset-25 { 380 | // margin-left: 25%; 381 | // } 382 | // &.xl-offset-33 { 383 | // margin-left: 1/3*100%; 384 | // } 385 | // &.xl-offset-50 { 386 | // margin-left: 50%; 387 | // } 388 | // &.xl-offset-67 { 389 | // margin-left: 2/3*100%; 390 | // } 391 | // &.xl-offset-75 { 392 | // margin-left: 75%; 393 | // } 394 | } 395 | } 396 | -------------------------------------------------------------------------------- /dist/css/carbon-grid.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["partials/_reset.scss","carbon-grid.scss","partials/_variables.scss"],"names":[],"mappings":"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","file":"carbon-grid.css","sourcesContent":["// Reset\n.container,\n.container-fluid {\n\tbox-sizing: border-box;\n\n\t&::before,\n\t&::after {\n\t\tbox-sizing: border-box;\n\t}\n\n\t*,\n\t*::before,\n\t*::after {\n\t\tbox-sizing: border-box;\n\t}\n}\n","@import 'partials/variables';\n@import 'partials/reset';\n\n.container,\n.container-fluid {\n\tmargin-left: auto;\n\tmargin-right: auto;\n\tpadding-left: $spacing;\n\tpadding-right: $spacing;\n}\n\n.row {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tmargin-left: -$spacing;\n\tmargin-right: -$spacing;\n\n\t&.justify-center {\n\t\tjustify-content: center;\n\t}\n\n\t&.justify-right {\n\t\tjustify-content: flex-end;\n\t}\n}\n\n.column {\n\tflex: 0 0 100%;\n\tpadding-left: $spacing;\n\tpadding-right: $spacing;\n\n\t.container.fill &,\n\t.container-fluid.fill & {\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t}\n\n\t// Widths\n\t&.xs-20 {\n\t\tflex: 0 0 20%;\n\t}\n\n\t&.xs-25 {\n\t\tflex: 0 0 25%;\n\t}\n\n\t&.xs-33 {\n\t\tflex: 0 0 1/3*100%;\n\t}\n\n\t&.xs-40 {\n\t\tflex: 0 0 40%;\n\t}\n\n\t&.xs-50 {\n\t\tflex: 0 0 50%;\n\t}\n\n\t&.xs-60 {\n\t\tflex: 0 0 60%;\n\t}\n\n\t&.xs-67 {\n\t\tflex: 0 0 2/3*100%;\n\t}\n\n\t&.xs-75 {\n\t\tflex: 0 0 75%;\n\t}\n\n\t&.xs-80 {\n\t\tflex: 0 0 80%;\n\t}\n\n\t&.xs-100 {\n\t\tflex: 0 0 100%;\n\t}\n\n\t&.xs-auto {\n\t\tflex: auto;\n\t}\n\t// Offsets\n\t// &.xs-offset-25 {\n\t// margin-left: 25%;\n\t// }\n\t// &.xs-offset-33 {\n\t// margin-left: 1/3*100%;\n\t// }\n\t// &.xs-offset-50 {\n\t// margin-left: 50%;\n\t// }\n\t// &.xs-offset-67 {\n\t// margin-left: 2/3*100%;\n\t// }\n\t// &.xs-offset-75 {\n\t// margin-left: 75%;\n\t// }\n}\n\n@include breakpoint(small) {\n\t.row {\n\t\t&.sm-reverse {\n\t\t\tflex-direction: row-reverse;\n\t\t}\n\t}\n\n\t.column {\n\t\t&.sm-20 {\n\t\t\tflex: 0 0 20%;\n\t\t}\n\n\t\t&.sm-25 {\n\t\t\tflex: 0 0 25%;\n\t\t}\n\n\t\t&.sm-33 {\n\t\t\tflex: 0 0 1/3*100%;\n\t\t}\n\n\t\t&.sm-40 {\n\t\t\tflex: 0 0 40%;\n\t\t}\n\n\t\t&.sm-50 {\n\t\t\tflex: 0 0 50%;\n\t\t}\n\n\t\t&.sm-60 {\n\t\t\tflex: 0 0 60%;\n\t\t}\n\n\t\t&.sm-67 {\n\t\t\tflex: 0 0 2/3*100%;\n\t\t}\n\n\t\t&.sm-75 {\n\t\t\tflex: 0 0 75%;\n\t\t}\n\n\t\t&.sm-80 {\n\t\t\tflex: 0 0 80%;\n\t\t}\n\n\t\t&.sm-100 {\n\t\t\tflex: 0 0 100%;\n\t\t}\n\n\t\t&.sm-auto {\n\t\t\tflex: auto;\n\t\t}\n\t\t// Offsets\n\t\t// &.sm-offset-25 {\n\t\t// margin-left: 25%;\n\t\t// }\n\t\t// &.sm-offset-33 {\n\t\t// margin-left: 1/3*100%;\n\t\t// }\n\t\t// &.sm-offset-50 {\n\t\t// margin-left: 50%;\n\t\t// }\n\t\t// &.sm-offset-67 {\n\t\t// margin-left: 2/3*100%;\n\t\t// }\n\t\t// &.sm-offset-75 {\n\t\t// margin-left: 75%;\n\t\t// }\n\t}\n}\n\n@include breakpoint(medium) {\n\t.container {\n\t\twidth: pxtorem(750px);\n\t}\n\n\t.row {\n\t\t&.md-reverse {\n\t\t\tflex-direction: row-reverse;\n\t\t}\n\t}\n\n\t.column {\n\t\tflex: 1;\n\n\t\t// Widths\n\t\t&.md-20 {\n\t\t\tflex: 0 0 20%;\n\t\t}\n\n\t\t&.md-25 {\n\t\t\tflex: 0 0 25%;\n\t\t}\n\n\t\t&.md-33 {\n\t\t\tflex: 0 0 1/3*100%;\n\t\t}\n\n\t\t&.md-40 {\n\t\t\tflex: 0 0 40%;\n\t\t}\n\n\t\t&.md-50 {\n\t\t\tflex: 0 0 50%;\n\t\t}\n\n\t\t&.md-60 {\n\t\t\tflex: 0 0 60%;\n\t\t}\n\n\t\t&.md-67 {\n\t\t\tflex: 0 0 2/3*100%;\n\t\t}\n\n\t\t&.md-75 {\n\t\t\tflex: 0 0 75%;\n\t\t}\n\n\t\t&.md-80 {\n\t\t\tflex: 0 0 80%;\n\t\t}\n\n\t\t&.md-100 {\n\t\t\tflex: 0 0 100%;\n\t\t}\n\n\t\t&.md-auto {\n\t\t\tflex: auto;\n\t\t}\n\t\t// Offsets\n\t\t// &.md-offset-25 {\n\t\t// margin-left: 25%;\n\t\t// }\n\t\t// &.md-offset-33 {\n\t\t// margin-left: 1/3*100%;\n\t\t// }\n\t\t// &.md-offset-50 {\n\t\t// margin-left: 50%;\n\t\t// }\n\t\t// &.md-offset-67 {\n\t\t// margin-left: 2/3*100%;\n\t\t// }\n\t\t// &.md-offset-75 {\n\t\t// margin-left: 75%;\n\t\t// }\n\t}\n}\n\n@include breakpoint(large) {\n\t.container {\n\t\twidth: pxtorem(970px);\n\t}\n\n\t.row {\n\t\t&.lg-reverse {\n\t\t\tflex-direction: row-reverse;\n\t\t}\n\t}\n\n\t.column {\n\t\t// Widths\n\t\t&.lg-20 {\n\t\t\tflex: 0 0 20%;\n\t\t}\n\n\t\t&.lg-25 {\n\t\t\tflex: 0 0 25%;\n\t\t}\n\n\t\t&.lg-33 {\n\t\t\tflex: 0 0 1/3*100%;\n\t\t}\n\n\t\t&.lg-40 {\n\t\t\tflex: 0 0 40%;\n\t\t}\n\n\t\t&.lg-50 {\n\t\t\tflex: 0 0 50%;\n\t\t}\n\n\t\t&.lg-60 {\n\t\t\tflex: 0 0 60%;\n\t\t}\n\n\t\t&.lg-67 {\n\t\t\tflex: 0 0 2/3*100%;\n\t\t}\n\n\t\t&.lg-75 {\n\t\t\tflex: 0 0 75%;\n\t\t}\n\n\t\t&.lg-80 {\n\t\t\tflex: 0 0 80%;\n\t\t}\n\n\t\t&.lg-100 {\n\t\t\tflex: 0 0 100%;\n\t\t}\n\n\t\t&.lg-auto {\n\t\t\tflex: auto;\n\t\t}\n\t\t// Offsets\n\t\t// &.lg-offset-25 {\n\t\t// margin-left: 25%;\n\t\t// }\n\t\t// &.lg-offset-33 {\n\t\t// margin-left: 1/3*100%;\n\t\t// }\n\t\t// &.lg-offset-50 {\n\t\t// margin-left: 50%;\n\t\t// }\n\t\t// &.lg-offset-67 {\n\t\t// margin-left: 2/3*100%;\n\t\t// }\n\t\t// &.lg-offset-75 {\n\t\t// margin-left: 75%;\n\t\t// }\n\t}\n}\n\n@include breakpoint(xlarge) {\n\t.container {\n\t\twidth: pxtorem(1170px);\n\t}\n\n\t.row {\n\t\t&.xl-reverse {\n\t\t\tflex-direction: row-reverse;\n\t\t}\n\t}\n\n\t.column {\n\t\t// Widths\n\t\t&.xl-20 {\n\t\t\tflex: 0 0 20%;\n\t\t}\n\n\t\t&.xl-25 {\n\t\t\tflex: 0 0 25%;\n\t\t}\n\n\t\t&.xl-33 {\n\t\t\tflex: 0 0 1/3*100%;\n\t\t}\n\n\t\t&.xl-40 {\n\t\t\tflex: 0 0 40%;\n\t\t}\n\n\t\t&.xl-50 {\n\t\t\tflex: 0 0 50%;\n\t\t}\n\n\t\t&.xl-60 {\n\t\t\tflex: 0 0 60%;\n\t\t}\n\n\t\t&.xl-67 {\n\t\t\tflex: 0 0 2/3*100%;\n\t\t}\n\n\t\t&.xl-75 {\n\t\t\tflex: 0 0 75%;\n\t\t}\n\n\t\t&.xl-80 {\n\t\t\tflex: 0 0 80%;\n\t\t}\n\n\t\t&.xl-100 {\n\t\t\tflex: 0 0 100%;\n\t\t}\n\n\t\t&.xl-auto {\n\t\t\tflex: auto;\n\t\t}\n\t\t// Offsets\n\t\t// &.xl-offset-25 {\n\t\t// margin-left: 25%;\n\t\t// }\n\t\t// &.xl-offset-33 {\n\t\t// margin-left: 1/3*100%;\n\t\t// }\n\t\t// &.xl-offset-50 {\n\t\t// margin-left: 50%;\n\t\t// }\n\t\t// &.xl-offset-67 {\n\t\t// margin-left: 2/3*100%;\n\t\t// }\n\t\t// &.xl-offset-75 {\n\t\t// margin-left: 75%;\n\t\t// }\n\t}\n}\n","// Default HTML font size used for rem unit calculations\n$remBase: 16px;\n\n// Functions\n@function pxtorem($size) {\n\t$remSize: $size / $remBase;\n\n\t@return #{$remSize}rem;\n}\n\n// Variables\n$spacing: pxtorem(15px);\n$bp-small: pxtorem(576px);\n$bp-medium: pxtorem(768px);\n$bp-large: pxtorem(992px);\n$bp-xlarge: pxtorem(1200px);\n\n// Mixins\n@mixin breakpoint($bp) {\n\t@if $bp == small {\n\t\t@media (max-width: $bp-small) { @content; }\n\t}\n\n\t@else if $bp == medium {\n\t\t@media (min-width: $bp-medium) { @content; }\n\t}\n\n\t@else if $bp == large {\n\t\t@media (min-width: $bp-large) { @content; }\n\t}\n\n\t@else if $bp == xlarge {\n\t\t@media (min-width: $bp-xlarge) { @content; }\n\t}\n\n\t@else {\n\t\t// @warn \"Breakpoint mixin supports: small, medium, large, xlarge\";\n\t\t@media (min-width: $bp) { @content; }\n\t}\n}"]} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 140 | 141 | 142 | 143 | 146 |
147 | 148 |

Carbon Grid

149 |

A simple, lightweight, responsive CSS grid system built on flexbox.

150 |

Carbon Grid was inspired by some of the most popular grid systems, but built to be lightweight and simple to use. 151 | In other words, for less than 5kb (unzipped) you get a CSS grid system that can handle almost 152 | any layout and takes about 5 minutes to learn.

153 |
154 |
155 |

View on GitHub

156 |
157 |
158 |
159 |
160 |
161 |

Getting Started

162 |

Intro: Carbon Grid uses flexbox which is awesome and can do a lot, but this system is designed 163 | to only address the most common layout issues. If you need very specific flex features it's very easy to 164 | expand on the base styles. Flexbox is a relatively new addition to CSS, so make sure you check the browser support before using. It's been tested back to IE 9 and seems to work 166 | well. 167 |

168 |

Download:

169 |

https://raw.githubusercontent.com/Stegosource/carbon-grid/master/dist/css/carbon-grid.css

170 |

NPM:

171 | 
npm install carbon-grid --save
172 |

Bower:

173 | 
bower install carbon-grid --save
174 |

CDN:

175 | 
<link rel="stylesheet" href="https://unpkg.com/carbon-grid/dist/css/carbon-grid.css">
176 |
177 |
178 |
179 |
180 |

Containers

181 |

Wraps content to a consistent width. It's not necessary to use the container, but your wrapper should have padding 182 | left and right of 15px.

183 | 

184 | <div class="container">
185 |     <span class="example-content"></span>
186 | </div>
187 |
188 |
189 |
190 |

Example:

191 |
192 |
193 |
194 |

Full Width Containers

195 |

Wraps content to for full width of sections.

196 | 
197 |                     
198 | <div class="container-fluid">
199 |     <span class="example-content"></span>
200 | </div>
201 |
202 |

Example:

203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |

Responsive Flexible Grid

211 |

Rows and columns create responsive flexbox grids. Because it is built on flexbox (which is awesome), column widths 212 | adjust automatically.

213 | 
214 |                     
215 | <div class="container">
216 |     <div class="row">
217 |         <div class="column">
218 |             <span class="example-content"></span>
219 |         </div>
220 |         <div class="column">
221 |             <span class="example-content"></span>
222 |         </div>
223 |         <div class="column">
224 |             <span class="example-content"></span>
225 |         </div>
226 |     </div>
227 | </div>
228 |
229 |

Example:

230 |
231 |
232 |
233 |
234 |
235 |
236 |
237 |
238 |
239 |
240 |
241 |

Example (2 columns):

242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |

Example (4 columns):

251 |
252 |
253 |
254 |
255 |
256 |
257 |
258 |
259 |
260 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |

Explicit Responsive Column Widths

270 |

Set explicit widths for more control over column width at various breakpoints.

271 |

Naming conventions are as follows: {breakpoint}-{width}

272 |
273 |
274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 | 285 | 286 | 287 | 288 | 289 | 290 | 291 | 292 | 293 | 294 | 295 | 296 | 297 | 298 | 299 | 300 | 301 | 302 | 303 | 304 | 305 |
NameWidthin pixels
xs0 - 36rem0 - 576px
sm> 36rem> 576px
md> 48rem> 768px
lg> 62rem> 992px
xl> 75rem> 1200px
306 |
307 |
308 |

Supported Widths:

309 |
    310 |
  • 20%
    • 311 |
  • 25%
    • 312 |
  • 33%
    • 313 |
  • 40%
    • 314 |
  • 50%
    • 315 |
  • 60%
    • 316 |
  • 67%
    • 317 |
  • 75%
    • 318 |
  • 80%
    • 319 |
  • 100%
    • 320 |
321 |
322 |
323 | 
324 |                     
325 | <div class="container">
326 |     <div class="row">
327 |         <div class="column sm-50 lg-25">
328 |             <span class="example-content"></span>
329 |         </div>
330 |         <div class="column sm-50 lg-25">
331 |             <span class="example-content"></span>
332 |         </div>
333 |         <div class="column sm-50 lg-25">
334 |             <span class="example-content"></span>
335 |         </div>
336 |         <div class="column sm-50 lg-25">
337 |             <span class="example-content"></span>
338 |         </div>
339 |     </div>
340 | </div>
341 |
342 |

Example: Grid with 4 columns on large screens, 2 columns on middle screens, and 1 on smallest

343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 |
351 |
352 |
353 |
354 |
355 |
356 |
357 | 398 |
399 |
400 | 414 |
415 |
416 |

Container Fill

417 |

Remove spacing around containers and columns.

418 | 
419 |                     
420 | <div class="container fill">
421 |     <div class="row">
422 |         <div class="column">
423 |             <span class="example-content"></span>
424 |         </div>
425 |         <div class="column">
426 |             <span class="example-content alt-color"></span>
427 |         </div>
428 |     </div>
429 | </div>
430 |
431 |

Example (container):

432 |
433 |
434 |
435 |
436 |
437 |
438 |
439 |
440 |
441 |
442 |
443 |
444 |

Example (container-fluid):

445 |
446 |
447 |
448 |
449 |
450 |
451 |
452 |
453 |
454 |
455 |
456 |
457 |
458 |
459 |

Row Reverse

460 |

Reverse the order of columns in a row. Supports breakpoints.

461 | 
462 |                     
463 | <div class="container">
464 |     <div class="row sm-reverse">
465 |         <div class="column">
466 |             <span class="example-content"></span>
467 |         </div>
468 |         <div class="column">
469 |             <span class="example-content alt-color"></span>
470 |         </div>
471 |     </div>
472 |     <div class="row">
473 |         <div class="column">
474 |             <span class="example-content"></span>
475 |         </div>
476 |         <div class="column">
477 |             <span class="example-content alt-color"></span>
478 |         </div>
479 |     </div>
480 | </div>
481 |
482 |

Example: On smallest screens alt-color is second, but the order is reversed on the first row 483 | after the first breakpoint.

484 |
485 |
486 |
487 |
488 |
489 |
490 |
491 |
492 |
493 |
494 |
495 |
496 |
497 |
498 |
499 |
500 |
501 |
502 |
503 |
504 |

Justify Content

505 |

By default, the row justifies content to the left. But it's possible to center content or justify to the right.

506 | 
507 |                     
508 | <div class="container">
509 |     <div class="row justify-center">
510 |         <div class="column sm-50">
511 |             <span class="example-content"></span>
512 |         </div>
513 |     </div>
514 |     <div class="row justify-right">
515 |         <div class="column sm-50">
516 |             <span class="example-content"></span>
517 |         </div>
518 |     </div>
519 | </div>
520 |
521 |

Example:

522 |
523 |
524 |
525 |
526 |
527 |
528 |
529 |
530 |
531 |
532 |
533 |
534 | 535 |
536 |
537 |

</> with ❤️️ by Austin Gil

538 |
539 |
540 | 541 | 542 | 543 | 544 | 547 | 548 | 549 | 560 | 561 | 562 | 563 | 564 | --------------------------------------------------------------------------------