Framy is an uncomplicated CSS framework designed to streamline your web projects by providing essential components for creating modern, responsive interfaces. Whether you’re just getting started or are a seasoned developer, Framy can help enhance your web development experience.

Getting Started with Framy

In this guide, we’ll cover how to use Framy using CDN, npm, and Bower installations. Plus, we’ll provide insights on development setup and helpful resources.

1. Using the CDN

To quickly add Framy to your project, use a Content Delivery Network (CDN). Simply include the following links in your HTML header:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framy-css@latest/dist/css/framy.min.css">
<script src="https://cdn.jsdelivr.net/npm/framy-css@latest/dist/js/framy.js"></script>

If you only need the CSS flexbox grid, include this instead:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framy-css@latest/dist/css/framy.grid.min.css">

You can also specify a version by replacing “latest” with a version number, for example:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/framy-css@2.8.5/dist/css/framy.grid.min.css">

2. Installing with npm

For projects that leverage Node.js, you can install Framy with npm. Run the following command in your terminal:

npm install framy-css

After the installation, link the CSS and JS files in your HTML:

<link rel="stylesheet" href="node_modules/framy-css/dist/css/framy.min.css">
<script src="node_modules/framy-css/dist/js/framy.js"></script>

3. Installing with Bower

If you prefer using Bower, simply run:

bower install framy-css

To utilize Framy, add the CSS and JS files as follows:

<link rel="stylesheet" href="bower_components/framy-css/dist/css/framy.min.css">
<script src="bower_components/framy-css/dist/js/framy.js"></script>

4. Development Setup

For those interested in developing or customizing Framy, you’ll need:

• git
• npm

Start by cloning the repository:

git clone https://github.com/aaroniker/framy-css.git

Next, navigate into the directory and install the necessary npm dependencies:

npm install

You can then run the following commands to compile icons and SCSS files:

• npm run icons – Compile icons to an icon font
• npm run css – Compile all SCSS files
• npm run css-grid – Compile grid-related SCSS files
• npm run watch-css – Watch SCSS files and recompile as needed

Troubleshooting

If you encounter any issues while using Framy, here are some troubleshooting tips:

• Ensure that your link and script tags are correctly spelled and pointing to valid URLs.
• Check your browser console for any error messages that can provide more context.
• If using npm or Bower, ensure they are properly installed and configured in your environment.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Resources

Here are some additional resources that might be helpful:

• Interface Font
• Ikons

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.