ChuckCSS v3.0.0 - Make big changes - update normalize and change gris selectors

Author: ALPIXELMaiki

Gulpfile.js

@@ -38,32 +38,6 @@ gulp.task('chuckcss_less', function() {
 });
 
 
-/*
-    * BOOTSTRAP OVERRIDE
-*/
-gulp.task('chuckcss_minify_bootstrap', function() {
-    gulp.src('chuckcss/bootstrap/bootstrap-override.less')
-        .pipe(less())
-        .pipe(cssnano({
-            'postcss-minify-font-values': true
-        }))
-        .pipe(autoprefixer({
-            browsers:"> 1%, last 2 versions, Safari >= 8"
-        }))
-        .pipe(rename({basename: 'bootstrap-override', suffix: '.min'}))
-        .pipe(gulp.dest('dist/'));
-});
-gulp.task('chuckcss_bootstrap', function() {
-    gulp.src('chuckcss/bootstrap/bootstrap-override')
-        .pipe(less())
-        .pipe(autoprefixer({
-            browsers:"> 1%, last 2 versions, Safari >= 8"
-        }))
-        .pipe(rename({basename: 'bootstrap-override'}))
-        .pipe(gulp.dest('dist/'));
-});
-
-
 /*
     * PRINT FILE
 */
@@ -83,13 +57,10 @@ gulp.task('chuckcss_print', function() {
 gulp.task('watch', function() {
     gulp.watch('chuckcss/**/*.less', ['chuckcss_minify_less', 'chuckcss_less']);
     gulp.watch('chuckcss/print.less', ['chuckcss_print']);
-    gulp.watch('chuckcss/bootstrap/**/*.less', ['chuckcss_bootstrap', 'chuckcss_minify_bootstrap']);
 });
 
 gulp.task('default', [
   'chuckcss_less',
   'chuckcss_minify_less',
-  'chuckcss_print',
-  'chuckcss_bootstrap',
-  'chuckcss_minify_bootstrap'
+  'chuckcss_print'
 ]);

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "chuckcss",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "description": "Responsive CSS framework based on Flexbox grids compiled with LESS and Autoprefixer",
   "authors": {
     "name": "Mickael SURREL <ALPIXEL>",

chuckcss/bootstrap/alerts.less

@@ -11,7 +11,7 @@
 */
 
 span.badge {
-    ._inline;
+    display:inline-block;
     position:relative;
     top:-1px;
     background-color:@gray-da;
@@ -24,6 +24,11 @@ span.badge {
     min-width:20px;
     vertical-align:baseline;
 
+    div &,
+    p & {
+        margin:0 5px;
+    }
+
     i {
         &:before {
             ._reset;

chuckcss/bootstrap/badges.less

@@ -15,51 +15,52 @@
 .columns {
     display:flex;
     flex-wrap:wrap;
-    flex-direction:row;
     margin:0 -@cols-gutter/2;
 
     &.cc {
         &-no-multiligne {flex-wrap:nowrap}
         &-reverse{flex-direction:row-reverse}
         &-justify {
-            &-starting      {justify-content:flex-start}
-            &-ending        {justify-content:flex-end}
-            &-centering     {justify-content:center}
-            &-spacing       {justify-content:space-between}
-            &-equal-spacing {justify-content:space-around}
+            &-start         {justify-content:flex-start}
+            &-end           {justify-content:flex-end}
+            &-center        {justify-content:center}
+            &-space-between {justify-content:space-between}
+            &-space-around  {justify-content:space-around}
+        }
+        &-align {
+            &-start         {align-items:flex-start}
+            &-end           {align-items:flex-end}
+            &-center        {align-items:center}
+            &-baseline      {align-items:baseline}
+            &-stretch       {align-items:stretch}
         }
         &-no-gutter {
             margin:0;
-            .column {
+            & > * {
                 margin:@cols-ma-top 0 @cols-ma-bottom;
             }
         }
         &-gutter {
-            .column {
+            & > * {
                 margin:@cols-ma-top @cols-gutter/2 @cols-ma-bottom;
             }
         }
-        &-animated {
-            .column {
-                ._transition;
-            }
-        }
         &-masonry {
             display:block;
             margin:0;
             column-gap: @cols-masonry-gap;
 
-            &.cc-no-gutter .column,
-            .column {
-                ._inline;
+            &.cc-no-gutter > *,
+            & > * {
+                display:inline-block;
                 width:100%;
                 max-width:100%;
                 flex:none;
                 margin:@cols-masonry-gap/2 0;
             }
         }
         &-spaceless {
-            &>.column {
+            & > * {
                 margin-top:0;
                 margin-bottom:0;
             }
@@ -68,15 +69,14 @@
 
 
 
-    .column {
+    & > * {
         ._reset;
         padding:@cols-pa;
         margin:@cols-ma-top @cols-gutter/2 @cols-ma-bottom;
         flex:1 1 0%;
 
         /* Nested columns */
         &.columns {
-            flex :1;
             padding:@cols-gutter @cols-gutter/2;
 
             &.cc-no-gutter {
@@ -112,6 +112,7 @@
                     &-bottom {align-self:flex-end}
                     &-center {align-self:center}
                     &-stretch {align-self:stretch}
+                    &-baseline {align-self:baseline}
                 }
             }
             &-w-auto {
@@ -123,8 +124,8 @@
 
     /* TABLET rules */
     ._tablet({
-        &.cc-gutter .column.cc,
-        .column.cc {
+        &.cc-gutter > *.cc,
+        & > *.cc {
             &-offset-0-t,
             &-no-offset-t {
                 margin-left: @cols-gutter/2;
@@ -139,8 +140,8 @@
             }
         }
 
-        &.cc-no-gutter .column.cc-offset-0-t,
-        &.cc-no-gutter .column.cc-no-offset-t {
+        &.cc-no-gutter > *.cc-offset-0-t,
+        &.cc-no-gutter > *.cc-no-offset-t {
             margin-left:0;
         }
     });
@@ -149,8 +150,8 @@
     /* PHONE rules */
     ._phone({
 
-        &.cc-gutter .column.cc,
-        .column.cc {
+        &.cc-gutter > *.cc,
+        & > *.cc {
             &-offset-0-s,
             &-no-offset-s {
                 margin-left: @cols-gutter/2;
@@ -165,8 +166,8 @@
             }
         }
 
-        &.cc-no-gutter .column.cc-offset-0-s,
-        &.cc-no-gutter .column.cc-no-offset-s {
+        &.cc-no-gutter > *.cc-offset-0-s,
+        &.cc-no-gutter > *.cc-no-offset-s {
             margin-left:0;
         }
     });

chuckcss/bootstrap/blockquotes.less

@@ -16,7 +16,7 @@
 .message {
     padding: 0.5em 1em;
     border: 1px solid transparent;
-    border-left-width:7px;
+    border-left-width:15px;
     margin:1.5em 0;
     position:relative;