function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
pintoo rajputpintoo rajput 

How can i implement Foundation-Zurb in visualforce Page

H!! my code is below

<apex:page sidebar="false" standardStylesheets="false" showHeader="false" applyHtmlTag="false">
<head>
    <apex:stylesheet value="{!URLFOR($Resource.FoundationAssets, 'css/normalize.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.FoundationAssets, 'css/foundation.min.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.FoundationAssets,'js/vendor/jquery.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.FoundationAssets,'js/foundation.min.js')}"/>
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head> 
<body>
<!-- Button trigger modal -->
<a href="#" class="button" data-reveal-id="myModal" data-reveal="">Click Me For A Modal</a>

<!-- Modal -->
<div id="myModal" class="reveal-modal medium">
  <h2>Awesome. I have it.</h2>
  <p class="lead">Your couch.  It is mine.</p>
  <p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
  <a class="close-reveal-modal">&#215;</a>
</div>
</body>
</apex:page>
James LoghryJames Loghry
This is a rather vague question, but essentially, you just need to add the appropriate classes, divs, and other HTML structure in your visualforce page in order to use it.  Looks like you have a good start.  I would continue by googling for zurb examples and start plugging them into your Visualforce page and seeing how they work or don't work.  Good luck.
JamieSmithJamieSmith
<a class="FB_SN_Comment_2"  data-reveal-id="FB_SN_Comment_2" >
    <span>
        <i class='fi-page-edit' style='color: green;'></i>
    </span>
</a>

<div id="FB_SN_Comment_2" class="reveal-modal" data-reveal="true" aria-labelledby="Comments" aria-hidden="true" role="dialog">
                                                
    <h2 id="Comments">Add Comment</h2>

    <p class="lead">{!$Label.FB_SN_Comment_2}</p>

    <div class="row" style="margin-bottom: 10px;">
          <div class="medium-6 columns">
                     <apex:inputField value="{!objectName.FB_SN_Comment_2__c}" />
          </div>
 </div>

  <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>

That's how I have a Foundation modal working in a visualforce page. A lot of the code is more for style but...

Noticed that you had:
data-reveal=""

 and not 
data-reveal="true"