Remove the "typography" CSS file in Bartik

From what i could best understand from this link(https://www.drupal.org/node/1887922),i think putting content of typography file in element.css file would be fine idea.But since i am new to codebase of drupal will it be fine to make changes in file of element.css in this manner:
body{
previous content remains same only this is additionaly added:font-family: Georgia, "Times New Roman", Times, serif;
}
Fonts will be written under Reset styles
/*-----------Fonts-------------------*/
#site-slogan,
.site-slogan,
#page .ui-widget,
.comment-form label,
.node-form label,
.node-form .description {
font-family: Georgia, "Times New Roman", Times, serif;
}
Also i don't think there is any need of cleaning task i.e. what i have derived after reading this link https://www.drupal.org/node/1342054

elements.css should not include things like .node-form label.

Also investigated this issue a bit. On Seven theme it looks like font-family is used per component at least in tabs.css and admin-options.css. So my guess is that body, input, select, textarea and button should be moved from typography.css to elements.css and split the rest of the stuff to component-files.

Played around a bit with this and ended up with solution like this. Need to think a while what to do with rest of stuff.

I'm surprised the idea of splitting up of the typography.css and moving this into individual components. Reading https://www.drupal.org/node/1887922 - isn't font selection about look and feel?

We actually don't split the styling for a component into separate files, it's important that the styling for a component is one file, so you can look in one place.

The theme category in SMACSS actually refers to global, page level changes. The example files given in the CSS standards are theme--dark and theme--light

Theme rules may or may not have their own file(s). Starter themes are encouraged to separate their theme CSS into separate files. Otherwise, include theme rules with their corresponding component.

Maybe we need to update the wording of that category in the standards so it's more clear.

1. +++ b/core/themes/bartik/css/base/elements.css
   @@ -68,6 +68,13 @@ p {
   +input,
   +textarea,
   +select,
   +button,
   +table {
   +  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
   +}
   

   I think these selectors belong in form.css, buttons.css, and table.css

2. +++ b/core/themes/bartik/css/components/skip-link.css
   @@ -16,7 +16,7 @@
   +  font: 0.94em font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   

   font-family is included by mistake

re #8 but typography is specifically mentioned on http://smacss.com/book/type-theme

Yes, but the situation is different. The situation is when you want to change the font globally across the whole site in a specific context:

Last but not least, there are font rules. Similar to themes, there are times when you need to redefine the fonts that are being used on a wholesale basis, such as with internationalization.

There isn't a situation in Bartik where we want to change the font wholesale, so the is no benefit of containing it within one file. I don't think we have a need for any theme files in Bartik and that's common with a lot of SMACSS projects.

Theme Rules aren't as often used within a project and because of that, they aren't included as part of the core types. Some projects may have a need for them, though.

Worked on the LewisNyman comment. typography-2398447.patch

I posted interdiff-2398447-6-13.txt

+++ b/core/themes/bartik/css/components/buttons.css
@@ -1,5 +1,7 @@
+button {
+  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
+}
 .button {

We dont have to create new selector here because there is already existing selector for this

Thnx lauriii, for the reply. And i make a selector like button type="submit" not a class, so please test it again. If it's worked then its fine otherwise i will changed it.

1. +++ b/core/themes/bartik/css/base/elements.css
   @@ -69,6 +69,7 @@ del {
    
   +
    /* ------------------ Reset Styles ------------------ */
   

   We only need one blank line here

2. +++ b/core/themes/bartik/css/base/typography.css
   @@ -1,35 +1,7 @@
   -#site-slogan,
   -.site-slogan,
   

   The site slogan seems to be missing the font declaration now

3. +++ b/core/themes/bartik/css/base/typography.css
   @@ -1,35 +1,7 @@
   -#page .ui-widget,
   

   This one is missing also

4. +++ b/core/themes/bartik/css/base/typography.css
   @@ -1,35 +1,7 @@
   -.comment-form label,
   -.node-form label,
   -.node-form .description {
   

   And these

5. +++ b/core/themes/bartik/css/base/typography.css
   @@ -1,35 +1,7 @@
    ul.contextual-links,
    ul.links,
    ul.primary,
   

   These need to be moved into the correct files still.
   .contextual-links -> Contextual.css
   .links -> content.css
   .primary -> tabs.css

6. +++ b/core/themes/bartik/css/base/typography.css
   @@ -1,35 +1,7 @@
   -p.comment-time,
   

   This one has not been moved

7. +++ b/core/themes/bartik/css/components/form.css
   @@ -10,6 +10,11 @@ form {
   +input,
   +textarea,
   +select {
   +  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif;
   +}
   

   Can we move these lines down so they are above the input, textarea, and select styling?

#13 wasn't applying anymore, so I rerolled. I also tried to address all of the issues from #15 and #19.

Notes:

• .ui-widget didn't have any existing styles anywhere in Bartik, so I wasn't sure where to put that definition. I put it in content.css, but that might be wrong.
• .link also hadn't been moved out of typography.css, so I added that definition into elements.css, but I'm not sure if that style should be more properly put on the a element.
• I moved the .tabs ul.primary definition to tabs.css, but it comes directly after the div.tabs definition with the font-family style, so I'm not sure that's necessary.
• I tried to do an interdiff but the original didn't apply so I didn't know how to compare the two using git diff, and patchutils interdiff choked on it. Sorry I'm crap at that :/

#22, i have been check out and applied your patch file. I found an issue that the pages been shirnked and some text has collapsed in their size. There is slight jerk on all pages before and after the patch: the Site title becomes bigger. To correct this requires font size and type to be defined separately.

+++ b/core/themes/bartik/css/base/elements.css
@@ -2,11 +2,11 @@

body {
line-height: 1.5;
- font-size: 87.5%;
word-wrap: break-word;
margin: 0;
padding: 0;
border: 0;
+ font: 87.5% Georgia, "Times New Roman", Times, serif;
}

font: 87.5% Georgia, "Times New Roman", Times, serif; - this should be an issue. Checked with chromium Version 37.0.2062.120.

Here is the updated patch.

Ignore #24. Here is the updated patch.

Great! We are just missing one thing.

+++ /dev/null
@@ -1,35 +0,0 @@
-#page .ui-widget,

We are missing this selector

Tried to figure out if we're calling that at all, but I'm not sure about it. Couldn't really find it anywhere.

My bad, I had added .ui-widget instead of #page .ui-widget.

#page doesn't exist anywhere other than the layout.css file (which seemed an inappropriate place to put this definition) so I put it at the end of content.css with other page-related things. It may make more sense somewhere else, though; I'm not sure exactly how it's being used.

Ah that's why I missed it. In this case, let's just play it safe and figure out how and where it's being used in #2398463: Clean up the "content" component in Bartik

RTBC!

Looks good!

+++ b/core/themes/bartik/css/components/pager.css
@@ -1,7 +1,11 @@
+/**
+* @todo: .pager .pager__items also exists in list.css
+*/

This comment is no longer relevant now that #2408653: Remove lists.css from Bartik, add it's current code directly to the components it references. has been committed

Alright, look good. Thanks, emma.maria! :)

Reroll after #2402639: Rename the footer regions in Bartik was committed.

Looks like a solid reroll to me.

Now we are removing typography.css we need a place to document the font stack a theme uses... so people like me know how to check whether a change is correct. The same for media queries #2399709: Remove media.css from Bartik, add it's current code directly to the components it references.. But like that patch I'm not going to hold this up on that. But can someone please up an issue to address this.

Committed 82fa1a6 and pushed to 8.0.x. Thanks!

Thanks for adding the beta evaluation to the issue summary.