Creating your CSS styles

Styles and CSS🔗

Nitoku pages are written using Markdown and HTML. To display the rendered page, the markdown will be translated into HTML and added to any HTML that you wrote on your page. Rendered element will be styled with the default Nitoku's CSS theme. However, if you set a different CSS style, instead of the default CSS, the app will use the CSS of your page.

To set your own CSS style, on your data resources, click on the settings icon (the cogwheel icon) of the page, and click on the button, "Set a new style". You can see an example of this dialog menu below.

Creating the style page🔗

Setting your style on the page is good and well if you already have an style, but how we create a style page on the first place? Go to the resources table on your pages or one of your teams. There create a new page, be sure that the name for your page only have alphanumeric characters. In the example below we have named our page "styleTest". After you create the page you need to make the page a style page, click on the "Change to Style Page" button to do this.

Understanding the default CSS classes🔗

If you navigated to your style page you will find the CSS of the style at the bottom of the page. As you edit the CSS you will see hoe those CSS changes affect the page in real time.

Lets discuss some of the classes that affect how some of the main elements of the page are styled. First we find the classes that affect the page background and fonts.

Next, we have the classes that style the markdown elements. Please note that some of the classes are preceded by .markdown-section Classes that are preceded by .markdown-section will only be applied on the page area and not any of the Nitoku platform elements.

.markdown-section p {
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 3px 20px 8px 20px;
}

.markdown-section h1, h2, h3, h4, h5, h6 { 
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 3px 20px 8px 20px;
  position: relative;
}

p code {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;  
  line-height: 1.3;   
}

.page-color {
  color : #676a6c;
}

.markdown-section a {
  color: #1b9866;
  text-decoration: none;
  cursor: pointer;
}

code {
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27,31,35,0.05);
  border-radius: 3px;
}

pre {
  padding: 16px;
  overflow: auto;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px;
  margin-left: 20px;
  margin-right: 20px;
}

pre code {
  display: inline;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

table  {
  margin-left: auto;
  margin-right: auto;
  border-spacing: 0;
  border-collapse: collapse;
}   
table > thead > tr > th {
  border-bottom: 1px solid #DDDDDD;
  vertical-align: bottom;
}
table > thead > tr > th, 
table > tbody > tr > th, 
table > tfoot > tr > th, 
table > thead > tr > td, 
table > tbody > tr > td, 
table > tfoot > tr > td {
  border-top: 1px solid #e7eaec;
  line-height: 1.42857;
  padding: 8px;
  vertical-align: top;
}
table > thead > tr > th, 
table > tbody > tr > th, 
table > tfoot > tr > th, 
table > thead > tr > td, 
table > tbody > tr > td, 
table > tfoot > tr > td {
   border: 1px solid #e7e7e7;
}
table > thead > tr > th, 
table > thead > tr > td {
    background-color: #F5F5F6;
    border-bottom-width: 1px;    
}

.markdown-section blockquote {
  margin-top: 0;
  margin-bottom: 16px;
  padding: 0 1em;    
  border-left: .25em solid #dfe2e5;
  display: block;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 20px;
  -webkit-margin-end: 20px;
  margin-left: 20px;
  margin-right: 20px;
}

.markdown-section hr {
  border: 0; 
  border-top: 1px solid rgba(0, 0, 0, 0.1); 
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 20px;
  margin-right: 20px;
}

.table-markdown { 	
  overflow-x: auto;      
  padding-right: 20px;   
  padding-left: 20px;
}

.img-markdown {    
  max-width: 100%;    
  height: auto;    
  vertical-align: bottom;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.side-nav-background {
  background: #f5f7f9;
  border-color: #e2e2e4;
}

Bellow we have the classes that are used to load the page. Customize these classes to make the style and color palette of the page when is loading match your page color palette.

.loading-frame{	
  background: linear-gradient(91deg, #b8dad1, #f3f3f4);
  background-size: 400% 400%;
  -webkit-animation: LoadingAnimation 5s ease infinite;
  -moz-animation: LoadingAnimation 5s ease infinite;
  -o-animation: LoadingAnimation 5s ease infinite;
  animation: LoadingAnimation 5s ease infinite;
}

.meter-background {  
  background-color: rgb(43, 194, 83);
  background-image: -webkit-gradient(linear, left bottom, left top,
                     color-stop(0, rgb(43,194, 83)), color-stop(1, rgb(84, 240, 84)));
  background-image: -moz-linear-gradient(center bottom, rgb(43, 194, 83)37%,rgb(84, 240, 84) 69%);
}

.frame-spin-circle {     
  position: absolute;    
  top: 50%;     
  left: 50%;     
  transform: translate(-50%,-50%); 	 
  width: 150px;     
  height: 150px;	     
  animation: FrameSpinFadeIn 10s;     
  overflow: hidden;
}

.frame-spin-loader {     
  width: calc(100% - 0px); 	
  height: calc(100% - 0px); 	
  border: 8px solid #ddeae7; 	
  border-top: 8px solid #6fba9a; 	
  border-radius: 50%; 	
  animation: FrameSpinRotate 5s linear infinite; 
}

And finally the classes that are used to style the icons on the page.

A practical example, understanding the Cyberpunk style classes🔗

Let's take a look at the Cyberpunk style page to learn a couple of ways on how to add our own style to our pages.

The first thing that we will notice when we look at the CSS of this Cyberpunk style page is that this page is using some fonts from google fonts. You can see below how the fonts are defined on the CSS and then how they are assigned to the headers and markdown paragraph elements.

@font-face {
  font-family: 'Cutive Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Cutive Mono Regular'), local('CutiveMono-Regular'), 
  	url(https://fonts.gstatic.com/s/cutivemono/v9/m8JWjfRfY7WVjVi2E-K9H6RMTm6o39ucNvc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, 
  	U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cutive Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Cutive Mono Regular'), local('CutiveMono-Regular'), 
  	url(https://fonts.gstatic.com/s/cutivemono/v9/m8JWjfRfY7WVjVi2E-K9H6RCTm6o39uc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, 
  	U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Turret Road';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Turret Road Regular'), local('TurretRoad-Regular'), 
  	url(https://fonts.gstatic.com/s/turretroad/v2/pxiAypMgpcBFjE84Zv-fE0tMMPKhSkFEkm8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, 
  	U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Turret Road';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Turret Road Regular'), local('TurretRoad-Regular'), 
  	url(https://fonts.gstatic.com/s/turretroad/v2/pxiAypMgpcBFjE84Zv-fE0tCMPKhSkFE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, 
  	U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'Turret Road';
}

.page-background {  
    background-color: #332f46;
}

.page-font {  
  font-family: Cutive Mono, Helvetica, Arial, sans-serif;
  font-size: 18px;  
  line-height: 1.3;   
  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%; 
}

p code {
  font-family: 'Turret Road';
  font-size: 15px;  
  line-height: 1.3;   
}

.page-color {
  color : #faf6fb;
}

Also one interesting thing that this style made was to customize the CSS of block loading frame, making a more cyberpunk style to match the character of the page.

.loading-frame{	
  background: linear-gradient(91deg, #332f46, #5d5d79);
  background-size: 400% 400%;
  -webkit-animation: LoadingAnimation 5s ease infinite;
  -moz-animation: LoadingAnimation 5s ease infinite;
  -o-animation: LoadingAnimation 5s ease infinite;
  animation: LoadingAnimation 5s ease infinite;
}

.meter-background {  
  background-color: rgb(52 43 194);
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(194 43 123)), color-stop(1, rgb(137 84 240)));  
  background-image: -moz-linear-gradient(center bottom, rgb(194 43 123)37%,rgb(137 84 240) 69%);
}

.frame-spin-loader {
	width: calc(100% - 0px);
	height: calc(100% - 0px);
	border: 1px solid #688e97;
	border-top: 8px solid #332f46;
	border-radius: 50%;
	animation: FrameSpinRotate 5s linear infinite;
}

See below how the control icons color palette has been changed to match the cyberpunk colors.

Using HTML with your style

We don't need to constraint ourselves to just add classes that provide style to markdown elements. One powerful way to create a beautiful and interesting page is to use HTML, and then use the style page to include your CSS classes. As an alternative

As we can see on the cyberpunk style page, there are some CSS classes that are styling HTML elements, the first of those classes that we find is some classes providing a glitching text effect. This glitching text effect has been created inspired by a glitching text codepen.

As you can see on the clip above, the HTML elements are styled with the CSS classes to create the glitching effect. Please see below for the CSS classes used.

h1[data-glitch] {
  margin: 0;
  font-family: 'Turret Road', sans-serif;
  font-size: 2.5em;
  letter-spacing: .15em;
}

h2[data-glitch] {
  margin: 0;
  font-family: 'Turret Road', sans-serif;
  font-size: 2em;
  letter-spacing: .15em;
}

h3[data-glitch] {
  margin: 0;
  font-family: 'Turret Road', sans-serif;
  font-size: 1.5em;
  letter-spacing: .15em;
}

h4[data-glitch] {
  margin: 0;
  font-family: 'Turret Road', sans-serif;
  font-size: 1.2em;
  letter-spacing: .15em;
}

h5[data-glitch] {
  margin: 0;
  font-family: 'Turret Road', sans-serif;
  font-size: 1em;
  letter-spacing: .15em;
}

/* Our mixin positions a copy of our text directly on our existing text, while
also setting content to the appropriate text set in the data-text attribute. */
h1[data-glitch], h2[data-glitch], h3[data-glitch], h4[data-glitch], h5[data-glitch] {
  position: relative;
  color: white;
  /* Animation provides a slight random skew. Check bottom of doc
  for more information on how to random skew. */
  animation: glitch-skew 1s infinite linear alternate-reverse;
}

h1[data-glitch]::before, h2[data-glitch]::before, h3[data-glitch]::before, h4[data-glitch]::before, h5[data-glitch]::before {
  content: attr(data-glitch);
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 20px 8px 20px;
  width: 100%;
  height: 100%;
  left: 2px;
  text-shadow: -2px 0 #ff00c1;
  /* Creates an initial clip for our glitch. This works in
  a typical top,right,bottom,left fashion and creates a mask
  to only show a certain part of the glitch at a time. */
  clip: rect(44px, 450px, 56px, 0);
  /* Runs our glitch-anim defined below to run in a 5s loop, infinitely,
  with an alternating animation to keep things fresh. */
  animation: glitch-anim 5s infinite linear alternate-reverse;
}
h1[data-glitch]::after, h2[data-glitch]::after, h3[data-glitch]::after, h4[data-glitch]::after, h5[data-glitch]::after {
  content: attr(data-glitch);
  position: absolute;
  top: 0;
  padding: 3px 20px 8px 20px;
  left: 0;
  width: 100%;
  height: 100%;
  left: -2px;
  text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
  animation: glitch-anim2 1s infinite linear alternate-reverse;
}

...

Neon link buttons

Similar to the glitching effect we use some classes inspired by the Glowing buttons codepen to create links on this cyberpunk page.

.punk-wrapper {
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap; 
}

a.punk{
    display: flex;
    justify-content: center;
    align-items: center;
    background: #332f46;
    font-family: 'Turret Road', sans-serif;
    font-weight: bold;
    position: relative;
    display: inline-block;
    padding: 20px 20px;
    margin: 20px 20px;
    color: #03e9f4;
    text-decoration: none;
    text-transform: uppercase;
    transition: 0.5s;
    letter-spacing: 2px;
    overflow: hidden;
    margin-right: 20px;
    flex-shrink: 0;
}
a.punk:hover{
    background: #03e9f4;
    color: #050801;
    box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
     -webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}

a.punk span{
    position: absolute;
    display: block;
}

a.punk span:nth-child(1){
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,transparent,#03e9f4);
    animation: animate1 1s linear infinite;
}
@keyframes animate1{
    0%{
        left: -100%;
    }
    50%,100%{
        left: 100%;
    }
}
a.punk span:nth-child(2){
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg,transparent,#03e9f4);
    animation: animate2 1s linear infinite;
    animation-delay: 0.25s;
}
@keyframes animate2{
    0%{
        top: -100%;
    }
    50%,100%{
        top: 100%;
    }
}
a.punk span:nth-child(3){
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(270deg,transparent,#03e9f4);
    animation: animate3 1s linear infinite;
    animation-delay: 0.50s;
}
@keyframes animate3{
    0%{
        right: -100%;
    }
    50%,100%{
        right: 100%;
    }
}

a.punk span:nth-child(4){
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(360deg,transparent,#03e9f4);
    animation: animate4 1s linear infinite;
    animation-delay: 0.75s;
}
@keyframes animate4{
    0%{
        bottom: -100%;
    }
    50%,100%{
        bottom: 100%;
    }
}

Sidebar.

If you want that your CSS classes only affect the elements on the sidebar precede those classes with the .sidebar-nav class. See below for an example.

Classes provided to blocks.

On this cyberpunk style, we find some .metismenu classes. The way those classes are used is a bit particular, those classes are used by the menu block to display the correct color, the menu will be using a green palette for normal pages of the Nitoku documentation but using the cyberpunk colors on the sidebar for the Cyberpunk style page. The way it works, is that the block ask for the CSS of the page and use the classes provided by the page, therefore the classes needed to style the block should be included here.