Foundation-sites: Feature Request: CSS Dropcaps

[IamManchanda]

Feature Request - Dropcaps
Dropcaps are a nice feature and if it can be added in framework with few lines of code then why not!
Codepen => http://codepen.io/IamManchanda/pen/bgbraw

.dropcaps:first-letter {
  margin: 0.08em 0 -0.05em 0;
  padding: 0 0.065em 0 0;
  font-size: 5em;
  line-height: 0.85em;
  float: left;
}

Also. Your final code might look a bit different than this but thats perfectly ohk . What i want is a add a dropcaps class in foundation

[kball]

@IamManchanda I know you commented you were new to git on a separate issue, but this is simple enough that it would be a great first PR to try out on. Do you want to give it a go?

The first step would be to try cloning the repository, doing an npm install and bower install and npm start to get a local version of Foundation running... From there, you can try making edits and see how they work. For this I'd look at scss/typography/_helpers.scss. You could also add it to the documentation (and see if your approach is working) in docs/pages/typography-helpers.md

[IamManchanda]

Sure I will try it out @kball

Leave this issue as it is and I will try and open a PR ..... I am up for it .... will do it within a day or two this week ..... I use Linux so there won't be big issue :p

Thanks for encouraging @kball

[IamManchanda]

Also could you tell me which tags it should target --> Every tag or specifically only ( h1 to h6 and p ) tags

In both cases i think setting font size in percentage would be better than em's

[ncoden]

We provide an utility to increase the size of the first letter of a block. We do not care if it is a div or a p or whatever.

I didn't have any idea of whether em or % would be better. In _theory_, there is no difference. In practice, we can have a different render across different browser when the text size is changed.

Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.
-- http://stackoverflow.com/a/132704/4317384

To create this component, please look at how the other components are made and create:

• a set of global options (for height, font-size, margins...)
• base and modifiers mixins with arguments (global options by default)
• an foundation-dropcaps mixin to generate classes (.dropcaps).
• docs !

We could also put this in typography, but I prefer the idea of single components instead of "buckets of helpers" like scss/typography is currently. However I would appreciate the @kball 's opinion on this point.

[IamManchanda]

For this I'd look at scss/typography/_headers.scss

@kball its _helpers and not _headers . Would urge you to update your comment !

[IamManchanda]

Update: While trying this for a PR, i found that first-of-type shouldn't be there as it will only select the first div so now its,

dropcaps:first-letter

[ncoden]

_Just open a PR and explain in it what changes you made and why, you do not need to inform us of the whole development process_. ;)

[IamManchanda]

@ncoden I am sorry for that

@kball / nicolas When i am trying to merge my branch with develop , it shows my commit and other 3 commits

but when me trying to merge with master, it shows my commit only

So where should i do request the pull request ? master or develop ?

Special Note: Feature commit only , will leave docs on you !

[DaSchTour]

@IamManchanda you need to create the branch from the release branch. So I guess for new features it should be the 6.4 branch. And than you can point the PR to this branch. If you branch from master and merge to 6.4 you will add additional commits that are not in 6.4

[IamManchanda]

more confused now ! :smiling_imp:
But thanks :)

Do i need to switch branches on my local system or what ?
currently i am on master, both origin and upstream !

[DaSchTour]

@IamManchanda you need to switch the branch on you local system. Than create the new branch from there and than you can push it all to your fork. Than you can select the branch you created on your work and create a PR pointing to the branch you branched from.

[IamManchanda]

Correction Correction : master on upstream , features\css-dropcaps on origin

[IamManchanda]

and that features\css-dropcaps branch is generated from origin master which is a fork of upstream master ie. zurb:develop the current default branch of this repo ..... Hope @DaSchTour it lets you understand my situation better

Sorry was commenting from mobile so by mistake closed the issue

[IamManchanda]

Seems like #9609 is still pending
so we are deferring it to v7