Skip to content

GitLab

govgr-bootstrap-theme-kit
govgr-bootstrap-theme-kit
Commit 0c92d1d3 authored by Thodoris Papadopoulos's avatar Thodoris Papadopoulos
Browse files
Options

added index.html in templates

parent 0472cea2
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 6 deletions
.gitignore
View file @ 0c92d1d3
......@@ -4,3 +4,4 @@ node_modules/
.idea/tasks.xml
.idea/
dist/
.history/
\ No newline at end of file
LICENSE
View file @ 0c92d1d3
MIT License
Copyright (c) 2020 thodoris
Copyright (c) 2020 govgr-unit (mindigital.gr)
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
......
Styling/govgr-bootstrap-theme-kit/templates/css/index.css 0 → 100644
View file @ 0c92d1d3
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
Styling/govgr-bootstrap-theme-kit/templates/index.html 0 → 100644
View file @ 0c92d1d3
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>GOV.GR - Bootstrap Theme Kit</title>
<link rel="shortcut icon" href="./images/gov_logo_16x16_favicon.png">
<!-- Custom GOV.GR theme - This already includes Bootstrap 4 -->
<link href="./css/govgr_bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="./css/landingpage.css" rel="stylesheet">
</head>
<body>
<!-- Header -->
<header class="bg-primary mb-5">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-lg-8">
<div class="logo_govgr"></div>
<h1 class="display-4 text-white mt-5 mb-2">Bootstrap Theme Kit</h1>
<p class="lead mb-5 text-white-50">
A project to help you get started quickly when developing a GOV.GR-like website using Bootstrap.
It includes a project structure with a gulp script that builds a custom CSS version of Bootstrap 4, according to the styling guidelines of GOV.GR</p>
</div>
<div class="col-lg-4">
<img src="images/govgr-bootstrap-theme.png" />
</div>
</div>
</div>
</header>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-md-8 mb-5">
<h2>Page Examples</h2>
<hr>
<p>See reference implementations of pages build using the theme. </p>
</div>
<div class="col-md-4 mb-5">
<h2>Get The Code</h2>
<hr/>
<p> You can grab the code and start developing from the
<a href="https://gitlab.grnet.gr/govgr-unit/govgr-bootstrap-theme-kit">gitlab repository</a>
</p>
</div>
</div>
<!-- /.row -->
<div class="row">
<div class="col-md-4 mb-5">
<div class="card h-100">
<img class="card-img-top" src="images/screencapture-landingpage.png" alt="Landing Page">
<div class="card-body">
<h4 class="card-title">Landing Page 1</h4>
<p class="card-text">A sample landing page, using a large header with title and subtitle.</p>
</div>
<div class="card-footer">
<a href="landingpage.html" class="btn btn-primary">Browse Page</a>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card h-100">
<img class="card-img-top" src="images/screencapture-landingpage2.png" alt="Landing Page 2">
<div class="card-body">
<h4 class="card-title">Landing Page 2</h4>
<p class="card-text">A landing page with a small header and a second logo (on the right).</p>
</div>
<div class="card-footer">
<a href="landingpage2.html" class="btn btn-primary">Browse Page</a>
</div>
</div>
</div>
<div class="col-md-4 mb-5">
<div class="card h-100">
<img class="card-img-top" src="images/screencapture-login.png" alt="Login Page">
<div class="card-body">
<h4 class="card-title">Login Page</h4>
<p class="card-text">A sample login page.</p>
</div>
<div class="card-footer">
<a href="login.html" class="btn btn-primary">Browse Page</a>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright &copy; 2020 GOV.GR</p>
</div>
</footer>
<!-- Put necessary JavaScript scripts here-->
</body>
</html>
readme.md
View file @ 0c92d1d3
# Bootstrap Theme Kit: Styling/govgr-bootstrap-theme
This is simple starter project to help you get started quickly when developing a website using Bootstrap.
It includes a project structure with a build script that builds a custom CSS version of Bootstrap 4, according to the main styling guidelines of gov.gr.
A project to help you get started quickly when developing a website for GOV.GR using Bootstrap.
It includes a project structure with a gulp script that builds a custom CSS version of Bootstrap 4, according to the styling guidelines of GOV.GR
This allows to customize the default GOV.GR bootstrap theme easily, using Sass variables. The result will be a theme that you can apply to new and existing sites based on Bootstrap 4 projects to give them the new GOV.GR look.
## Getting started
If you want to build your own customized version of the gov.gr bootstrap theme:
All the neccessary files reside inside the `Styling/govgr-bootstrap-theme-kit` folder.
### Default theme customization ###
If you want to build your own customized version of the GOV.GR bootstrap theme:
1. Clone this repo
2. Run `npm install`
3. Run `gulp watch`
4. Open `templates/index.html` in a browser to check the default styling.
4. Add any custom Bootstrap Sass variables into `scss/_custom-variables.scss`
5. Add any custom styles into `scss/_custom-styles.scss`. You can use Bootstrap's mixins here.
6. Repeat steps 4 to 6 until you like what you see :-)
or you can simply grab the compiled css files `css/govgr_bootstrap.css` and include it in your site.
### Default theme customization ###
If you simply want to apply the GOV.GR style to your existing or new websites, you can grab the compiled css file `css/govgr_bootstrap.css` and include it in your site.
## Creators
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment