Using SASS with noosfero

Bráulio Bhavamitra brauliobhavamitra at gmail.com
Fri Jun 21 09:18:05 BRT 2013


Using sass is really helping alignment and layout coherence when
implementing ESCAMBO noosfero network.

These following variables really help!

bráulio

https://github.com/ESCAMBO/noosfero-ecosol/blob/master/plugins/currency/public/_base.scss

.clean {
  clear: both;
}
.container-clean {
  overflow: hidden;
  display: inline-block; /* Necessary to trigger "hasLayout" in IE */
  display: block; /* Sets element back to block */
}

/* Base measuments */

$base: 12px;
$module: 6*$base;
$intercolumn: 2*$base;
$module1: 1*$module + 0*$intercolumn;
$module2: 2*$module + 1*$intercolumn;
$module3: 3*$module + 2*$intercolumn;
$module4: 4*$module + 3*$intercolumn;
$module5: 5*$module + 4*$intercolumn;
$module6: 6*$module + 5*$intercolumn;
$module7: 7*$module + 6*$intercolumn;
$module8: 8*$module + 7*$intercolumn;
$module9: 9*$module + 8*$intercolumn;
$wireframe: 10*$module + 10*$intercolumn;

$margin: $intercolumn;
$half-margin: $margin/2;
/* REMEMBER to disccount from padding the borders size, as borders
uses padding's space. */
$padding: $intercolumn/2;
$half-padding: $padding/2;

$border: 1px;
$border-radius: 5px;
$shadow: 2px;

/* percentages */
$module1p: percentage($module1/$wireframe);
$module2p: percentage($module2/$wireframe);
$module3p: percentage($module3/$wireframe);
$module4p: percentage($module4/$wireframe);
$module5p: percentage($module5/$wireframe);
$module6p: percentage($module6/$wireframe);
$module7p: percentage($module7/$wireframe);
$module8p: percentage($module8/$wireframe);
$module9p: percentage($module9/$wireframe);
$marginp: percentage($margin/$wireframe);
$half-marginp: percentage($half-margin/$wireframe);
$paddingp: percentage($padding/$wireframe);
$half-paddingp: percentage($half-padding/$wireframe);



On Wed, May 1, 2013 at 10:50 AM, Bráulio Bhavamitra <
brauliobhavamitra at gmail.com> wrote:

> Hello all,
>
> I'm using sass with noosfero in a project after getting tired of crappy
> and duplicated css in another project. After one hour of use I'm asking why
> I haven't used it before.
>
> It was in fact very easy :)
>
> https://github.com/ESCAMBO/noosfero-ecosol/commit/315d96d8dbe46dd822ddc2fbb9d5af7ea25f2ffc
>
> Just to say if anybody is also interested.
>
> regards,
> bráulio
>



-- 
"Lute pela sua ideologia. Seja um com sua ideologia. Viva pela sua
ideologia. Morra por sua ideologia" P.R. Sarkar

EITA - Educação, Informação e Tecnologias para Autogestão
http://cirandas.net/brauliobo
http://eita.org.br
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://listas.softwarelivre.org/pipermail/noosfero-dev/attachments/20130621/2b0d5c73/attachment.html>


More information about the Noosfero-dev mailing list