tajidyakub
1/31/2018 - 9:50 AM

Starter files in Twitter Bootstrap 4 Theming via SASS for WordPress template

Starter files in Twitter Bootstrap 4 Theming via SASS for WordPress template

twitter-bootstrap-4-sass-wordpress-starter.md
content_copyfile_download
  • Rendered
  • Source

In working directory src/styles/

// In file style.scss
@import "meta"; // Themes meta for WordPress Themes
@import "variables"; // Bootstrap 4 Theming
@import "~bootstrap/scss/bootstrap";
@import "fontawesome-all.css";
  • _meta.scss : WordPress Themes meta information
  • _variables.scss : Modify Bootstrap variable for Theming
  • bootstrap.scss inside modules dir : Twitter Bootstrap main sass file
_variables.scss
content_copyfile_download
// Genera;
$body-bg: #f6f6f6;
$body-color: #363636;
// stylelint-disable
$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;
$grays: () !default;
$grays: map-merge(( "100": $gray-100, "200": $gray-200, "300": $gray-300, "400": $gray-400, "500": $gray-500, "600": $gray-600, "700": $gray-700, "800": $gray-800, "900": $gray-900), $grays);
// Theme Color. Get from Photon Mozilla
$ink : #363959 !default;
$blue : #0a84ff !default;
$purple : #6f42c1 !default;
$pink : #e83e8c !default;
$red : #ff0039 !default;
$yellow : #ffe900 !default;
$green : #30e60b !default;
$cyan : #00feff !default;
$indigo : #6610f2 !default;
$purple : #9400ff !default;
$pink : #e83e8c !default;
$orange : #ff9400 !default;
$teal : #00feff !default;
$magenta: #ff1ad9 !default;
// Brand Colors
$twitter : #1da1f2 !default;
$facebook : #3b5998 !default;
$google-plus: #dd4b39 !default;
$colors: () !default;
$colors: map-merge(( "magenta": $magenta, "ink": $ink, "blue": $blue, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan, "white": $white, "gray": $gray-600, "gray-dark": $gray-800), $colors);
$theme-colors: ( "twitter": $twitter, "fb": $facebook, "googleplus": $google-plus, "ink": $ink, "primary": $ink, "danger": $red, "warning": $yellow, "success": $green, "info":$cyan);
//Modifier
$enable-shadows: true;
$enable-transitions: true;
$enable-rounded:false;
_meta.scss
content_copyfile_download
/*
Theme Name: Sysadmin
Theme URI: https://github.com/tajidyakub/sysadmin-wordpress-themes
Author: Tajid Yakub
Author URI: https://tajidyakub.com/
Description: Simple WordPress theme with usability and clarity as the main consideration, build with _s and Twitter Bootstrap v.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: simple, responsive, grid, clarity, usability
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/