Platform 5: Staying Organized

Organization in anything that you do is crucial when it comes to workflow. Not only does it help to keep things in check and easy to find but you dont get overwhelmed when looking at the bigger picture.

With Platform 5 if you are not staying organized as you go it could prove to be a headache later on as you continue to design and develop. So I am going to share some of my organizational tips with you and hopefully it will help you to stay organized and be more efficient going forward.

Lets Get Organized!!

If you have just started with Platform 5 you might have noticed that as you add section to the page they all have the same section name. So you end up with something like the picture on the right. This can end up being very confusing espicially when you are trying to find that particular section to edit.

Sure you could just hover over that section and edit from their but even that would become time consuming and tedious.

Luckily there is a better way.

With in the builder in the advanced area for each section  there is a place where you can add a custom name to your sections to help you stay organized and navigate through the builder easier.

So for example if we add a container to the page then navigate to container options > advanced you will find a place to add a custom name to your section.

cu-name

Tips for custom names:

  • When using custom names always use something to separate you custom name from the section name. (- \ |  > () +)
  • Give it a name that best describes the section.
  • Try not to give every single section you use a name. I tend to only give the container or a standalone section a custom name.

Should I Organize My CSS?

Yes, you certainly should.

Organizing you CSS from the start will help you find things later to make adjustments if the need should ever arise. I have had the honor of seeing some horrific style sheets. It was almost like  they started styling one part of the site and jumped three pages over and continued styling with no comments at all.

That is a bad way to do things and if you ever needed help trying to fix a problem it could prove to be costly and very time consuming.

CSS Comments.

Commenting in CSS is pretty simple and everybody seems to have a personal preference. I prefer large block comments for the readability aspect while others choose a simplier method. But I am going to show you a couple different kinds and you can choose and modify the one that best suits you.

The Block Comment (example 1):

/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*                       */
/*      Main Block       */
/*                       */
/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*       Sub Block       */ 
/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*  basic comment   */

Example 2:

/*
==========================================================================
CSS comment
========================================================================== 
*/

Example 3:

/* CSS comments
   ----------------------------- */

Laying Out Your CSS.

When it comes to organizing your css styles there is no truly correct way to do it.

The goal is to keep certain page or section styles together to make it easier to find later. For example you would want to keep your styles for your homepage and about page under 2 different comments. The only exception to that would be if you had global style that was applied to both pages. So your style sheet would look something like this:

/*\\\\\\\\\\\\\\\\\\\\\\*/
/*                      */
/*    global styles     */
/*                      */
/*\\\\\\\\\\\\\\\\\\\\\\*/

h1 {
text-transform:uppercase;
line-height: 43px;
} 


/*\\\\\\\\\\\\\\\\\\\\\\*/
/*                      */
/*   homepage styles    */
/*                      */
/*\\\\\\\\\\\\\\\\\\\\\\*/
sectionid {
background: red;
}



/*\\\\\\\\\\\\\\\\\\\\\\*/
/*                      */
/*    about styles      */
/*                      */
/*\\\\\\\\\\\\\\\\\\\\\\*/

sectionid {
background: blue;
}

So if you need to make some CSS changes to a section on the homepage you would know that it could be found under the homepage comment.

My CSS Workflow.

When I am working on a project I always tend to have either notepad open or a Chrome extension called Styler active so that I can copy and paste CSS changes I have made using the Chrome dev tools.

Styler is one of those gems that most people don't know about. With Styler you can apply styles and refresh the page and your changes are still live. Might even be one of the best extension I have run across. It works by giving each url its own mini stylesheet so that you can add css or javascript to the website.

I find it very useful in my workflow and hopefully you will to.

Well that's it for this tutorial I hope I didn't bore you with all the mumbo jumbo and hopefully you found something that could be of use to you in your projects.

As always you can find us on  Twitter and Facebook.

Like and Share till your fingers hurt 🙂

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Platform 5: Staying Organized

Published on by | Add Comment

Organization in anything that you do is crucial when it comes to workflow. Not only does it help to keep things in check and easy to find but you dont get overwhelmed when looking at the bigger picture.

With Platform 5 if you are not staying organized as you go it could prove to be a headache later on as you continue to design and develop. So I am going to share some of my organizational tips with you and hopefully it will help you to stay organized and be more efficient going forward.

Lets Get Organized!!

If you have just started with Platform 5 you might have noticed that as you add section to the page they all have the same section name. So you end up with something like the picture on the right. This can end up being very confusing espicially when you are trying to find that particular section to edit.

Sure you could just hover over that section and edit from their but even that would become time consuming and tedious.

Luckily there is a better way.

With in the builder in the advanced area for each section  there is a place where you can add a custom name to your sections to help you stay organized and navigate through the builder easier.

So for example if we add a container to the page then navigate to container options > advanced you will find a place to add a custom name to your section.

cu-name

Tips for custom names:

  • When using custom names always use something to separate you custom name from the section name. (- \ |  > () +)
  • Give it a name that best describes the section.
  • Try not to give every single section you use a name. I tend to only give the container or a standalone section a custom name.

Should I Organize My CSS?

Yes, you certainly should.

Organizing you CSS from the start will help you find things later to make adjustments if the need should ever arise. I have had the honor of seeing some horrific style sheets. It was almost like  they started styling one part of the site and jumped three pages over and continued styling with no comments at all.

That is a bad way to do things and if you ever needed help trying to fix a problem it could prove to be costly and very time consuming.

CSS Comments.

Commenting in CSS is pretty simple and everybody seems to have a personal preference. I prefer large block comments for the readability aspect while others choose a simplier method. But I am going to show you a couple different kinds and you can choose and modify the one that best suits you.

The Block Comment (example 1):

/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*                       */
/*      Main Block       */
/*                       */
/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*       Sub Block       */ 
/*\\\\\\\\\\\\\\\\\\\\\\\*/
/*  basic comment   */

Example 2:

/*
==========================================================================
CSS comment
========================================================================== 
*/

Example 3:

/* CSS comments
   ----------------------------- */

Laying Out Your CSS.

When it comes to organizing your css styles there is no truly correct way to do it.

The goal is to keep certain page or section styles together to make it easier to find later. For example you would want to keep your styles for your homepage and about page under 2 different comments. The only exception to that would be if you had global style that was applied to both pages. So your style sheet would look something like this:

/*\\\\\\\\\\\\\\\\\\\\\\*/
/*                      */
/*    global styles     */
/*                      */
/*\\\\\\\\\\\\\\\\\\\\\\*/

h1 {
text-transform:uppercase;
line-height: 43px;
} 


/*\\\\\\\\\\\\\\\\\\\\\\*/
/*                      */
/*   homepage styles    */
/*                      */
/*\\\\\\\\\\\\\\\\\\\\\\*/
sectionid {
background: red;
}



/*\\\\\\\\\\\\\\\\\\\\\\*/
/*                      */
/*    about styles      */
/*                      */
/*\\\\\\\\\\\\\\\\\\\\\\*/

sectionid {
background: blue;
}

So if you need to make some CSS changes to a section on the homepage you would know that it could be found under the homepage comment.

My CSS Workflow.

When I am working on a project I always tend to have either notepad open or a Chrome extension called Styler active so that I can copy and paste CSS changes I have made using the Chrome dev tools.

Styler is one of those gems that most people don't know about. With Styler you can apply styles and refresh the page and your changes are still live. Might even be one of the best extension I have run across. It works by giving each url its own mini stylesheet so that you can add css or javascript to the website.

I find it very useful in my workflow and hopefully you will to.

Well that's it for this tutorial I hope I didn't bore you with all the mumbo jumbo and hopefully you found something that could be of use to you in your projects.

As always you can find us on  Twitter and Facebook.

Like and Share till your fingers hurt 🙂

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match