Login  Register

How to override H1, P ... defined in foundation type

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
9 messages Options Options
Embed post
Permalink
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

How to override H1, P ... defined in foundation type

ch007m
The _defaults.scss file used by asciidoctor-stylesheet-factory imports normalize & foundation which are used during compass compilation to produce the final css file and where by example elementary HTML Tag styles are defined like h1, h2, p ...

As you can see here at Line 169 of the asciidoctor.css file, we have the font-size defined for HTML tag 'p' that I would like to change

p.lead, .paragraph.lead > p, #preamble > .sectionbody > .paragraph:first-of-type p { font-size: 1.21875em; line-height: 1.6; }

Questions :
- How can we override the font-size in this case and in which scss file (if we can do that) ?
- As the goal of asciidoctor-stylesheet-factory is to allow a user to define its own css styles, why don't we include the _normalize and _foundations scss files in the project to have the possibility to change all the styles ?
- Until now, I don't know from which .scss file '.paragraph:first-of-type' comes from ?

Regards,

Charles

Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

Re: How to override H1, P ... defined in foundation type

LightGuardjp
All you need to do is override it in your file. It'll have your style in the final compiled CSS. 

Sent from Mailbox for iPhone


On Thu, Jan 23, 2014 at 9:03 AM, ch007m [via Asciidoctor :: Discussion] <[hidden email]> wrote:

The _defaults.scss file used by asciidoctor-stylesheet-factory imports normalize & foundation which are used during compass compilation to produce the final css file and where by example elementary HTML Tag styles are defined like h1, h2, p ...

As you can see here at Line 169 of the asciidoctor.css file, we have the font-size defined for HTML tag 'p' that I would like to change

p.lead, .paragraph.lead > p, #preamble > .sectionbody > .paragraph:first-of-type p { font-size: 1.21875em; line-height: 1.6; }

Questions :
- How can we override the font-size in this case and in which scss file (if we can do that) ?
- As the goal of asciidoctor-stylesheet-factory is to allow a user to define its own css styles, why don't we include the _normalize and _foundations scss files in the project to have the possibility to change all the styles ?
- Until now, I don't know from which .scss file '.paragraph:first-of-type' comes from ?

Regards,

Charles

Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

Re: How to override H1, P ... defined in foundation type

ch007m
Which file ? Which variable ?
Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

Re: How to override H1, P ... defined in foundation type

LightGuardjp
It's the $em-base variable. Follow the same as the asciidoctor stylesheets (sass files) and you'll be fine.


On Thu, Jan 23, 2014 at 9:32 AM, ch007m [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Which file ? Which variable ?
Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1306.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

Re: How to override H1, P ... defined in foundation type

ch007m
This is what I have done before to post my message ;-) but the result was not what I was expecting.

Here is what I have tested

_my_style.scss
// HTML
$em-base: 24px;

my_style.css
/* Default paragraph styles */
p { font-family: "Liberation Sans Regular"; font-weight: normal; font-size: 1em; line-height: 1.6; margin-bottom: 0.83333em; text-rendering: optimizeLegibility; }
p aside { font-size: 0.58333em; line-height: 1.35; font-style: italic; }

// HTML
$em-base: 48px;

/* Default paragraph styles */
p { font-family: "Liberation Sans Regular"; font-weight: normal; font-size: 1em; line-height: 1.6; margin-bottom: 0.41667em; text-rendering: optimizeLegibility; }
p aside { font-size: 0.29167em; line-height: 1.35; font-style: italic; }

As you can see the font-size has been changed for 'p aside' but not for 'p' 

Hopefully, after reading this file 'https://github.com/zurb/foundation/blob/master/scss/foundation/components/_type.scss' from foundation git repo, I have been able to find a workaround with this variable

$paragraph-font-size: 1.2em;

Result --> font-size: 1.2em
/* Default paragraph styles */
p { font-family: "Liberation Sans Regular"; font-weight: normal; font-size: 1.2em; line-height: 1.6; margin-bottom: 0.41667em; text-rendering: optimizeLegibility; }
p aside { font-size: 0.29167em; line-height: 1.35; font-style: italic; }

This is why in my previous email I suggested also that we add foundation, normalize .scss files in the asciidoctor-stylesheet-factory ;-)






On Thu, Jan 23, 2014 at 6:26 PM, LightGuardjp [via Asciidoctor :: Discussion] <[hidden email]> wrote:
It's the $em-base variable. Follow the same as the asciidoctor stylesheets (sass files) and you'll be fine.


On Thu, Jan 23, 2014 at 9:32 AM, ch007m [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Which file ? Which variable ?
Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1306.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1307.html
To unsubscribe from How to override H1, P ... defined in foundation type, click here.
NAML



--
Charles Moulliard
Apache Committer / Architect @RedHat
Twitter : @cmoulliard | Blog :  http://cmoulliard.github.io

Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

Re: How to override H1, P ... defined in foundation type

LightGuardjp
After looking at the foundation scss files, what you'll want to change is the $base-font-size variable. The declaration is $base-font-size: 100% !default; (in both _variables.scss and _global.scss in the foundation gem). You'll want to make sure it's a px value. The default in browsers appears to (often) be 16px, though that is user configurable and of course may differ based on browsers, devices, etc.


On Thu, Jan 23, 2014 at 11:10 AM, ch007m [via Asciidoctor :: Discussion] <[hidden email]> wrote:
This is what I have done before to post my message ;-) but the result was not what I was expecting.

Here is what I have tested

_my_style.scss
// HTML
$em-base: 24px;

my_style.css
/* Default paragraph styles */
p { font-family: "Liberation Sans Regular"; font-weight: normal; font-size: 1em; line-height: 1.6; margin-bottom: 0.83333em; text-rendering: optimizeLegibility; }
p aside { font-size: 0.58333em; line-height: 1.35; font-style: italic; }

// HTML
$em-base: 48px;

/* Default paragraph styles */
p { font-family: "Liberation Sans Regular"; font-weight: normal; font-size: 1em; line-height: 1.6; margin-bottom: 0.41667em; text-rendering: optimizeLegibility; }
p aside { font-size: 0.29167em; line-height: 1.35; font-style: italic; }

As you can see the font-size has been changed for 'p aside' but not for 'p' 

Hopefully, after reading this file 'https://github.com/zurb/foundation/blob/master/scss/foundation/components/_type.scss' from foundation git repo, I have been able to find a workaround with this variable

$paragraph-font-size: 1.2em;

Result --> font-size: 1.2em
/* Default paragraph styles */
p { font-family: "Liberation Sans Regular"; font-weight: normal; font-size: 1.2em; line-height: 1.6; margin-bottom: 0.41667em; text-rendering: optimizeLegibility; }
p aside { font-size: 0.29167em; line-height: 1.35; font-style: italic; }

This is why in my previous email I suggested also that we add foundation, normalize .scss files in the asciidoctor-stylesheet-factory ;-)






On Thu, Jan 23, 2014 at 6:26 PM, LightGuardjp [via Asciidoctor :: Discussion] <[hidden email]> wrote:
It's the $em-base variable. Follow the same as the asciidoctor stylesheets (sass files) and you'll be fine.


On Thu, Jan 23, 2014 at 9:32 AM, ch007m [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Which file ? Which variable ?
Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1306.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1307.html
To unsubscribe from How to override H1, P ... defined in foundation type, click here.
NAML



--
Charles Moulliard
Apache Committer / Architect @RedHat
Twitter : @cmoulliard | Blog :  http://cmoulliard.github.io

Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1308.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

Re: How to override H1, P ... defined in foundation type

ch007m
Thx. Using this variable improves the situation.

Nevertheless, it is important that we propose a more flexible way to generate a CSS file even if, for the moment, that will consist to import scss files from foundation, normalize ... and add them to the asciidoctor-sylesheet-factory.
This is certainly not an easy task to design a good solution to generate CSS as we will most probably start a discussion about sass vs less, blueprint vs bootstrap, ....... http://stackoverflow.com/questions/7127677/compass-vs-twitter-bootstrap




On Thu, Jan 23, 2014 at 8:13 PM, LightGuardjp [via Asciidoctor :: Discussion] <[hidden email]> wrote:
After looking at the foundation scss files, what you'll want to change is the $base-font-size variable. The declaration is $base-font-size: 100% !default; (in both _variables.scss and _global.scss in the foundation gem). You'll want to make sure it's a px value. The default in browsers appears to (often) be 16px, though that is user configurable and of course may differ based on browsers, devices, etc.


On Thu, Jan 23, 2014 at 11:10 AM, ch007m [via Asciidoctor :: Discussion] <[hidden email]> wrote:
This is what I have done before to post my message ;-) but the result was not what I was expecting.

Here is what I have tested

_my_style.scss
// HTML
$em-base: 24px;

my_style.css
/* Default paragraph styles */
p { font-family: "Liberation Sans Regular"; font-weight: normal; font-size: 1em; line-height: 1.6; margin-bottom: 0.83333em; text-rendering: optimizeLegibility; }
p aside { font-size: 0.58333em; line-height: 1.35; font-style: italic; }

// HTML
$em-base: 48px;

/* Default paragraph styles */
p { font-family: "Liberation Sans Regular"; font-weight: normal; font-size: 1em; line-height: 1.6; margin-bottom: 0.41667em; text-rendering: optimizeLegibility; }
p aside { font-size: 0.29167em; line-height: 1.35; font-style: italic; }

As you can see the font-size has been changed for 'p aside' but not for 'p' 

Hopefully, after reading this file 'https://github.com/zurb/foundation/blob/master/scss/foundation/components/_type.scss' from foundation git repo, I have been able to find a workaround with this variable

$paragraph-font-size: 1.2em;

Result --> font-size: 1.2em
/* Default paragraph styles */
p { font-family: "Liberation Sans Regular"; font-weight: normal; font-size: 1.2em; line-height: 1.6; margin-bottom: 0.41667em; text-rendering: optimizeLegibility; }
p aside { font-size: 0.29167em; line-height: 1.35; font-style: italic; }

This is why in my previous email I suggested also that we add foundation, normalize .scss files in the asciidoctor-stylesheet-factory ;-)






On Thu, Jan 23, 2014 at 6:26 PM, LightGuardjp [via Asciidoctor :: Discussion] <[hidden email]> wrote:
It's the $em-base variable. Follow the same as the asciidoctor stylesheets (sass files) and you'll be fine.


On Thu, Jan 23, 2014 at 9:32 AM, ch007m [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Which file ? Which variable ?
Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1306.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1307.html
To unsubscribe from How to override H1, P ... defined in foundation type, click here.
NAML



--
Charles Moulliard
Apache Committer / Architect @RedHat
Twitter : @cmoulliard | Blog :  http://cmoulliard.github.io

Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1308.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1309.html
To unsubscribe from How to override H1, P ... defined in foundation type, click here.
NAML



--
Charles Moulliard
Apache Committer / Architect @RedHat
Twitter : @cmoulliard | Blog :  http://cmoulliard.github.io

Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

Re: How to override H1, P ... defined in foundation type

LightGuardjp
Charles,

What are we missing to make this easier? I'm thinking it's some documentation and some further education. Getting into any CSS preprocessor (Sass, LESS, Stylus, etc) is difficult the first few times to be sure. 

I'm a bit reluctant to spend a lot of time on this (say if we were to create a web form or something to generate the new theme) because I don't see it as something that will be done very often. In my mind you'd create a theme once or twice and then be done with it. Certainly some more education around it is needed, but I don't see us needing to spend a lot of time coming up with another solution. There's also been some work in doing bootstrap based themes (http://discuss.asciidoctor.org/Bootstrap-styles-for-AsciiDoc-Asciidoctor-tt1241.html). 


On Fri, Jan 24, 2014 at 12:11 AM, ch007m [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Thx. Using this variable improves the situation.

Nevertheless, it is important that we propose a more flexible way to generate a CSS file even if, for the moment, that will consist to import scss files from foundation, normalize ... and add them to the asciidoctor-sylesheet-factory.
This is certainly not an easy task to design a good solution to generate CSS as we will most probably start a discussion about sass vs less, blueprint vs bootstrap, ....... http://stackoverflow.com/questions/7127677/compass-vs-twitter-bootstrap




On Thu, Jan 23, 2014 at 8:13 PM, LightGuardjp [via Asciidoctor :: Discussion] <[hidden email]> wrote:
After looking at the foundation scss files, what you'll want to change is the $base-font-size variable. The declaration is $base-font-size: 100% !default; (in both _variables.scss and _global.scss in the foundation gem). You'll want to make sure it's a px value. The default in browsers appears to (often) be 16px, though that is user configurable and of course may differ based on browsers, devices, etc.


On Thu, Jan 23, 2014 at 11:10 AM, ch007m [via Asciidoctor :: Discussion] <[hidden email]> wrote:
This is what I have done before to post my message ;-) but the result was not what I was expecting.

Here is what I have tested

_my_style.scss
// HTML
$em-base: 24px;

my_style.css
/* Default paragraph styles */
p { font-family: "Liberation Sans Regular"; font-weight: normal; font-size: 1em; line-height: 1.6; margin-bottom: 0.83333em; text-rendering: optimizeLegibility; }
p aside { font-size: 0.58333em; line-height: 1.35; font-style: italic; }

// HTML
$em-base: 48px;

/* Default paragraph styles */
p { font-family: "Liberation Sans Regular"; font-weight: normal; font-size: 1em; line-height: 1.6; margin-bottom: 0.41667em; text-rendering: optimizeLegibility; }
p aside { font-size: 0.29167em; line-height: 1.35; font-style: italic; }

As you can see the font-size has been changed for 'p aside' but not for 'p' 

Hopefully, after reading this file 'https://github.com/zurb/foundation/blob/master/scss/foundation/components/_type.scss' from foundation git repo, I have been able to find a workaround with this variable

$paragraph-font-size: 1.2em;

Result --> font-size: 1.2em
/* Default paragraph styles */
p { font-family: "Liberation Sans Regular"; font-weight: normal; font-size: 1.2em; line-height: 1.6; margin-bottom: 0.41667em; text-rendering: optimizeLegibility; }
p aside { font-size: 0.29167em; line-height: 1.35; font-style: italic; }

This is why in my previous email I suggested also that we add foundation, normalize .scss files in the asciidoctor-stylesheet-factory ;-)






On Thu, Jan 23, 2014 at 6:26 PM, LightGuardjp [via Asciidoctor :: Discussion] <[hidden email]> wrote:
It's the $em-base variable. Follow the same as the asciidoctor stylesheets (sass files) and you'll be fine.


On Thu, Jan 23, 2014 at 9:32 AM, ch007m [via Asciidoctor :: Discussion] <[hidden email]> wrote:
Which file ? Which variable ?
Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1306.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1307.html
To unsubscribe from How to override H1, P ... defined in foundation type, click here.
NAML



--
Charles Moulliard
Apache Committer / Architect @RedHat
Twitter : @cmoulliard | Blog :  http://cmoulliard.github.io

Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1308.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1309.html
To unsubscribe from How to override H1, P ... defined in foundation type, click here.
NAML



--
Charles Moulliard
Apache Committer / Architect @RedHat
Twitter : @cmoulliard | Blog :  http://cmoulliard.github.io

Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard



If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/How-to-override-H1-P-defined-in-foundation-type-tp1304p1310.html
To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML



--
Reply | Threaded
Open this post in threaded view
| More
Print post
Permalink

Re: How to override H1, P ... defined in foundation type

ch007m
Jason,

I understand your point of view and can accept that we keep what exist but in this case, the documentation should be improved to :

- List all the variables that we can use to change/override the styles of existing themes and new. Some variables belong to asciidoctor/default others are inherited from foundation, normalize,
- Link to git repos of foundation, normalize should be added,
- A table should be created to map the asciidoctor css styles (paragraph, titles, ...) with the templates (erb, slim, ...) where there are implemented,
- We should review the existing stylesheet factory (_asciidoc.scss) and specifically when we would like to change font style, size as this is not trivial today to change font size for paragraph ....

Regards,

Charles
Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist
Twitter : @cmoulliard