Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Articles Tagged ‘css’

What is object-oriented CSS?

Thursday, September 21st, 2017 by Servage
css3Object-oriented programming is a common practice in many programming languages. It helps you with the DRY principle (don’t repeat yourself) by allowing you to repeatedly use code from a single code base. How would applying the paradigm work with something other than a programming language, like CSS? Let’s find out how CSS can be written in the same way and what are the benefits of doing so. The Two Principles of OOCSS Object-oriented CSS (OOCSS) is built upon two main principles. Firstly, content should be separated from containers. If content and its container are not tied to each other too closely, it allows you to reuse the containers for different types of content ...

Getting started with Gulp

Thursday, September 14th, 2017 by Servage
gulpGulp is a task runner for JavaScript that can automate away repetitive tasks so you can focus on coding instead. Gulp is an extremely versatile tool that can automate tasks from transpiling SCSS to live reloading with Browsersync. Let’s have a look at some of the most useful tasks you can automate with Gulp and a quick look at how to set it up. Transpiling SCSS Using a CSS preprocessor like Sass is quite common these days, especially when working with front-end frameworks because of how well it integrates with them. Sometimes it can be quite confusing to set up an automated transpiler that converts SCSS to CSS. Gulp makes this possible with ...

CSS grid and the future of Flexbox

Wednesday, September 6th, 2017 by Servage
css-flexboxFlexbox has been around for a while now and we have reached the point where you can safely use it in new projects. Recently, a new similar layout system called CSS Grid has been released. It comes with most of the features from Flexbox and some more. For instance, CSS Grid is a two-dimensional layout system compared to Flexbox which only supports one dimension. This article gives you a basic understanding of the new grid layout as well as the future of Flexbox and CSS Grid. Two Dimensions Flexbox is a one-dimensional layout system. This means it supports either rows or columns but not both. It is possible to created nested containers with ...

Code linting explained

Friday, March 17th, 2017 by Servage
codeLinting is a term you hear every now and then, but what does it mean? Linting is related to source code analysis, which is something you should do for your code as you develop. After reading this article you will be more familiar with these things. Let’s find out what linting is and how to do it with CSS, JavaScript and PHP code. Linting Explained So, what is this mysterious “linting” people are sometimes talking about? Simply put, linting is a code review method where a program automatically analyses source code to detect issues. Lint was the name given for a C program that was used for this type of code analysis decades ...

Building native-looking mobile apps with HTML and CSS

Thursday, February 23rd, 2017 by Servage
html-css-js-web-appHave you ever wished creating native Android or iOS applications were as easy as using HTML and CSS? Well, now it is! A CSS framework called Framework7 allows you to build web applications for phones that look almost identical to native mobile applications. If you enable full screen view in your phone’s web browser, chances are you don’t even notice the difference. Grid System One of the core features in every CSS framework is the grid system. It defines how many columns one row can have and what screen sizes they support. The grid in Framework7 is very similar to the grid of Bootstrap. All columns are placed inside a “row” class and ...

Creating dropdown-menus without JavaScript

Monday, January 30th, 2017 by Servage
dropdownDropdown menus are found on almost every website. The most common place for a dropdown is the main navigation bar, although a website can have dropdowns in almost any context. You can create a dropdown menu with JavaScript but this often makes it unnecessarily complicated. Let’s explore what it takes to make a simple navigation bar with only HTML and CSS. HTML Structure New designs are usually started by considering the HTML structure, so let’s do that first. The HTML of a dropdown menu is usually quite simple, and we only need three elements: <ul>, <li>, and <a>. You may also want to wrap the whole navigation bar inside a <div> or <nav> ...

Use pre-made CSS animations with Animate.css

Monday, January 2nd, 2017 by Servage
animate-cssAnimate.css is a CSS library that allows you to animate elements on a web page. It is very easy to set up and provides dozens of premade animations for you to use, such as bouncing, sliding and fading animations. Another great thing about Animate.css is that it does not use any JavaScript for animations. Everything is done with CSS in a single file. Setting Up Animate.css As promised above, setting up Animate.css is simple. You only need to include one CSS file that you can find on the official website: https://daneden.github.io/animate.css. Click the download link, save the file and include it in your HTML file using a <link> tag. Here is an example: ...

Useful LESS functions you should know

Wednesday, December 7th, 2016 by Servage
lessLESS is a CSS preprocessor that extends vanilla CSS by adding many features, such as variables, functions and mixins, to the language. This time we will focus on the functions LESS provides. Here are some common ones you may find useful if you use LESS in your projects. Image Functions Have you ever come across a scenario where you need to know the dimensions of an image inside a CSS style sheet? LESS is smart enough to do this for you. To find out how large an image is, you can use the image-size function. image-size(“/path/to/file.jpg”) will return the dimensions of the image, for example “250px 200px”. You can then apply these directly ...

What is new in Bootstrap 4

Friday, October 7th, 2016 by Servage
Bootstrap4Bootstrap 4 has been in public alpha since August 2015. Some deem it stable enough while other developers are waiting for a more stable release. Whether or not you are moving to the next version just yet, it is good to be aware of the upcoming changes. In fact, Bootstrap 4 has quite a lot of new and interesting updates to offer! Introducing Cards Cards are a new type of container in Bootstrap 4. They are meant to replace panels, wells and thumbnails. That’s a lot for one component to replace, but cards are designed to be a combination of all these three components. A card has a panel-like heading and a content ...

Conditional stylesheets with CSS3 media queries

Tuesday, August 16th, 2016 by Servage
css-media-queriesMedia queries is a powerful feature used to selectively apply CSS styles to a document based on certain conditions. The most common conditions are screen height and width, and these conditions are often used to create responsive websites. These days, it is crucial to understand how media queries work to create modern websites. The @media rule A media query is created by using the @media rule inside a regular CSS style sheet. @media is followed by the rules that apply to the media query. If these requirements are met, all styles inside the media query will be applied to the web page. Here is an example of what a media query can look ...