Adding ITCSS naming

benbrehaut · Jan 20, 2018 · 56220e5 · 56220e5
1 parent e29537b
commit 56220e5
Show file tree

Hide file tree

Showing 17 changed files with 101 additions and 101 deletions.
diff --git a/archive.php b/archive.php
@@ -25,9 +25,9 @@
 ?>
 
 <!-- posts container -->
-<section class="articles">
+<section class="c-articles">
 
-  <div class="articles-grid">
+  <div class="c-articles__grid">
   <?php
   		/* Start the Loop */
   		while ( have_posts() ) : the_post();
@@ -39,7 +39,7 @@
   </div>
 
   <!-- sidebar -->
-  <div class="articles-sidebar">
+  <div class="c-articles-sidebar">
     <?php get_sidebar(); ?>
   </div>
   <!-- sidebar -->
@@ -48,7 +48,7 @@
 <!-- /posts container -->
 
 <!-- posts pagination -->
-<div class="articles-pagination">
+<div class="c-articles-pagination">
   <?php pagination(); ?>
 </div>
 <!-- posts pagination -->

diff --git a/assets/css/dist/main.css b/assets/css/dist/main.css
diff --git a/assets/css/dist/main.min.css b/assets/css/dist/main.min.css
diff --git a/assets/scss/components/_breadcrumbs.scss → assets/scss/objects/_breadcrumbs.scss b/assets/scss/components/_breadcrumbs.scss → assets/scss/objects/_breadcrumbs.scss
diff --git a/assets/scss/components/_card.scss → assets/scss/objects/_card.scss b/assets/scss/components/_card.scss → assets/scss/objects/_card.scss
diff --git a/assets/scss/components/_skip-to-content.scss → assets/scss/objects/_skip-to-content.scss b/assets/scss/components/_skip-to-content.scss → assets/scss/objects/_skip-to-content.scss
diff --git a/assets/scss/style.scss b/assets/scss/style.scss
@@ -54,7 +54,7 @@
 
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 // Objects
-// Objects are designed patterns, from a pattern library or very inique items such as buttons, typography etc. 
+// Objects are designed patterns, from a pattern library or very inique items such as buttons, typography etc. Changing these will affect major parts of the site.
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 @import 'objects/typography',
         'objects/site-header',
@@ -67,16 +67,16 @@
         'objects/icons',
         'objects/pagination',
         'objects/media-object',
+        'objects/breadcrumbs',
+        'objects/card',
+        'objects/skip-to-content',
         'objects/hero-banner';
 
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 // Components
 // Specific User Interface parts live here.
 // - - - - - - - - - - - - - - - - - - - - - - - - -
-@import 'components/skip-to-content',
-        'components/breadcrumbs',
-        'components/card',
-        'components/news-article',
+@import 'components/news-article',
         'components/forms';
 
 // - - - - - - - - - - - - - - - - - - - - - - - - -

diff --git a/comments.php b/comments.php
@@ -23,12 +23,12 @@
 }
 ?>
 
-<section id="comments" class="post-comments">
+<section class="c-article-comments">
 
 	<?php
 	// You can start editing here -- including this comment!
 	if ( have_comments() ) : ?>
-		<h2 class="comments-title">
+		<h2 class="c-comments-title o-heading-3">
 			<?php
 				$comments_number = get_comments_number();
 				if ( '1' === $comments_number ) {
@@ -51,7 +51,7 @@
 			?>
 		</h2>
 
-		<ol class="comment-list">
+		<ol class="c-comment-list">
 			<?php
 				wp_list_comments( array(
 					'avatar_size' => 100,
@@ -69,11 +69,11 @@
 	// If comments are closed and there are comments, let's leave a little note, shall we?
 	if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : ?>
 
-		<p class="no-comments"><?php _e( 'Comments are closed.', 'vanlig' ); ?></p>
+		<p class="c-no-comments"><?php _e( 'Comments are closed.', 'vanlig' ); ?></p>
 	<?php
 	endif;
 
 	comment_form();
 	?>
 
-</section><!-- #comments -->
+</section>
diff --git a/front-page.php b/front-page.php
@@ -21,7 +21,7 @@
 ?>
 
 	<section class="l-wrap">
-		<div class="l-grid l-grid__cols">
+		<div class="l-grid l-grid__cols wysiwyg">
 			<?php the_content(); ?>
 		</div>
 	</section>

diff --git a/page-templates/page-blog.php b/page-templates/page-blog.php
@@ -20,10 +20,10 @@
 <!-- /hero banner image -->
 
 <!-- posts container -->
-<section class="articles">
+<section class="c-articles">
 
   <!-- posts -->
-  <div class="articles-grid">
+  <div class="c-articles__grid">
     <?php
       $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 
@@ -49,7 +49,7 @@
   <!-- /posts -->
 
   <!-- sidebar -->
-  <div class="articles-sidebar">
+  <div class="c-articles-sidebar">
     <?php get_sidebar(); ?>
   </div>
   <!-- sidebar -->
@@ -58,7 +58,7 @@
 <!-- /posts container -->
 
 <!-- posts pagination -->
-<div class="articles-pagination">
+<div class="c-articles-pagination">
   <?php
     query_posts($args);
     pagination();

diff --git a/search.php b/search.php
@@ -14,7 +14,7 @@
     <h2>You searched for: <?php echo get_search_query(); ?> </h2>
 
     <?php while ( have_posts() ) : the_post(); ?>
-        <?php get_template_part('template-parts/post'); ?>
+        <?php get_template_part('template-parts/post-teaser'); ?>
     <?php endwhile; ?>
 
 <?php endif;?>

diff --git a/searchform.php b/searchform.php
@@ -9,13 +9,13 @@
  */
  ?>
 
-<form role="search" method="get" id="searchform" class="search-form" action="<?php echo home_url( '/' ); ?>">
-	<div class="input-group">
-		<div class="input-group-field">
-        	<label class="_sr-hidden" for="s">Search the site</label>
+<form role="search" method="get" id="searchform" class="c-search-form" action="<?php echo home_url( '/' ); ?>">
+	<div class="c-input-group">
+		<div class="c-input-group__field">
+      <label class="_sr-hidden" for="s">Search the site</label>
 			<input type="text" class="input-field" value="" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', 'vanlig' ); ?>">
 		</div>
-		<div class="input-group-button">
+		<div class="c-input-group__button">
 			<button type="submit" id="searchsubmit" class="btn btn-secondary">
 			    <?php esc_attr_e( 'Search', 'vanlig' ); ?>
 			</button>

diff --git a/sidebar.php b/sidebar.php
@@ -19,7 +19,7 @@
   <!-- widgets -->
 
   <!-- recent posts -->
-  <h4 class="heading-4">Recent Posts</h4>
+  <h4 class="o-heading-4">Recent Posts</h4>
   <ul class="c-sidebar-posts">
     <?php
       $recent_posts = wp_get_recent_posts(array( 'orderby' => 'post_date', 'numberposts' => 3, 'post_type' => 'post', 'post_status' => 'publish,', ) );
@@ -34,7 +34,7 @@
   <!-- /recent posts -->
 
   <!-- categories -->
-  <h4 class="heading-4">Categories</h4>
+  <h4 class="o-heading-4">Categories</h4>
   <ul class="c-sidebar-categories">
     <?php
       $post_categories = get_categories(array ('orderby' => 'name', 'title_li' => '', ));
@@ -48,7 +48,7 @@
   <!-- /categories -->
 
   <!-- archives -->
-  <h4 class="heading-4">Archives</h4>
+  <h4 class="o-heading-4">Archives</h4>
   <ul class="c-sidebar-archives">
     <?php wp_get_archives(array(
       'orderby'    => 'name',

diff --git a/single.php b/single.php
@@ -12,12 +12,12 @@
 
 <?php while ( have_posts() ) : the_post(); ?>
   <div class="l-wrap">
-    <article id="post-<?php the_ID(); ?>" <?php post_class('c-news-content wysiwyg'); ?>>
+    <article id="post-<?php the_ID(); ?>" <?php post_class('c-news-content'); ?>>
       <header class="c-news-content__header">
         <?php the_title('<h1 class="heading-1">','</h1>'); ?>
         <h4 class="heading-4">Posted by: <?php the_author(); ?></h4>
       </header>
-      <div class="c-news-content__article">
+      <div class="c-news-content__article wysiwyg">
         <?php the_content(); ?>
       </div>
 

diff --git a/template-parts/hero-banner.php b/template-parts/hero-banner.php
@@ -17,7 +17,7 @@
 	$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
 	$image = $image[0]; ?>
 
-	<header class="hero-banner" style="background-image: url('<?php echo $image; ?>')"></header>
+	<header class="o-hero-banner" style="background-image: url('<?php echo $image; ?>')"></header>
 <?php
 	endif;
 ?>
diff --git a/template-parts/module-sharing.php b/template-parts/module-sharing.php
@@ -9,26 +9,26 @@
  */
  ?>
 
- <section class="social-links">
+ <section class="c-social-links">
    <h3 class="heading-3">Share</h3>
-     <ul class="social-links__list">
-         <li class="social-links__item">
-             <a class="social-links__link social-link__link--facebook" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Share on Facebook." target="_blank" rel="noopener">
+     <ul class="c-social-links__list">
+         <li class="c-social-links__item">
+             <a class="c-social-links__link c-social-link__link--facebook" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php the_title(); ?>" title="Share on Facebook." target="_blank" rel="noopener">
                <span>Share on Facebook</span>
              </a>
          </li>
-         <li class="social-links__item">
-             <a class="social-links__link social-links__link--twitter" href="http://twitter.com/home/?status=<?php the_title(); ?> - <?php the_permalink(); ?>" title="Tweet this!" target="_blank" rel="noopener">
+         <li class="c-social-links__item">
+             <a class="c-social-links__link c-social-links__link--twitter" href="http://twitter.com/home/?status=<?php the_title(); ?> - <?php the_permalink(); ?>" title="Tweet this!" target="_blank" rel="noopener">
                <span>Share on Twitter</span>
              </a>
          </li>
-         <li class="social-links__item">
-             <a class="social-links__link social-links__link--pinterest" href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo $url; ?>&description=<?php the_title(); ?>" target="_blank" rel="noopener">
+         <li class="c-social-links__item">
+             <a class="c-social-links__link c-social-links__link--pinterest" href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); echo $url; ?>&description=<?php the_title(); ?>" target="_blank" rel="noopener">
                <span>Share on Pinterest</span>
              </a>
          </li>
-         <li class="social-links__item">
-             <a class="social-links__link social-links__link--email" href="mailto:?Subject=Look what I found on this cool website&Body=<?php the_permalink() ?>%0D%0A " target="_blank" rel="noopener">
+         <li class="c-social-links__item">
+             <a class="c-social-links__link c-social-links__link--email" href="mailto:?Subject=Look what I found on this cool website&Body=<?php the_permalink() ?>%0D%0A " target="_blank" rel="noopener">
                <span>Share on Email</span>
              </a>
          </li>