Subscribe: SitePoint
Added By: Feedage Forager Feedage Grade A rated
Language: English
bootstrap native  bootstrap  code language  code  css  design  grid  language  native  navbar  page  responsive  script  web 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: SitePoint


Learn CSS | HTML5 | JavaScript | Wordpress | Tutorials-Web Development | Reference | Books and More

Last Build Date: Fri, 23 Feb 2018 16:00:23 +0000


Bootstrap Native: Using Bootstrap Components without jQuery

Fri, 23 Feb 2018 16:00:23 +0000

Do you use Bootstrap’s JavaScript components? Do you like Vanilla JavaScript? Then you might be interested in the Native JavaScript for Bootstrap project (Bootstrap Native), which aims to remove the jQuery dependency required by the components by porting them to plain JavaScript. Why use Bootstrap Native? The motivations of such a port are mostly related to performance. One benefit is the potential performance gain that can come from the superior execution speed of plain JavaScript over jQuery, as reported in many benchmarks. Another performance advantage is the reduced page weight. Let’s make a quick comparison. All the numbers below refer to minified gzipped files and are expressed in KBs. bootstrap refers to the original Bootstrap scripts, bsn to the Bootstrap Native scripts, and jq to jQuery. Here we’re looking at the bundled files that gather together all the components, but it should be noted that both libraries have a modular structure that allows the loading of only the needed components and their dependencies. Bootstrap: jQuery 3.3.1 + Bootstrap = 30.0 + 12.9 = 42.9 jQuery 3.1.0 slim + bootstrap = 23.6 + 12.9 = 36.5 jQuery 2.2.4 + bootstrap = 34.3 + 11.2 = 45.5 jQuery 1.12.4 + bootstrap = 38.8 + 11.2 = 50.0 Bootstrap Native JavaScript: minifill + bsn = 2.4 + 7.8 = 10.2 chrome 54) + bsn = 1.1 + 7.8 = 8.9 IE 8) + bsn = 12.1 + 7.8 = 19.9 (The size for IE8 was taken from here. These polyfills are discussed in the next sections.) So, with the Bootstrap components the size varies over the range 36.5 to 50.0 KB, while with Bootstrap Native the range shrinks to 8.9 to 19.9 KB. Bootstrap Native Browser Support Regarding browser support, it’s comparable to the original Bootstrap jQuery-based script. That is, it supports the latest browsers on the major mobile and desktop platforms and IE8+. This is accomplished by means of two polyfill strategies. The first revolves around the use of the service. All you have to do is insert the relative script tag in the document to get a set of polyfills tailored to each browser: The service can be configured to customize its response based on the features really used on the site. See the documentation for details. Alternatively, it’s possible to use minifill, a potentially lighter custom polyfill supplied by the project author itself. Bootstrap Native Usage The usage is similar to the original Bootstrap scripts, except we’ll remove jQuery, replace the Bootstrap scripts with the ones supplied by the Bootstrap Native project, and, if necessary, include the polyfills. So, before the end tag we include the script for the Bootstrap Native components: [code language="html"] [/code] Other CDN URLs are available and listed on the Bootstrap Native documentation page. Alternatively, the file can be downloaded and served locally. If the polyfills are needed, they should be included in the tag: [code language="html"] [/code] This snippet employs the minifill polyfill. See the Bootstrap Native project documentation page for more detailed usage instructions. A Port? To be precise, it’s not a literal port that replicates all the features of the original scripts. The Bootstrap Native author deliberately chose to leave out some slight functionality, particularly lesser-used features, mainly for performance reasons and to simplify the development. Let’s take a look at some of these issues. The Custom Events These are the events triggered by many Bootstrap components during their life cycle. For example, a Modal fires two [...]

Improve Your Website in 2018 with These Top WordPress Plugins

Thu, 22 Feb 2018 19:00:49 +0000

This article was created in partnership with BAWMedia. Thank you for supporting the partners who make SitePoint possible. It can be a little embarrassing when you can’t meet a client's website requirements. It can be even worse if you can’t meet requirements at all. Perhaps the problem was an inability to build a table given a large amount of complex data. Or, you’ve been unable to tie a website into social media networks in a manageable way. Maybe, you’ve had to deal with grid system constraints that made it difficult to create the right layout on a page. Take a look at this selection of WordPress plugins. They address some of the problems that web designers often face. These plugins can even serve to make good sites even better. Dive right in and see if there’s a plugin or two that can make your work a little easier. 1. wpDataTables With the wpDataTables plugin you’ll find it much easier to complete your chart and table-building tasks. You’ll save countless hours and avoid bouts of pure frustration by not having to take on what can be an extremely difficult task; creating a chart or table from large amounts of complex data, ensuring the results are correct and readable, the chart or table is responsive, and the finished product is editable, even after the website is published. wpDataTables does all of that for you, and often in minutes if not seconds. The results are not only flawless, but data rows, columns, and cells, or lines in a chart can be highlighted or color coded. It’s worth mentioning that all of this can be accomplished without the need of a single line of code. It’s also worth mentioning that this plugin is so easy to use, so powerful, and so popular that web designers have left other platforms behind and signed up for WordPress just to be able to use wpDataTables. 2. LayerSlider LayerSlider is not your typical WordPress slider plugin. You’ll be able to create a wide variety of uniquely designed sliders for many different uses, but there’s more to this plugin than that. LayerSlider is a premium multi-purpose animation platform from which you can create image galleries, landing pages, slideshows, pop ups, and even a complete website. An ever-growing selection of professionally-crafted slider templates is one of the most popular and useful LayerSlider features. These templates cover most themes and niches and provide an excellent starting point for most web design projects. There are also several simpler templates to help beginners get their projects off to a great start. Other notable features include versatile layout options and a drag and drop visual editor that makes coding unnecessary. LayerSlider is responsive, so anything you build will adapt to any screen size. 3. NextGEN Gallery & NextGEN Pro NextGen Gallery is a free open-source WordPress plugin that is the most powerful software solution of its type. It has been looked upon as an industry standard for more than a decade, and it can currently boast of 1.3 million active users and over 20 million downloads. NextGEN Gallery is free. Although it is intended for experienced designers and newbies alike, the latter especially like it as it offers an easy way to create small to mid-size galleries. NextGen Gallery’s companion, NextGEN Pro, features a much more varied and extensive gallery and eCommerce extensions. NextGEN’s front-end features include slideshow and thumbnail gallery styles, album styles, and a host of design styles. The back-end features include the gallery management system, a data import and upload capability, image grouping and thumbnail editing. 4. Blog2Social Blog2Social’s media post automation feature is a genuine time saver when you need to customize, manage, and post social media information to a network of social media sites. With Blog2Social, you can easily vary the format, content, and images of individual posts within the network to give every post a personal touch. The Social Media Calendar allows you to schedule, color code, and track posts, and use drag and drop[...]

An Introduction to Grid Systems in Web Design

Thu, 22 Feb 2018 16:00:45 +0000

In web design, a grid system is an invisible structure that collects all the elements within a web page together. In this article, I'll provide an introduction to grid systems, explaining what they are, their purpose, and some of the theory behind them.

Wikipedia explains a grid system as —

a structure (usually two-dimensional) made up of a series of intersecting straight (vertical,horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner.

The Nature of Grid Systems

Grid systems are never properly visible, but traces of a grid's “discipline” can be seen by the placement of elements within a web page. Grid systems also dictate the size of such design elements as widths of column texts, repeated placement of elements, padding around imagery, word spacing, line height, etc. A grid's main goal is to create a connection of unity within a design, which in turn makes web page content flow better, producing a more readable and enjoyable web page design.

Unity in Grid Systems

Alex White's Elements of Graphic Design explains the use of unity through a grid system:

Unity in design exists where all elements are in agreement. Elements are made to look like they belong together, not as though they happened to be placed randomly … So, without unity a design becomes chaotic and unreadable. But without variety a design becomes inert, lifeless, and uninteresting. A balance must be found between the two.

However, the benefits of a grid system on a particular design will only take effect if the grid is used at the initial stages of the design process. Attempting to implement a grid into an existing design will not create the same fluid layout or unity of content. This issue is discussed in Josef Muller-Brockmann's Grid System is Graphic Design. He writes:

A suitable grid in visual design makes it easy: a) to construct the argument objectively with the means of visual communication; b) to construct the text and illustrative material systematically and logically; c) to organize the text and illustrations in a compact arrangement with its own rhythm; d) to put together the visual material so that it is readily intelligible and structured with a high degree of tension.

Grid Systems Beyond Web Design

Grids aren’t just restricted to web and graphic design. Almost every profession where any form of design is implemented has a grid system, which professionals use as a guarantee for positive element positioning. It has become almost professionally vital to use grids in all modern design practices.

Continue reading %An Introduction to Grid Systems in Web Design%

Bootstrap Sass Installation and Customization

Wed, 21 Feb 2018 16:00:33 +0000

Bootstrap is a popular, open-source framework. Complete with pre-built components, it allows web designers of all skill levels to quickly build a site. The latest version of Bootstrap uses Sass as the preprocessor of choice. In this article, I’ll show you how to configure and customize a Bootstrap Sass-based project.

Bootstrap Installation

There are multiple ways to obtain and install the Bootstrap source files. Just remember that whatever method and package manager you choose, make sure you have a Sass compiler and Autoprefixer up and running. Bootstrap needs both in order to work.

Download Bootstrap files

We can download the Bootstrap files from the Bootstrap download page. Once downloaded, we can extract the contents of the file into our project's folder.


With Node installed, we can quickly install the npm package for Bootstrap by typing in the command line:

[code language="bash"]
npm install bootstrap

Ruby Gems

We can include Bootstrap in a Ruby app using Bundler and Ruby Gems with this command in the Gemfile:

[code language="bash"]
gem 'bootstrap', '~> 4.0.0'

Bootstrap Sass Setup

Once we have Bootstrap installed we need to set up our project. The first thing we want to do is create a sass folder to hold our SCSS files and a stylesheets folder to store the compiled CSS. After that, we create a file named app.scss inside the sass folder.

The app.scss file is used to import Bootstrap components.

The next thing we want to do is find the _variables.scss file inside the Bootstrap Sass package and copy it into our sass folder. Next, we rename the file as _customVariables.scss and add an import statement for _customVariables.scss to app.scss. It's important to import _customVariables.scss first for reasons I’ll explain shortly.

The last import is an optional _custom.scss file. Many people will include custom CSS rules directly after their import statements or in their app.scss file, but we're going to separate any custom rules into their own partial.

Notice, we import our _customVariables.scss file first. The reason is that Bootstrap's variables are set to default! values, so we need to override these values by importing our variables first.

Continue reading %Bootstrap Sass Installation and Customization%

Get 2TB of Cloud Storage for Life for Just $50

Tue, 20 Feb 2018 19:30:42 +0000

There's nothing quite as frustrating as losing your valuable data in a computer crash, especially if you haven't backed up your data. External hard drives are not always easy to lug around with you, and are susceptible to loss, theft, and physical damage, so it makes sense to store your data in the cloud. Zoolz is a cloud backup solution that offers both instant and cold storage options, and while they normally charge an annual fee for their service, you can get lifetime access to 2TB of storage today for only $49.99.


Whatever your data storage needs, Zoolz has you covered. This deal gets you 1TB of instant storage for frequently used files that you'll need on-demand, and 1TB of cold storage for larger files you don't always need access to, like movies or photos. You can also rest assured knowing Zoolz uses 256-AES encryption to keep your personal data safe and secure. 

Zoolz typically charges around $500 annually for this offer, but right now, you can get a lifetime account for just $49.99. Don't wait until it's too late - get peace of mind with Zoolz cloud backup solutions today. 

Continue reading %Get 2TB of Cloud Storage for Life for Just $50%

How to Build a Responsive Bootstrap Website

Tue, 20 Feb 2018 16:00:09 +0000

In this article, we’re going to build a responsive Bootstrap website from scratch. By the end of this article, you’ll be familiar enough with the latest version of this popular CSS framework to be able to build your own variations of it according to your project’s needs. Building responsive websites is a must nowadays. People access websites from all kinds of devices, and Google has made a point of stressing the importance of responsive web design when it comes to assigning ranking in web page results. Designing responsive websites from scratch can be taxing for beginners, although the latest Flexbox and CSS Grid specifications make achieving great results in this field much easier than it used to be. However, for those who aren’t ready to tackle cutting-edge layout techniques yet, the Bootstrap grid still offers an excellent alternative. What “Responsive Bootstrap Website” Means The first thing that comes to mind when we use the word “Responsive Design” is that websites should be compatible with all kinds of devices and screen sizes. There’s a constant demand in the industry to make every website responsive for better readability of the online contents in different environments. With the help of CSS3 and definitely HTML5, this is now a consolidated trend. But what if you’re a developer and not a designer? BONK! Well, you don’t have to worry any more. Since Bootstrap is a superhero in the field of CSS frameworks, you’ll be able to tackle responsive web design with its help in no time. Setting Up Ensuring you get a responsive Bootstrap website is as simple as placing the correct meta tag inside the head of your web pages: [code language="html"] [/code] The above meta tag is quite self-explanatory in nature. We’re setting the width of the page to the width of the device and initially scaling it to 1 — its default size. Apart from this, you’re good to go: Bootstrap is responsive by default. [code language="html"] [/code] Here’s a demo of the page we’re going to build: See the Pen Building Responsive Websites Using Bootstrap by SitePoint (@SitePoint) on CodePen. Let’s Begin Building Our Responsive Bootstrap Website I’ve divided the above responsive web page into different categories, and we’ll see how to build each one of them in detail: the responsive navigation the marketing area the contents section the right sidebar the footer The Responsive Navigation Let’s build the navigation bar of the website. It will contain the website’s title and some right-aligned menu link items. This is going to be fixed to the top of the website, as you’ve seen in the demo page. So here’s the markup for this: [code language="html"]