marko krstić

Collections

Archives: Codes

Breakpoints on load and resize
On load and resize
Animate Alpha
Order Numbers
Add class to the element on scroll
Rotate logo on scroll
Add Taxonomy to Admin columns
Add hierarchy option to posts
Manual query get complex data
Change the default loop with CodeBlock
Change the default loop with function.php
Add prev and next post with title and thumb in the same category
Tabs with CSS only
Add prev and next post with title and thumb
Change excerpt length
Flickity slider hide dots if only 1 slide
Images are not sharp enough when they are scaled down
Remove WordPress default image compression
ACF Pro condition if a repeater is empty
Limit search to post type
Resize image from inside container to the one edge of the page
Update on load and resize
Display Taxonomy in post loop in ACF Relationship field
Custom striped Excerpt
Remove "Category:" text in archive page title
ACF in Oxygen - PHP Function field
Register Print CSS
Change WordPress default excerpt length
Change WordPress default excerpt [...]
Related post in the same category
Load script only when you need it
Show navigation on scroll up
Deregister Scripts and Styles
Sublime text hide hidden files from the sidebar
Display list of categories that are related to a particular post on your single page
Display list of custom taxonomies that are related to a particular post on your single page
Highlight terms in the search results
Back button
Add remove class on scroll
List categories and taxonomies with class active
Toggle text inside div
Slide toggle with jQuery
How to start with jQuery in WordPress
Managing text typography styles in sketch

Breakpoints on load and resize

jQuery(document).ready(function($){
    
   $(window).on('resize', function(){
	   
            if ($(window).width() >= 1000 && $(window).width() <=1400) {
                
                $('#card_2').appendTo('#card-column-1');
                $('#card_3').appendTo('#card-column-1');
                $('#card_4').appendTo('#card-column-2');
                $('#card_5').appendTo('#card-column-2');
                $('#card_6').appendTo('#card-column-2');
    
            }
    
            
            else if($(window).width()> 1400) {
    
                $('#card_2').appendTo('#card-column-2');
                $('#card_3').appendTo('#card-column-2');
                $('#card_4').appendTo('#card-column-3');
                $('#card_5').appendTo('#card-column-3');
                $('#card_6').appendTo('#card-column-3');            
    
            }
            
            
            else if($(window).width()< 1000) {
    
                $('#card_2').appendTo('#card-column-1');
                $('#card_3').appendTo('#card-column-1');
                $('#card_4').appendTo('#card-column-1');
                $('#card_5').appendTo('#card-column-1');
                $('#card_6').appendTo('#card-column-1');            
    
            }
        });
    

    // Invoke the resize event immediately
    }).resize();
                
});
jQuery(document).ready(function($){

// Bind to the resize event of the window object
$(window).on("resize", function () {
    
    var container   = $( `#div_block-21-2` ).width();
    var docWidth    = $( window ).width();
    var final       = docWidth - ((docWidth - container) / 2);

    $('#hero-lines').css('width', final + 'px');

// Invoke the resize event immediately
}).resize();

		
});

This is for GreenSock

function init() {
  gsap.from("h1", {autoAlpha:0, stagger:0.5})
}

window.addEventListener("load", init)
h1 {
  visibility:hidden;
}

(function ($) {
  $(".wrap").each(function () {
    $(".item", this).prepend(function (i) {
      return $("<span />", { text: i + 1 });
    });
  });
})(jQuery);

$(window).scroll(function(){
    if ($(this).scrollTop() > 100) {
       $('.element').addClass('active');
    } else {
       $('.element').removeClass('active');
    }
});

Change element class or ID on lines 3 and 5 to trigger right elements and on line 2 100 is how many pixels to scroll until class is added.

If you need to rotate logo while you are scrolling the page like on Matthias Altmann's website here is the code he shared with us

(function($) {
	$(document).ready(function(){
		$(window).scroll(function() {
		var deg = $(window).scrollTop()/2;
		$('#header-company-logo').css({ transform: 'rotate(' + deg + 'deg)' });
		});
	});
})(jQuery);

Example: https://www.altmann.de/

Add this to your functions.php and replace CPT_slug and taxonomy_slug

<? php

/*============================================
=            Manage Admin Columns            =
============================================*/
add_filter( 'manage_taxonomies_for_{CPT_slug}_columns', 'docs_columns' );
function docs_columns( $taxonomies ) {
    $taxonomies[] = '{taxonomy_slug}';
    return $taxonomies;
}

Red is added added column

If you need to have a parent option for any post custom post to organize inside the admin menu or to loop all child post for some post id just add this code snippet to functions.php

Page attributes options example
<?php

add_filter( 'register_post_type_args', 'add_hierarchy_support', 10, 2 );
function add_hierarchy_support( $args, $post_type ){

    if ($post_type === 'post' || $post_type === 'docs') { // <-- enter desired post type here

        $args['hierarchical'] = true;
        $args['supports'] = array_merge($args['supports'], array ('page-attributes') );
    }

    return $args;
}
<?php
$data = array(
    'post_type'              => array( 'post' ),
    'post__not_in'           => array(get_the_ID())
);

echo build_query( $data );
?>

Paste this into code block to get that data. Paste that data into Query of Easy posts or Repeater. With this, you can put in query data from ACF Pro as well

Credits to: https://wpdevdesign.com/how-to-generate-the-query-string-for-easy-posts-in-oxygen/

<?php
	global $query_string; // required
	$posts = query_posts($query_string."&orderby=title&order=ASC");
?>

Place it above Repeater or East Posts

/*==========================================
=            Reverce loop order            =
==========================================*/

function alter_order_of_posts( $query ) {
    if ( $query->is_main_query() ) {
        $query->set( 'order', 'ASC' );
        $query->set( 'orderby', 'menu_order' );
    }
}
add_action( 'pre_get_posts', 'alter_order_of_posts' );

// set current category
$categories = get_the_category();
$category = $categories[0];
$cat_ID = $category->cat_ID;    

// get next post link
$next_post = get_adjacent_post( true, '', false );
if( $next_post ) {
    echo '<a href="' . get_permalink( $next_post->ID ) . '">Next post</a>';
} else {
    $first = new WP_Query( array(
        'post_type' => 'project',
        'post_status' => 'publish',
        'posts_per_page' => 1,
        'order' => 'ASC',
        'cat' => $cat_ID
    ));

    $first->the_post();
    echo '<a href="' . get_permalink() . '">Next post</a>';
    wp_reset_query();
};

// show prev post link
$prev_post = get_adjacent_post( true, '', true );
if( $prev_post ) {
    echo '<a href="' . get_permalink( $prev_post->ID ) . '">Prev post</a>';
} else {
    $last = new WP_Query( array(
        'post_type' => 'project',
        'post_status' => 'publish',
        'posts_per_page' => 1,
        'order' => 'DESC',
        'cat' => $cat_ID
    ));

    $last->the_post();
    echo '<a href="' . get_permalink() . '">Prev post</a>';
    wp_reset_query();
};

This one is work in progress

HTML structure

<nav>
  <ul class="stepProgress">
    <li><a href="#1" >1</a></li>
    <li><a href="#2" >2</a></li>
    <li><a href="#3" >3</a></li>
    <li><a href="#4" >4</a></li>
  </ul>
</nav>
<div id="1"> Step 1 </div>
<div id="2"> Step 2 </div>
<div id="3"> Step 3 </div>
<div id="4"> Step 4 </div>
<div id="5"> Step 5 </div>

CSS

div{
  width:200px; height:200px;
  border:2px solid grey;
  text-align:center;
  display:none;
}

div:target{
  display:block;
}

Example on JSFiddle

Add this in codeblock in single post template

<?php $prev = get_previous_post(); ?>

<a href="<?php echo get_permalink( $prev->ID ); ?>">

	<h3><?php echo apply_filters( 'the_title', $prev->post_title ); ?></h3>
	<?php echo get_the_post_thumbnail(
  		$prev->ID, 
  		'thumbnail',
  		array('class' => 'your-class-name')
	); ?>
  
</a>



<?php $next = get_next_post(); ?>

<a href="<?php echo get_permalink( $next->ID ); ?>">
	<h3><?php echo apply_filters( 'the_title', $next->post_title ); ?></h3>
	<?php echo get_the_post_thumbnail(
  		$next->ID, 
  		'thumbnail',
		array('class' => 'your-class-name')
	); ?>
</a>

Title is wrapped with h3 and thumbnail is having class ('your-class-name') that you can change to your needs.

Paste this into custom plugin's functions.php

function mytheme_custom_excerpt_length( $length ) {
    return 15;
}
add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length', 999 );

return 15 means 15 words excerpt text being eclipsed. More on WordPress.org

This can be done easily with 1 line of CSS code and only-child selector:

.flickity-page-dots li:only-child{
	display: none;
}
.ct-image{
	image-rendering: -webkit-optimize-contrast;
}

Oxygen adding class to images by default ".ct-image". To target all the images use img tag or .ct-image.

If you want to play with more options there are some couple of more settings:

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */

By default, WordPress compresses your images for better performance.

Every time you upload a JPEG image in WordPress, it would automatically compress the image to 90% quality.

All you need to do is paste the following code in your custom plugin's functions.php


add_filter('jpeg_quality', function($arg){return 100;});

When you do make these image quality changes, you want to make sure that you regenerate your thumbnails.

Code snippet taken from this source.

In this example, I have a hero slider ( ACF Pro repeater ) that is attached to all the pages and want to show slider only if at least one slide is created.

Note my repeater is "hero_slider". Yours can be different.

ACF Pro repeater with name hero_slider

Set up slider with Oxygen repeater component and assign condition.

Condition icon
  1. Press Condition button
  2. In the first block choose dynamic data from dropdown options
  3. In "Insert Dynamic Data" dialogue box scroll down to Advanced
  4. Press PHP Function Return value
  5. Important: in Function name type: "have_rows"
  6. Important: in Function Arguments: "hero_slider" (Type your repeater name)
  7. In the middle dropdown change from "==" to "is_not-blank"
  8. 3rd dropdown repeat speps 3 - 6

Function name: have_rows
Function argument: "repater name"

If you need to display only certain post type ( page, post, custom post) you need to add this to function.php

function searchfilter($query) {
 
    if ($query->is_search && !is_admin() ) {
        $query->set('post_type',array('post','page'));
    }
 
return $query;
}
 
add_filter('pre_get_posts','searchfilter')

On line 4 change what post type you need.

Source: https://www.wpbeginner.com/wp-tutorials/how-to-limit-search-results-for-specific-post-types-in-wordpress/

Resize image inside a container on one side to the edge of the page.

jQuery(document).ready(function($) {

// Hero Image scale and position
var adjust_size = function() {

	var newWindowWidth = $(window).width();
	if (newWindowWidth > 992){

		var winW = $(window).width();
		var conW = $(".container").width();
		
		var left = ((winW - conW) / 2 ) + 40;
		var size = ((conW / 3) * 2) + ((winW - conW) / 2) ;
		
		$(".hero-img").css("left", -left);
		$(".hero-img").css("width", size);	
	}

  	else{

  		$(".var").css("left", "0px");

  	}
	
};
adjust_size();
$(window).resize(adjust_size);


// alert("Hello! I am an alert box!! 'winW'");

});
  • + 40 is column padding size
  • If you want to resize it on the right change left to right on lines 15 and 21
  • .container is image wrap
  • .hero-img is img class

Important set img to:

max-width: unset !important;
position:relative;

jQuery(document).ready(function($) {
  var adjust_size = function() {
  	// Change code here
    $('.content .right').width($(window).width() - 480);
	// Change code here
  };
  adjust_size();
  $(window).resize(adjust_size);
});	

This code will help you to get values on page load and change them on resize. It can be useful to update the CSS values and objects position.

Code example with breakpoint

jQuery(document).ready(function($) {

// Footer fixed
var adjust_size = function() {

var newWindowWidth = $(window).width();
	if (newWindowWidth > 991) {    
	    var footer = $(".footer").height();
		$(".main").css("margin-bottom", footer)
	}
	else
	{
		$(".main").css("margin-bottom", "0px")
	}
};
adjust_size();
$(window).resize(adjust_size);
// Footer fixed

});
<?php $terms = get_the_terms( $p->ID, 'product_cat' );
	foreach ($terms as $t) {
	echo $t->name, ' ';
} ?>

Product cat is category name for WooCommerce products category.

Thanks, Hammad Wali for sharing this useful code!

If it's just needed in one place, you could use the following:

<?php echo wp_strip_all_tags( get_the_excerpt( ) ); ?>

Keep in mind, using the custom excerpt field will automatically remove all tags. Creating an excerpt automatically from the post content will not.

If you want more control, you can use wp_trim_excerpt() or wp_trim_words().

If you need more control to add something like this:

<?php echo wp_strip_all_tags( wp_trim_words( get_the_excerpt(), 60, '[...]' ) ); ?>

wp_trim_words() allows you to pass in the text source, number of words, and the more text. You can remove the more text by setting this to false.

<h1>
  <?php echo single_cat_title( '', false );?>
</h1>

The result will be just Category name

Default is: Category: Category name

If you want to change "Category:" use this:

<h1>
  <?php echo single_cat_title( 'Some text: ', false );?>
</h1>

Thanks, Hammad Wali for sharing this useful code!

I was banging my head for 2 hours until I got help from Alexander Buzmakov.

Function name: get_field
Function argument: ACF_fields_slug

after the file path add array, version and then print

<php
wp_enqueue_style( 'print_css', plugin_dir_url( __FILE__ ) . 'assets/css/print.css', array(), '1.0.0', 'print' );

An entire block stored in function.php should look like this.

You can always add it as @media print but with this you will have much more flexibility and load it where you need it.

<php
// Styles
function theme_styles() {
    wp_enqueue_style( 'print_css', plugin_dir_url( __FILE__ ) . 'assets/css/print.css', array(), '1.0.0', 'print' );
}

add_action( 'wp_enqueue_scripts', 'theme_styles',  1000, 1 ) ;

More about Print CSS:

https://www.sitepoint.com/css-printer-friendly-pages/

https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/

Add this code to function.php to change excerpt length to 20 words

<?php  
	add_filter( 'excerpt_length', function($length) {
    	return 20;
	} );

Place code bellow in your function.php

function wpdocs_excerpt_more( $more ) {
    return '<a href="'.get_the_permalink().'" rel="nofollow">Read More...</a>';
}
add_filter( 'excerpt_more', 'wpdocs_excerpt_more' );

This is custom code will loop 3 posts in same categories without a current post with random sorting.

<?php
$args = array(
                'category__in' => wp_get_post_categories( get_queried_object_id() ),
                'posts_per_page' => 3,
                'orderby'       => 'rand',
                'post__not_in' => array( get_queried_object_id() )
                );
    $the_query = new WP_Query( $args );

    if ( $the_query->have_posts() ) : ?>

        <ul class="">
        <!-- the loop -->
        <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

            <li>
                <h6>
                    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                    <?php the_title(); ?>
                    </a>
                </h6>
            </li>

        <?php endwhile; ?>
        <!-- end of the loop -->
        </ul>

        <?php wp_reset_postdata(); ?>

     <?php endif; ?>

In code block when you are using script add to PHP tab:

<?php 
	wp_enqueue_script( 'magic-grid', '/wp-content/plugins/_NZP_Devs-Toolbox//node_modules/magic-grid/dist/magic-grid.min.js', '', '1.0.0', true );
?>	

You need to put path from /wp-content/ and not just plugins folder

PHP

JavaScript

Note: Got this trick from a good friend Alexander Buzmakov.
Visit his tutorials oxywp.com.

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    var element = document.getElementById("_header_row-335-8");
  	element.classList.add("mystyle");
  } else {
    var element = document.getElementById("_header_row-335-8");
  	element.classList.remove("mystyle");
  }
  prevScrollpos = currentScrollPos;
}

Put this code to functions.php

function deregister_styles(){
	wp_dequeue_style( 'oxygen-aos' );
	wp_deregister_style( 'oxygen-aos' );
}
add_action( 'wp_print_styles' , 'deregister_styles' );


function deregister_scripts(){
	wp_dequeue_script( 'oxygen-aos' );
	wp_deregister_script( 'oxygen-aos' );
}
add_action( 'wp_print_scripts' , 'deregister_scripts' );

The easiest way to find all registered scripts and styles is with the plugin MinQueue.

If you want to deregister with plugin use Asset Queue Manager

Open preferences by pressing Command + ","

And paste the following snippet

"file_exclude_patterns":
	[
		"*.svn",
		"*.git",
		"*.hg",
		"CVS",
		"*tmp/cache",
		"*._*",
		"*.DS_Store"
	],
	"folder_exclude_patterns":
	[
		".sass-cache",
		".svn",
		".git"
	],
	"font_size": 14.0,
	"ignored_packages":
	[
		"Vintage"
	]

Taken from: https://gist.github.com/supawaza/8009192

<?php
	$categories = get_the_category();
		if($categories){
			echo '<div>';
			foreach($categories as $category) {
			echo '<span>' . $category->cat_name . '</span>';
		}
	echo '</div>';
}

?>

If you need just parent cagetory

Parrent

  • Child
  • Child
  • Child
<?php
  $perma_cat = get_post_meta($post->ID , '_category_permalink', true);
  if ( $perma_cat != null ) {
    $cat_id = $perma_cat['category'];
    $category = get_category($cat_id);
  } else {
    $categories = get_the_category();
    $category = $categories[0];
  }
  $category_link = get_category_link($category);
  $category_name = $category->name;  
?>                                   
<a href="<?php echo $category_link ?>"><?php echo $category_name ?></a>
<?php

	global $post;
	$terms = get_the_terms( $post->ID, 'projekte_cat' );
		foreach ($terms as $term) {
	    $term_id = $term->term_id;
  		$term_name = get_term( $term_id )->name;
		$term_slug = get_term( $term_id )->slug;
  	echo '<div class="'.$term_slug.'">'. $term_name . '</div>';
}

?>

Replace "projeckte_cat" with your taxonomy slug.

PHP in Function

<?php 
function search_excerpt_highlight() {
    $excerpt = get_the_excerpt();
    $keys = implode('|', explode(' ', get_search_query()));
    $excerpt = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $excerpt);

    echo '<p>' . $excerpt . '</p>';
}

function search_title_highlight() {
    $title = get_the_title();
    $keys = implode('|', explode(' ', get_search_query()));
    $title = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $title);

    echo $title;
}
?>

PHP in codeblock

<?php
$search_query = get_search_query();
// WP_Query arguments
$args = array(
    'post_type'              => array( 'post', 'gesamtprojekt', 'startseite', 'teilprojekte', 'umwelt', 'service' ),
    's'                      => $search_query,
);

// The Query
$query = new WP_Query( $args );

// The Loop
if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
        $query->the_post();
        // do something
    ?>
		<div class="search-link">
			<h2><?php search_title_highlight(); ?></h2>
			<?php search_excerpt_highlight(); ?>
            <a href="<?php the_permalink(); ?>" >Seite aufrufen</a>
		</div>
	<?php
      
    }
} else {
    echo '<h2>Nichts gefunden für: '.$search_query.'</h2>';
}
// Restore original Post Data
wp_reset_postdata();
?>

CSS

.search-highlight {
   	background:#FFFF00;
}

Result

function goBack() {
  window.history.back();
}
<button onclick="goBack()">Go Back</button>

This code will lead you to the page same as you pressed back in Browser

This is done with event listener.

It will track class ".show-on-scroll" and add and remove Class "is-visible" depending on if it's visible in screen view or not.

(function($){	$(function() {

    /*======================================================
    =            Detect request animation frame            =
    ======================================================*/
	var scroll = window.requestAnimationFrame ||
	             // IE Fallback
	             function(callback){ window.setTimeout(callback, 1000/60)};
	var elementsToShow = document.querySelectorAll('.show-on-scroll'); 

	function loop() {

	    Array.prototype.forEach.call(elementsToShow, function(element){
	      if (isElementInViewport(element)) {
	        element.classList.add('is-visible');
	      } else {
	        element.classList.remove('is-visible');
	      }
	    });

	    scroll(loop);
	}

	// Call the loop for the first time
	loop();

	// Helper function from: http://stackoverflow.com/a/7557433/274826
	function isElementInViewport(el) {
	  // special bonus for those using jQuery
	  if (typeof jQuery === "function" && el instanceof jQuery) {
	    el = el[0];
	  }
	  var rect = el.getBoundingClientRect();
	  return (
	    (rect.top <= 0
	      && rect.bottom >= 0)
	    ||
	    (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
	      rect.top <= (window.innerHeight || document.documentElement.clientHeight))
	    ||
	    (rect.top >= 0 &&
	      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
	  );
	}	
		
}); 	})(jQuery);

List of categories for posts with link to archive and wrapped in classes

<ul>
    <?php wp_list_categories( array(
        'orderby'    => 'name',        
  		'title_li' => '',
        'hide_title_if_empty' => true,
    ) ); ?> 
</ul>

To enable it for taxonomies add this line and replace 'produckte' with your taxonomy slug

'taxonomy'  => 'produkte',

And on the end you will get this for custom categories ( taxonomies)

<ul>
    <?php wp_list_categories( array(
		'taxonomy'  => 'produkte',
        'orderby'    => 'name',        
  		'title_li' => '',
        'hide_title_if_empty' => true,
    ) ); ?> 
</ul>

Here is preview of HTML output:

<ul>
	<li class="cat-item cat-item-1 current-cat">
		<a aria-current="page" href="link">Cat name 1</a>
	</li>

	<li class="cat-item cat-item-2">
		<a aria-current="page" href="link">Cat name 2</a>
	</li>

	<li class="cat-item cat-item-3">
		<a aria-current="page" href="link">Cat name 3</a>
	</li>
</ul>

jQuery Snipped for toggle text inside div on click.

"Hello World" will be default text and text for every second click.
And "Bye!" will be on first and every even click.

jQuery.fn.extend({
    toggleText: function (a, b){
        var isClicked = false;
        var that = this;
        this.click(function (){
            if (isClicked) { that.text(a); isClicked = false; }
            else { that.text(b); isClicked = true; }
        });
        return this;
    }
});

jQuery('.toggle-text').toggleText("Hello World", "Bye!");

Expand object with click on the button.

The trigger is class on the object that will start the animation. Assign the class to the object that should be animated and replace 300 (milliseconds) to what you prefer

$( ".trigger" ).click(function() {
	$( ".toggled-object" ).slideToggle(300);
});

Wrap this with document ready code.

(function($){

    $(function() {

	// Your custom code here
		
    });

})(jQuery);

The final code should look like this

(function($){

    $(function() {

		$( ".trigger" ).click(function() {
			$( ".toggled-object" ).slideToggle(300);
		});
		
    });

})(jQuery);

This code is basic and for beginners.

Usually, you can see solutions but not how to wrap jQuery code to start writing it for WordPress or Oxygen

jQuery(document).ready(function($){
// YOur code goes here

		
});

The outer Javascript function is known as an anonymous function and jQuery is wrapped at the end, so is therefore aliased or bound to the $ selector, so in the inner function the jQuery shorthand document does not need to be aliased.

Code was taken from wpbeaches.com

Big thanks to Sridhar Katakam and Supa Mike


Version bellow was giving me error in a couple of occasions

(function($){

    $(function() {

	// Code goes here
		
    });

})(jQuery);

Managing text typography styles in sketch

In VIA GO (now known as Studio Standard) we are using iOS and tvOS default typography as it's recommended by Apple, now users can use text size change option for better readability.
That's why templates and tutorials are for Native text sizes.

In this chapter we will create automated text styles

How to Start?

To start the tutorial you can download the iOS or tvOS template listed below, or you can create your own set that you're more familiar to work with. A possible reason to do this is maybe you need just web or Android platforms.
Text sizes in sketch templeate are copied as reference from apple iOS Typography user interface link.

How to Organize?

To start with Sketch file, first copy the alignments you need (Left, Center, Right) and then to that group you can copy the number of colours you have.

Tip: Use Rename it plugin so you can save a lot of time.

My personal approcs is: Text size name / Alignment / Colour ( example: Title 1 / Left / Blue Colour ).

How to Generate Styles?

After you created and renamed all the text layers select them all and use Styles Generator to generate all the styles from the layer names of selected layers. Do not forget to use " / " in names so you group styles.

Watch video for demonstration

How to share text styles between team files?

With plugin Shared Text Styles you can easily export and import text styles. This process is little manual but it is the best practice for now.
Store it on a shared Drive next to the Sketch file so others don't have a problem finding it. If you update some text styles export it once again and notify the others to import it once again.
After a new import is done it will update all text layers in the file automatically.

Resources

iOS Typography

tvOS Typography

Plugins list:

Ready for a new project, or not?

Do not worry let’s schedule a meeting or friendly chat and see.

Let's Connect

Feel free to reach out for collaborations or just a friendly hello 😀
mailme@markokrstic.com
linkedininstagramdribbblefacebook-official