Skip to content
This repository was archived by the owner on Nov 10, 2022. It is now read-only.

Commit

Permalink
Make big changes and upgrade to v2.0.0
Browse files Browse the repository at this point in the history
@ALPIXELMaiki
ALPIXELMaiki committed Sep 5, 2016
1 parent b2b9ec4 commit 1a92a8f
Showing 17 changed files with 219 additions and 545 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "chuckcss",
"version": "1.0.3",
"version": "2.0.0",
"description": "Responsive CSS framework based on Flexbox grids compiled with LESS and Autoprefixer",
"authors": {
"name": "Mickael SURREL <ALPIXEL>",
4 changes: 2 additions & 2 deletions chuckcss/components/alerts.less
View file
Original file line number Diff line number Diff line change
@@ -19,7 +19,7 @@
border: 1px solid transparent;
margin:1.5em 0;
position:relative;
._border-radius(unit(@alert-br,px));
border-radius:unit(@alert-br,px);

/* Links inside a .alert element */
a {
@@ -42,7 +42,7 @@
padding:1em;
height:100%;
background-color:transparent;
._opacity(1);
opacity:1;

i {
._reset;
14 changes: 7 additions & 7 deletions chuckcss/components/grids.less
View file
Original file line number Diff line number Diff line change
@@ -13,8 +13,8 @@
._phone({._generatePhoneColumns;}); // Launch _generatePhoneColumns

.columns {
._flex-display;
._flex-wrap(wrap);
display:flex;
flex-wrap:wrap;
margin:0 -@cols-gutter/2;

&.cc {
@@ -37,7 +37,7 @@
._reset;
padding:@cols-pa;
margin:@cols-ma-top @cols-gutter/2 @cols-ma-bottom;
._flex(1);
flex:1 1 0%;

/* Nested columns */
&.columns {
@@ -60,11 +60,11 @@
}

&-first-t {
._flex-order(-2);
order:-2;
}

&-last-t {
._flex-order(2);
order:2;
}
}

@@ -86,11 +86,11 @@
}

&-first-s {
._flex-order(-3);
order:-3;
}

&-last-s {
._flex-order(3);
order:3;
}
}

28 changes: 14 additions & 14 deletions chuckcss/components/modals.less
View file
Original file line number Diff line number Diff line change
@@ -33,25 +33,25 @@ body.opened-modal {

/* Modal wrapper */
.modal {
._flex-display;
._flex-justify(center);
._flex-align-items(center);
._box-shadow('none');
display:flex;
justify-content:center;
align-items:center;
box-shadow:none;
z-index:-1;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
._opacity(0);
opacity:0;

/* Shown modal */
&.active {
._opacity(1);
opacity:1;
z-index:99;

.modal-content {
._opacity(1);
opacity:1;
._scale(1);
}

@@ -100,7 +100,7 @@ body.opened-modal {
left:50%;
z-index:98;
background:none;
._border-radius(100%);
border-radius:100%;
line-height:inherit;
background-color:transparent;
width:40px;
@@ -116,7 +116,7 @@ body.opened-modal {
height:3px;
background-color:white;

._border-radius(4px);
border-radius:4px;
position:absolute;
top:19px;
left:10px;
@@ -141,8 +141,8 @@ body.opened-modal {
overflow-x:hidden;
background-color:white;
z-index:99;
._border-radius(4px);
._opacity(0);
border-radius:4px;
opacity:0;
._transition;
._scale(0.5);

@@ -181,13 +181,13 @@ body.opened-modal {
&[data-fixed-hf] {
.modal-content {
overflow:hidden;
._flex-display;
._flex-direction(column);
display:flex;
flex-direction:column;
}
.modal-footer,
.modal-header,
.wrap-modal-body {
._flex(1 0 auto);
flex:1 0 auto;
}
.wrap-modal-body {
overflow-y: auto;
4 changes: 2 additions & 2 deletions chuckcss/core/animations.less
View file
Original file line number Diff line number Diff line change
@@ -30,6 +30,6 @@
@description : animate standart loader dots
***** */
@keyframes loaderDots {
0%, 39%, 100% { ._opacity(0); }
40% { ._opacity(1); }
0%, 39%, 100% { opacity:0; }
40% { opacity:1; }
}
4 changes: 2 additions & 2 deletions chuckcss/core/base.less
View file
Original file line number Diff line number Diff line change
@@ -15,13 +15,13 @@ body {
line-height: @text-lh;
color: @text-mc;
overflow-x: hidden;
._box-sizing(border-box);
box-sizing:border-box;

/* Box-sizing */
*,
*:before,
*:after {
._box-sizing(border-box);
box-sizing:border-box;
}

// Affix - Override Bootstrap CSS
110 changes: 0 additions & 110 deletions chuckcss/core/flexbox.less
View file

This file was deleted.

298 changes: 93 additions & 205 deletions chuckcss/core/functions.less
View file

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions chuckcss/core/generator.less
View file
Original file line number Diff line number Diff line change
@@ -138,7 +138,7 @@
&.cc {
/* Width calculations without gutters */
&-@{iterator} {
._flex(0 0 auto);
flex:0 0 auto;
width: ~'calc(100% * @{iterator} / @{cols-total} - 0.05px)'; // Substract 0.05px for IE compatibilities
max-width: ~'calc(100% * @{iterator} / @{cols-total} - 0.05px)'; // Substract 0.05px for IE compatibilities
}
@@ -156,7 +156,7 @@
&.cc {
/* Width calculations with gutters */
&-@{iterator} {
._flex(0 0 auto);
flex:0 0 auto;
width: ~'calc(100% * @{iterator} / @{cols-total} - @{cols-gutter} - 0.05px)'; // Substract 0.05px for IE compatibilities
max-width: ~'calc(100% * @{iterator} / @{cols-total} - @{cols-gutter} - 0.05px)'; // Substract 0.05px for IE compatibilities
}
@@ -186,7 +186,7 @@
&.cc{
/* Width calculations without gutters */
&-@{iterator}-t {
._flex(0 0 auto);
flex:0 0 auto;
width: ~'calc(100% * @{iterator} / @{cols-total})';
max-width: ~'calc(100% * @{iterator} / @{cols-total})';
}
@@ -205,7 +205,7 @@
&.cc {
/* Width calculations with gutters */
&-@{iterator}-t {
._flex(0 0 auto);
flex:0 0 auto;
width: ~'calc(100% * @{iterator} / @{cols-total} - @{cols-gutter})';
max-width: ~'calc(100% * @{iterator} / @{cols-total} - @{cols-gutter})';
}
@@ -236,7 +236,7 @@
&.cc {
/* Width calculations without gutters */
&-@{iterator}-s {
._flex(0 0 auto);
flex:0 0 auto;
width: ~'calc(100% * @{iterator} / @{cols-total})';
max-width: ~'calc(100% * @{iterator} / @{cols-total})';
}
@@ -254,7 +254,7 @@
&.cc {
/* Width calculations with gutters */
&-@{iterator}-s {
._flex(0 0 auto);
flex:0 0 auto;
width: ~'calc(100% * @{iterator} / @{cols-total} - @{cols-gutter})';
max-width: ~'calc(100% * @{iterator} / @{cols-total} - @{cols-gutter})';
}
53 changes: 53 additions & 0 deletions chuckcss/core/responsive.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/*
== RESPONSIVE / MEDIA QUERIES ==
*/

/* *****
@name : ._tablet, ._phone and others media queries
@description : A way for responsive integration. Apply rules for media queries tablet, phone, ...
@params : @rules (CSS rules)
@exemple :
el {
background-color:white; // Default : Apply a white bg-color to the <el>
._tablet({
background-color:black; // Apply a black bg-color to the <el> on max-width:@tablet-mw screens <= @tablet-mw defined in settings.less
}); // don't forget the ;
._phone({
background-color:red; // Apply a red bg-color to the <el> on max-width:@phone-mw screens <= @phone-mw defined in settings.less
}); // don't forget the ;
}
***** */
// For screens <= 767px
._phone(@rules) {
@media screen and (max-width: @phone-mw) {
@rules();
}
}
// For screens <= 1200px
._tablet(@rules) {
@media screen and (max-width: @tablet-mw) {
@rules();
}
}
// For screens >= 768px
._tabletUp(@rules) {
@media screen and (min-width: (@phone-mw+1)) {
@rules();
}
}
// For screens >= 1201px
._desktop(@rules) {
@media screen and (min-width: (@tablet-mw+1)) {
@rules();
}
}
// For IE only
._ie(@rules) {
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@rules();
}
}
6 changes: 3 additions & 3 deletions chuckcss/elements/buttons.less
View file
Original file line number Diff line number Diff line change
@@ -36,7 +36,7 @@ button {
text-align:center;
font-size: @links-fs;
vertical-align:middle;
._border-radius(unit(@links-btn-br,px));
border-radius:unit(@links-btn-br,px);
._btn(white, white);
._transition;

@@ -55,7 +55,7 @@ button {
&.cc {
/* disabled */
&-disabled {
._opacity(0.5);
opacity:0.5;
cursor:not-allowed; /* old browser */
pointer-events:none;
}
@@ -83,7 +83,7 @@ button {
border-right-color: lighten(@gray-li,50%);
border-bottom-color: lighten(@gray-li,50%);
border-left-color: lighten(@gray-li,50%);
._border-radius(50%);
border-radius:100%;
content: " ";
width: 16px;
height: 16px;
26 changes: 13 additions & 13 deletions chuckcss/elements/forms.less
View file
Original file line number Diff line number Diff line change
@@ -58,10 +58,10 @@ form {
label {
cursor:not-allowed; /* old browser */
pointer-events:none;
._opacity(0.5);
opacity:0.5;

input {
._opacity(0.8);
opacity:0.8;
}
}
}
@@ -146,14 +146,14 @@ form {
*/
&-radio {
input {
._border-radius(100%);
border-radius:100%;


&:before {
display:block;
width:6px;
height:6px;
._border-radius(100%);
border-radius:100%;
background-color:transparent;
}

@@ -196,8 +196,8 @@ form {
textarea,
input {
._inline;
._box-shadow('inset 0px 1px 2px 0px rgba(0,0,0,0.1)');
._border-radius(unit(@input-br,px));
box-shadow:inset 0px 1px 2px 0px rgba(0,0,0,0.1);
border-radius:unit(@input-br,px);
vertical-align: middle;
background-color:@input-bg;
padding:0 1em;
@@ -219,7 +219,7 @@ form {

/* Error inputs */
&.error {
._box-shadow('none');
box-shadow:none;
background-color:lighten(@red,50%);
border-color:lighten(@red,40%);
color:@red-da;
@@ -245,14 +245,14 @@ form {
&[disabled] {
cursor:not-allowed; /* old browser */
pointer-events:none;
._opacity(0.5);
opacity:0.5;
}

/* Reset type file input */
&[type="file"] {
._reset;
height:inherit;
._box-shadow('none');
box-shadow:none;
}

/* Placeholder color */
@@ -283,8 +283,8 @@ form {
border:1px solid @input-bc;
vertical-align: middle;
font-size:@input-fs;
._box-shadow('inset 0px 1px 2px 0px rgba(0,0,0,0.1)');
._border-radius(unit(@input-br,px));
box-shadow:inset 0px 1px 2px 0px rgba(0,0,0,0.1);
border-radius:unit(@input-br,px);
._transition;

/* Hack IE8 & < */
@@ -310,8 +310,8 @@ form {
vertical-align: middle;
._transition;
._uppercase;
._box-shadow('none');
._border-radius(unit(@input-br,px));
box-shadow:none;
border-radius:unit(@input-br,px);
._btn(@submit-bg);

&[class*="fa-"],
2 changes: 1 addition & 1 deletion chuckcss/elements/loader.less
View file
Original file line number Diff line number Diff line change
@@ -53,7 +53,7 @@
width: 15%;
height: 15%;
background-color: @dots-bg;
._border-radius(100%);
border-radius:100%;
animation: ~"loaderDots @{loader-speed}s infinite ease-in-out both";
}
}
2 changes: 1 addition & 1 deletion chuckcss/front.less
View file
Original file line number Diff line number Diff line change
@@ -23,7 +23,7 @@
*/
@import "core/normalize";
@import "core/functions";
@import "core/flexbox";
@import "core/responsive";
@import "core/animations";
@import "core/base"; // <==== <html> & <body>
@import "core/helpers";
195 changes: 19 additions & 176 deletions dist/chuckcss.css
View file
Original file line number Diff line number Diff line change
@@ -552,19 +552,14 @@ textarea {
*/
/*
** Functions/mixins list **
._tablet, ._phone, etc...
._border-radius
._box-shadow
._bg-vertical | ._bg-horizontal
._opacity
._clearfix
._displayTable
._inline
._inside
._transition
._transform
._rotate | ._scale | ._translate3d | ._skew
._box-sizing
._filter (grayscale, blur, sepia, etc..) | all CSS3 "filter" properties
._placeHold
._reset
@@ -575,47 +570,6 @@ textarea {
._truncate
._btn
*/
/* *****
@name : ._tablet, ._phone and others media queries
@description : A way for responsive integration. Apply rules for media queries tablet, phone, ...
@params : @rules (CSS rules)
@exemple :
el {
background-color:white; // Default : Apply a white bg-color to the <el>
._tablet({
background-color:black; // Apply a black bg-color to the <el> on max-width:@tablet-mw screens <= @tablet-mw defined in settings.less
}); // don't forget the ;
._phone({
background-color:red; // Apply a red bg-color to the <el> on max-width:@phone-mw screens <= @phone-mw defined in settings.less
}); // don't forget the ;
}
***** */
/* *****
@name : ._border-radius
@description : apply the border-radius property to a DOM element
@params : @radius (pixels)
@exemple :
el {
._border-radius(5px 0 0 5px); // Will apply a border-radius:5px 0 0 5px to <el>
}
***** */
/* *****
@name : ._box-shadow
@description : apply the box-shadow property to a DOM element
@values : string (see exemples below)
@exemples :
el {
._box-shadow('1px 1px 5px 0px rgba(0,0,0,0.5) inset, 1px 1px 5px 0px rgba(0,0,0,0.5)'); // Multi-values
._box-shadow('1px 1px 5px 0px rgba(0,0,0,0.5) inset'); // Single Value
._box-shadow('none'); // Reset value
}
***** */
/* *****
@name : background-gradient : horizontal || vertical
@description : apply a grandient background color to a DOM element
@@ -624,16 +578,6 @@ textarea {
NOTICE : For others background-gradients (diagonal, radial, transparent, etc...), please use the generator.
@Generator : http://www.colorzilla.com/gradient-editor/
***** */
/* *****
@name : ._opacity
@description : apply the opacity property to a DOM element
@params : @opacity (0-1)
@exemple :
el {
._opacity(0.5); // Apply a half-opacity (0.5) to <el>
}
***** */
/* *****
@name : ._clearfix
@description : reset floated elements
@@ -675,13 +619,13 @@ textarea {
@exemple :
a {
.opacity(0.5); // Default, apply a half-opacity to <a>
opacity0.5; // Default, apply a half-opacity to <a>
._transition; // Animate <a> on hover (all CSS properties)
._transition(0.4, opacity); // Animate only opacity on hover with a duration of 0.4s
&:hover {
background-color:red;
._opacity(1); // Animate opacity with smoothy animation
opacity:1; // Animate opacity with smoothy animation
}
}
***** */
@@ -743,16 +687,6 @@ textarea {
._skew('X', 10deg, 5deg); // <el> is skewed to 10deg on X axis & 5deg to Y axis
}
***** */
/* *****
@name : ._box-sizing
@description : apply box-sizing property to a DOM element
@params : @boxmodel (content-box | border-box | inherit);
@exemple :
el {
._box-sizing(border-box);
}
***** */
/* *****
@name : ._filter
@params : all CSS3 filters : blur, grayscale, drop-shadow, sepia, brightness, constrast, invert...
@@ -856,78 +790,26 @@ textarea {
}
***** */
/*
== FLEXBOX / FLEXBOX MIXINS ==
== RESPONSIVE / MEDIA QUERIES ==
*/
/* *****
@name : ._flex-*
@description : generate flexbox
@params :
- -display : flex | inline-flex
- -direction : row | row-reverse | column | column-reverse
- -wrap : nowrap (single line) | wrap (multi-line) | wrap-reverse (multi-line)
- -justify : flex-start | flex-end | center | space-between | space-around
- -align : flex-start | flex-end | center | baseline | stretch
- -align-content : flex-start | flex-end | center | space-between | space-around | stretch
@name : ._tablet, ._phone and others media queries
@description : A way for responsive integration. Apply rules for media queries tablet, phone, ...
@params : @rules (CSS rules)
@exemple :
el {
._flex-display;
._flex-direction(column);
}
***** */
/* *****
@name : ._flex
@description : flex-grow, flex-shrink, flex-basis properties
@params : (grow shrink basis)
@exemple :
.parent {
._flex-display;
.child {
._flex(0 0 250px);
}
}
***** */
/* *****
@name : ._flex-order
@description : positionning order for childs elements in flexbox container
@params : int (negative allowed)
@exemple :
.parent {
._flex-display;
.child {
._flex(0 auto);
background-color:white; // Default : Apply a white bg-color to the <el>
&:nth-child(1) {
._flex-order(2); // this child will be displayed last
}
._tablet({
background-color:black; // Apply a black bg-color to the <el> on max-width:@tablet-mw screens <= @tablet-mw defined in settings.less
}); // don't forget the ;
&:nth-child(2) {
._flex-order(-1); // this child will be displayed before all others children
}
}
._phone({
background-color:red; // Apply a red bg-color to the <el> on max-width:@phone-mw screens <= @phone-mw defined in settings.less
}); // don't forget the ;
}
***** */
/* *****
@name : ._align-self
@description : positionning a child element in cross axis
@params : flex-start | flex-end | center | baseline | stretch
@exemple :
.parent {
._flex-display;
.child {
._flex(0 auto);
&:nth-child(2) {
._flex-align-self(flex-end); // this child will be displayed with property align-self:flex-end
}
}
}
***** */
/*
== ANIMATIONS ==
@@ -977,31 +859,19 @@ textarea {
39%,
100% {
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter: alpha(opacity=0);
zoom: 1;
}
40% {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(opacity=100);
zoom: 1;
}
}
@keyframes loaderDots {
0%,
39%,
100% {
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter: alpha(opacity=0);
zoom: 1;
}
40% {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(opacity=100);
zoom: 1;
}
}
/*
@@ -1258,9 +1128,6 @@ button.cc {
a.btn.cc-disabled,
button.cc-disabled {
opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
filter: alpha(opacity=50);
zoom: 1;
cursor: not-allowed;
/* old browser */
pointer-events: none;
@@ -1290,7 +1157,7 @@ button.cc-loading:before {
border-right-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: #ffffff;
border-radius: 50%;
border-radius: 100%;
content: " ";
width: 16px;
height: 16px;
@@ -1548,16 +1415,10 @@ form .form-radio.disabled label {
/* old browser */
pointer-events: none;
opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
filter: alpha(opacity=50);
zoom: 1;
}
form .form-checkbox.disabled label input,
form .form-radio.disabled label input {
opacity: 0.8;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
filter: alpha(opacity=80);
zoom: 1;
}
form .form-checkbox label,
form .form-radio label {
@@ -1668,7 +1529,7 @@ form input {
display: inline-block;
*display: inline;
zoom: 1;
box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.1);
box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
border-radius: 0px;
vertical-align: middle;
background-color: white;
@@ -1729,9 +1590,6 @@ form input[disabled] {
/* old browser */
pointer-events: none;
opacity: 0.5;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
filter: alpha(opacity=50);
zoom: 1;
}
form textarea[type="file"],
form input[type="file"] {
@@ -1768,7 +1626,7 @@ form select {
border: 1px solid #ddd;
vertical-align: middle;
font-size: 1.35rem;
box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.1);
box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
border-radius: 0px;
-webkit-transition: 0.2s all ease-out 0s;
transition: 0.2s all ease-out 0s;
@@ -2005,9 +1863,6 @@ img {
height: 100%;
background-color: transparent;
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(opacity=100);
zoom: 1;
}
.alert button.close i {
padding: 0;
@@ -3439,9 +3294,9 @@ img {
padding: 0em;
margin: 0em 0em 0em;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex: 1 1 0%;
-ms-flex: 1 1 0%;
flex: 1 1 0%;
/* Nested columns */
}
.columns .column.columns {
@@ -3553,9 +3408,6 @@ body.opened-modal {
left: 0px;
right: 0px;
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter: alpha(opacity=0);
zoom: 1;
/* Shown modal */
/* Sizes */
/* Close button */
@@ -3565,16 +3417,10 @@ body.opened-modal {
}
.modal.active {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(opacity=100);
zoom: 1;
z-index: 99;
}
.modal.active .modal-content {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
filter: alpha(opacity=100);
zoom: 1;
/* X != Y */
/* X only */
-webkit-transform: scale(1);
@@ -3659,9 +3505,6 @@ body.opened-modal {
z-index: 99;
border-radius: 4px;
opacity: 0;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
filter: alpha(opacity=0);
zoom: 1;
-webkit-transition: 0.2s all ease-out 0s;
transition: 0.2s all ease-out 0s;
/* X != Y */
2 changes: 1 addition & 1 deletion dist/chuckcss.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ChuckCSS",
"version": "1.0.3",
"version": "2.0.0",
"description": "Responsive CSS framework based on Flexbox grids compiled with LESS and Autoprefixer",
"author": {
"name": "Mickael SURREL <ALPIXEL>",

0 comments on commit 1a92a8f

Please sign in to comment.