Arkheで用意されている便利な汎用CSS、ユーティリティクラスの詳細まとめ

秀逸なWordPressテーマArkhe（アルケー）に、最初から用意されているとっても便利な汎用クラス！
いちいちファイルを開いて確認してたけど、自分用にまとめてみました〜

Arkhe使っている人には特に説明せずとも便利なクラスだと思います〜
「高度な設定」の「追加CSSクラス」にクラス名を入れるだけですぐに使えます。

alignfull.scss

.alignfull {
	position: relative;
	left: calc(50% - ( 50vw - var(--ark-scrollbar_width) / 2 ));
	width: calc(100vw - var(--ark-scrollbar_width));
	max-width: 100vw !important; // embedなどの max100% のものを上書き

	+ .alignfull {
		margin-top: 0;
	}

	// div中の全幅は、内部に収まるように。（ネスト内でも広げたいケースはそれぞれ明示的に指定する）
	:where(.c-postContent > div) & {
		left: 0;
		width: 100%;
	}

	// サイドバーありの時、コンテンツエリアでは幅を制限
	[data-sidebar="on"] .l-main & {

		@include pc {
			left: 0 !important;
			width: 100% !important;
		}
	}

	// 背景色ありグループ・カバーブロックの余白量を大きく。
	&.wp-block-cover,
	&.wp-block-group.has-background {
		padding: 4em var(--ark-padding--container, 48px);
	}

	// インナーコンテンツの最大幅を記事幅に維持する
	> .wp-block-cover__inner-container,
	&.has-background > .wp-block-group__inner-container {
		max-width: var(--ark-width--article);
		margin: 0 auto;
	}

	// 全幅の中の記事幅コンテンツの中の、さらに幅広なコンテンツの挙動
	> .wp-block-cover__inner-container,
	&.has-background > .wp-block-group__inner-container,
	> .ark-block-container__inner,
	&:not([data-inner="full"]) > .ark-block-section__body > .ark-block-section__bodyInner {

		// さらにその中の全幅は、左右のpaddingまでに収まるように。
		> .alignfull {
			left: calc(50% - ( 50vw - var(--ark-padding--container) ));
			width: calc(100vw - var(--ark-padding--container) * 2);
		}

		> .alignwide {
			--ark-alignwide_ex_width: revert;
		}
	}
}

alignwide.scss

//left: 50%; transform: translateX(-50%);を使いたいけど、background-attachment: fixed;との併用ができない。

.alignwide {
	position: relative;
	left: calc(var(--ark-alignwide_ex_width) * -1);
	width: calc(100% + var(--ark-alignwide_ex_width) * 2);
	max-width: unset !important; // embedなどのmax100%のものを上書き

	// div中の全幅は、内部に収まるように。（ネスト内でも広げたいケースはそれぞれにrevertで0を打ち消す）
	:where(.c-postContent > div) & {
		--ark-alignwide_ex_width: 0px;
	}
}

// サイドバーありの時、コンテンツエリアでは幅を制限
[data-sidebar="on"] .l-main .alignwide {
	left: 0;
	width: 100%;
}

cf.scss

.u-cf {
	clear: both !important;
}

.u-cf--after::after {
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
	content: "";
}

color.scss

.u-color-thin {
	opacity: var(--ark-opacity--thin);
}

display.scss

.u-display-none {
	display: none !important;
}

.u-display-block {
	display: block !important;
}

flex.scss

.u-flex {
	display: flex;
}

.u-flex--aic {
	display: flex;
	align-items: center;
}

.u-flex--aicw {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

// .u-flex--jcc {
//     display: flex;
//     justify-content: center;
// }

.u-flex--c {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	align-items: center;
	justify-content: center;
}

font-size.scss

.u-fz-xs,
.has-xsmall-font-size {
	font-size: var(--ark-fz--xs, .75em) !important;

}

.u-fz-s,
.has-small-font-size {
	font-size: var(--ark-fz--s, .9em) !important;
}

.u-fz-n,
.has-normal-font-size {
	font-size: var(--ark-fz--n, 1rem) !important;
}

.u-fz-m {
	font-size: var(--ark-fz--m, 1.1em) !important;
}

.u-fz-l,
.has-large-font-size {
	font-size: var(--ark-fz--l, 1.25em) !important;
}

.u-fz-xl,
.has-xlarge-font-size {
	font-size: var(--ark-fz--xl, 1.5em) !important;
}

.u-fz-xxl,
.has-xxlarge-font-size {
	font-size: var(--ark-fz--xxl, 2em) !important;
}

.has-huge-font-size {
	font-size: var(--ark-fz--huge, 2.75em) !important;
}

font-weight.scss

.u-fw-bold {
	font-weight: bold !important;
}

.u-fw-normal {
	font-weight: normal !important;
}

.u-fw-lighter {
	font-weight: lighter !important;
}

fullhight.scss

.u-fullheight {
	height: var(--ark-height--full, 100vh) !important;
}

line-height.scss

.u-lh-10 {
	line-height: 1 !important;
}

.u-lh-12 {
	line-height: 1.2 !important;
}

.u-lh-14 {
	line-height: 1.4 !important;
}

.u-lh-15 {
	line-height: 1.5 !important;
}

.u-lh-16 {
	line-height: 1.6 !important;
}

.u-lh-18 {
	line-height: 1.8 !important;
}

.u-lh-20 {
	line-height: 2 !important;
}

margin.scss

// margin-bottom
.u-mb-0 {
	margin-bottom: 0 !important;
}
// remベース
.u-mb-5 {
	margin-bottom: .5rem !important;
}

.u-mb-10 {
	margin-bottom: 1rem !important;
}

.u-mb-15 {
	margin-bottom: 1.5rem !important;
}

.u-mb-20 {
	margin-bottom: 2rem !important;
}

.u-mb-25 {
	margin-bottom: 2.5rem !important;
}

.u-mb-30 {
	margin-bottom: 3rem !important;
}

.u-mb-40 {
	margin-bottom: 4rem !important;
}

.u-mb-50 {
	margin-bottom: 5rem !important;
}

.u-mb-60 {
	margin-bottom: 6rem !important;
}

.u-mb-80 {
	margin-bottom: 8rem !important;
}

// margin-top
.u-mt-0 {
	margin-top: 0 !important;
}
// remベース
.u-mt-5 {
	margin-top: .5rem !important;
}

.u-mt-10 {
	margin-top: 1rem !important;
}

.u-mt-15 {
	margin-top: 1.5rem !important;
}

.u-mt-20 {
	margin-top: 2rem !important;
}

.u-mt-25 {
	margin-top: 2.5rem !important;
}

.u-mt-30 {
	margin-top: 3rem !important;
}

.u-mt-40 {
	margin-top: 4rem !important;
}

.u-mt-50 {
	margin-top: 5rem !important;
}

.u-mt-60 {
	margin-top: 6rem !important;
}

.u-mt-80 {
	margin-top: 8rem !important;
}

object.scss

.u-obf-cover {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	// font-family: "object-fit: cover;";
}

.u-obf-contain {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	// font-family: "object-fit: contain;";
}

pc-sp.scss

@include pc {

	.u-only-sp {
		display: none !important;
	}

	.u-hide-pc {
		display: none !important;
	}
}

@include sp {

	.u-only-pc {
		display: none !important;
	}

	.u-hide-sp {
		display: none !important;
	}
}

text-align.scss

.u-ta-c {
	text-align: center !important;
}

.u-ta-l {
	text-align: left !important;
}

.u-ta-r {
	text-align: right !important;
}

wp-utils.scss

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

// ?
.sticky {
	display: block;
}

// ?
.bypostauthor {
	color: inherit;
}