As a web designer, you always look for the best CSS frameworks to build your project. There are many CSS frameworks, but most of them don’t have the features that you want. Besides, some of them do not have proper documentation or proper coding. Also, some of them are too heavy. Therefore, we have collected seven inspiring and creatively design CSS framework. These frameworks have a clean design, code, and documentation. Additionally, they are lightweight CSS frameworks. So, you can use them for your next project and create something spectacular.

7 Inspiring CSS Frameworks

In a nutshell, below are the seven the best CSS framework you don’t know about yet.

1. Spectre.css
2. Tailwind CSS
3. Primer
4. Bulma
5. Vuetify
6. UIkit
7. Pure CSS

These frameworks are not popular, but they have amazing features.

Spectre.css

A very clean and small CSS framework. Spectre.css is a lightweight, responsive and contemporary CSS framework. Besides, it’s open-source and completely free. Also, it is a side project based on years of CSS development work on a massive web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with SASS/SCSS compiler.

The features are a lot. Besides, the design is very clean and user-friendly.

Browser support:

Spectre uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets.

• Chrome (LAST 4)
• Microsoft Edge (LAST 4)
• Firefox (EXTENDED SUPPORT RELEASE)
• Safari (LAST 4)
• Opera (LAST 4)
• Internet Explorer 10+

This framework support almost most modern browsers.

Tailwind CSS

A little different framework. As the documentation says, ” Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it’s not a UI kit.”. Also, it doesn’t have built-in UI components. On the flip side, it also has no opinion about how your site should look and doesn’t impose design decisions that you have to fight to undo.

If you’re looking for a framework that comes with a menu of predesigned widgets to build your site with, Tailwind might not be the right framework for you. But if you want a vast head start implementing a custom design with its own identity, Tailwind might be just what you’re looking for.

How does it work then?

It’s pretty simple. It has a lot of classes that you can call utility. You combine those classes and make something fresh like navigation or button.

Primercss

Do you like Github design? Well, this framework by Github team with Github design styles. Primer is the basecoat of GitHub, made by nerds just like you who share a passion for HTML and CSS. Besides, it’s open-source and free under MIT license. Also, it Includes a small Gruntfile for compiling our SCSS, Autoprefixer for vendor prefixes, and Parker for CSS stats.

It has everything and every feature you see on Github.

Bulma

Bulma is a free and open-source CSS framework based on Flexbox. If you know about Flexbox in CSS3, you see how beautiful it is. So, Bulma is a clean, fast, creative and inspiring CSS Framework.  It’s an alternative to Bootstrap Framework.

There is no JavaScript included in Bulma. People want to use their own JS implementation. Therefore, Bulma can be considered “environment agnostic”: it’s just the style layer on top of the logic.

Browser Support

Bulma uses Autoprefixer to make (most) Flexbox features compatible with earlier browser versions. According to Can I use, Bulma is compatible with recent versions of:

• Chrome
• Edge
• Firefox
• Opera
• Safari

Internet Explorer (10+) is only partially supported since it uses CSS3 features.

Vuetify

This one doesn’t look like a CSS framework, but it does the same thing that other CSS frameworks do. If you know about Vuejs, this CSS framework seems familiar to you. Additionally, it requires Vuejs knowledge. Also, Vuetify helped you create a fantastic application. The Vuetify is built from the ground up to be semantic. Easy to learn.

How does it work?

It’s effortless to use. The way it works is like this; Vuetify is made of components. Those components are like custom HTML tags. Then, you use those tags and give some attributes. It will provide you with a sweet and beautiful element.

GETUIkit

If you are looking for a lightweight and modular front-end framework for developing fast and powerful web interfaces, UIkit is for you. Besides, the design is so clean and creative. It’s like IOS design concept. So, if you want to develop a mobile application, it’s an excellent choice. It’s not the UIkit by Apple developer for IOS; it’s just a web designing framework. Also, it has clear documentation, and you start learning and using it now. You don’t need any extra knowledge to get started.

PureCSS

It’s a set of small, responsive CSS modules that you can use in every web project. Also, Pure is ridiculously only to use a subset of these modules and tiny. The entire collection of modules clocks in at 3.8KB minified and gzipped. Besides, it’s crafted with mobile devices in mind, it was necessary for us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you’ll save even more bytes.

If you are developing a custom web application, it’s an excellent starter framework. Because the size is too small and you can easily customise it for your self.

Conclusion

All in all, there are many other significant and popular CSS frameworks on the web, but these were also worth checking out. Most of this framework function as a great framework, it’s because no-one has used them and talked about them. Finally, we hope it has been informative for you.

The post 7 Inspiring CSS Frameworks You Don’t Know About appeared first on TECHNIG.

Almost these days if a website takes more than 5 seconds to load. So we don’t want wait or tend to not even waiting for it to open we simply close the page and find something else. That is definitely what designers are taking the time to come up with unusual and creative preloaders for websites. So if you want to use a cool CSS preloader for your website, we have listed best preloaders for your site.

What’s a CSS Preloader?

The website without a CSS preloader somewhat looks unprofessional, Simply preloaders (loaders) is what you see on the screen while the rest of the page’s content is still loading. Preloaders are often simple animations that keep visitors entertained while server operations finish loading all data process.

SpinKit – CSS loaders

SpinKit is a collection of the fantastic and smooth loading spinner. This also includes 11 CSS Preloader that is ready-made for use, and you can just use them on your website.

CSS Page Preload Animations by Simbyone

So this is the largest collection of CSS Preloader animation you can use customize for your website. This also contains 30 preloaders with different style square spinners, round spinners.

cssload.net

CSSload is the best resource of stunning CSS loaders. It contains customizer that let you customize the color, size as well as the speed of the spinner. You get spinners, horizontal bars, 3d loaders and other CSS preloaders in the collection.

Collection of CSS3 Animated Pre-loaders by Aaron Lumsden

In this collection of CSS Preloaders, you will get 6 amazing CSS Preloader. For sure you will like it with all clean HTML and CSS codes. Check it out here.

Pure CSS Loaders kit By Viduthalai Mani

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”JkhDK” default_tab=”result” user=”viduthalai1947″]See the Pen <a href=’https://codepen.io/viduthalai1947/pen/JkhDK/’>Pure CSS Loaders kit</a> by Viduthalai Mani (<a href=’https://codepen.io/viduthalai1947′>@viduthalai1947</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Loaders (WIP) A PEN BY Tania LD

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”oKxep” default_tab=”result” user=”TaniaLD”]See the Pen <a href=’https://codepen.io/TaniaLD/pen/oKxep/’>Loaders (WIP)</a> by Tania LD (<a href=’https://codepen.io/TaniaLD’>@TaniaLD</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

loaders.css

So we come to the last one. This collection of loading animations written entirely in CSS also provide such a amazing animation. Delightful and performance-focused pure CSS loading animations.

Conclusion

So these are the collection of best CSS Preloaders that you can use them for your website and blogs. We hope this was informative and useful for you. Also check out 12 Free CSS Loading Animation for Business Web Design.

The post Top 7 Collections of CSS Preloader For Web Designer appeared first on TECHNIG.

The usage of pre-loader has become so popular in the past few years among web designer. Nowadays, most SPA or single page applications use a loader. Despite making your website look great, it makes it user-friendly and more appealing. So, in the past people used to use JavaScript to solve this problem. But now you can use pure CSS3. Moreover, we have collected 12 best free CSS loading animation for you. Also, this CSS Loaders are creatively designed and look inspiring. Some of these loading animations use JavaScript as well.

CSS Loading Animation

If you still don’t know what’s CSS loader, it’s just an animated shapes that show before a page completely load. When you send an HTTP request to a website, they mostly take a while to download all the JavaScript, CSS, and images. So, until it completely downloads all of those, it will show the animated loader.

So, I hope now you know what’s CSS loader.

1. Spinners & Page Loaders Pure CSS by Anya Melnyk

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”QvBQPb” default_tab=”result” user=”slyka85″]See the Pen <a href=’https://codepen.io/slyka85/pen/QvBQPb/’>Spinners & Page Loaders Pure CSS</a> by Anya Melnyk (<a href=’https://codepen.io/slyka85′>@slyka85</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

2. CSS Loader by Justin Tan

[codepen_embed height=”305″ theme_id=”0″ slug_hash=”bRjRdo” default_tab=”result” user=”justintan”]See the Pen <a href=’https://codepen.io/justintan/pen/bRjRdo/’>css loader</a> by Justin Tan (<a href=’https://codepen.io/justintan’>@justintan</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

3. Loading Animation by John Heiner

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”BNLzbJ” default_tab=”result” user=”johnheiner”]See the Pen <a href=’https://codepen.io/johnheiner/pen/BNLzbJ/’>Loading Animation</a> by John Heiner (<a href=’https://codepen.io/johnheiner’>@johnheiner</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

4. Animated CSS loader by Tommie Hansen

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”zzayLE” default_tab=”result” user=”tommiehansen”]See the Pen <a href=’https://codepen.io/tommiehansen/pen/zzayLE/’>Animated CSS loader</a> by Tommie Hansen (<a href=’https://codepen.io/tommiehansen’>@tommiehansen</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

5. Loader by Alexandr Izumenko

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”KvrKqb” default_tab=”result” user=”Izumenko”]See the Pen <a href=’https://codepen.io/Izumenko/pen/KvrKqb/’>Loader</a> by Alexandr Izumenko (<a href=’https://codepen.io/Izumenko’>@Izumenko</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

6. Spin one div by Pavel

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”VWxpgJ” default_tab=”result” user=”pavelivanov”]See the Pen <a href=’https://codepen.io/pavelivanov/pen/VWxpgJ/’>Spin one div</a> by Pavel (<a href=’https://codepen.io/pavelivanov’>@pavelivanov</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

7. Glitchy Loading Indicator by  Jack Rugile

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”bjuCf” default_tab=”result” user=”jackrugile”]See the Pen <a href=’https://codepen.io/jackrugile/pen/bjuCf/’>Glitchy Loading Indicator</a> by Jack Rugile (<a href=’https://codepen.io/jackrugile’>@jackrugile</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

8. Redirecting Loader by Mr Alien

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”FDLjg” default_tab=”result” user=”mr_alien”]See the Pen <a href=’https://codepen.io/mr_alien/pen/FDLjg/’>Redirecting Loader</a> by Mr Alien (<a href=’https://codepen.io/mr_alien’>@mr_alien</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

9. Loader #6 – Jelly Box by Fabrizio Bianchi

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”mpiFE” default_tab=”result” user=”fbrz”]See the Pen <a href=’https://codepen.io/fbrz/pen/mpiFE/’>Loader #6 – Jelly Box</a> by Fabrizio Bianchi (<a href=’https://codepen.io/fbrz’>@fbrz</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

10. Loaders by MC

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”eWQEWe” default_tab=”result” user=”munya98″]See the Pen <a href=’https://codepen.io/munya98/pen/eWQEWe/’>Loaders</a> by MC (<a href=’https://codepen.io/munya98′>@munya98</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

11. Goo Loader by  Elior Tabeka

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”EXJyPP” default_tab=”result” user=”eliortabeka”]See the Pen <a href=’https://codepen.io/eliortabeka/pen/EXJyPP/’>Goo Loader</a> by Elior Tabeka (<a href=’https://codepen.io/eliortabeka’>@eliortabeka</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

12. Speedometer CSS3 loader by Creativity

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”myMNdR” default_tab=”result” user=”Creativity”]See the Pen <a href=’https://codepen.io/Creativity/pen/myMNdR/’>Speedometer CSS3 loader</a> by Creativity (<a href=’https://codepen.io/Creativity’>@Creativity</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]

Conclusion

CSS loading animation make your website and web applications brilliant. Also, they make the website more user friendly. So, next time be sure to use of this in your projects. Further, did you know you can ask any kind of questions on our forum and get instant answer. So, join us now.

The post 12 Free CSS Loading Animation for Business Web Design appeared first on TECHNIG.

Laravel Mix is a powerful tool and NPM package. So, using Laravel Mix, you can compile sass, scss files, Vuejs files and ES6 features. Also, it’s fast and easy to start using. Besides, you can easily customizer Laravel Mix for your project. So, in this tutorial, you’ll learn how to use Laravel Mix without Laravel project. The latest version of Laravel projects has pre-install Laravel Mix.

Use Laravel Mix without Laravel Step by Step

We are going to do everything step by step on how you can use Laravel Mix without Laravel, so you will not miss anything.

Requirements:

We require the following criteria. If you want to follow the tutorial to make sure you have the NPM and Nodejs installed on your system. If you don’t have installed those, then go to nodejs.org, download and install. It will not take more than 2 minutes. Besides, you must have basic knowledge of NPM usage.

1. Create a Project

Simply, create a folder anywhere on your computer. Then run the following command to initialize NPM files.

npm init -y

The command creates a package.Json file in your folder with simple boilerplate. Then, open your project in your favorite text editor.

2. Install NPM Packages

Now, let’s install a few NPM package plus Laravel Mix. So, we’re going to install all of them at once. To do so, list your packages name in your package.json file.

So, open your package.json file and add the following code. We will install a few essential packages.

{
  "name": "laravel-mix",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "laravel-mix": "^1.0",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.0.1",
        "jquery": "^3.1.1",
        "vue": "^2.1.10"
  },

  "keywords": [],
  "author": "",
  "license": "ISC"
}

So, your package.json file should look like the above. The devDependencies part is the list of packages we want to install. So, run now run the following command in your command line to download the packages.

npm install

It will take a while to install the packages, so be patient. So, after installing completed, continue the next step.

3. Configure the Laravel Mix Files

After installing the packages, now you can start creating Laravel mix files.

You go to “node_modules/laravel-mix/setup/webpack.mix.js” and copy the webpack.mix.js file to the root directory of your project. Also, you can create the file yourself and add the following code inside.

webpack.mix.js

let mix = require('laravel-mix');

mix.js('src/app.js', 'dist/')
   .sass('src/app.scss', 'dist/');

The above just require Laravel mix, then look in “src/app.js” and compile to “dist/” folder. So, we need the create those files.

4. Add Code to Compile

Now let’s add some code our app.js file to compile and test if everything is working.

So, add the following code in your app.js file. It’s just for the demo, of course, you can add any code you want.

window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');

The code will add jQuery and bootstrap file.

Now, open your command line and run the following code.

npm run production

The production and other command list are written in the package.Json file.

For me, the compilation starts and go till 95%. Then it stopped.

It’s not going further. So, there must be a problem.

5. How to Fix Laravel Mix 95% emitting Stop Problem

So, let’s fix it. Before doing that, you know know what’s the problem. Thus, it can’t find the public folder or where to compile the files. Here is how you fix it.

Open your webpack.mix.js file and add the following code right after you require Laravel Mix.

mix.options({
    publicPath: 'dist'
})

Now, terminate the emitting process by pressing Ctrl + C two times and re-run the production command. It should work now.

Conclusion

We hope this article has been informative for you and you enjoyed reading. So, it’ how you can use Laravel Mix without Laravel. Further, we have a forum where you can ask any types of questions and get instant answers. So, feel free to join us.

The post How to Use Laravel Mix without Laravel Step by Step appeared first on TECHNIG.

Finally, Bootstrap 4 has come with a lot of amazing features.  Meanwhile, Laravel 5.5 with LTS version has also released. Laravel 5.5 by default comes with bootstrap version 3. In this article, you will learn how to configure Laravel 5 5 with Bootstrap 4 step by step.

Configure Laravel 5 5 with Bootstrap 4

Step 1. Create a new Laravel project. You can use Laravel install or composer installer. If you have any trouble with installation or configuration of Laravel, We recommend you to read our Laravel tutorials first.

laravel new App

Step 2. Now let’s install bootstrap 4 and npm dependencies. By default, Laravel will download bootstrap 3. You can find it in your package.json file.

Open your cmd or terminal and run the npm install command to install the above dependencies. Make sure you are in the application directory.

Step 3. Once npm dependencies installed successfully, let’s install bootstrap 4. Run the following command.

npm install bootstrap@4.0.0-beta

It will install bootstrap 4 beta version. Now inside your node_moduls folder, you have two folders for bootstrap files.

The first one is bootstrap 4 files.

Step 4. It’s time to configure the CSS and JavaScript files. You can set all of this configuration in the resources/assets directory.

First, let’s see what changes we can bring to CSS files. Open the sass/app.scss. You file must look like this.

// Fonts
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");

// Variables
@import "variables";

// Bootstrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

It’s importing fonts, variables from _variables.scss and bootstrap 3 from node_modules. Now we must point the bootstrap to version 4. You can do it like this.

// Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

The last changes for CSS files are to open _variables.scss file and change the px values to rem. It’s because bootstrap 4 is not supporting px value anymore.

Now open your js/bootstrap.js file.

Just change the bootstrap-sass to bootstrap.

 require('bootstrap');

Now you are done.

Step 5. Open your cmd again and run the following command to compile down the bootstrap 4 files successfully.

npm run production

It will compile down all the JavaScript and CSS files to public/CSS and js directory.

Here is the list of other commands. Th production command will minify the code as well.

Now you have configured Laravel 5 5 with bootstrap 4. If you view your Laravel app, everything is broken. It’s because bootstrap team rewrote the bootstrap 4. Everything has changed. Read the documentation to see what has changed.

Conclusion

Bootstrap 4 browser support is not very good. For Internet Explorer version, it should be 10+, and other browsers with the latest version will be supported. If you have any issue, feel free to comment it below.

The post Configure Laravel 5.5 with Bootstrap 4 appeared first on TECHNIG.

Pre-loader is one of the must-have features that you should add to your site. It makes your site load smooth and makes it more user-friendly. Especially when you have a lot of images and JavaScript files and your site load unlovely. This tutorial will teach you to step by step how to add CSS preloader to your site.

What’s Preloader?

If you still don’t know what preloader is! It’s just a simple animated image or icon or a svg vector that shows on your site before your site completely load. You might have seen many examples before and here is how it looks

[codepen_embed height=”320″ theme_id=”0″ slug_hash=”JkhDK” default_tab=”result” user=”viduthalai1947″]See the Pen <a href=’http://codepen.io/viduthalai1947/pen/JkhDK/’>Pure CSS Loaders kit</a> by Viduthalai Mani (<a href=’http://codepen.io/viduthalai1947′>@viduthalai1947</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

How to Add CSS Preloader to Your Site?

Now is the time to learn how to create and add a preloader to our website. There are many ways that you can create a preloader. For instance, a preloader can be an image; it can be an icon; it can be an SVG vector or a CSS created icon. When you use an image, it will load a little slower, and we recommend you to use SVG or CSS preloaders. So, in this tutorial, we will use CSS preloader.

@tobiasahlin have created a collection of animated preloader with css that you use in your project. You can find the github repository here. 

Step 1

Let’s start by creating the HMTL markup. Here is simple HTML markup.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”qrjezg” default_tab=”html” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/qrjezg/’>Simple CSS Preloader</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Step 2

Create a separate file for your CSS or add the style tag in the header. We will use one of the Tobias ah lin’s CSS preloader. Once you learn how to use one, you will be able to use other preloaders as well.

#preloader {
     position: fixed;
     left: 0;
     top: 0;
     z-index: 9999;
     width: 100%;
     height: 100%;
     overflow: visible;
     background: #e91e63;
     display: flex;
     justify-content: center;
     align-items: center;
 }

.spinner {
  width: 40px;
  height: 40px;
  background-color: #333;

  margin: 100px auto;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

Step 3

Finally, add the JavaScript code. This code will hide the preloader whenever everything in your site load. We will use jQuery to detect if the document is loaded completely.

 $(document).ready(function($) {
        // hide preloader when everthing in the document load
        $('#preloader').css('display', 'none');
 });

Final Step

Now let’s put all of them together and see how it looks. We have created a pin on codepen.io that you can use.

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”qrjezg” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/qrjezg/’>Simple CSS Preloader</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

It look’s so fast if you have a fast internet connection. But I will work just fine in your site with contents. 

Conclusion

I hope it has been informative for you. If you have any questions regarding how to add CSS preloader, feel free to ask it bellow in the comments. 🙂

The post How to Add CSS Preloader to Your Website? appeared first on TECHNIG.

Most of times we want to remove the ugly and unnecessary CSS styles. Of course you can go, search and find each those CSS class and remove them individually. May be you are like most other developers who use CSS Frameworks like bootstrap and semantic ui, where their are a lot of CSS class that you might not use in your small project. Wouldn’t be cool if there was a way to automatically remove all those unused CSS styles with in minute? Today’s tutorial is about how to remove unused CSS. You will learn how to use grunt and uncss.

What is Gulp?

Gulp is a task/build runner for development. It allows you to do a lot of stuff within your development workflow. You can compile sass/scss files, uglify and compress js files and there are a lot more that Grunt will do for you.

Requirements

Before we start, make sure you have the base requirement and tools installed in your system. This tools include:

• Nodejs
• Gulp

We assume you have installed nodejs in your system. If you don’t know how to do that, just go to nodejs.org and install it like other software.

Once you install it, you must be able to write node -v in command line and see the nodejs version.

the current version of my nodejs is 4.4.6. Your’s might differ.

Installing Gulp

After installing nodejs, you can install Gulp now. To install nodejs, just run the following command.

$ npm install --global gulp-cli

This will install gulp globally, means you can write gulp in your command-line and it will work just fine.

Creating a Gulp Project

In your project root, create a package.json file and write an empty array in it.

{

}

Once the package.json file is created, we can install Gulp into the project by using the following command:

npm install --save-dev gulp

This time, we’re installing Gulp into project instead of installing it globally, which is why there are some differences in the command.

Note: They way gulp works is to install plugins for your project. Their are many different plugins for different purposes. We want to remove unused CSS, so we install uncss plugin.

Install uncss to remove unused CSS

npm install -g uncss

Once you install it, you can remove unused CSS.

How to Remove Unused CSS

Create a gulpfile.js file in your project root. Past the following codes.

var gulp = require('gulp');
var uncss = require('gulp-uncss');

gulp.task('uncss', function() {
  return gulp.src([
      'css/bootstrap.css',
      'css/style.css'
    ])
    .pipe(uncss({
      html: [
        'index.html',
      ]
    }))
    .pipe(gulp.dest('css/uncss'));
});

The first two line will include the gulp and the gulp-uncss which we installed.

Secondly, we created a task with gulp and gave it a name call uncss. Of course you can name it anything you want.

The steps for tasks.

1. Give the original file directory to gulp.src.
2. Spacify the  html files.
3. pip it to the directory you want to save the file.

Now run the gulp command in your project directory and the the task name.

gulp uncss

It will remove unused CSS styles from bootstrap.css and style.css than saved it to css/uncss directory.

Conclusion

Most of times, we have speed loading problem for our site. By removing unused CSS styles, we can make our site load faster than ever. If you have any problem while using uncss, feel free to comment it bellow. 🙂

The post How to Use Uncss With Gulp to Remove Unused CSS? appeared first on TECHNIG.

Have you ever seen any HTML template demo? You most probably see that they a a live customizer that will let you change the color skin or any other layouts. If you want to know how it’s made, This HTML live customizer tutorial will guide you through the process of creating live customizer. We will create an option that float to left side of the page and when the user hover on it, it must show a live color changer options that change the page color the way you want.

Basic HTML Live Customizer

Let’s start with the basic idea of having a page that have multiple color skins. For this example, let’s have four colors. Later on you can add more colors depending on your project. We will use jQuery to add link tag dynamically.

Through there are different approach for make html live customizer, we will assume that you have separate style sheets for each color.

Let’s say we have 4 files, red.css, blue.css, green.css and pink.css. When user select red, it will add a link tag and reference it to red.css file.

Starting by creating html markup.

    <div class="skins">
      <ul class="skin-colors">
        <li data-skin="red" style="background-color: red" class="active"></li>
        <li data-skin="green" style="background-color: green"></li>
        <li data-skin="blue" style="background-color: blue"></li>
        <li data-skin="pink" style="background-color: pink"></li>
      </ul>
      <span class="skin-toggler"><i class="fa fa-cog"></i></span>
    </div>

To make if flow on the right side of the page use this css. Of course you can customize it they way you are comfortable with. Note: we are using font awesome for icons.

      .skins {
        position: fixed;
        top: 190px;
        left: -222px;
        transition: .3s ease-in-out;
      }

      .skins:hover {
        left: 0;
      }

      .skin-colors {
        list-style: none;
        padding: 20px;
        margin: 0;
        background-color: #fff;
        width: 222px;
        border: 1px solid #e7e7e7;
      }

      .skin-colors li {
        position: relative;
        display: inline-block;
        width: 34px;
        height: 34px;
        cursor: pointer;
        margin: 4px;
        transition: .3s ease-in-out;
      }

      .skin-colors li:hover {
        opacity: .7;
      }

      .skin-colors li.active::before {
        content: "\f00c";
        font-family: FontAwesome;
        font-size: 20px;
        width: 34px;
        line-height: 34px;
        text-align: center;
        position: absolute;
        color: #fff;
      }

      .skin-toggler {
        position: absolute;
        display: inline-block;
        width: 50px;
        height: 50px;
        right: -49px;
        top: 0;
        background-color: #fff;
        font-size: 30px;
        text-align: center;
        line-height: 50px;
        color: #888;
        border: 1px solid #e7e7e7;
        border-left: 0;
      }

And now, the jQuery part. As mentioned, we assume you have separate styles.

      $(function() {

        $("head").append('<link id="skin-css" rel="stylesheet">');
        $('.skin-colors li').on('click', function() {
          $('.skins li').removeClass('active');
          $(this).addClass('active');
          $('#skin-css').attr('href', 'css/skins/'+ $(this).data('skin') +'.css');
        });
      });

I hope you have a basic knowledge of JavaScript and jQuery.

Here is the live example of our html live customizer.

[codepen_embed height=”420″ theme_id=”dark” slug_hash=”MeWEEV” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/MeWEEV/’>Live customizer practice</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

It will work as we expected, but for our demo we will change it a bit. Let’s change the background color with jQuery instead of referencing to external css file.

Here is how we can do that.

$(function() {
      $('.skin-colors li').on('click', function() {
          $('.skins li').removeClass('active');
          $(this).addClass('active');
          $('body').css('background-color', $(this).data('skin'));
        });
 });

Here is our final html live customizer demo.

[codepen_embed height=”456″ theme_id=”dark” slug_hash=”JKjrMV” default_tab=”js,result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/JKjrMV/’>Live customizer practice 2</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Conclusion

HTML live customizer is something that every customer want to see on your projects, so it was how we can apply it html template. It’s not only HTML live customizer, but you can use for WordPress themes in the same ways. We hope it has been informative for you, if you have any questions related to this article, feel free to comment it bellow. 🙂

The post How to Add Live HTML Customizer to Demo Template? appeared first on TECHNIG.

In previous article, we discussed about the 2D transform in CSS3. This article is all about 3D transform. In 2009, the WebKit development team proposed a new extension to CSS that would allow Web page elements to be displayed and transformed on a three-dimensional plane(3D). This proposal was called 3D Transforms. CSS3 3D transform start from that time. Nowadays, CSS3 3D transform is support is most major browsers. Before we start learning the 3D transform, Lets see a few examples.

CSS 3D Solar System

by  Julian Garnier
[codepen_embed height=”439″ theme_id=”0″ slug_hash=”idhuG” default_tab=”result” user=”juliangarnier”]See the Pen <a href=’http://codepen.io/juliangarnier/pen/idhuG/’>CSS 3D Solar System</a> by Julian Garnier (<a href=’http://codepen.io/juliangarnier’>@juliangarnier</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

3D CSS Typography

by  Noah Blon

[codepen_embed height=”416″ theme_id=”0″ slug_hash=”CsxfH” default_tab=”result” user=”noahblon”]See the Pen <a href=’http://codepen.io/noahblon/pen/CsxfH/’>3D CSS Typography</a> by Noah Blon (<a href=’http://codepen.io/noahblon’>@noahblon</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

CSS3 3D Transform Browser Support

The browser support for 3D transform is good enough. It means, IE 11 support it with prefixes. Here is the caniuse.com browser support table.

3D Transformation Functions

The functions for 3D transformation in CSS3 are; translate3d , scale3d , rotate3d , matrix3d and perspective. We will talk about each of them separately.

3D Methods

For translate method, you have multiple options. you can use translateY() to translate the element in Y-axis. You can use translateX() in X-axis. And most importantly, you can use translateZ() axis, which runs front to back in 3D space. Positive values position the element closer to the viewer, negative values far away. Additionally, you can use translate3d() and give all the values at once.

Note: the same thing will work for other three methods as well. Here is an example

translate3d( x, y, z )
scale3d( x, y, z )
rotate3d( x, y, z, angle )

Matrix3d

If you new to matrix method in general, I recommend you to read the article about CSS3 2D transform first. there we explained how matrix work in very easy ways. Martix3d will will work instead of all three other methods. For example.

instead of this using two function like this

transform: rotate3d(1, 0, 1, 45deg) translate3d(24px,25px, 100px);

You can use

transform: matrix3d(0.8535533905932737, 0.4999999999999999, 0.14644660940672619, 0, -0.4999999999999999, 0.7071067811865476, 0.4999999999999999, 0, 0.14644660940672619, -0.4999999999999999, 0.8535533905932737, 0, 22.62994231491119, -20.3223304703363, 101.3700576850888, 1)

In one-line. Looking pretty easy. If you think it is a lot more complicated than first option, you might be confuse about the number values. You never need to write this values by hand. There are some tools that you can use to generate this values. All you do is enter the transformations you want and the click the red button for the tool to generate the equivalent matrix() function for you.

Perspective

The perspective property is used to activate the three-dimensional space on an element so that its children can be positioned in that space. You can use it in two different ways. Using it as method or as property.

Example used as method.

transform: perspective( 700px );

Used as property.

perspective: 600px;

Here is a live example.

[codepen_embed height=”494″ theme_id=”0″ slug_hash=”pyOYJB” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/pyOYJB/’>Practice Perspective in css</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Perspective-origin

By default, the vanishing point for a 3D space is positioned at the center. (It can be changed using the perspective-origin property.) If the elements don’t share the same three-dimensional space, each of them will have a vanishing point of its own. So, using perspective() will result in each element having its own space and therefore its own vanishing point. In order to avoid this and allow the elements to line up, they should share the same space. By using the perspective property on the container, a three-dimensional space is created that is shared by all its children.

You can specify the origin like so.

perspective-origin: 25% 75%;

Conclusion

Now you have learned how CSS3 3D transform work. You should now play and practice to master. Try to use in in different projects to understand how it function. We have shown you just one usage, but you must search for different examples and see how others use it. Check to last example on github. If you have any question about CSS3 3D transform or any other property, feel free to comment it bellow. 🙂

The post CSS3 3D Transform in Depth Tutorial with Examples appeared first on TECHNIG.

In the previous tutorial, we have learned the CSS3 2D transition property. This is CSS3 2d transform tutorial, another amazing feature of CSS3. If you master the transform property, you will master the animation world in CSS3. Though transform property is not for animation, it will help you create different effects when using animations.

What is CSS3 Transform?

The transform property allows you to visually change an element by skewing, rotating, translating and scaling. A transformation is an effect that lets an element change shape, size and position. CSS3 supports 2d and 3d transformations. First will learn the CSS3 2D transform and next will go to 3D. But before that, let’s see and example.

[codepen_embed height=”266″ theme_id=”0″ slug_hash=”aNjEVP” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/aNjEVP/’>Practicing 2D and 3D transform in css3</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

CSS3 2D Transform

2D transformation let you transform the element in 2D mode. Before we check an example about 2D, let’s see the browser support and general property values.

The following will be the methods for 2D transformation.

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

General Structure – It’s boring to talk about each of the functions separately, so we will give the general structure that will work for all of this functions.

/* Property: values */
transform: none;

/*Property: Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

If you want to give multiple values at the same time, you can do like so.

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

The global values would be as following.

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

Explanations:

Matrix: To understand the matrix() method, it is best to understand the other four types first. The Other four do as they sound. translate()– move, rotate() –  turn round, scale() – scale the size and skew() – will oblique the element.

The remaining functions are matrix and perspective.

matrix(a, b, c, d, e, f) does everything that the previously listed transformation do.

The two arguments, a and d are for scaling the element in the x-direction and the y-direction. It works like  scale(a,b) .

The second and third arguments b and c are for skewing the element. The two values work identically to that of the skew(b, c) method.

Lastly, the last two arguments  e and  f  are for translating the element in the x-direction and the y-direction, respectively. Identically to that of the translate(e, f) method.

You can use the matrix() transformation to achieve an incredible effects.

Here is a basic structure.

#element {
     -moz-transform:    matrix(1.4488, -0.3882, 0.3882, 1.4489, 400px, -100px);
     -webkit-transform: matrix(1.4488, -0.3882, 0.3882, 1.4489, 400, -100);
     -o-transform:      matrix(1.4488, -0.3882, 0.3882, 1.4489, 400, -100);
     transform:         matrix(1.4488, -0.3882, 0.3882, 1.4489, 400, -100);
}

Conclusion.

There are a lot to talk about CSS3 2d transform. We will discuss about perspective property in the 3D transform tutorial. We hope you have learned something from this tutorial, if you have any type of question related to CSS3 2D transform or CSS3 in general, feel free to comment it bellow. 🙂

The post CSS3 2D Transform in Depth Tutorial appeared first on TECHNIG.

In the previous article CSS3 Gradient technique about CSS3 gradient, we learned the basic of gradient techniques in css. In this article we will continue and learn more about CSS3 gradient and specially, CSS3 radial gradient. If you have came directly to this part of the tutorial, we recommend you to take a look at the first part of the article, than refer to this part.

Multi Color Gradient

let’s continue with multi color gradient. It’s pretty simple, after second and third argument for linear-gradient function, add as many color as you want. Here an example

[codepen_embed height=”266″ theme_id=”0″ slug_hash=”jqxBYv” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/jqxBYv/’>practicing multi color gradient</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

If you use rgba color, you can specify the opacity as well. for instance

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

Yep, it was all about the basic of linear gradient. now let’s learn radial gradient.

How to Use CSS3 Radial Gradient?

CSS3 radial gradient is like a circle. It start from the center and ends to borders. You can think of center as 0% point, and the border as 100% point.

css3 radial gradient

The first parameter for the radial-gradient function is the shape. the default is ellipse, you can write circle instead. Here is the basic example.

.gradient {
  background-image:
    radial-gradient(
      circle,
      red,
      blue
    );
}

As like linear-gradient, you can add more arguments and more colors.

[codepen_embed height=”266″ theme_id=”0″ slug_hash=”pyVeQG” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/pyVeQG/’>practicing radial gradient</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

Specify the Size

In the above example, the circle of the gradient is out the 300px box. You can give the size value to make it fit on the container. We have different size values. Here are the list.

• closest-side
• farthest-side
• closest-corner
• farthest-corner

You can write them list this

  background: radial-gradient(circle closest-side, red, blue, green); 

Lastly, if you want  to use CSS3 gradient in production projects, make sure you write the prefixes. Here an example for all major browser support.

.technig-gradient {
  background: red; /* For browsers that do not support gradients */
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */
  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */
  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */
  background: radial-gradient(circle, red, yellow, green); /* Standard syntax */
}

Conclusion

There are a lot to learn about CSS3 gradients, you can search on w3schools for more arguments support. We hope it has been helpful for you. If you have any types of questions related to CSS3 feel free to comment it bellow. 🙂

The post Understanding CSS3 Radial Gradient – Part 2 appeared first on TECHNIG.