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.

CSS click events is one of the most interesting topic to learn. In the past, we used to use CSS just for designing and layout of site, but now you can do much more than just designing. Nowadays, CSS can make decisions, calculation and reaction to users. In this tutorial, we are going to learn how CSS click events work and how we can make pure CSS hamburger menu.

We can do some basic stuff like responsive layouts, transparency in colors, grid, gradients and so much more without JavaScript.

But one thing we’ve always been missing is the possibility to handle click events with CSS. Actually, some people think we shouldn’t have this option since interactions are more like a JavaScript kind of stuff. I understand the idea, but it always bothered me to have to use JavaScript for a very simple click event.

look at the following demo:

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”RrExyK” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/RrExyK/’>Css Click event</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

I have used pure CSS for handling click event. So now lets learn it.

How CSS Click Events Works

As of today, CSS doesn’t provide any official way to handle a click event in CSS. But there are some interesting tips and tricks that we can use to “detect” a click using pure CSS, without a single line of JavaScript. Some of this tricks might not work in older browsers, so please don’t use them in your real projects. It’s just tips and tricks that’s possible to do.

Using Checkbox

Using checkbox for CSS click events is the best and most reliable way. Checkbox is what you already know about. It’s binary, means either checked or unchecked (0 or 1).

Let’s look at the example:

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”KVbodz” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/KVbodz/’>Simple1 click event css</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

When you check the chekbox it’s changing the color and background color of the paragraph.

Now let’s make it a little more interesting.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”VeqXmV” default_tab=”result” user=”Hujjat”]See the Pen <a href=’http://codepen.io/Hujjat/pen/VeqXmV/’>Simple 2 css click event</a> by Hujjat Nazari (<a href=’http://codepen.io/Hujjat’>@Hujjat</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

As you can see we have added a new label tag. Then we gave it some styling to look like a button. Our check box has absolute position with top and left value. Now you can play with CSS property to make it the way you want.

Conclusion

It was just the basic of handling click events in CSS. There are some other ways also that you can detect click events and we will cover them in future articles. I hope it has been informative for you. If you have any question or confusion, feel free to ask on comment and I will answer.

The post How to Handle CSS Click Events (Checkbox) appeared first on TECHNIG.

CSS or Cascading Style Sheets is a style sheet language used to define visual appearance and formatting of HTML documents. CSS is very simple to use and easy to learn, but using it in real project and creating something cool, awesome and user friendly is a little tedious. CSS solution is a going on tutorial that will tech you how to solve common problems in CSS and create something creative.

CSS Solution 1: Responsive Image in CSS

There are many solutions for making an image responsive in css, but the below code is the easiest and simplest way.

.responsive-image{
    max-width:100% !important;
    height:auto;
    display:block;
}

CSS Solution 2: Horizontally Center a div in a div

If you want to align your content horizontally, it means having equal space from left and right, here is the solution.

.container {
     width: 50%;
     margin: 0 auto;
}

Now everything inside “container” class will be in center of the page. If you want less space in right and left, increase the width percentage number.

If you want to target IE8 +, you might consider the old way.

.container {
    display: table;
    margin: 0 auto;
}

CSS Solution 3: First Letter of Article Larger

You might have seen this in publications or magazine, now you can use it in your website.

p:first-child::first-letter{
  font-family: "papyrus";
  font-size: 28px;
  font-weight: bold;
}

This code will change the first letter of each paragraph font-family to papyrus, font-size to 28px and you can add some more properties.

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

CSS Solutions 4: Split the Paragraphs into Columns

If you want to display you paragraph like newspaper or magazine in few columns, you can use column-count property in css.

Demo:

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

CSS Solutions 5: Media Queries for Standard Mobile Phones.

If you want to design for multiple devices, which means responsive design, definitely you need to know about media queries and the devices size. here is the list of all popular device width.

Examples: 

• iPhones

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 5 and 5S ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 568px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {

}

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

• Galaxy Phones.

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 2) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S4 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

/* ----------- Galaxy S5 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

• HTC Phones

/* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

}

/* Portrait */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: portrait) {

}

/* Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {

}

Conclusion

I hope it has been informative for you and if you have any question related to this topic, feel free to comment it below. I will continue this tutorial with some more css solution in future topic. 🙂

The post CSS Solution for Web Designers – Part1 appeared first on TECHNIG.