Foundation CSS Float Grid Importing - Coding

Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device.

The Float Grid system is a 12-column grid system based on flexbox.

Importing: We need to some changes to the CDN link of the foundation. In the CDN link replace “foundation-float.css” in place of “foundation.css”

CDN Link:

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation- float.min.css”>

Example 1: The following code demonstrates an example of float grid importing.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <!-- Foundation CSS CDN link -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"> 
    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"> 
  
    <!-- Float grid importing -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"> 
      
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <style> 
        .row { 
            border:2px solid red; 
        } 
        .bg { 
            text-align:center; 
        } 
    </style> 
</head> 
<body> 
    <h2 style="color:green;text-align:center"> 
        GeeksforGeeks 
    </h2> 
    <p class="bg"> 
       <strong>Foundation CSS Float Grid importing</strong> 
    </p>  
      
    <div class="row"> 
        <div class="columns small-2" 
            style="background-color:yellow;"> 
            GFG 
        </div> 
        <div class="columns small-10" 
            style="background-color:rgb(9, 249, 97);"> 
            FLOAT GRID 
        </div> 
    </div> 
    <div class="row"> 
        <div class="columns small-3"  
            style="background-color:rgb(56, 11, 220);"> 
            GFG 
        </div> 
        <div class="columns small-9" 
            style="background-color:rgb(14, 218, 241);"> 
            FLOAT GRID 
        </div> 
    </div> 
      
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
</html> 

Output:

Example 2: The following code demonstrates another example of float grid importing.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <!--Foundation CSS CDN-->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"> 
    <!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-prototype.min.css"> 
  
    <!-- float grid importing -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation-float.min.css"> 
      
    <!-- Compressed JavaScript -->
    <script src= 
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> 
    </script> 
    <style> 
        .row { 
            border:2px solid black; 
        } 
        .bg { 
            text-align: center; 
        } 
    </style> 
</head> 
<body> 
    <h2 style="color:green;text-align:center"> 
        GeeksforGeeks 
    </h2> 
    <p class="bg">  
        <strong>Foundation CSS Float Grid importing</strong> 
    </p>     
    
    <div class="row"> 
        <div class="columns medium-3" 
            style="background-color:rgb(236, 23, 41);"> 
            GFG 
        </div> 
        <div class="columns medium-3" 
             style="background-color:rgb(212, 14, 152);"> 
             GFG 
        </div> 
        <div class="columns medium-3" 
             style="background-color:rgb(96, 14, 226);"> 
             GFG 
        </div> 
    </div> 
    <div class="row"> 
        <div class="columns medium-3"  
            style="background-color:rgb(0, 183, 255);"> 
            GFG 
        </div> 
        <div class="columns medium-3" 
            style="background-color:rgb(0, 255, 106);"> 
            GFG 
        </div> 
        <div class="columns medium-3 end" 
              style="background-color:rgb(255, 179, 0);"> 
            GFG  
        </div> 
    </div>     
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
</html> 

Output:

Reference: https://get.foundation/sites/docs/grid.html

Reffered: https://www.geeksforgeeks.org

CSS

Related
Bulma Container Absolute maximum width
Bulma Spacing Configuration
Spectre Browser - Support
Foundation CSS Tabs and URLs
Bulma Responsiveness Breakpoints

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12