Recently we launched Clique.UI, a lightweight, modular front-end framework for rapid web-interface development. This is the first product that we’ve publicly released with full-documentation, and couldn’t be more excited about it.
After a lot of work and even more testing, we’re calling this release version 1.1.0 – and there will be many more to come. What’s even more exciting about Clique.UI is that we’ve decided to open it up to the public, and make it a completely open-source under the MIT license and hosted on GitHub. We’ll be monitoring this repository closely, so if you find any bugs or want to see a new feature, log it in the repo’s issue tracker.
Of those 53 components is 17 advanced modules that are also completely modular. These include slideshows, drag-and-drop file uploading, input autocomplete rendering, data tables, and much, much more. If you’d like to see all advanced components, check out the “Components” section of the documentation.
To get started with these components or learn how to incorporate them into your website, visit the main Clique.UI documentation.
Why create a new framework?
With dozens of existing front-end frameworks, it might be hard to find a reason to spend the time and energy creating a new one from the ground-up. Clique.UI is our solution to the challenges we’ve faced during the front-end development process, and our attempt to bridge the gap between the needs of large, open-source frameworks like Bootstrap and the needs of our clients.
Our primary goals for creating such a product are:
- Speed. Page load time and performance are extremely important to us at Clique, as each site has to meet unwavering performance benchmarks.
- Responsiveness. The web is trending toward mobile, with more and more users viewing sites on their mobile and touch-enabled devices. Our sites must react the same to user interaction no matter the device or screen size.
- Cross-Browser Compatibility. Every site that we create must look just as good on the latest version of Chrome as it does in earlier version of Internet Explorer without exception.
- Integratability. Our front-end framework has to work just as easily in a static HTML build as it would in a WordPress or Magento site, or any other CMS or web-framework that our clients require.
- Updatability & Source Control. We need to be able to fully understand and control the code that goes into our websites. A heavy reliance on third-party plugins and frameworks can cause problems if we don’t know how or why they were written the way they were.
- Full Documentation. Our code needed to be fully documented with examples, samples, and an understanding of why a component is written the way it is. We also needed to have our documentation available for those clients of ours who have their own development teams that will be performing future updates.
Clique.UI is fully compatible on the following devices and browsers:
- Desktop Mac/PC:
- Google Chrome v. 21+
- Firefox v. 20+
- Internet Explorer v. 9+
- Safari v. 3.1+
- Opera v. 12.12+
- iOS v. 7+
- Android v. 4.4+
- Windows Phone v. 8.1+
How Clique.UI Was Created
The site was compiled using Grunt, a Node.js based task runner that allows for command-line tasks to executed with ease and simplicity. Using Grunt, we’re able to compile the Less and CoffeeScript, lint the source code for any erroneous content (keeping the source as small as possible), clean and minify the code, and run all functional and unit tests.
Creating a front-end framework is a huge undertaking, and, as with any product we create at Clique, testing is of the highest importance to us. With 53 separate and modular components, recursive testing for eight different platforms can prove a daunting task.
To combat this we created a basic kitchen sink page, test pages for each individual component, layout samples, and perform recursive functional testing using CasperJS. By centralizing the components we were able to see them in action all at once in action and either run CasperJS to take screenshots of the test page in each browser/platform/device/
These test and layout pages are public, and we invite you to check them out. If you see any issues, or if something isn’t behaving quite right, we’d ask that you log an issue in GitHub, and we’ll get it taken care of as soon as possible.
Because Clique.UI is open-source, we invite any developer interested in contributing to do so. In order to contribute, perform the following steps:
- If necessary, install Node.js following the steps on their website.
- Clone the Clique.UI repo:
git clone https://github.com/
- Install the required Node packages:
sudo npm install
- Make the changes you’d like in the
- Compile and build the source files:
Clique.UI isn’t a one-off project or something that will sit on the back burner. Our client’s needs are our highest priority, but maintaining a usable, extensible front-end framework helps us meet those needs.