If you’ve ever found yourself tangled in cryptic grid codes while building a webpage, you’re not alone. Enter **Pills**, a straightforward CSS grid tailored for those who prefer a more human-friendly approach. In this guide, we’ll walk you through using Pills effectively in your projects.

Why Choose Pills?

• Memorability: Unlike traditional frameworks like Bootstrap, Pills eliminates the need for remembering cryptic codes.
• Simplicity: It offers both traditional columns and a more intuitive, fractional approach to layout.
• Flexibility: Ideal for anyone who wants to work with 12-column layouts while still enjoying simple terminology.

Getting Started with Pills

1. Installation

The easiest way to get Pills into your project is via package managers:

sh
bower install pills

sh
npm install pills

If you prefer, download the zip folder from here, extract it, and copy dist/pills.min.css into your project’s folder.

2. Linking the Stylesheet

Include the following stylesheet in the head section of your HTML file:

html

Note: Adjust the CSS file path if you didn’t use Bower.

3. Setting Viewport Scale

To ensure your layout displays well on mobile devices, add this meta tag to your head section:

html

Using Pills: A User-Friendly Approach

1. Building with Columns

The core of Pills involves using column classes within a row class. Because Pills utilizes a 12-column grid, you can easily allocate space:

html

    

You can also mix columns!

html

    

    

If you want to nest columns:

html

    

        

            

            

        
    
    

You can also offset columns as necessary:

html

    

2. Utilizing Fractional Division

Pills also supports fractional divisions effortlessly. For instance, using the whole column will span the full width:

html

    

To split your layout into halves:

html

    

    

3. Other Useful Classes

Pills provides additional classes for controlling the row widths:

• .wide: Sets the width to 1180px
• .wider: Sets the width to 1366px
• .free-width: Removes max width, allowing full flexibility

Troubleshooting

If you encounter any issues while using Pills, consider the following troubleshooting advice:

• Ensure all paths to files are correct based on your project structure.
• Check the browser’s console for errors that may indicate where the problem lies.
• Review your HTML structure to ensure you haven’t mismatched opening and closing tags.
• If you need additional help, you can reach out via fxis.ai for insights and updates.

Conclusion

Pills is a fantastic addition to your CSS toolkit for anyone looking for a more intuitive way to manage grid layouts. By focusing on simplicity, it caters to a wide range of users. At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.