diff --git a/.gitignore b/.gitignore index 7876fa8d4f00f070891a01b0280342f6996445a4..728512196f24361b5c88bb38adf8193521b8ad34 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,4 @@ node_modules/ .idea/tasks.xml .idea/ dist/ +.history/ \ No newline at end of file diff --git a/LICENSE b/LICENSE index 9420509b28e31ef9a4d809ce9a3081078954ee50..4fe087d60713473eb3f40369d772ca6088411bf0 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ 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 diff --git a/Styling/govgr-bootstrap-theme-kit/templates/css/index.css b/Styling/govgr-bootstrap-theme-kit/templates/css/index.css new file mode 100644 index 0000000000000000000000000000000000000000..af716216c10ca3f046783802ec9d35d34f2d977e --- /dev/null +++ b/Styling/govgr-bootstrap-theme-kit/templates/css/index.css @@ -0,0 +1,13 @@ +html, +body { + height: 100%; +} + +#page-content { + flex: 1 0 auto; +} + +#sticky-footer { + flex-shrink: none; +} + diff --git a/Styling/govgr-bootstrap-theme-kit/templates/images/govgr-bootstrap-theme.png b/Styling/govgr-bootstrap-theme-kit/templates/images/govgr-bootstrap-theme.png new file mode 100644 index 0000000000000000000000000000000000000000..f5eac98e46ec93f926cabaf176641d42ae9d15a0 Binary files /dev/null and b/Styling/govgr-bootstrap-theme-kit/templates/images/govgr-bootstrap-theme.png differ diff --git a/Styling/govgr-bootstrap-theme-kit/templates/images/screencapture-landingpage.png b/Styling/govgr-bootstrap-theme-kit/templates/images/screencapture-landingpage.png new file mode 100644 index 0000000000000000000000000000000000000000..80483f508e55e6f3f8085cd3b2ca7396678d5611 Binary files /dev/null and b/Styling/govgr-bootstrap-theme-kit/templates/images/screencapture-landingpage.png differ diff --git a/Styling/govgr-bootstrap-theme-kit/templates/images/screencapture-landingpage2.png b/Styling/govgr-bootstrap-theme-kit/templates/images/screencapture-landingpage2.png new file mode 100644 index 0000000000000000000000000000000000000000..4295c5da70867533c16d7762702345f4d506a6ad Binary files /dev/null and b/Styling/govgr-bootstrap-theme-kit/templates/images/screencapture-landingpage2.png differ diff --git a/Styling/govgr-bootstrap-theme-kit/templates/images/screencapture-login.png b/Styling/govgr-bootstrap-theme-kit/templates/images/screencapture-login.png new file mode 100644 index 0000000000000000000000000000000000000000..2ab276300908ce7eec3610e89bd8c59057b4c3a1 Binary files /dev/null and b/Styling/govgr-bootstrap-theme-kit/templates/images/screencapture-login.png differ diff --git a/Styling/govgr-bootstrap-theme-kit/templates/index.html b/Styling/govgr-bootstrap-theme-kit/templates/index.html new file mode 100644 index 0000000000000000000000000000000000000000..4fb71ab8699f6569d551adffeefdf6ff106aa43b --- /dev/null +++ b/Styling/govgr-bootstrap-theme-kit/templates/index.html @@ -0,0 +1,121 @@ + + + + + + + + + + + GOV.GR - Bootstrap Theme Kit + + + + + + + + + + + + + + + +
+
+
+
+
+

Bootstrap Theme Kit

+

+ 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

+
+
+ +
+
+
+
+ + +
+ +
+
+

Page Examples

+
+

See reference implementations of pages build using the theme.

+ +
+
+

Get The Code

+
+

You can grab the code and start developing from the + gitlab repository +

+
+
+ + +
+
+
+ Landing Page +
+

Landing Page 1

+

A sample landing page, using a large header with title and subtitle.

+
+ +
+
+
+
+ Landing Page 2 +
+

Landing Page 2

+

A landing page with a small header and a second logo (on the right).

+
+ +
+
+
+
+ Login Page +
+

Login Page

+

A sample login page.

+
+ +
+
+
+ + +
+ + + + + + + + + + + + diff --git a/readme.md b/readme.md index a4bf0841fcd50e2c0c953b83fadfcb510fccc3fd..16bdc437164fbb21e384e77c0e9b7b8a5968cf44 100644 --- a/readme.md +++ b/readme.md @@ -1,21 +1,28 @@ # 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