How to override H1, P ... defined in foundation type
Locked
 
|
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 |
Re: How to override H1, P ... defined in foundation type
|
|
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:
|
|
|
Which file ? Which variable ?
Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist Twitter : @cmoulliard |
Re: How to override H1, P ... defined in foundation type
|
|
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 ? |
|
|
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:
Charles Moulliard Apache Committer / Architect @RedHat Twitter : @cmoulliard | Blog : http://cmoulliard.github.io
Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist Twitter : @cmoulliard |
Re: How to override H1, P ... defined in foundation type
|
|
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:
|
|
|
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:
Charles Moulliard Apache Committer / Architect @RedHat Twitter : @cmoulliard | Blog : http://cmoulliard.github.io
Charles Moulliard
Apache Committer / Technologist Evangelist / Blogger / MiddleWare Specialist Twitter : @cmoulliard |
Re: How to override H1, P ... defined in foundation type
|
|
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:
|
|
|
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 |
«
Return to Asciidoctor :: Discussion
|
1 view|%1 views
| Free forum by Nabble | Edit this page |