Alum Builds Lightweight CSS Framework for Prototyping & Hackathons

Alum Alexander Gugel, currently working for at their new location in Amsterdam, wanted a simple library that covered the needs of most basic CSS projects. Finding flaws in the available options, he made his own, and so Papier was born. CSS, a language used to provide color and style to the various elements of a webpage, is used by beginning programmers and expert web designers. Papier covers CSS’ most frequently used functions, such as styling buttons, changing typography and altering charts and tables.

“The basic idea is to keep it as lightweight as possible,” Gugel explains. “It covers 80% of the use cases. I decided to make something fast and efficient and not worry about the most complex 20% of projects.”

css, hack reactor alumni, css framework, programming framework

Papier, built by alum Alexander Gugel, streamlines CSS' most commonly used functions, such as designing a grid system.

Gugel drew inspiration from two Google projects, Polymer and Material Design, both of which seek to make web design a more visual and intuitive process for the designer.

Papier saves processing power and time over larger frameworks, such as Bootstrap, which is bulkier and has more of a learning curve. For simpler projects, avoiding the complexity of a large framework makes for faster work for the computer and the user.

“One thing I didn’t like about big frameworks is that you have to add a ton of clauses just to include a button,” notes Gugel. “Papier prioritizes convenience over semantics.”

Because of its straightforward, lightweight nature, Papier can be picked up quickly.

“If you know some basics in HTML, you should be able to pick Papier up in half an hour,” says Gugel.

The project used normalized CSS as a foundation, and was built using Myth and Stylus. Papier is compatible with most major browsers.

“It’s great for prototyping or hackathons,” says Gugel. “You just dump it in, and it should do great without adding something as big as Bootstrap. It’s really handy if you just want to get something done or if you’re just playing around.”

Want to learn to turn your own ideas into code? Apply to our immersive program, online or onsite, today.

Read more:

Alum Adds Surveyor-Tracking Functionality to SolarCity App

Understand Uber Surge Pricing with Interactive D3 Data Visualization

Student Builds Angular Library of Visual Transitions, ng Community Responds with Enthusiasm