noupe
THE magazine for webworkers and site owners
In 2011, the first version of Bootstrap (then called Twitter Bootstrap) came out. It was a product of Twitter’s UI team and was a framework aimed at simplifying the creation of professional looking applications across the Web. It’s release revolutionized how developers used CSS – it took what was often a bespoke, unruly approach to...
First of all, what’s a preprocessor? In a nutshell, a preprocessor is a computer program that modifies data to conform with the input requirements of another program. For CSS, a preprocessor is a scripting language that extends the capabilities of regular CSS with variables, nested rules, functions, and logical blocks.
The way we design websites has undergone some more and some less radical changes over the past years. With the introduction of CSS flexbox, a major change has taken place. Shortly after, a new layout model, CSS grid, joined the party. Which of them is the better choice for which job? Do I have to...
Instead of wasting your time with Candy Crush, or by going through irrelevant tweets, you could use your time on the train, the toilet, or in the boring team meeting to learn CSS or to refresh your knowledge.
All of us have large references of our favorite tech publishers in our shelves, and we know the monumental guide sites à la SelfHTML and others. Oftentimes, we wouldn’t even need the massive encyclopedia, as a slim helper would suffice to do the trick. Just checking something real quick. What was that again?
With the introduction of CSS3, design options for websites have changed a lot. Especially animations and transparencies are commonly used ever since. However, there are a lot of attributes that are rarely seen. The lack of browser support is not a good enough reason to forgo these options anymore. Thus, in your next project, you...
Animated font effects are real eye-catchers. Used correctly, they can enhance your design. Moving Letters provides you with 16 fantastic visuals.
The small collection Mashup Template provides free templates as HTML/CSS, Sketch, and NPM. The design is very contemporary and definitely worth a look.
Codepen user Kseso convinces us with a simple but impressive application case for CSS Grid, by creating a clean Masonry layout from pure HTML and CSS.
Previously, proper grid based layouts were only possible via inconvenient ways. The new CSS grids, which have been available in the newer versions of the popular browsers for a little while now, finally allow for these layouts. In Firefox, at least in the Nightly version, there’s a new layout panel in the inspector of developer...
The syntax of CSS Flexbox isn’t that easy to grasp. If you don’t deal with it on a daily basis, you’d rather use something more straightforward if and as needed. The tiny CSS framework Taffy is that thing.
Color gradients spice up the occasionally boring flat design. Thus, it’s always useful to have a couple of options at hand.
Mavo allows you to create web apps for storing and editing of data without requiring any programming skills. It’s an expansion for HTML and very easy to learn.
CSS Grid is the new trend in web design. After the modern browsers have been supporting this set of different CSS attributes for a while now, it is time to look into it. “CSS Grid Garden” helps you with that.
The freely usable web app “CSS Icon” does not only deliver pictograms in pure CSS for free, but it also allows you to define animated transitions between any two of the package’s symbols.
Bringing your concept to life is a thorny path that as a rule consists of at least three main stages: prototyping a PSD draft; converting it into an HTML/CSS version spiced up with JavaScript; and further transformation of a template into a CMS theme or enhancing it with server-side functionality usually realized with the help...