Tag Archiv: php
In this post we are going to talk about two CSS properties that not a lot of web developers know about. They are called object-fit and object-position and both have to do with styling images and video.
First, we’ll show you how to use them and go into detail covering all the important specs. After that, we’ve prepared for you a tiny demo app, in which you can play around with the properties and see them in action. Let’s begin!
Object-fit
With object-fit we can address how an image (or video) stretches or squeezes itself to fill it’s content box. This is needed when a photo we have has a different size or aspect ratio from the place we’ve designated for it in a layout.
Traditionally, to solve this problem one would create a div and set background-image and background-size. Modern CSS, however, allows us to simply add an image tag, set it’s source as usual, and then apply object-fit directly to the image selector:
img {
width: 100%;
object-fit: cover;
}
The possible values it receives are:
- fill (default) – The width and height of the image match those of the box. Most of the times this will mess up the aspect ratio.
- cover – The image keeps its aspect ratio and fills the whole box, parts of it are cropped and won’t be shown.
- contain – The image keeps it aspect ratio and enlarges/shrinks to fit inside the box.
- none – Original size and aspect ratio.
- scale-down – Displays like one of the above, depending on which produces the smallest sized image.
Object-position
This property defines where inside the container the image will be positioned. It takes two numerical values, one for the top-bottom axis and another for the left-right axis. These numbers can be in percentages, pixels or other measuring units, and can be negative. Some keywords such as center, top, right, etc. can be used as well.
By default an image is positioned in the center of a container, so the default value is:
img {
object-position: center;
/* which equals */
object-position: 50% 50%;
}
Playground Demo
Reading about CSS properties is one thing, testing them out for yourself is a whole different story. Below is a demo page which will help you get the hang of object-fit and object-position in no time. In it you can test the properties and give them different values to see how they can transform a media object. Don’t be afraid to open up DevTools as well.
Browser Support
Following the tradition of all cool CSS features, the browser support for object-fit and object-position is rather inconsistent and in this case it’s IE and Edge that offer no support at all. While waiting for all Microsoft browsers to adopt the two properties you can use this polyfill which fixes the issue nicely. Also, it’s always a good idea to set a background color to all image containers as a fallback.
Conclusion
The object-fit and object-position properties can be of great help when building responsive web pages. They are easy to use and remember, and do their job perfectly. We are sure that once IE and Edge adopt them, they will quickly become a part of every web developer’s CSS toolbox.
Thanks for reading!
In this post we bring you our monthly collection of web dev libraries, frameworks and plugins that we’ve recently come across. Each one of them is handpicked and we’ve tried our best to select tools that are useful, reliable, and built with the latest trends in mind. Enjoy!
An official Microsoft open-source project, this is a framework for building web apps that follow the look and feel of desktop MS Office programs. It works in a similar fashion to Bootstrap: HTML and CSS components, a responsive grid, and a lot of jQuery add-ons.
This library allows developers to add unique peel-off stickers to their web projects. Any element on the page can be transformed into a sticker and when somebody hovers on it a realistic animation is applied. This library has no external dependencies – only vanilla JavaScript and smooth CSS3 animations are used.
Cash is a lightweight alternative to jQuery. It provides the same syntax and many of the popular jQuery methods and features, rewritten using modern JavaScript, resulting in a library only 8kb in size (compared to the 32kb of jQuery). If you don’t need to support old IE and think jQuery has become too big through the years, give Cash a try.
Popper is a JavaScript library for adding tooltips and popovers to HTML elements. It offers a ton of customization options and is fully modular with separate plugins for every feature. Popper is fairly complicated compared to other tooltip libraries, while still being very easy to use and small in size.
A Material Design themed date and time picker built on top of jQuery and Momentjs. To use it you just have to bind it to an input field, set the options you need, and decide if you want a date picker, time picker or both. When a user clicks on the input, a modern looking dialog will pop up containing an Android inspired calendar or clock.
A free UI kit that combines the familiar syntax of Bootstrap with the modern looks of Google’s Material Design. There are other similar projects such as Material Design for Bootstrap and Bootswatch Paper Theme, but Material Kit, being the newest, has learned from the older frameworks and offers a polished product with neat styles and lots of components.
Skeleton is a responsive CSS library that will turn a bland HTML project into a stylish one with practically zero effort. Unlike Bootstrap and other UI frameworks where you have to add a ton of classes to the HTML, Skeleton requires just a handful of classes and automatically styles everything else. The library is extremely lightweight, featuring just a simple 12 column grid and the most basic components.
As most web developers know, the default HTML checkboxes and radio buttons look horrible and are a huge pain to customize correctly across all browsers. That’s why there are countless libraries that help you do this, and iCheck is probably the coolest of them all. It offers several unique themes, is heavily customizable, and even has IE6+ and mobile browser support.
Stylefmt is a PostCSS module that automatically formats CSS and SCSS stylesheets. You can write your own format rules or use the standard ones to make the CSS of your project look the same, no matter who wrote it. Stylefmt is available everywhere – as a CLI, a node.js module, and as a plugin for popular text editors or task runners.
Turn any text on your web page into a twitter share button. Just add a span with the right attributes and InlineTweet will automatically turn the selected text into a link. When someone clicks on it, it will generate a tweet, including hashtags and a URL going back to your page.
SmoothState is a brave project that turns your ordinary web sites into single page apps. The way this works is it prevents links from opening new pages and instead injects them into the current one using AJAX, while manipulating the browser history and URLs, as if the page has changed. Add a cool loading animation while the AJAX request finishes and you’ve got yourself a SPA.
In just 700 bytes gzipped, nanobars enables web developers to quickly create fully functional progress bars. The library has a very tiny pool of methods and options but gives you exactly what you need – a function to initialize a new bar, and another one to change it’s progress.
This is a jQuery plugin that allows deveopers to add a blur filter to images. Usually this can be done using the CSS filter property, but the browser support for it is still pretty bad. By using this plugin you can make sure that the blur effect will work equally well in all mainstream browsers.
With TypeIt you can create animation effects that will display a string as if it is being typed out. The library offers all the features you might think of such as looping animations, controlling the typing speed, replacing a string with a new one, and others.
CSS animations are way more memory efficient than their JavaScript counterparts, but can still slow down a web page if they are not done correctly. Applying transition effects to the width, height, top or left of an element causes a redraw of the DOM and occupies the GPU. Instead, the transform property should be applied and the guys behind Repaintless have used this to create the most buttery-smooth animation library possible.
In this installment of our freebie series, we’ve prepared for you a collection of 6 templates for pagination menus and tab controls. We’ve built them without relying on any frameworks, so adding your own content or customization is as easy as editing a bit of HTML and CSS.
Pagination
For paginations we’ve come up with two designs – one standard with page numbers and next/prev buttons, and the other with next/prev buttons and a dropdown. Both of them are simple and clean, so they should look great in almost any layout.
Basic Pagination Template
Tabs
Here we give you the option to choose between four different designs. We know that creating working tabs from scratch can be a bit tedious, so we’ve also included a short jQuery snippet in them to enable switching between the tab pages.
Underlined Tabs Template
How to use
To use any of the templates from the demo, follow these steps:
- Grab the zip archive from the Download button near the top of the page and extract it.
- Open the .html file for the template you want, copy the code inside the
<body> and paste it in your project.
- The styles are located in separate CSS files for each design. You can find them in the /assets/css folder. We’ve made sure our CSS is self contained and won’t break anything in your own styles.
- Replace our placeholder content with your own and add more buttons/tabs if you need to.
Free for Commercial Use
All of the templates are completely free and can be used in both personal and commercial projects. Don’t worry, you don’t have to include any form of attribution either! Enjoy :)
While developing web layouts, at some point you’ve probably run into this issue:
This obviously broken layout happens when a footer is positioned statically at the end of the body, but the page doesn’t have much content. There is nothing to push the footer down enough and it stays in the middle of screen, leaving a huge area of whitespace below it.
In this quick tutorial we’re going to take a look at a modern technique for building footers that are guaranteed to stick to the bottom of the page at all times.
The Technique
To prevent the above from happening we will be building our page using flexbox, the most advanced tool CSS3 has to offer for building adaptive layouts. For those of you not familiar with the flexbox model and its properties, we will leave a couple of links at the end of the article.
Our simple demo page will have a header, main section, and a footer. Here is the HTML, nothing extraordinary there.
<body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>
To enable the flex model we add display: flex to the body, and change the direction to column (the default is row, which is a horizontal layout). Also, the html and body will need 100% height to fill up the whole screen.
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
Now we need to adjust how much space each section will take up. We’ve done this via the flex property, which bundles together three flex- specs into one:
- flex-grow – Defines how much of the available free space in the container goes to an element.
- flex-shrink – How much an element will shrink when there isn’t enough space for everything.
- flex-basis – The default size for an element.
We want our header and footer to take up just as much space as they need, and everything else to be reserved for the main content section. The CSS for such layout looks like this:
header{
/* We want the header to have a static height,
it will always take up just as much space as it needs. */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
.main-content{
/* By setting flex-grow to 1, the main content will take up
all of the remaining space on the page.
The other elements have flex-grow: 0 and won't contest the free space. */
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 1 0 auto;
}
footer{
/* Like the header, the footer will have a static height - it shouldn't grow or shrink. */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
To see this technique in action, check out our demo page by clicking the image below. Using the big pink button you can change the amount of content to help you observe how the layout adapts and pushes the footer to the bottom at all times.
Conclusion
As you can see flexbox is a powerful ally when building layouts from scratch. All mainstream browsers support it, with a few minor exceptions, so its pretty much safe to use it in all IE9+ projects – Can i use flexbox.
Here are a some awesome lessons and cheatsheats for learning more about the flexbox layout model:
- A quick guide to flexbox by CSS-Tricks – here.
- Solved by Flexbox, a website dedicated to cool flexbox techniques – here.
- 5-minute interactive lesson – here.
We hope you liked our way of creating sticky footers and that you’ve picked up something new and useful from the article. Leave us a comment if you have a cool flexbox trick of your own!
In this article we’ve gathered for you a collection of 15 awesome JavaScript and CSS libraries. Each one of them presents different solutions to common frontend tasks and can be of great help to both beginner and advanced developers. Check them out, you might find the perfect tool for your next project!
Hamburgers is a collection of over 20 hamburger menu buttons. All of them have unique well-made animations that are done with pure CSS and are guaranteed to run as smooth as possible. A Sass version is also available for those of you who use pre-processors in your projects.
This is a great resource containing a selection of well-designed, CSS-only loaders. Adding them to your website or app is very straightforward and probably the hardest part of doing so is choosing the loader you like most (our favorite is the pacman one).
Grd, as it’s name suggests, is all about building grid layouts. The library is made with pure CSS, utilizes the flexbox model properties, and offers only the most necessary and useful features. All these factors result in a very small framework – just 512 bytes when Gzipped.
With Superplaceholder you can add one or more messages of your choice as placeholders to input fields. The library will then display these messages with a cool animation as if someone is typing them in. Thanks to the rich customization options, you have a great deal of control over how and when the animations will be shown.
Slick is probably the most complex and feature-rich carousel plugin out there. It enables manipulating every imaginable setting but does it in a user friendly way, thanks to it’s well built API.
This futuristic library allows you to create virtual reality experiences using only good ol’ web technologies. After you’ve created your 3D world in HTML, A-frame will take it and split it into two screens with slightly different viewing angles. Now, you can run your demo on your mobile phone using Google Cardboard or another headset and have some serious VR fun.
Infinite scrolling is getting a bad rep from both developers and users – it’s often difficult to implement and frustrating when not done properly. Lavalamp is a JS plugin that offers a great alternative to infinite scrolling. Instead of automatically loading new content, you can add buttons at the top and bottom of the page for loading previous or next items.
Drift is an open-source JavaScript library for adding zoom-on-hover and magnifying glass effects to your website’s images. It has great browser support, no external dependencies, and is relatively easy to implement.
With this library you can add progress bars to any HTML element of your choice, including tricky ones such as input fields, images and video. Every aspect of the bars can be modified either by the library’s options or custom CSS styles.
In just 995 bytes, Min is one of the world’s most compact CSS frameworks. In its tiny package Min contains a classic 12-column grid, a good number of components and has great browser support.
This JavaScript and CSS library offers a fresh new take on responsive navigation menus. Instead of creating a bar that is displayed in its entirety on desktop and is collapsed on mobile, OkayNav tries to fit as many nav items as possible in the current browser size.
A CSS library for building advanced grid layouts. With Pintsize you have the option to create both Bootstrap-like grids and flexbox grids that adapt to the size of the content. The project’s website has a good examples section including browser support and code snippets.
Velocity is a JavaScript animation engine that combines the well-known API for jQuery’s animate(), with pure CSS animations to provide fast, reliable, and easy to use transitions. If you find yourself using jQuery only for animating elements, you can seamlessly switch to Velocity for better performance.
This CSS only library allows developers to add on-hover tooltips to elements on the page without including a single line of JavaScript. By adding data attributes to the HTML you can specify the content to be shown, the direction of the pop-up and other customization options.
Small JavaScript library for animating SVGs as if they are being hand drawn. It has many options for animation style and even gives developers the ability to make their own. Vivus is inspired by this awesome Codrops article, it has some breathtaking demos, go check them out!
We’ve already covered Angular.js and React in previous articles but there is a new frontend library that we think is worth your time. It’s called Vue.js and it has gathered a large community of enthusiastic developers.
The philosophy behind Vue.js is to provide the simplest possible API for creating real-time, two-way data binding between the view (HTML) and the model (a JavaScript object). As you will see in the following examples, the library holds true to that idea and working with it is effortless and enjoyable, without compromising on any functionality.
Getting Started
The easiest way to install Vue.js is to simply include it with a <script> tag at the end of your HTML’s body. The entire library is located in a single JavaScript file which you can download from the official website or import directly via CDN:
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
If you want to use the library in a Node.js project, vue is available as an npm module. There is also an official CLI, which allows users to quickly setup their whole project based on premade template builds.
Below are five editors containing example apps we’ve built for you. The code has lots of comments and is separated in tabs for each file, making it really easy to follow. The editors have Vue.js built-in so don’t be afraid to experiment. Also, you can download an archive containing all the examples from the Download button near the top of this article.
1. Navigation Menu
To kick things off we’re going to build a simple navigation bar. There are a few basic components almost every Vue.js app need to have. They are:
- The model, or in other words our app’s data. In Vue.js this is simply a JavaScript object containing variables and their initial values.
- An HTML template, the correct terminology for which is view. Here we chose what to display, add event listeners, and handle different usages for the model.
- ViewModel – a Vue instance that binds the model and view together, enabling them to communicate with each other.
The idea behind these fancy words is that the model and the view will always stay in sync. Changing the model will instantly update the view, and vice versa. In our first example this is shown with the active variable, representing which menu item is currently selected.
(Play with our code editor on Tutorialzine.com)
As you can see working with the library is pretty straightforward. Vue.js does a lot of the work for us and provides familiar, easy to remember syntax:
- simple JavaScript object for all the options
{{double brackets}} for templatingv-something inline attributes for adding functionality directly in the HTML.
2. Inline Editor
In the previous example our model had only a couple of predefined values. If we want to give the users the ability to set any data, we can do two-way binding and link together an input field with a model property. When text is entered, it is automatically saved in the text_content model, which then causes the view to update.
(Play with our code editor on Tutorialzine.com)
Another thing to note in the above code is the v-if attribute . It show or hides a whole element depending on the truthfulness of a variable. You can read more about it here.
3. Order Form
This example illustrates multiple services and their total cost. Since our services are stored in an array, we can take advantage of the v-for directive to loop through all of the entries and display them. If a new element is added to the array or any of the old ones is changed, Vue.js will automatically update and show the new data.
(Play with our code editor on Tutorialzine.com)
To display the prices in a correct format we use one of the available filters that come built-in with Vue.js. They allow us to lazily modify the model data – in this case the currency filter is perfect, as it adds a dollar sign and proper number decimals. Just like in Angular filters are applied using the | syntax – {{ some_data | filter }}.
4. Instant Search
Here we will create an app, that exhibits some of the articles on our website. The app will also have a search field allowing us to filter which articles are displayed. There is a filterBy filter available, but it doesn’t do exactly what we need it to, so instead we will be creating our own custom filter.
(Play with our code editor on Tutorialzine.com)
The input field is bind to the searchString model. When text is entered the model is instantly updated and passed on to the searchFor filter. This way we can create a real-time search without having to worry about rendering or setting up event listeners – Vue.js handles all that!
5. Switchable Grid
In our last example we will demonstrate a common scenario where a page has different layout modes. Just like in the previous app we will be showing a list of articles from tutorialzine.com stored in an array.
By pressing one of the buttons in the top bar you can switch between a grid layout containing large images, and a list layout with smaller images and text.
(Play with our code editor on Tutorialzine.com)
Conclusion
There is a lot more to Vue.js than what we’ve showcased in these examples. The library also offers animations, custom components and all sorts of other features. We recommend you check out the excellent official documentation which is full of information and helpful snippets.
Having troubles deciding whether Vue.js is the right library for your project? The following links will be of great help to you:
- An official, detailed comparison with other frameworks – here.
- TodoMVC – a website where the same app is recreated with many different frameworks.
- Our articles where we’ve done similar examples using React and Angular.js.
Thanks for reading!
Material design was developed by Google, with the basic idea to create a unified style for all of the company’s web and mobile apps. It is based on many principles including things like proper animations, responsiveness, and smart usage of colors and shadows. You can read about the guidelines in full detail here.
Although Google’s design language is seen mainly in native Android apps, it’s still a great choice for web and hybrid applications. To aid users in the creation of web projects rocking the Material look, there are many frameworks and libraries offering ready-to-use components and styles. Here is our list of the top 15!
Material Design Lite is an official Google framework, so you can always expect the components to be up to date with the latest standards of the visual language. It looks fantastic, is relatively easy to use, and has no external dependencies.
This is a front-end framework for building responsive web apps and sites. It’s really simple to get started with, especially to people familiar with other similar projects, such as Bootstrap. A cool feature is the SASS version, which allows users to choose which components to include.
Material-UI is a rich set of React components implementing Material Design principles. This is a very polished library featuring pixel-perfect CSS styles and animations. There are also two separate themes for users to choose from – dark and light.
This is one of the most lightweight framework on our list, without any external dependencies and only 12kb gzipped for the CSS and JS. It offers React support, customization via SASS files, and has a separate inline version for styling emails.
Polymer is another Google product on our list. It’s a library for building fast, reusable web components which then you can import in your projects. Polymer offers a big selection of ready-to-use elements, organized in seven categories. One of them is called Paper and is full of Material Design components.
This is an extension library for the Ionic hybrid mobile app framework. It adds new classes, methods and helpers alongside a fresh set of CSS styles to bring the Material look to Ionic, without changing the way apps are developed with the framework.
The Zurb Foundation framework is another popular tool for building responsive websites and apps. This is an independent set of components that offers a quick way to add a Material twist to some of Foundation’s elements. It looks pretty good but doesn’t include many key Material Design components.
The result of a two-week long experiment, Surface is a CSS only framework in which many of the classic Material UI components are recreated without the help of any JavaScript or other programming languages. Since it consist of just one CSS file, it’s extremely lightweight and easy to use.
Essence is a CSS framework based on React and React Native. It allows developers to build super-fast and at the same time great looking web & mobile interfaces, implementing the Material Design specification. Using npm you can install the whole library, or just the modules you really need.
This Angular.js-like framework provides many, well-animated CSS and JavaScript components. For the layouts and styles LumX uses the Sass-based library Bourbon, and for the animations the popular Velocity.js. By combining these and some other plugins, LumX is able to offer a wide range of tools for building responsive web apps.
The guys at Boostwatch make a lot of cool Bootstrap themes, including one imitating Material Design, called Paper. It doesn’t have all of the classic Material components, but it is still a great option for people who already work with Bootstrap, since they don’t have to change absolutely anything (except for importing the theme) to get a modern looking app.
Another great option for Bootstrap enthusiasts. This is an actively updated theme for the front-end framework, which adds new styles and a number of JavaScript and jQuery plugins to apply Google’s design language to Bootstrap. A big plus here is the active community on GitHub (over 14000 stars).
AngularJS is a hugely popular open-source framework for web development. It’s primarily maintained by a team in Google, so it’s no surprise it gets is own version of a Material Design kit. For now it works only with Angular 1, but it most probably will get a port for the second version as well.
You can think of Material as a UI framework that is the perfect mix between Bootstrap and MDL – it works very similarly to Bootstrap (almost the same grid and HTML), but adds on top of that many Material components such as cards and pop-out date pickers. Most of the traditional Material Design elements are present here and are made to look spot on.
The Photon framework is dedicated for the development of hybrid mobile apps. Since it’s only around 60kb and does not depend on any third party libraries, it can be used to create Cordova and PhoneGap applications that are very lightweight. The look and feel of Photon’s UI components follow closely Material Design’s concepts.
A Suggestion From Our Readers: Framework7
Framework7 is a created with hybrid mobile apps in mind. It allows developers to quickly build web apps that imitate the appearance and behavior of native iOS and Android. To make that possible there are two distinct themes – one for Apple devices, and the other one offering Material Design components and styles.
This is the icon set that Google uses in most of their web, Android and iOS apps. There is a huge list of icons to chose from and more are being added all the time. It’s completely free and very easy to implement through Google Fonts or other methods.
Conclusion
Most of the libraries and frameworks on our list offer similar components and overall features. It’s up to every individual developer to decide which one works best for them and their current project. We hope we’ve helped you make the right choice!
When web projects grow bigger, their CSS usually becomes astronomically large and often times messy. To help us deal with this, new CSS variables are soon to hit mainstream browsers, giving devs the ability to reuse and easily edit repeatedly occurring CSS properties.
We’ve shown you how awesome stylesheet variables can be in our Sass and Less lessons, but these are pre-processors and require compiling before use. Now that variables are available in vanilla CSS, you can use them right away in your browser!
Defining And Using CSS Variables
Variables follow the same scope and inheritance rules like any other CSS definition. The easiest way to use them, is to make them globally available, by adding the declarations to the :root pseudo-class, so that all other selectors can inherit it.
:root{
--awesome-blue: #2196F3;
}
To access the value inside a variable we can use the var(...) syntax. Note that names are case sensitive, so --foo != --FOO.
.some-element{
background-color: var(--awesome-blue);
}
Support
Right now, only Firefox supports CSS variables out the box. However, versions 49 and up of Google Chrome will also ship with the feature enabled. If you are still on the older version of Chrome 48, you can enable this and some other new technologies by going to chrome://flags/ and finding Enable experimental Web Platform features. You can get more details here – Can I Use CSS Variables.
Below are a couple of examples, showcasing typical usage of CSS variables. To make sure they work properly, try viewing them on one of the browsers we’ve mentioned above.
Example 1 – Theme Colors
Variables in CSS are most useful when we need to apply the same rules over and over again for multiple elements, e.g. the repeating colors in a theme. Instead of copy-and-pasting every time we want to reuse the same color, we can place it in a variable and access it from there.
Now, if our client doesn’t like the shade of blue we’ve chosen, we can alter the styles in just one place (the definition of our variable) to change the colors of the whole theme. Without variables we would have to manually search and replace for every single occurrence.
For this demo to work properly make sure you are using one of these browsers.
(Play with our code editor on Tutorialzine.com)
Example 2 – Human Readable Names For Properties
Another great use of variables is when we want to save a more complex property value, so that we don’t have to remember it. Good examples are CSS rules with multiple parameters, such as box-shadow, transform and font.
By placing the property in a variable we can access it with a semantic, human readable name.
For this demo to work properly make sure you are using one of these browsers.
(Play with our code editor on Tutorialzine.com)
Example 3 – Dynamically Changing Variables
When a custom property is declared multiple times, the standard cascade rules help resolve the conflict and the lowermost definition in the stylesheet overwrites the ones above it.
The example below demonstrates how easy it is to dynamically manipulate properties on user action, while still keeping the code clear and concise.
For this demo to work properly make sure you are using one of these browsers.
(Play with our code editor on Tutorialzine.com)
A Few More Tips
As you can see CSS variables are pretty straightforward to use and it won’t take much time for developers to start applying them everywhere. Here are a few more things we left our of the article, but are still worth mentioning:
- The var() function has a second parameter, which can be used to supply a fallback value if the custom property fails:
width: var(--custom-width, 20%);
- It is possible to nest custom properties:
--base-color: #f93ce9;
--background-gradient: linear-gradient(to top, var(--base-color), #444);
- Variables can be combined with another recent addition to CSS – the calc() function. Sadly, this works only in Firefox for now.
--container-width: 1000px;
max-width: calc(var(--container-width) / 2);
This concludes our article! Have fun trying out this new CSS feature but remember that this is still considered an experimental technology. For now, avoid using it in serious projects and aim to always provide fallbacks.
In this post we present to you four templates for pricing tables. They are ready to use and absolutely free, so you can implement them in your projects right away. Just like the rest of your freebies, these tables have no external dependencies and are made up entirely out of vanilla HTML and CSS.
The Pricing Tables
The idea behind these tables is to quickly sum up and present the different pricing options or subscription plans available for your services. They need to showcase all the important info customers have to be familiar with, in order to choose and purchase a product.
You can get the zip archive containing all our templates from the Download button near the top of the page. With their help you can effortlessly add good looking pricing tables to your website without making almost any changes to your code. Just grab the HTML, add the corresponding CSS from the assets folder, and substitute our dummy content with your own. That’s it!
Our pricing tables don’t require any libraries and their CSS is self-contained, so they are guaranteed to work without causing anything in your page to break.
Pricing Table Clean
Free for Commercial Use
You have all rights to customize and use these templates. They are 100% free and can be implemented in both personal and commercial projects, no attribution required (our license page). Enjoy!
The world of web development keeps expanding as new frameworks, libraries and plugins are created everyday. To keep you up to date with all the cool toys, we made this collection of our favorite JavaScript and CSS tools you should try in February 2016.
Super simple slider is jQuery plugin which provides you with a functional and lightweight slider. To set it up just place your content in an empty element and call the plugin. If your content is of different heights, the plugin will animate smoothly to accommodate it.
Chartist is a JavaScript library which helps you present your charts in interesting ways. With CSS animations your charts are clear and eye-catching. Chartist provides you with a simple configuration override mechanism based on media queries to help you control the behavior of your charts.
Griddle is a useful grid component using React. With a lot of powerful functionality like filtering, paging, infinite scrolling and sub-grids, you can easily customise it to fit your project. Rendering is optimized so that only the current page of results is generated.
Textillate.js is a jQuery plugin which uses animate.css and lettering.js to apply eye-catching animations to text. To use it, include the plugin’s JavaScript file alongside the libraries it depends on and start creating unique effects.
Slideout is a JavaScript library which helps you set up touch slideout navigation menu for your mobile web apps. It doesn’t have any dependencies, has simple markup and uses native scrolling, so that it works smoothly on mobile devices.
Awesomplete is a simple and lightweight widget with no dependencies. By default the library expects the list of suggestions to be passed as a data attribute, but you can easily hook it up to your back-end with a simple AJAX request.
Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps. You cantake full advantageof page caching in your web applications, because the timestamps aren’t calculated on the server.
Ramjet is a JavaScript library which helps you make animations transforming one element into another. It supports images and GIFs so that you can build the perfect landing page. You can also use an easing function to make the transformation seem more natural.
Patternizer is an online tool that helps you generate patterns. After you choose options like opacity and width, just copy the code that the website gives you and paste it into your stylesheet.
Masonry is a jQuery plugin for building grid layouts. It places elements optimally depending on their sizes to make maximum use of the available space. With a lot of loading effects and options you can customize the look of your page.
Lettering is a jQuery plugin that gives you the ability to style every letter, word and line in your text. The best use case is to create typographical CSS3 posters with unique styling for every letter. Text remains fully selectable.
Nativefier is a command line Node.js utility which can easily create a desktop application out of any web site. Apps are wrapped in an Electron shell and packaged into an OS executable (.app, .exe, etc.) for use on Windows, OSX and Linux.
Lightgallery is a responsive gallery plugin for jQuery. It has numerous options and animations which allows you to customise the plugin easily. The video module allows you to create beautiful youtube/vimeo video galleries with automatic thumbnail fetching.
Magic animations is a CSS library for animations. It has a lot of animation types and is easy to use. Just add the stylesheet to your page and set class names to your elements. If you are interested in CSS animations you can also check Animate.css.
Bulma is a modern CSS framework based on the Flexbox layout model. It has a simple grid system, responsive nav bars and versatile media objects. Most Bulma elements can be customized by applying modifier classes.
This is an extension for Google Chrome that bundles together a big array of features, including a color picker, CSS gradient generator, recent history of used colors, and more. Another similar tool is the open-source extension Eye Dropper.
With WhatFont you can quickly find out which fonts have been used in a webpage. Simply hover on any text, and the extension will show you the name of that typeface. WhatFont also detects the services used for providing the web fonts.
PerfectPixel is a Google Chrome extension that allows you to put a semi-transparent image overlay over the top of the developed HTML and perform per pixel comparison between them. It’s a great helper when you want to transform a PSD to HTML flawlessly.
Fireshot allows Chrome users to make full web page screenshots and then directly upload, print or send them to Photoshop or the clipboard. It also support an array of popular formats such as pdf, png and gif, and can work offline without a problem.
Blur is a Google Chrome extension that makes it easy to keep track of and secure all your personal information online. It helps you remember your passwords, generate hard-to-crack new ones, and sync all the browsers and devices you log on.
