Correction RTL #1

Merged
merged 2 commits into from Oct 11, 2012

Projects

None yet

4 participants

@xehrad
xehrad commented Oct 10, 2012

hi João , nice to meet u
I did make reforming in the RTL file
because the ordering of radio and checkbox items is wrong

thnx

mehrad

xehrad added some commits Oct 9, 2012
Owner

Tks man!

I liked your fix

I will check and accept your request! I would like to know your name and source to add in the credits ok :)

Owner

i forget!

your origin city and country too :)

@firminoweb firminoweb merged commit 28a842c into firminoweb:master Oct 11, 2012
xehrad commented Oct 12, 2012

your welcome :)

i am Mehrad and grew up in Tehran [Iran] , do not panic , i am not terrorist =)

I have a few ideas.
to prevent accidental name collision,
we can set prefixes names of objects with " _ " .

and the [less] can be used more , for example set the columns width:

@_colMrg:        10px;
@_colNum:        16;
@_WA:            1200px;       // width grid A
@_WB:            960px;        // width grid B
@_WC:            768px;        // width grid C
@_WD:            420px;        // width grid D
@_WE:            300px;        // width grid E

.CWC(@_Mid,@_i){               // Column Width Calculator
    @_2CM:@_colMrg*2;
    @_BW:@_Mid/@_colNum - @_2CM;
    width:(@_i*@_BW)+(@_i - 1)*@_2CM;
}
/* #1200 grid */
/*---------------------------------------------------*/
  .col1    { .CWC(@_WA, 1) }
  .col2    { .CWC(@_WA, 2) }
  .col3    { .CWC(@_WA, 3) }

  ....

  .col15   { .CWC(@_WA,15) }
  .col16   { .CWC(@_WA,16) }

/* #960 grid */
/*---------------------------------------------------*/
  .wrapper {  width:@_WB   }


  .col1    { .CWC(@_WB, 1) }
  .col2    { .CWC(@_WB, 2) }
  .col3    { .CWC(@_WB, 3) }

  ....

  .col15   { .CWC(@_WB,15) }
  .col16   { .CWC(@_WB,16) }

What do you think?
See you later
Bye

Mehrad

Collaborator
yonihbc commented Oct 12, 2012

Sounds good. And i dont think of any iran people a terrorist

John Greenberg

ב-12 באוק 2012, בשעה 11:40, "Mehrad Dehbid" notifications@github.com כתב/ה:

your welcome :)

i am Mehrad Dehbid , my name is roughly pronounced as [meh-ra:d] You got it! :D
and grew up in Tehran [Iran] , do not panic , i am not terrorist =)

I have a few ideas.
to prevent accidental name collision,
we can set prefixes names of objects with " _ " .

and the [less] can be used more , for example set the columns width:

@_colMrg: 10px;
@_colNum: 16;
@_WA: 1200px; // width grid A
@_WB: 960px; // width grid B
@_WC: 768px; // width grid C
@_WD: 420px; // width grid D
@_WE: 300px; // width grid E

.CWC(@_Mid,@_i){ // Column Width Calculator
@_2CM:@_colMrg_2;
@_BW:@_Mid/@_colNum - @_2CM;
width:(@i@_BW)+(@i - 1)@2CM;
}
/
#1200 grid /
/
---------------------------------------------------*/
.col1 { .CWC(@_WA, 1) }
.col2 { .CWC(@_WA, 2) }
.col3 { .CWC(@_WA, 3) }

....

.col15 { .CWC(@_WA,15) }
.col16 { .CWC(@_WA,16) }

/* #960 grid /
/
---------------------------------------------------*/
.wrapper { width:@_WB }

.col1 { .CWC(@_WB, 1) }
.col2 { .CWC(@_WB, 2) }
.col3 { .CWC(@_WB, 3) }

....

.col15 { .CWC(@_WB,15) }
.col16 { .CWC(@_WB,16) }
What do you think?
See you later
Bye

Mehrad


Reply to this email directly or view it on GitHub.

xehrad commented Oct 12, 2012

sounds good too
I got the joke because I know you're aware =)

Owner

for me, sounds good :D

let's talk about this better later ok!

tks for your attention :D

Atenciosamente,
João Henrique Firmino
Web Developer - http://firmino.com.br
(11) 97083-6907

Owner

I really liked your idea, let's implement at LESS? :D

xehrad commented Oct 16, 2012

yes! I'm interested to develop in LESS
and I have a new idea :D
when we have separate file for RTL
we maybe forgetting to Back some changes
like this bug in RTL:

  .first {
      margin-right:0;    // the "margin-left" remaining "0px"
  }
  .last {
      margin-left:0;
  }

and the correct form is:

  .first {
      margin-left:10px; // reset value
      margin-right:0;
  }
  .last {
      margin-right:10px;
      margin-left:0;
  }

I think there should be a variable for RTL
and making the code with regard this variable

            /* @ Variables.less */

@RTL:false;

.margin-left(@c) when not (@RTL) {
    margin-left:@c;
}

.margin-left(@c) when (@RTL) {
    margin-right:@c;
}





             /* @ Grids.less */
.last {
    .margin-left(0px)
}

and output when @RTL:false;

.last {
  margin-left: 0px;
}

and when @RTL:true;

.last {
  margin-right: 0px;
}

We only have one file
and change the variable @RTL for create RTL.css or LTR.css
What do you think?

Mehrad

Owner

Hello Mehrad

you would like to implement these codes LESS and send me to commit review?

follows below my suggestion for LESS classes .col1-3 and .col2-3 and tell
me what you think.

.CWC-1-3 (@_Mid) {
@_2CM:@_colMrg*2;
width:(@_Mid/3) - @_2CM;
}

.CWC-2-3 (@_Mid) {
@_2CM:@_colMrg*2;
width:(@_Mid/3) * 2 - @_2CM;
}

Tks :D

Atenciosamente,
João Henrique Firmino
Web Developer - http://firmino.com.br
(11) 97083-6907

Owner

or if you prefer!

I myself do I! and then you can check or even correct ok!

Atenciosamente,
João Henrique Firmino
Web Developer - http://firmino.com.br
(11) 97083-6907

xehrad commented Oct 17, 2012

yes! it's so sexy 👍
you can more LESS

.3CWC(@_Mid,@_i){
    width:(@_i*@_Mid/3) - (@_colMrg*2);
}

  .col1_3  { .3CWC(@_wgA,1) }
  .col2_3  { .3CWC(@_wgA,2) }

I'm happy if I can help

neha-s commented Feb 20, 2013

Hi Mehrad!

I may sound really stupid asking this question but would you mind explaining me the maths behind this calculator?

.CWC (@_Mid,@_i) {
@_2CM:@_colMrg * 2;
@_BW:@_Mid/@_colNum - @_2CM;
width:(@_i*@_BW) + (@_i - 1) * @_2CM;
}

.3CWC (@_Mid,@_i) {
width:(@i@_Mid/3) - (@_colMrg_2);
}
And I am new to github as well so not sure if I am commenting/questioning on the right thread!

xehrad commented Feb 20, 2013

Hi neha! Your picture is very nice :D
so , .CWC(@_Mid,@_i) is like function in programming , we have 2 arguments , first is width of page or .wrapper and another is number of column , like ( 1200, 8 )

We will first calculate margin around column _(@2CM) and its always 20 , calculate for more functionality in program and as a result i can change the logic of code by change the variable that define in first of code => _@colMrg:10px;

then calculated space of one column _(@_Mid/@colNum) subtraction margin space _(@2CM) then we have pure width of column_1 , you can see it in original code, for example when _@Mid=1200: (1200 / 16) - 20 = 55

width: (@_i * @_BW) + (@_i - 1) * @_2CM;
This means that we have one more margins of columns and at last total of both :

columns: (@_i * @_BW)
margins: (@_i - 1) * @_2CM
example: i=4 : (4 * Column_Width) + (3 * Column_Margin * 2)

I'm trying to show it , every column have by default two margins , so i show this by ] or [ and calculated margins by # and columns by __

@_i=1
]__[

@_i=2
]##[

@_i=3
]__####[

@_i=4
]######[

...

and CWC in javascript

var $colNum = 16;             // number of columns in framework
var $colMrg = 10;             // margin width
CWC = function(__Mid, __i){
  var 2CM   = 20;             // yes! , you can set static value => @_2CM:20
  var BW    = (__Mid / $colNum) - 2CM;
  var width = (__i * BW) + (__i - 1) * 2CM;
  return width;
}

mehRad

neha-s commented Feb 25, 2013

Thank you :)

Neha Singh

On Thursday, 21 February 2013 at 2:11 AM, Meh rad wrote:

Hi neha! Your picture is very nice :D
so , .CWC(@_Mid,@_i) is like function in programming , we have 2 arguments , first is width of page or .wrapper and another is number of column , like ( 1200, 8 )
We will first calculate margin around column (@_2CM) and its always 20 , calculate for more functionality in program and as a result i can change the logic of code by change the variable that define in first of code => @_colMrg:10px;
then calculated space of one column (@_Mid/@_colNum) subtraction margin space (@_2CM) then we have pure width of column_1 , you can see it in original code (e7f2280#L1R26), for example when @_Mid=1200: (1200 / 16) - 20 = 55
width: (@_i * @_BW) + (@_i - 1) * @_2CM;
This means that we have one more margins of columns and at last total of both :

columns: (@_i * @_BW)
margins: (@_i - 1) * @_2CM
example: i=4 : (4 * Column_Width) + (3 * Column_Margin * 2)
I'm trying to show it , every column have by default two margins (https://github.com/firminoweb/csshorus/blob/master/less/%40Grid.less#L23) , so i show this by ] or [ and calculated margins by # and columns by __
@_i=1
][
@_i=2
]
##[
@_i=3
]
####[
@_i=4
]######[
...

and CWC in javascript
var $colNum = 16; // number of columns in framework var $colMrg = 10; // margin width CWC = function(__Mid, __i){ var 2CM = 20; // yes! , you can set static value => @_2CM:20 var BW = (__Mid / $colNum) - 2CM; var width = (__i * BW) + (__i - 1) * 2CM; return width; }
mehRad


Reply to this email directly or view it on GitHub (#1 (comment)).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment