Using SASS with noosfero

Bráulio Bhavamitra brauliobhavamitra at gmail.com
Tue Jul 9 10:57:39 BRT 2013


Got some insights with Aurium and improved comments for developers use.

Also included paragraphs styles. Check it out!

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

regards,
bráulio


On Fri, Jun 21, 2013 at 9:18 AM, Bráulio Bhavamitra <
brauliobhavamitra at gmail.com> wrote:

> 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
>



-- 
"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/20130709/a2d91323/attachment.html>


More information about the Noosfero-dev mailing list