Servage Magazine

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

Articles Tagged ‘css’

Servage Web Development Course Part 2: Content formatting

Friday, February 16th, 2018 by Servage
In this part you will learn how to format (style) web pages' main content, such as text, paragraphs, lists, images and links. The formatting will be done with CSS, which was introduced in the first part of the Servage Web Development Course. Just to recap: HTML (Hypertext Markup Language) is the language used for the content of your website. CSS (Cascaded Style Sheet) is the language used to describe the design of your content. It is important to remember that we strictly separate those two elements from each other. One of the main advantages of this, is that you can not only have different people working on content and design separately from each other, you can also ...

Introduction to the Servage Web Development Course

Saturday, February 10th, 2018 by Servage
Hello and welcome to the Servage Web Development Course. Over the next weeks we will take you through a series of tutorials that will show you how to develop your own web site and application from scratch. The course if designed for anyone that has no or little prior knowledge about website development. After this course you will have a good overview over the main technologies used - namely HTML, CSS, PHP and MySQL. The course itself will take you through these areas by building a little Blog-application step by step, that will feature creation, modification, display and design of content. So, if you are not yet an expert on creating webpages, please continue reading :-) The beginning Every ...

Is your website standard compliant?

Monday, January 15th, 2018 by Servage
vcss-bluevalid-xhtml11-bluevalid-html401-blueEveryone who ever tried creating a website probably knows that annoying experience of HTML pages not being displayed the same way in every browser. Especially Internet Explorer, but also older versions of other browsers, are having a hard time showing your site the way you intended it to look. The reason for this is browsers interpreting HTML code and CSS styles differently. In many cases this has lead developers to create workarounds, including the use of invalid HTML or CSS, to trick the browsers into displaying the content in a similar way. These issues ...

Looking at Bootstrap 4

Sunday, December 3rd, 2017 by Servage
Bootstrap4The development of the latest version of Bootstrap entered a beta stage this summer. Going from alpha to beta introduced some major changes, and now that Bootstrap 4 is in beta, there should no longer be many breaking changes. This gives us a good chance to look into the future and see what new is included in the latest version of most popular front-end CSS framework. The New Grid While the grid in Bootstrap is still divided into 12 columns, it now uses Flexbox by default. A new grid tier “xl” has also been added. This means you should use tiers one level higher than previously. For instance, col-md-4 in Bootstrap 3 is ...

What are progressive web apps

Thursday, November 2nd, 2017 by Servage
web-appThe term progressive web app (PWA) is a hot trend right now. It all started back in 2015 and quickly became popular due to the advantages it offers over traditional mobile applications. But what is a progressive web application? How does it differ from a typical mobile or web application? Let’s find out what the term PWA actually means and what makes an application a progressive web application. The Definition of Progressive In one sentence, a progressive web application is a website that looks and works like a mobile application. Modern HTML5 and CSS3 features allow developers to replicate many of the features native applications can do: storing data locally, using animations to ...

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 ...