1599404864
Creating SVG Sprites using Gulp and Sass
Following on from our recent blog post about SVG Sprites which gave an introduction and overview to using SVGs in a sprite, this post will outline the processes and tools we use for creating and using an SVG Sprite at Liquid Light.
Creating and maintaining large SVG sprites can be cumbersome and time consuming, so we decided to automate the process. Rather than managing a single large SVG sprite and tracking the coordinates of each icon individually, we wanted to be able to edit each icon and have the creation and co-ordinate generation automated.
In practice this means that we are able to put all our SVG icons into a folder and the SVG sprite is created and optimised automatically along with a Sass map or names and co-ordinates. By using Sass mixins we are then able to include our sprites by using a very simple bit of code:
button {
&:before {
@include sprite(search);
content: '';
}
}
**All the code can be found in a repo over on **Github
Automating the process
To integrate SVG sprites into our workflow, we decided we wanted a task runner to create the sprite - this meant that we could individually create and update the individual icons without editing and updating the whole image. Gulp is the task runner of choice, running (amongst other things) gulp-svg-sprites. We also wanted the CSS to be created automatically - with the dimensions and background positions calculated upon creating. This gives the advantage of being able to alter an icons dimensions and the CSS updates to reflect this.
By default, the gulp-svg-sprites plugin generates its own CSS, but typo3 has its own classes so we needed a way to create the dimensions and positions as variables, and allow us to use them on existing selectors. For this, we decided to turn to Sass.
Using Sass, the icons are stored in an array - or “map” (find out more about Sass maps). Using some custom mixins, we are able to call on any icon in the sprite and, upon compilation, output the dimensions and background position of each icon.
This blog post is not an introduction to Gulp or Sass (there are plenty of awesome ones around the web for that e.g. ones by Mark Goodyear, Sitepoint and Codefellows ) but rather a post detailing the specific workflow we have for creating and using SVG Sprites. It will run you through the gulp plugins, the gulp tasks we have set up and the specific mixins we use.
The Gulp Plugins - Installation
To run the gulp tasks we first need to install some packages from npm. Run the command below to install the required packages (and gulp itself) and saves them to your package.json.
$ npm install gulp gulp-size gulp-svg-sprite gulp-util --save-dev
Note: If you don’t already have a package.json run npm init to create one.
A quick run down of why each of the plugins are there
gulp-size- This outputs the size of various files for the usergulp-svg-sprite- this is the heavy lifter, creating the SVG sprite and CSSgulp-util- Used for outputting coloured messages to the screen
Once installed, ensure you inlcude them at the top of the gulpfile.js.
var gulp = require('gulp');
var $ = {
gutil: require('gulp-util'),
svgSprite: require('gulp-svg-sprite'),
size: require('gulp-size'),
}
We declare them in a $ object to group them.
The Gulp Task - gulpfile.js
At the top of the gulpfile, we delcare a basePaths and paths object. This enables us to group and use paths as variables - making it easier to update and transport to other projects.
We have several gulp tasks to make the sprite and accompanying files (see below). The first task spritewatches a specified folder; any SVG files added or edited trigger the task and the sprite (with accompanying scss file) is created.
Individual SVG files are passed through a SVG optimiser before being combined into a sprite to ensure the sprite file is as small as possible.
We store all our paths and plugins in objects at the beginning of the file, but they can simply be replaced in the appropriate places below (a full file download can be found in the Github repo).
Warning: Mac safari produced different results (when using ems for background position) than any other browser when the sprite was created in a vertical or horizontal way. Diagonal is the only layout where all browsers behaved the same
Warning: Make sure your sprite does not exceed dimensions of 2300px x 2300px - otherwise <= iOS7 won’t display the image at all.
gulp.task('sprite', function () {
return gulp.src(paths.sprite.src)
.pipe($.svgSprite({
shape: {
spacing: {
padding: 5
}
},
mode: {
css: {
dest: "./",
layout: "diagonal",
sprite: paths.sprite.svg,
bust: false,
render: {
scss: {
dest: "css/src/_sprite.scss",
template: "build/tpl/sprite-template.scss"
}
}
}
},
variables: {
mapname: "icons"
}
}))
.pipe(gulp.dest(basePaths.dest));
});
#sass
What is GEEK
Buddha Community
1599415860
Creating SVG Sprites using Gulp and Sass - CSS, JavaScript, Front end developer & CTO
Following on from our recent blog post about SVG Sprites which gave an introduction and overview to using SVGs in a sprite, this post will outline the processes and tools we use for creating and using an SVG Sprite at Liquid Light.
Creating and maintaining large SVG sprites can be cumbersome and time consuming, so we decided to automate the process. Rather than managing a single large SVG sprite and tracking the coordinates of each icon individually, we wanted to be able to edit each icon and have the creation and co-ordinate generation automated.
In practice this means that we are able to put all our SVG icons into a folder and the SVG sprite (and PNG fallback for IE8) is created and optimised automatically along with a Sass map or names and co-ordinates. By using Sass mixins we are then able to include our sprites by using a very simple bit of code:
button {
&:before {
@include sprite(search);
content: '';
}
}
**All the code can be found in a repo over on **Github
Automating the process
To integrate SVG sprites into our workflow, we decided we wanted a task runner to create the sprite - this meant that we could individually create and update the individual icons without editing and updating the whole image. Gulp is the task runner of choice, running (amongst other things) gulp-svg-sprites. We also wanted the CSS to be created automatically - with the dimensions and background positions calculated upon creating. This gives the advantage of being able to alter an icons dimensions and the CSS updates to reflect this.
By default, the gulp-svg-sprites plugin generates its own CSS, but typo3 has its own classes so we needed a way to create the dimensions and positions as variables, and allow us to use them on existing selectors. For this, we decided to turn to Sass.
Using Sass, the icons are stored in an array - or “map” (find out more about Sass maps). Using some custom mixins, we are able to call on any icon in the sprite and, upon compilation, output the dimensions and background position of each icon.
This blog post is not an introduction to Gulp or Sass (there are plenty of awesome ones around the web for that e.g. ones by Mark Goodyear, Sitepoint and Codefellows ) but rather a post detailing the specific workflow we have for creating and using SVG Sprites. It will run you through the gulp plugins, the gulp tasks we have set up and the specific mixins we use.
The Gulp Plugins - Installation
To run the gulp tasks we first need to install some packages from npm. Run the command below to install the required packages (and gulp itself) and saves them to your package.json.
<code class="language-git">$ npm install gulp gulp-size gulp-svg-sprite gulp-svg2png gulp-util --save-dev
Note: If you don’t already have a package.json run npm init to create one.
A quick run down of why each of the plugins are there
gulp-size- This outputs the size of various files for the usergulp-svg-sprite- this is the heavy lifter, creating the SVG sprite and CSSgulp-svg2png- converts SVGs to PNG - We’ll be using this to make our PNG fallbackgulp-util- Used for outputting coloured messages to the screen
Once installed, ensure you inlcude them at the top of the gulpfile.js.
<code class="language-javascript">var gulp = require('gulp');
var $ = {
gutil: require('gulp-util'),
svgSprite: require('gulp-svg-sprite'),
svg2png: require('gulp-svg2png'),
size: require('gulp-size'),
}
We declare them in a $ object to group them.
#sass #gulp #css #javascript
1620729846
Why Use WordPress? What Can You Do With WordPress?
Can you use WordPress for anything other than blogging? To your surprise, yes. WordPress is more than just a blogging tool, and it has helped thousands of websites and web applications to thrive. The use of WordPress powers around 40% of online projects, and today in our blog, we would visit some amazing uses of WordPress other than blogging.
What Is The Use Of WordPress?
WordPress is the most popular website platform in the world. It is the first choice of businesses that want to set a feature-rich and dynamic Content Management System. So, if you ask what WordPress is used for, the answer is – everything. It is a super-flexible, feature-rich and secure platform that offers everything to build unique websites and applications. Let’s start knowing them:
1. Multiple Websites Under A Single Installation
WordPress Multisite allows you to develop multiple sites from a single WordPress installation. You can download WordPress and start building websites you want to launch under a single server. Literally speaking, you can handle hundreds of sites from one single dashboard, which now needs applause.
It is a highly efficient platform that allows you to easily run several websites under the same login credentials. One of the best things about WordPress is the themes it has to offer. You can simply download them and plugin for various sites and save space on sites without losing their speed.
2. WordPress Social Network
WordPress can be used for high-end projects such as Social Media Network. If you don’t have the money and patience to hire a coder and invest months in building a feature-rich social media site, go for WordPress. It is one of the most amazing uses of WordPress. Its stunning CMS is unbeatable. And you can build sites as good as Facebook or Reddit etc. It can just make the process a lot easier.
To set up a social media network, you would have to download a WordPress Plugin called BuddyPress. It would allow you to connect a community page with ease and would provide all the necessary features of a community or social media. It has direct messaging, activity stream, user groups, extended profiles, and so much more. You just have to download and configure it.
If BuddyPress doesn’t meet all your needs, don’t give up on your dreams. You can try out WP Symposium or PeepSo. There are also several themes you can use to build a social network.
3. Create A Forum For Your Brand’s Community
Communities are very important for your business. They help you stay in constant connection with your users and consumers. And allow you to turn them into a loyal customer base. Meanwhile, there are many good technologies that can be used for building a community page – the good old WordPress is still the best.
It is the best community development technology. If you want to build your online community, you need to consider all the amazing features you get with WordPress. Plugins such as BB Press is an open-source, template-driven PHP/ MySQL forum software. It is very simple and doesn’t hamper the experience of the website.
Other tools such as wpFoRo and Asgaros Forum are equally good for creating a community blog. They are lightweight tools that are easy to manage and integrate with your WordPress site easily. However, there is only one tiny problem; you need to have some technical knowledge to build a WordPress Community blog page.
4. Shortcodes
Since we gave you a problem in the previous section, we would also give you a perfect solution for it. You might not know to code, but you have shortcodes. Shortcodes help you execute functions without having to code. It is an easy way to build an amazing website, add new features, customize plugins easily. They are short lines of code, and rather than memorizing multiple lines; you can have zero technical knowledge and start building a feature-rich website or application.
There are also plugins like Shortcoder, Shortcodes Ultimate, and the Basics available on WordPress that can be used, and you would not even have to remember the shortcodes.
5. Build Online Stores
If you still think about why to use WordPress, use it to build an online store. You can start selling your goods online and start selling. It is an affordable technology that helps you build a feature-rich eCommerce store with WordPress.
WooCommerce is an extension of WordPress and is one of the most used eCommerce solutions. WooCommerce holds a 28% share of the global market and is one of the best ways to set up an online store. It allows you to build user-friendly and professional online stores and has thousands of free and paid extensions. Moreover as an open-source platform, and you don’t have to pay for the license.
Apart from WooCommerce, there are Easy Digital Downloads, iThemes Exchange, Shopify eCommerce plugin, and so much more available.
6. Security Features
WordPress takes security very seriously. It offers tons of external solutions that help you in safeguarding your WordPress site. While there is no way to ensure 100% security, it provides regular updates with security patches and provides several plugins to help with backups, two-factor authorization, and more.
By choosing hosting providers like WP Engine, you can improve the security of the website. It helps in threat detection, manage patching and updates, and internal security audits for the customers, and so much more.
#use of wordpress #use wordpress for business website #use wordpress for website #what is use of wordpress #why use wordpress #why use wordpress to build a website
1599404864
Creating SVG Sprites using Gulp and Sass
Following on from our recent blog post about SVG Sprites which gave an introduction and overview to using SVGs in a sprite, this post will outline the processes and tools we use for creating and using an SVG Sprite at Liquid Light.
Creating and maintaining large SVG sprites can be cumbersome and time consuming, so we decided to automate the process. Rather than managing a single large SVG sprite and tracking the coordinates of each icon individually, we wanted to be able to edit each icon and have the creation and co-ordinate generation automated.
In practice this means that we are able to put all our SVG icons into a folder and the SVG sprite is created and optimised automatically along with a Sass map or names and co-ordinates. By using Sass mixins we are then able to include our sprites by using a very simple bit of code:
button {
&:before {
@include sprite(search);
content: '';
}
}
**All the code can be found in a repo over on **Github
Automating the process
To integrate SVG sprites into our workflow, we decided we wanted a task runner to create the sprite - this meant that we could individually create and update the individual icons without editing and updating the whole image. Gulp is the task runner of choice, running (amongst other things) gulp-svg-sprites. We also wanted the CSS to be created automatically - with the dimensions and background positions calculated upon creating. This gives the advantage of being able to alter an icons dimensions and the CSS updates to reflect this.
By default, the gulp-svg-sprites plugin generates its own CSS, but typo3 has its own classes so we needed a way to create the dimensions and positions as variables, and allow us to use them on existing selectors. For this, we decided to turn to Sass.
Using Sass, the icons are stored in an array - or “map” (find out more about Sass maps). Using some custom mixins, we are able to call on any icon in the sprite and, upon compilation, output the dimensions and background position of each icon.
This blog post is not an introduction to Gulp or Sass (there are plenty of awesome ones around the web for that e.g. ones by Mark Goodyear, Sitepoint and Codefellows ) but rather a post detailing the specific workflow we have for creating and using SVG Sprites. It will run you through the gulp plugins, the gulp tasks we have set up and the specific mixins we use.
The Gulp Plugins - Installation
To run the gulp tasks we first need to install some packages from npm. Run the command below to install the required packages (and gulp itself) and saves them to your package.json.
$ npm install gulp gulp-size gulp-svg-sprite gulp-util --save-dev
Note: If you don’t already have a package.json run npm init to create one.
A quick run down of why each of the plugins are there
gulp-size- This outputs the size of various files for the usergulp-svg-sprite- this is the heavy lifter, creating the SVG sprite and CSSgulp-util- Used for outputting coloured messages to the screen
Once installed, ensure you inlcude them at the top of the gulpfile.js.
var gulp = require('gulp');
var $ = {
gutil: require('gulp-util'),
svgSprite: require('gulp-svg-sprite'),
size: require('gulp-size'),
}
We declare them in a $ object to group them.
The Gulp Task - gulpfile.js
At the top of the gulpfile, we delcare a basePaths and paths object. This enables us to group and use paths as variables - making it easier to update and transport to other projects.
We have several gulp tasks to make the sprite and accompanying files (see below). The first task spritewatches a specified folder; any SVG files added or edited trigger the task and the sprite (with accompanying scss file) is created.
Individual SVG files are passed through a SVG optimiser before being combined into a sprite to ensure the sprite file is as small as possible.
We store all our paths and plugins in objects at the beginning of the file, but they can simply be replaced in the appropriate places below (a full file download can be found in the Github repo).
Warning: Mac safari produced different results (when using ems for background position) than any other browser when the sprite was created in a vertical or horizontal way. Diagonal is the only layout where all browsers behaved the same
Warning: Make sure your sprite does not exceed dimensions of 2300px x 2300px - otherwise <= iOS7 won’t display the image at all.
gulp.task('sprite', function () {
return gulp.src(paths.sprite.src)
.pipe($.svgSprite({
shape: {
spacing: {
padding: 5
}
},
mode: {
css: {
dest: "./",
layout: "diagonal",
sprite: paths.sprite.svg,
bust: false,
render: {
scss: {
dest: "css/src/_sprite.scss",
template: "build/tpl/sprite-template.scss"
}
}
}
},
variables: {
mapname: "icons"
}
}))
.pipe(gulp.dest(basePaths.dest));
});
#sass
1614145832
A Complete Process to Create an App in 2021
It’s 2021, everything is getting replaced by a technologically emerged ecosystem, and mobile apps are one of the best examples to convey this message.
Though bypassing times, the development structure of mobile app has also been changed, but if you still follow the same process to create a mobile app for your business, then you are losing a ton of opportunities by not giving top-notch mobile experience to your users, which your competitors are doing.
You are about to lose potential existing customers you have, so what’s the ideal solution to build a successful mobile app in 2021?
This article will discuss how to build a mobile app in 2021 to help out many small businesses, startups & entrepreneurs by simplifying the mobile app development process for their business.
The first thing is to EVALUATE your mobile app IDEA means how your mobile app will change your target audience’s life and why your mobile app only can be the solution to their problem.
Now you have proposed a solution to a specific audience group, now start to think about the mobile app functionalities, the features would be in it, and simple to understand user interface with impressive UI designs.
From designing to development, everything is covered at this point; now, focus on a prelaunch marketing plan to create hype for your mobile app’s targeted audience, which will help you score initial downloads.
Boom, you are about to cross a particular download to generate a specific revenue through your mobile app.
#create an app in 2021 #process to create an app in 2021 #a complete process to create an app in 2021 #complete process to create an app in 2021 #process to create an app #complete process to create an app
1600327217
How to using Bootstrap 5 with Sass and Gulp 4 by Example
The most popular Bootstrap CSS and JavaScript framework for styling user interfaces is coming with a new version — Bootstrap 5. In this tutorial, we will learn how to use the latest Bootstrap 5 version with Gulp 4 and Sass to style and build a responsive mobile-first example app.
We’ll use JavaScript to fetch data from a JSON endpoint that exports the latest posts from Techiediaries.
Bootstrap is the most popular and widely used, among developers worldwide, open-source framework for building responsive UIs with HTML, CSS, and JavaScript. At this time, Bootstrap 4 is the major production release of bootstrap but soon we’ll have a Bootstrap 5 version that will bring many major changes and most importantly removing jQuery as a dependency, and dropping support for IE 10 and 11.
#bootstrap #bootstrap-5 #gulp #sass