How to Draw a Spider, Step by Step

Post pobrano z: How to Draw a Spider, Step by Step

Final product image
What You’ll Be Creating

Arachnophobia is probably the most popular phobia: the fear of spiders. In a sense, it’s not an irrational fear. After all, many spiders are venomous! However, most of them are not harmful to humans, and they do not actively seek contact with us. A spider sitting on its web poses no danger to you, and if know it but you still feel uneasy about it, desensitization therapy may be good for you. Drawing a spider can be a part of it!

1. How to Draw a Spider

Step 1

Draw a circle. This will be the torso.

spider circle torso

Step 2

Attach a slightly tapered oval to the torso. This will be the abdomen.

spider drawing abdomen

Step 3

Attach the head to the torso.

spider drawing head

Step 4

Draw the mandibles in the front.

spider drawing mandibles

Step 5

Time for the legs. There are eight of them, so prepare space for four of them on each side of the torso.

spider drawing eight legs

Step 6

Draw the base of each leg.

spider drawing leg base

Step 7

Draw the three main segments of the legs and the palps in the front. First, a short section…

spider drawing palps short legs

… then a slightly longer one…

spider drawing middle part of leg

… and a short one again.

spider drawing end of the legs

Step 8

The legs have more sections; they are not as visible though.

spider drawing more leg sections

Step 9

Let’s add some thickness to the legs now, segment by segment. First, define the width of the segment with lines…

spider drawing leg width

… then outline it.

spider drawing leg outline

Step 10

Draw the other segments the same way, making each thinner and thinner.

spider drawing middle segment width
spider drawing middle segment outline
spider drawing leg segment
spider drawing leg width
spider drawing spider legs
spider drawing thin leg
spider drawing leg tip

Step 11

Add some details to the body of the spider: eight eyes, spinnerets, torso details, and a pattern on the abdomen.

spider drawing details

Step 12

Finally, outline the whole body and add some hair here and there.

spider drawing finished

Good Job!

You did it! If you want to learn more about spiders, their anatomy and species, check out the tutorial below:

how to draw a spider step by step

How to Create a Fear of the Dark Illustration in Adobe Illustrator

Post pobrano z: How to Create a Fear of the Dark Illustration in Adobe Illustrator

Final product image
What You’ll Be Creating

Darkness is probably one of our oldest fears, since it has haunted our imagination starting with the dawn of time, bending and twisting reality in such ways that it has been permanently inserted in our genetic memory as a phobia known as nyctophobia.

Today, we’re going to do a little reality distortion ourselves and create a spooky illustration using some of the most basic geometric shapes and tools that one can find within Adobe Illustrator.

You can discover more types of phobias by heading over to GraphicRiver, where you’ll find a great selection of vector illustrated fears.

That being said, make sure you have plenty of light sources surrounding you so that we can jump straight into action!

1. How to Set Up a New Project File

Since I’m hoping you already have
Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N)
for our project using the following settings:

  • Number
    of Artboards:
    1
  • Width:
    720
    px
  • Height:
    1080
    px
  • Units:
    Pixels

And from the Advanced tab:

  • Color
    Mode:
    RGB
  • Raster
    Effects:
    Screen (72ppi)
  • Preview Mode: Default
setting up a new document

2. How to Set Up a Custom Grid

Even though today we’re not working on
icons, we’ll still want to create the illustration using a pixel-perfect
workflow, by setting up a nice little grid so that we can have full control
over our shapes.

Step 1

Go to the Edit > Preferences > Guides & Grid submenu, and adjust
the following settings:

  • Gridline
    every:
    1 px
  • Subdivisions: 1
setting up a custom grid

Quick
tip:
you can learn more about grids by reading this
in-depth piece on How Illustrator’s Grid System Works.

Step 2

Once we’ve set up our custom grid, all we
need to do in order to make sure our shapes look crisp is enable the Snap to Grid option found under the View menu (that’s if you’re using an
older version of Illustrator).

Now, if you’re new to
the whole “pixel-perfect workflow”, I strongly recommend you go through my How
to Create Pixel-Perfect Artwork
tutorial, which will help you widen your
technical skills in no time.

3. How to Set Up the Layers

Once we’ve finished setting up our project
file, it would be a good idea to structure our document using a few layers, since this way we can maintain a steady workflow by focusing on one
section of the illustration at a time.

That being said, bring up the Layers panel, and create a total of three
layers, which we will rename as follows:

  • layer 1: background
  • layer 2: window
  • layer 3: window
    projection
setting up the layers

Quick tip: I’ve colored all of my layers using the same
green value, since it’s the easiest one to view when used to highlight your
selected shapes (whether they’re closed or open paths).

4. How to Create
the Background

We’re going to kick off the
project by quickly creating the background, so make sure you’re on the
right layer (that would be the first one), and then lock all the other ones so
that we can get started.

Step 1

Create a 720 x 1080 px rectangle,
which we will color using #3F3330 and then center align to the underlying
Artboard using the Align panel.

creating and positioning the main shape for the illustrations background

Step 2

Lock the current layer, and then move on up to the next one (that would be the second one) where
we’ll start working on our next composing section.

locking the illustrations background layer

5. How to Create
the Window Section

Once we’ve
finished working on the background, we can shift our focus over to the window,
which we will create in the following moments.

Step 1

Start working on the frame, by creating a 184 x 292 px rectangle, which we will color using #70463E, and then
center align to the underlying Artboard, positioning it at a distance of 214 px from its top edge.

creating and positioning the main shape for the illustrations window frame

Step 2

Create the window section using a smaller 160 x 280 px rectangle, which we will
color using #FF8D60 and then center align to the previous shape’s bottom edge. Once you have the two shapes in place, select and then
group them together using the Control-G keyboard
shortcut.

creating and positioning the main shape for the illustrations window section

Step 3

Create the moon using an 80 x 80
px
circle (#FFFFFF), which we will position
onto the window section, at a distance of 14
px
from its left edge and 40 px from
its top one.

creating and positioning the main shape for the illustrations moon

Step 4

Give the moon a spooky atmosphere by adding a couple of 4 px tall rectangles (#FF8D60), which
we will adjust pushing their bottom inner facing anchor points to the top by 3 px (right click > Transform > Move
> Vertical > -3 px
). Position the resulting shapes as seen in the reference
image, selecting and grouping them and the moon together afterwards using the Control-G keyboard shortcut.

adding the spooky lines to the illustrations moon

Step 5

Start working on the frame’s inner section by creating the vertical grid using a 4 x 280 px rectangle (#3F3330), which
we will center align to the smaller window section.

creating and positioning the main shapes for the window frames vertical grid

Step 6

Add the upper horizontal grid using a 160 x 4 px rectangle (#3F3330), which we will center align to the
underlying window section, positioning it at a distance of 96 px from its top edge.

creating and positioning the main shape for the windows upper horizontal grid

Step 7

Start working on the horizontal grid’s outer rounded segments by
creating two sets of two 16 x 16 px circles
(#3F3330), which we will position as seen in the reference image.

creating and positioning the main shapes for the horizontal grids outer rounded segments

Step 8

Adjust each pair of circles by selecting and
removing their inner facing two anchor points, uniting the resulting paths into
a single larger shape using the Control-J
keyboard shortcut twice.

adjusting the shape of the horizontal grids outer rounded segments

Step 9

Create the inner rounded segments using two sets
of two 8 x 8 px circles (#3F3330),
which we will position as seen in the reference image.

creating and positioning the main shapes for the horizontal grids inner rounded segments

Step 10

Open up each of the four circles by removing their outer facing anchor
points, uniting the resulting paths into a single larger shape by pressing Control-J four times. Once you’re done,
select and group (Control-G) all of
the horizontal grid’s composing shapes together, before moving on to the next
step.

adjusting the shape of the horizontal grids inner rounded segments

Step 11

Create the bottom horizontal grid using a copy (Control-C > Control-F) of the one that
we’ve just finished working on, which we will position below at a distance of 64 px. Once you’re done, select and
group all of the window’s composing sections using the Control-G keyboard shortcut.

creating and positioning the main shapes for the windows bottom horizontal grid

Step 12

Start working on the window’s sill by creating the subtle highlight using a 216 x 2 px rectangle,
which we will color using #FF8D60 and then position underneath the shapes that
we’ve just grouped.

creating and positioning the main shape for the highlighted section of the windows sill

Step 13

Create the current section’s main body using a 216 x 14 px rectangle (#70463E), which we will position below the
previously created shape.

creating and positioning the main shape for the body of the windows sill

Step 14

Following almost the same process used for
the moon’s atmospheric lines, add a couple of side insertions to the sill’s
main body. Take your time, and once you’re done select and group (Control-G) all of the current section’s
composing shapes together.

adding the side insertions to the window frames sill

Step 15

Start working on the window’s lintel by creating
its bottom section using a 232 x 4 px rectangle (#70463E), which we will position above the frame’s top
edge, at a distance of 8 px.

creating and positioning the main shape for the bottom section of the windows lintel

Step 16

Create the upper section of the lintel using a 240 x 8 px rectangle (#70463E), which
we will position above the previously created shape, at a distance of just 4 px.

creating and positioning the main shape for the upper section of the windows lintel

Step 17

Finish off the current section by adding the two
side insertions (#3F3330). Take your time and once you’re done select and group (Control-G) all of the lintel’s composing shapes together, doing the same for the entire window
afterwards.

adding the side insertions to the upper section of the windows lintel

Step 18

Start working on the left cover door by creating its hinges using two 4 x 10 px rectangles (#3F3330) which we
will align to the frame’s left edge, positioning them at a distance of 24 px from its top and bottom ones.

creating and positioning the main shapes for the windows left door hinges

Step 19

With the hinges in place, start working on the actual cover by creating
a 4 x 292 px rectangle (#70463E),
followed by seven smaller 4 x 276
ones (#70463E). Horizontally distance the shapes at 4 px from one another, grouping (Control-G) and then positioning them at a distance of 4 px from the window frame’s left side.

creating and positioning the main shapes for the windows left cover door

Step 20

Create the handle using a 4 x 28
px
rectangle (#70463E) to the right side of which we will add two 8 x 4 px rectangles (#70463E). Group (Control-G) all three shapes together
and then position them at a distance of 4
px
from the left cover as seen in the reference image. Once you’re done, select and group (Control-G) all of the cover door’s
composing shapes together before moving on to the next step.

adding the handle to the windows left cover door

Step 21

Create the right cover door, using a copy (Control-C > Control-F) of the one that we’ve just finished
working on, which we will vertically reflect (right click > Transform > Reflect > Vertical) and then
position onto the opposite side of the window frame.

adding the right cover door to the windows frame

Step 22

For this next step, I’m going to let you get a little creative, since you’ll have to draw the two spooky tree
branches with the help of the Pen Tool
(P)
using #3F3330 as your main Fill color.
Take your time, and use the reference images as your main guide, selecting and
grouping (Control-G) all your
resulting shapes before moving on to the next step.

drawing the illustrations two tree branches

Step 23

Start working on the little teddy bear, by creating its main body using
a 36 x 36 px circle, which we will
color using #3F3330 and then position onto the sill, at a distance of 36 px from the window’s left edge.

creating and positioning the main shape for the teddy bears body

Step 24

Adjust the shape that we’ve just created by selecting its top anchor point using the Direct Selection Tool (A) and then
pushing it to the outside by 4
px
using the Move tool (right click > Transform > Move >
Vertical > -4 px
).

adjusting the shape of the teddy bears main body

Step 25

Start working on the toy’s left leg, by creating a 16 x 20 px ellipse (#3F3330) on top of which we will add a smaller 8 x 12 px one (#70463E). Group (Control-G) the shapes together, and
then rotate them at a 45º angle (right click > Transform > Rotate >
45º
), positioning them onto the larger body’s left side as seen in the
reference image.

creating and positioning the main shapes for the teddy bears left leg

Step 26

Create the right leg using a copy (Control-C > Control-F) of the one
that we’ve just finished working on, which we will
vertically reflect (right click >
Transform > Reflect > Vertical
) and then position on the opposite side of the bear’s larger body.

creating and positioning the main shapes for the teddy bears right leg

Step 27

Start working on the left paw by creating its bottom section using an 8 x 8 px circle (#3F3330), which we
will position onto the leg, at a distance of 32 px from the window’s left edge.

creating and positioning the main shape for the lower section of the teddy bears left paw

Step 28

Add the paw’s upper section using a 10
x 10 px
square (#3F3330) which we will adjust by setting the Radius of its top-left corner to 10 px from within the Transform panel’s Rectangle Properties. Once you’re done, position the resulting
shape onto the circle’s upper half, selecting and grouping both of them
together using the Control-G
keyboard shortcut.

creating and positioning the main shape for the upper section of the teddy bears left paw

Step 29

Add the right paw using a copy (Control-C
> Control-F
) of the one that we’ve just finished working on, which we
will vertically reflect (right click
> Transform > Reflect > Vertical
) and then position on the
opposite side of the bear’s body.

adding the teddy bears right paw

Step 30

Create the toy’s head using a 28
x 24 px
ellipse, which we will color using #3F3330 and then position onto
the larger body, at a distance of 34 px from
its bottom edge.

adding the teddy bears head

Step 31

Finish off the bear by adding its ears using two
12 x 12 px circles (#3F3330), which
we will position 8 px from
one another horizontally, grouping (Control-G)
and then positioning them as seen in the reference image. Once you’re
done, select and group (Control-G)
all of the toy’s composing shapes before moving on to the next step.

adding the teddy bears ears

Step 32

Add the first segments of the projected legs using two 4 x 14 px rectangles (#3F3330), which
we will position 16 px from
one another, grouping (Control-G) and
then positioning them on the window’s sill.

adding the first segments of the projected monsters legs

Step 33

Create the lower visible section of the wall
using a 160 x 48 px rectangle, which
we will color using #70463E and then position below the sill, at a distance of
just 24 px.

creating and positioning the main shape for the visible section of the illustrations wall

Step 34

Finish off the current section of the illustration by adding the second
segments of the projected legs using two 6
x 48 px
rectangles (#3F3330). Adjust the segments by individually
selecting and pushing their top outer anchor points to the inside by 2 px (right click > Transform > Move > + / – 2 px depending on
which side you start with). Horizontally space the resulting shapes 16 px from one another, grouping (Control-G) and then positioning them
onto the visible section of the wall.

adding the second pair of segments of the projected monsters legs

6. How to Create
the Window Projection Section

Assuming you’ve
locked the previous layer, move on up to the third and last one, where we’re
going to work on the lower half of the illustration, where all the dark magic
happens.

Step 1

Create the projected window using a 232
x 280 px
rectangle, which we will color using #EA764E and then position
below the visible wall section, at a distance of 16 px from its bottom edge.

creating and positioning the main shape for the illustrations projected window

Step 2

Adjust the shape that we’ve just created, by individually selecting and
pushing its top anchor points to the inside by a distance of 36 px using the Move tool (right click >
Transform > Move > Horizontal > + / – 36 px
depending on which
side you start with).

adjusting the shape of the illustrations projected window

Step 3

Create the vertical grid using a 4 x 280 px rectangle, which we will
color using #3F3330, and then center align to the shape that we’ve just
adjusted.

creating and positioning the main shape for the projected window frames vertical grid

Step 4

Add the horizontal grids using a copy (Control-C) of the ones from the
previous section, which we will paste onto the current layer (Control-F). Position the copies onto the
projected window, making sure to adjust their length as seen in the reference
image.

adding the horizontal grids to the illustrations projected window

Step 5

Create the projected tree branches using a copy
(Control-C) of the ones that we’ve
previously made, which we will paste onto the current layer (Control-F) and then adjust by
horizontally reflecting them (right
click > Transform > Reflect > Horizontal
). Position the resulting
shapes onto the right side of the projected window, as seen in the reference
image.

adding the tree branches to the illustrations projected window

Step 6

Finish off the current section and with it the
illustration itself, by drawing the scary shadow monster using #3F3330 as your
Fill color. Take your time, and once
you’re done, select and group (Control-G)
all of the projected window’s composing shapes together before saving the
project.

finishing off the illustration

All Lights On!

Phew, now that was a scary one! I hope you’ve managed to keep up with each and every step, and maybe, just maybe, to break free of your fears for a little while during the process.

The Benefits of Open-Source software for Web Design

Post pobrano z: The Benefits of Open-Source software for Web Design
first image of the post

People often stay away from open source software because of the perceived risk that comes with code anyone can inspect. It’s a logical argument, but it’s not necessarily a good reason to not use open source. Open source coders are always looking for security flaws and finding ways to fix them so they can make a name for themselves in the world of coding. And coders flock to open source software because they can build upon an existing framework without having to deal with roadblocks thrown up by a major name developer. In fact, many major websites are built on open source software primarily due to the fact that there’s no need to get around trademarked code.

Drupal, WordPress, and Joomla are all major software platforms used by millions and are all created from open source code. In fact, WordPress is the most downloaded content management system on the market. WordPress became popular because it’s easy to use, has countless free plug-ins, and thousands of templates both free and paid. Joomla and Drupal are also content management systems and have features that are similar to WordPress.

All of these open source software systems are popular for various reasons; the least of which is that they’re free or almost free. They come with developer support to help users get past issues, are easy to use, and users can make the platforms fit their needs with little effort. Read on to the infographic below to learn more about these popular platforms and how they’re here to stay.

What’s Trendy in 2017. Top 15 Flagship Themes

Post pobrano z: What’s Trendy in 2017. Top 15 Flagship Themes
first image of the post

What’s Trendy in 2017. Top 15 Flagship Themes

No matter if you are going to update the already launched web resource or bring a new project to the web, you are likely to be looking for trendy and stylish solutions that will help your resource shine. In the showcase that we share below, you can find the 15 most popular and trending flagship themes from TemplateMonster compatible with the latest versions of the world-known platforms. So, if you run a website on WordPress, Joomla, HTML5, Magento, OpenCart or PrestaShop, you are likely to find a design that matches your preferences.

The inventory of ready-made themes from TemplateMonster counts more than 26,000 for various purposes. More and more often you can notice multipurpose templates being added to the marketplace. The demand on such themes grows at a fast rate. Fit-it-all designs come loaded with every piece of functionality suited to enhance the visual appeal of a site and make it more powerful from the inside.

The themes that we will discuss here include various features and are suited for different purposes. However, all of them have special peculiarities in common. All of them are developed as per the latest web tendencies. All of them are well-documented and feature free 24/7support. You can personalize their layouts on your own or ask experts from TM Service Center for help.

Intense Multipurpose Website Template

Intense is a powerful and feature-rich HTML5 theme intended to be used for a number of business projects. This is a fully responsive website template that includes a collection of 450+ HTML pages, multiple header and footer layout variations, pre-designed templates for blog/portfolio pages, reusable elements, various sidebar widgets, and a whole lot of other options. The theme includes a rich collection of child skins that are intended to be used for the web resources of different niches. The theme is eCommerce-ready, letting you get started with a full-fledged web store on its basis.

Details | Demo

Starbis – Multipurpose Website Template For Business

Starbis is a multipurpose HTML5 template suited to be used for both personal and business projects. It includes a growing collection of child skins, which are available to the theme owners at no cost. The theme is powered by the fully responsive Bootstrap framework, which is intended to adjust all components of the layout to all screen sizes. The theme includes collections of header and footer styles, which will help you bring the desired structure to the page layout in the shortest period of time. Starbis is an eCommerce-ready template, which comes loaded with every single element needed to build a web project by means of which you can start selling for profit.

Details | Demo

Monstroid2 – Multipurpose WordPress Theme

Monstroid Squared is a multifunctional and feature-rich WordPress template featuring a clean and minimalist design. The theme includes free lifetime updates and an ever-growing collection of child templates suited to be used for a number of business niches. The theme includes eCommerce integration, letting you launch a full-fledged web store on its basis. Collections of ready-made pages and pre-designed layouts are included to streamline the process of the theme customization. The theme runs on Cherry Framework 5 and includes a number of custom Cherry extensions. Premium-quality plugins are included for free use. Thanks to the integration of Jetimpex Dashboard, you can rest assured that the most valuable pieces of data and settings will be always backed up and protected from malware.

Details | Demo

Woostroid – Multipurpose WooCommerce Theme

Woostroid WooCommerce template includes every single feature needed to build a full-fledged web story. It supports both WooCommerce and Ecwid plugins. Owing to the regular and free lifetime updates, you will always have the most innovative options for running a profitable online business. Woostroid includes a growing collection of demo themes, which are intended to be used for tools, jewelry, lingerie, and other topics. The number of the niche skins is set to grow with the release of every consecutive update. With the purpose to make it much quicker and effortless to personalize the pages of the theme, webmasters are provided with free access to the Power drag-and-drop page builder and a number of content modules. WordPress Live Customizer is included to reveal the results of the theme modification in real-time.

Details | Demo

Creado – Art Gallery Responsive WordPress Theme

Creado WordPress theme will appeal to those users who are looking for a creative and functional starting point for art gallery websites. It is powered by the Grid CSS technology, which lets you organize different types of content in a non-standard style. WordPress Live customizer is added to reveal the results of the theme modification in real-time. 7 header styles, multiple custom widgets and content modules are included for free. The theme runs on Cherry Framework 5. A fully responsive Bootstrap-based framework makes every piece of content shared on the web page fully adaptive to the screens of all handheld devices.

Details | Demo

Jumerix – Multipurpose Joomla Template

Jumerix is a multipurpose Joomla theme that can be used to match a number of business purposes. With it help, you can get a blog, business studio or online portfolio live in the shortest period of time imaginable. All elements of the theme’s design are fully responsive and 100% editable. A rich UI kit is included to let you save time on creating custom designs for different design elements of your site. The theme includes a collection of multiple homepage layouts and ready-made pages for you to choose from. Swiper slider and video integration are added to bring an eye-catching presentation to different pieces of content on your site.

Details | Demo

Eveprest – Multipurpose PrestaShop Theme

Eveprest PrestaShop web theme is a superb way to attract more attention to your business or personal project. This is a multipurpose ready-made design that will be suited for selling fashion, beauty, jewelry, electronics, furniture, and other items on the web. The template includes a collection of 10 niche skins for various purposes. Web site content will be really easy to read due to lots of negative space and clear structure. Personalizing the pages will be a child’s play owing to TM Mega Layout builder. This is the best solution that supplies quick and smooth web development. 10+ premium modules are added for free use. The theme is fully responsive, thus it will not be difficult for you to attract site visitors throughout the world. If you have any inquiries on the subject of template usage you can have a look at the rich documentation, also you receive 24/7 priority support helping to get rid of any issue.

Details | Demo

imPresta – Multipurpose PrestaShop Theme

imPresta is a multipurpose PrestaShop theme that comes enhanced with a unique set of features suited for multiple purposes. Thanks to the integration of TM Mega Layout Builder and Mosaic Product module, you can tweak the pages of the site without touching a line of code. The theme includes a collection of exclusive premium modules, which you can use at no cost. 6 niche-specific skins are ready to be used for food, accessories, tools, cosmetics, toys, and bikes shops. There are also three pre-built product layouts for you to choose from. Advanced navigation and product sorting options are included alongside with a number of stunning product presentation options.

Details | Demo

Magetique – The Most Comprehensive Multipurpose Magento 2 Theme

Magetique is a versatile eCommerce theme powered by Magento 2. This is a feature-rich solution that is enhanced with every single piece of functionality and extensions needed to get started with a conversion-oriented web store. The theme includes a collection of more than 20 premium extensions for free. 5 ready-made layouts are suited to be used for fashion, cars, electronics, and other purposes. All elements of the template are fully editable and can be tweaked by means of ready-made layout options and advanced customization tools just the way you want.

Details | Demo

Jedi – Multifunctional Joomla Template

Jedi Joomla theme allows making a highly effective introduction to your business on the Internet and encourages people to explore more of your content. It is intended to become a rock-solid starting point of small to large-sized business web projects. Introducing extra style to the page’s visual appeal, this specific web template maintains equilibrium with well-positioned blocks that allow focusing on the content. This is a fully editable template containing 40 pre-designed pages and multiple header & footer variations. Thanks to its totally responsive layout, your web page will successfully adjust to the size of any display used to view it on. Neat, valid coding and comprehensive documentation will aid you in transforming this Joomla web design just how you need.

Details | Demo

Brave Theme – Multipurpose HTML Website Template

Brave multipurpose HTML5 theme is a fit-it-all solution that is intended to be applied to a number of business and personal web projects. The number of pre-designed pages and UI blocks simply impresses. Downloading the template you will be able to access all visual and functional elements needed to make your web resource an attention-grabber. Brave is integrated with Novi page builder. This is a revolutionary visual page builder that allows you to craft versatile web pages as you simply drag and drop multiple elements. The theme also includes multiple widgets suited to share different types of content on the pages of your site. Intended to be used by beginner and pro web developers equally well, the theme makes it possible to launch a powerful web resource without investing a fortune in premium features.

Details | Demo

Bellaina – Real Estate Responsive WordPress Theme

Bellaina is a full-fledged WordPress template intended to be used for property selling websites. It includes GPL license, which gives you the freedom of its modification in any way imaginable, as well as installation on as many web resources as you wish. The theme runs on Cherry Framework 5 and includes a number of a number of advanced Cherry options. It is also loaded with premium extensions, which you can use at no cost. For example, Cherry Real Estate plugin will bring advanced property search filters to your site. There is also an option to reveal search results on the integrate Google map and send property submissions to agents.

Details | Demo

Kustrix – Fashion Blog Magazine WordPress Theme

Kustrix theme is best suited to be used for fashion and beauty blogs. This is a functional WordPress template featuring GPL license. A clean and spacious layout of the template is intended to provide the web audience with the unparalleled UX. The theme is well suited to present content-heavy projects on the web. An easy and intuitive interface will be handled by the users of all skill levels perfectly well. Site visitors will definitely appreciate the pleasant user experience provided by easy-to-use navigation and smart arrangement of the layout. Responsive layout usually means that your web project will rapidly adapt to any device and any display dimensions. Richly documented and featuring cost-free round-the-clock assistance, this website template will help you get moving with your Internet project in no time.

Details | Demo

Ascendio – Corporate & Business WordPress Theme

Ascendio is a ready-made WordPress theme that will help you build a powerful and full-fledged corporate web page. It is loaded with the revolutionary Elementor page builder, which allows you to tweak the theme’s layout without touching a line of code. The theme can be used for both corporate purposes and eCommerce web projects. A number of header and footer variations are included to bring a fresh and stylish look to your site. A number of custom extensions are included at no cost, letting you save extra cash on the promotion of your business. Thanks to the integration of WordPress Live Customizer, bringing changes to the theme’s layout won’t take you too much time.

Details | Demo

Skyline – Business, Dentistry, Architecture & Travel Moto CMS 3 Template

Skyline is a multipurpose Moto CMS 3 template that can be adjusted to any purpose of yours. It includes a collection of 5 homepage layouts for different niches, 3 child themes, and 2 variants of the main theme. The theme is built with an intuitive drag-and-drop page editor, which frees you from the necessity to tweak the source code whenever you want to bring changes to the layout. The theme includes regular updates, which will provide its owners with new fonts, more pages, and additional possibilities of White Label.

Details | Demo

How Social Media Marketing Can Power Forward Your Startup

Post pobrano z: How Social Media Marketing Can Power Forward Your Startup
first image of the post

Starting a business has never been easy, let alone getting people to start buying from your store. It requires pumping in of time, money and resources. Effective marketing will also play a huge role to help you get around this problem. Luckily, the social media platform comes in to save the day especially for small businesses with low capital. You can choose to hire a SEO company that has multiple success stories managing other similar businesses. Social media marketing can help startups in the following ways:

Generation of quality leads

You will need a cot effective way through which you can sell your business. The social media platform offers you a large number of followers who are always searching for products or services on the platform. With your social media marketing campaign, you will be able to generate quality leads that may be converted into buying customers with ease.

Social engagement

It helps to increase engagement on social media. When Google is indexing websites, it also considers the social engagement aspect. What are people saying about your social media? How often do they talk about your business? All this will be considered when it comes to ranking and thus social media marketing is a must-have strategy when it comes to growing your startup.

Ability to build a community

A community for your business is as good as your customers. If you have a large following for your blogs or website, then you are in a better position to build a strong brand. This is what social media marketing gives you. With over 1 billion subscribers on Facebook only, you will have more to go around with. It only takes a reliable SEO company with experience on social media marketing to help you build that community for your business.

Help to drive traffic to your site

Traffic to your site is what you want if you want to increase sales. It helps you to attract the right people who are searching for the products or services you provide. When sharing content on social media, you also have to include quality SEO for better ranking on search engines. Outsource to a reputable SEO company to help you choose the right keywords to optimize into your content before you share it on social media for your followers.

Increases brand awareness

Your business brand is the heart of the success of your startup. If you execute it in the right way, you are bound to succeed. Social media marketing is the best way through which you can achieve brand loyalty among your followers. The more you engage with them own the social platform the more they will associate with your brand. This will increase awareness.

Increases press mentions

Once you get into the social scene you have a ready market to brand your business. All you need to do is to know how to tap into your market. The more your brand grows on social media, the high the possibility of getting press mentions. This will drive a lot of traffic to your site. You will however need to hire an expert in the same to help communicate your brand message to your target audience.face

 

Reboot, Resets, and Reasoning

Post pobrano z: Reboot, Resets, and Reasoning

I saw in an article by Nicholas Cerminara the other day (careful visiting that link, looks like they have some tracking scripts run wild) that Bootstrap 4 has a new CSS reset baked in they are calling Reboot:

Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon.

If you’re new to CSS development, the whole idea of a CSS reset is to deal with styling inconsistencies across browsers. For example, just now I popped a <button> onto a page with no other styling whatsoever. Chrome applies padding: 2px 6px 3px; – Firefox applies padding: 0 8px;. A CSS reset would apply new padding to that element, so that all browsers are consistent about what they apply. There are loads of examples like that.

By way of a bit of history…

In 2007 Jeff Starr rounded up a bunch of different CSS resets. The oldest one dated is Tantek Çelik’s undohtml.css (that’s a direct link to the source). We can see that the purpose behind it was to strip away default styling.

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
/*   http://creativecommons.org/licenses/by/2.0                   */
/* This style sheet is licensed under a Creative Commons License. */

/* Purpose: undo some of the default styling of common (X)HTML browsers */

By far, the most popular reset came shortly after: the Meyer reset. It has different stuff in it than Tantek’s did (it has even been updated with some HTML5 elements) but the spirit is the same: remove default styling. You’ll probably recognize this famous block of code, finding its way into your DevTools style panel everywhere:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

Start with a reset like this (at the top of your production stylesheet) and the styles you write afterword will be on a steady foundation.

Years later, as HTML5 became more real, resets like Richard Clark’s HTML5 Reset gained popularity. It was still a modified version of the Meyer reset, and the retained that spirit.

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

Sprinkled all throughout this, there were plenty of developers who went minimal by just zapping margin and padding from everything and leaving it at that:

* {
  padding: 0;
  margin: 0;
}

Dumb trivia: the CSS-Tricks logo was inspired by the universal selector and that idea.

Along comes Normalize.css…

Normalize.css represents the first meaningful shift in spirit for what a CSS reset should do. This is what seemed so different about it to me:

  • It was a fresh evaluation of everything that could be styled different across browsers and it address all of it. Where older CSS resets were a handful of lines of code, the uncompressed and documented normalize is 447.
  • It didn’t remove any styling from elements that were already consistent across browsers (for the most part). For example, there isn’t anything in Normalize for h2-h6 elements, just a fix for a weird h1 thing. That means you aren’t zapping away header hierarchy, that default styling remains.
  • It was more accommodating to the idea of altering it, rather than just including it. For example, there is a section just for the <pre> tag and one line of that sets its font-family. You could change that to the font-family you want, and it would be just as effective of a reset.

The code is satisfying to read, as it explains what it’s doing without drowning in specifics:

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

Today Normalize is at 7.0.0 and has going on 30,000 GitHub stars. It’s wicked popular.

So… resets can be opinionated?

We’ve seen lots of different takes on CSS resets and we’ve seen fundamental shifts in the approach, so I think it’s fair to say CSS resets can take an opinionated stance.

Let’s consider some ways…

  • Does the reset touch every single possible element? Or a subset of elements? How does it decide which elements to touch and which not to?
  • What properties are changed? Only ones with cross-browser differences? Or some other criteria, like the similarity to other elements that needed changes? Is it OK to apply properties to elements that don’t have cross-browser issues in the name of consistency and efficiency?
  • Do you try to preserve the spirit of the user agent stylesheet? Sensible defaults?
  • Do you apply any properties that don’t have cross-browser issues could be considered beneficial to „reset”, like typographic defaults or box-sizing?
  • Do you include „toolbox” classes for common needs? Or leave that for other projects to handle?
  • Are you concerned about the size of it?
  • Do you use a preprocessor or any other tooling?

Take a look at Vanilla CSS Un-Reset. Loads of opinions here, starting with the idea that it’s meant to re-style elements after you un-style then with a reset. It set’s the body font size in pt, set a very specific monospace font stack, includes a ol ol ol ol selector, a clearfix, and alignment helper classes. No judgment there. People make things to help with their own problems and I’m sure this was helpful to the creator. But we can see the opinions shine through there.

Now look at MiniReset.css. Very different! It does wipe out type styles „so that using semantic markup doesn’t affect the styling”, but leaves some defaults in place on purpose „so that buttons and inputs keep their default layout”, puts in some things that don’t have cross-browser problems but are useful globally (box-sizing), and adds some minor responsive design helpers.

Totally different set of opinions there.

Jonathan Neal created a reset called santize.css that is very clear about it’s opinions. Search for the word „opinionated” in the source code and you’ll see it 19 times. All these are choices that Jonathan made based on research and what seem to be modern best practices, and no doubt sprinkled with his own needs and desires for what should be in a reset.

/*
 * Remove the text shadow on text selections (opinionated).
 * 1. Restore the coloring undone by defining the text shadow (opinionated).
 */

::-moz-selection {
	background-color: #b3d4fc; /* 1 */
	color: #000000; /* 1 */
	text-shadow: none;
}

::selection {
	background-color: #b3d4fc; /* 1 */
	color: #000000; /* 1 */
	text-shadow: none;
}

The word „reset”

Personally, I think it’s useful to think of all of them under the same umbrella term and just be aware of the philosophical differences. But, Normalize intentionally separates itself:

A modern, HTML5-ready alternative to CSS resets

Sanitize calls itself a CSS library and doesn’t use the word „reset” anywhere except to cite the Meyer reset.

Reboot

Reboot is interesting as it’s perhaps the newest player in this world. It’s file history dates back to 2015, which is probably related to Bootstrap 4 taking a while to drop after Bootstrap 3. Reboot doesn’t have its own repo, it’s a part of Bootstrap. Here’s the direct file and the docs.

The way they think about it is interesting:

Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some <table> styles for a simpler baseline and later provide .table, .table-bordered, and more.

You can have a class that does styling, but if you use a reset, you don’t have to overload that class with reset styles that handle cross-browser consistency issues.

//
// Tables
//

table {
  border-collapse: collapse; // Prevent double borders
}

caption {
  padding-top: $table-cell-padding;
  padding-bottom: $table-cell-padding;
  color: $text-muted;
  text-align: left;
  caption-side: bottom;
}

th {
  // Matches default `<td>` alignment by inheriting from the `<body>`, or the
  // closest parent with a set `text-align`.
  text-align: inherit;
}

It’s definitely opinionated, but in a way that rolls with Bootstrap nicely. The fact that it’s buried within Bootstrap is pretty good signaling this is designed for that world, not as a drop-in for any project. That said, I did my best to compile a straight CSS version of it here.

Tailoring a reset based on browser support

So long as we’re talking about the past and future of resets, it’s worth mentioning Browserslist again, which is a standardized format for declaring what browsers/versions a project supports.

A reset could be built in a such a way that the things it includes know why they are there. Exactly what browser and version it is there to support. Then if browserslist configuration says that particular browser isn’t supported by this project anyway, that CSS could be removed.

That’s what PostCSS Normalize does.


Reboot, Resets, and Reasoning is a post from CSS-Tricks