mirror of
https://github.com/flextype/flextype.git
synced 2025-08-18 10:51:21 +02:00
feat(core): Default theme - Moving to Tailwind CSS #356
This commit is contained in:
Awilum
@@ -1,56 +0,0 @@
|
||||
//
|
||||
// Main
|
||||
//
|
||||
|
||||
body,
|
||||
html {
|
||||
font-family: $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
|
||||
height: 100%;
|
||||
|
||||
color: black;
|
||||
background: white;
|
||||
}
|
||||
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
p,
|
||||
select,
|
||||
textarea {
|
||||
font-family: $base-font-family;
|
||||
font-weight: 300;
|
||||
|
||||
color: black;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: black;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
body,
|
||||
p {
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #f0f0f0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 60px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
//
|
||||
// Footer
|
||||
//
|
||||
|
||||
.powered {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
opacity: .7;
|
||||
|
||||
> a {
|
||||
opacity: .7;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
//
|
||||
// Nav
|
||||
//
|
||||
|
||||
.navbar {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar-light {
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: rgba(0,0,0,.5);
|
||||
padding: 15px 25px;
|
||||
border-bottom: 2px solid transparent;
|
||||
border-top: 2px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .nav-link:focus,
|
||||
.navbar-light .navbar-nav .nav-link:hover {
|
||||
border-bottom: 2px solid #ccc;
|
||||
}
|
||||
|
||||
.navbar-light .navbar-nav .active > .nav-link,
|
||||
.navbar-light .navbar-nav .nav-link.active,
|
||||
.navbar-light .navbar-nav .nav-link.show,
|
||||
.navbar-light .navbar-nav .show > .nav-link {
|
||||
color: rgba(0,0,0,1);
|
||||
border-bottom: 2px solid #000;
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
//
|
||||
// Simple Theme main SCSS
|
||||
// (c) Sergey Romanenko <http://digital.flextype.org>
|
||||
//
|
||||
|
||||
// Generic
|
||||
// Low-specificity, far-reaching rulesets
|
||||
@import "generic/variables";
|
||||
|
||||
// Base
|
||||
// Unclassed HTML elements
|
||||
@import "base/main";
|
||||
|
||||
// Objects
|
||||
// Abstractions, Objects and design patterns
|
||||
@import "objects/container";
|
||||
|
||||
// Components
|
||||
// Discrete, complete chunks of UI
|
||||
@import "components/nav";
|
||||
@import "components/footer";
|
||||
|
||||
// Thumps
|
||||
// High-specificity, very explicit selectors. Overrides and helper classes
|
||||
@@ -1,40 +0,0 @@
|
||||
//
|
||||
// Variables
|
||||
//
|
||||
|
||||
//
|
||||
// Base
|
||||
//
|
||||
$base-font-family: 'Roboto', sans-serif;
|
||||
$base-font-color: #606060;
|
||||
$base-font-size: 16px;
|
||||
$base-line-height: 24px;
|
||||
|
||||
//
|
||||
// Colors Grayscale
|
||||
//
|
||||
$black: #000000;
|
||||
$gray-darkest: lighten($black, 13.5%);
|
||||
// #222222
|
||||
$gray-darker: lighten($black, 26.5%);
|
||||
// #444444
|
||||
$gray-dark: lighten($black, 46.7%);
|
||||
// #777777
|
||||
$gray: lighten($black, 66.5%);
|
||||
// #aaaaaa
|
||||
$gray-light: lighten($black, 87%);
|
||||
// #dedede
|
||||
$gray-lighter: lighten($black, 93.75%); // #efefef
|
||||
$gray-lightest: lighten($black, 97.25%); // #f8f8f8
|
||||
$white: #ffffff;
|
||||
|
||||
//
|
||||
// Scaffolding
|
||||
//
|
||||
$body-bg: #f2f4f5;
|
||||
|
||||
//
|
||||
// Spacing
|
||||
//
|
||||
$base-spacing-unit: $base-font-size;
|
||||
$half-spacing-unit: $base-spacing-unit / 2;
|
||||
@@ -1,7 +0,0 @@
|
||||
//
|
||||
// Container
|
||||
//
|
||||
|
||||
.content {
|
||||
padding-top: 40px;
|
||||
}
|
||||
3
site/themes/default/assets/src/base.css
Normal file
3
site/themes/default/assets/src/base.css
Normal file
@@ -0,0 +1,3 @@
|
||||
body {
|
||||
@apply bg-white text-black text-base;
|
||||
}
|
||||
23
site/themes/default/assets/src/headings.css
Normal file
23
site/themes/default/assets/src/headings.css
Normal file
@@ -0,0 +1,23 @@
|
||||
h1, h2, h3, h4, h5 {
|
||||
@apply mb-8 font-bold;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-4xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-3xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-xl;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@apply text-lg;
|
||||
}
|
||||
5
site/themes/default/assets/src/styles.css
Normal file
5
site/themes/default/assets/src/styles.css
Normal file
@@ -0,0 +1,5 @@
|
||||
@import "tailwindcss/base";
|
||||
@import "base";
|
||||
@import "headings";
|
||||
@import "tailwindcss/components";
|
||||
@import "tailwindcss/utilities";
|
||||
@@ -1,79 +1,55 @@
|
||||
//
|
||||
// Flextype Gulp.js
|
||||
// (c) Sergey Romanenko <http://digital.flextype.org>
|
||||
//
|
||||
const gulp = require('gulp');
|
||||
const tailwindConfig = "tailwind.config.js";
|
||||
const mainCSS = "assets/src/styles.css";
|
||||
|
||||
const { series, src, dest } = require('gulp');
|
||||
const del = require('del');
|
||||
const csso = require('gulp-csso');
|
||||
const concat = require('gulp-concat');
|
||||
const sourcemaps = require('gulp-sourcemaps');
|
||||
const autoprefixer = require('gulp-autoprefixer');
|
||||
const sass = require('gulp-sass');
|
||||
|
||||
function moveBootstrapCss() {
|
||||
return src('node_modules/bootstrap/dist/css/bootstrap.min.css')
|
||||
.pipe(concat('1.min.css'))
|
||||
.pipe(dest('assets/dist/css/tmp'));
|
||||
/**
|
||||
* Custom PurgeCSS Extractor
|
||||
* https://github.com/FullHuman/purgecss
|
||||
*/
|
||||
class TailwindExtractor {
|
||||
static extract(content) {
|
||||
return content.match(/[\w-/:]+(?<!:)/g) || [];
|
||||
}
|
||||
}
|
||||
|
||||
function buldDefaultCss() {
|
||||
return src('assets/scss/default.scss')
|
||||
.pipe(sass().on('error', sass.logError))
|
||||
.pipe(concat('2.min.css'))
|
||||
.pipe(dest('assets/dist/css/tmp'));
|
||||
}
|
||||
/**
|
||||
* Task: gulp css
|
||||
*/
|
||||
gulp.task("css", function() {
|
||||
const atimport = require("postcss-import");
|
||||
const postcss = require("gulp-postcss");
|
||||
const tailwindcss = require("tailwindcss");
|
||||
const purgecss = require("gulp-purgecss");
|
||||
const concat = require('gulp-concat');
|
||||
const csso = require('gulp-csso');
|
||||
const sourcemaps = require('gulp-sourcemaps');
|
||||
const autoprefixer = require('gulp-autoprefixer');
|
||||
|
||||
function moveJqueryJs() {
|
||||
return src('node_modules/jquery/dist/jquery.min.js')
|
||||
.pipe(concat('1.min.js'))
|
||||
.pipe(dest('assets/dist/js/tmp'));
|
||||
}
|
||||
return gulp
|
||||
.src(mainCSS)
|
||||
.pipe(postcss([atimport(), tailwindcss(tailwindConfig)]))
|
||||
.pipe(
|
||||
purgecss({
|
||||
content: ["**/*.html", "../../**/*.md"],
|
||||
extractors: [
|
||||
{
|
||||
extractor: TailwindExtractor,
|
||||
extensions: ["html", "md"]
|
||||
}
|
||||
]
|
||||
})
|
||||
)
|
||||
.pipe(autoprefixer({
|
||||
overrideBrowserslist: [
|
||||
"last 1 version"
|
||||
],
|
||||
cascade: false
|
||||
}))
|
||||
.pipe(csso())
|
||||
.pipe(concat('build.min.css'))
|
||||
.pipe(gulp.dest("assets/dist/css/"));
|
||||
});
|
||||
|
||||
function moveBootstrapJs() {
|
||||
return src('node_modules/bootstrap/dist/js/bootstrap.min.js')
|
||||
.pipe(concat('2.min.js'))
|
||||
.pipe(dest('assets/dist/js/tmp'));
|
||||
}
|
||||
|
||||
function moveSimpleLightboxJs() {
|
||||
return src('node_modules/simplelightbox/dist/simple-lightbox.min.js')
|
||||
.pipe(concat('3.min.js'))
|
||||
.pipe(dest('assets/dist/js/tmp'));
|
||||
}
|
||||
|
||||
function mergeCss() {
|
||||
return src('assets/dist/css/tmp/**')
|
||||
.pipe(autoprefixer({
|
||||
overrideBrowserslist: [
|
||||
"last 1 version"
|
||||
],
|
||||
cascade: false
|
||||
}))
|
||||
.pipe(csso())
|
||||
.pipe(concat('build.min.css'))
|
||||
.pipe(dest('assets/dist/css/'));
|
||||
}
|
||||
|
||||
function mergeJs() {
|
||||
return src('assets/dist/js/tmp/**')
|
||||
.pipe(concat('build.min.js'))
|
||||
.pipe(dest('assets/dist/js/'));
|
||||
}
|
||||
|
||||
function cleanTmpCss() {
|
||||
return del('assets/dist/css/tmp/');
|
||||
}
|
||||
|
||||
function cleanTmpJs() {
|
||||
return del('assets/dist/js/tmp/');
|
||||
}
|
||||
|
||||
exports.default = series(moveBootstrapCss,
|
||||
buldDefaultCss,
|
||||
mergeCss,
|
||||
cleanTmpCss,
|
||||
moveJqueryJs,
|
||||
moveBootstrapJs,
|
||||
mergeJs,
|
||||
cleanTmpJs);
|
||||
gulp.task('watch', function () {
|
||||
gulp.watch(["**/*.html", "../../**/*.md", "assets/src/"], gulp.series('css'));
|
||||
});
|
||||
|
||||
@@ -1,17 +1,31 @@
|
||||
{
|
||||
"name": "Default",
|
||||
"version": "0.9.6",
|
||||
"devDependencies": {
|
||||
"bootstrap": "~4.4.1",
|
||||
"del": "^5.0.0",
|
||||
"es6-promise": "^4.2.4",
|
||||
"version": "0.9.7-DEV",
|
||||
"description": "Default theme for Flextype",
|
||||
"homepage": "http://flextype.org",
|
||||
"author": "Sergey Romanenko",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"flextype",
|
||||
"cms",
|
||||
"flat-file cms",
|
||||
"flat cms",
|
||||
"flatfile cms",
|
||||
"html"
|
||||
],
|
||||
"bugs": {
|
||||
"url": "https://github.com/flextype/flextype/issues"
|
||||
},
|
||||
"dependencies": {
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-autoprefixer": "^6.0.0",
|
||||
"gulp-postcss": "^8.0.0",
|
||||
"gulp-purgecss": "^1.2.0",
|
||||
"gulp-autoprefixer": "^7.0.1",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-csso": "^3.0.1",
|
||||
"gulp-sass": "^4.0.2",
|
||||
"gulp-csso": "^4.0.1",
|
||||
"gulp-sourcemaps": "^2.6.5",
|
||||
"jquery": "^3.4.1",
|
||||
"popper.js": "^1.15.0"
|
||||
"postcss-import": "^12.0.1",
|
||||
"@fullhuman/postcss-purgecss": "^1.3.0",
|
||||
"tailwindcss": "^1.1.4"
|
||||
}
|
||||
}
|
||||
|
||||
5
site/themes/default/tailwind.config.js
Normal file
5
site/themes/default/tailwind.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
theme: {},
|
||||
variants: {},
|
||||
plugins: [],
|
||||
}
|
||||
@@ -28,42 +28,46 @@
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom box-shadow">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{{ base_url() }}">{{ registry.settings.title|e('html') }}</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
{% for item in entries.fetch('', {'order_by': {'field': 'menu_item_order', 'direction': 'asc'}}) %}
|
||||
{% if item.menu_item_title %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% if item.menu_item_url in entry.slug %}active{% endif %}" href="{{ base_url() }}/{{ item.menu_item_url }}">{{ item.menu_item_title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<nav class="bg-black text-white">
|
||||
<div class="container mx-auto pl-16 pr-16 pt-6 pb-6 clearfix">
|
||||
<div class="w-full lg:w-2/12
|
||||
text-center lg:text-left
|
||||
float-left text-white p-2 uppercase tracking-wide">
|
||||
<a href="{{ base_url() }}" class="w-full lg:w-2/12 pl-2 pr-2 text-center text-base logo no-underline">{{ registry.settings.title|e('html') }}</a>
|
||||
</div>
|
||||
<div class="w-full float-right lg:w-9/12 font-noirpro-semibold">
|
||||
<div class="text-right p-2">
|
||||
{% for item in entries.fetch('', {'order_by': {'field': 'menu_item_order', 'direction': 'asc'}}) %}
|
||||
{% if item.menu_item_title %}
|
||||
<a href="{{ base_url() }}/{{ item.link }}"
|
||||
class="{% if item.menu_item_url in entry.slug %}border-white{% endif %}
|
||||
uppercase
|
||||
relative
|
||||
block
|
||||
text-white
|
||||
text-center
|
||||
mr-0
|
||||
nav-item
|
||||
lg:mr-4
|
||||
lg:inline-block">
|
||||
{{ item.title }}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main role="main" class="container content">
|
||||
<div id="content">{% block content %}{% endblock %}</div>
|
||||
<div class="powered">
|
||||
|
||||
<main role="main" class="container">
|
||||
<section id="content" class="p-10">{% block content %}{% endblock %}</section>
|
||||
<footer class="text-center px-10 pt-5 pb-10">
|
||||
{% block footer %}
|
||||
{{ tr('site_powered_by_flextype')|raw }}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
{% set build_js = base_url() ~ '/site/themes/' ~ registry.settings.theme ~ '/assets/dist/js/build.min.js' %}
|
||||
{% do assets.add('js', build_js, 'site', 1) %}
|
||||
{% for assets_site in assets.get('js', 'site') %}
|
||||
{% for assets_by_priorities in assets_site %}
|
||||
<script src="{{ assets_by_priorities.asset }}"></script>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
{% do emitter.emit('onThemeTail') %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user