├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── bootstrap ├── blog │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── blog-1440x900.png │ │ ├── blog-375x667.png │ │ ├── blog-640x400.png │ │ └── blog-768x1024.png ├── carousel │ ├── README.md │ ├── html │ │ ├── index.html │ │ ├── package.json │ │ └── static │ │ │ └── images │ │ │ └── wireframe │ │ │ └── square-image.png │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── static │ │ │ │ └── images │ │ │ │ └── wireframe │ │ │ │ └── square-image.png │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── carousel-1440x900.png │ │ ├── carousel-375x667.png │ │ ├── carousel-640x400.png │ │ └── carousel-768x1024.png ├── cover │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── cover-1440x900.png │ │ ├── cover-375x667.png │ │ ├── cover-640x400.png │ │ └── cover-768x1024.png ├── dashboard │ ├── README.md │ ├── html │ │ ├── index.html │ │ ├── package.json │ │ └── static │ │ │ └── images │ │ │ └── wireframe │ │ │ └── square-image.png │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── static │ │ │ │ └── images │ │ │ │ └── wireframe │ │ │ │ └── square-image.png │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── dashboard-1440x900.png │ │ ├── dashboard-375x667.png │ │ ├── dashboard-640x400.png │ │ └── dashboard-768x1024.png ├── grid │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── grid-1440x900.png │ │ ├── grid-375x667.png │ │ ├── grid-640x400.png │ │ └── grid-768x1024.png ├── jumbotron-narrow │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── jumbotron-narrow-1440x900.png │ │ ├── jumbotron-narrow-375x667.png │ │ ├── jumbotron-narrow-640x400.png │ │ └── jumbotron-narrow-768x1024.png ├── jumbotron │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── jumbotron-1440x900.png │ │ ├── jumbotron-375x667.png │ │ ├── jumbotron-640x400.png │ │ └── jumbotron-768x1024.png ├── justified-nav │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── justified-nav-1440x900.png │ │ ├── justified-nav-375x667.png │ │ ├── justified-nav-640x400.png │ │ └── justified-nav-768x1024.png ├── navbar-fixed-top │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── navbar-fixed-top-1440x900.png │ │ ├── navbar-fixed-top-375x667.png │ │ ├── navbar-fixed-top-640x400.png │ │ └── navbar-fixed-top-768x1024.png ├── navbar-static-top │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── navbar-static-top-1440x900.png │ │ ├── navbar-static-top-375x667.png │ │ ├── navbar-static-top-640x400.png │ │ └── navbar-static-top-768x1024.png ├── navbar │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── navbar-1440x900.png │ │ ├── navbar-375x667.png │ │ ├── navbar-640x400.png │ │ └── navbar-768x1024.png ├── non-responsive │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── non-responsive-1440x900.png │ │ ├── non-responsive-375x667.png │ │ ├── non-responsive-640x400.png │ │ └── non-responsive-768x1024.png ├── offcanvas │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── offcanvas-1440x900.png │ │ ├── offcanvas-375x667.png │ │ ├── offcanvas-640x400.png │ │ └── offcanvas-768x1024.png ├── signin │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── signin-1440x900.png │ │ ├── signin-375x667.png │ │ ├── signin-640x400.png │ │ └── signin-768x1024.png ├── starter-template │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── starter-template-1440x900.png │ │ ├── starter-template-375x667.png │ │ ├── starter-template-640x400.png │ │ └── starter-template-768x1024.png ├── sticky-footer-navbar │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── sticky-footer-navbar-1440x900.png │ │ ├── sticky-footer-navbar-375x667.png │ │ ├── sticky-footer-navbar-640x400.png │ │ └── sticky-footer-navbar-768x1024.png ├── sticky-footer │ ├── README.md │ ├── html │ │ ├── index.html │ │ └── package.json │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── sticky-footer-1440x900.png │ │ ├── sticky-footer-375x667.png │ │ ├── sticky-footer-640x400.png │ │ └── sticky-footer-768x1024.png └── theme │ ├── README.md │ ├── html │ ├── index.html │ ├── package.json │ └── static │ │ └── images │ │ └── wireframe │ │ └── square-image.png │ ├── react │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── static │ │ │ └── images │ │ │ └── wireframe │ │ │ └── square-image.png │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js │ └── yarn.lock │ └── screenshots │ ├── theme-1440x900.png │ ├── theme-375x667.png │ ├── theme-640x400.png │ └── theme-768x1024.png ├── package.json ├── scripts ├── capture.js ├── upgrade-html.js └── upgrade-react.js ├── semantic-ui ├── fixed │ ├── html │ │ ├── index.html │ │ ├── package.json │ │ └── static │ │ │ └── images │ │ │ ├── logo.png │ │ │ └── wireframe │ │ │ ├── media-paragraph.png │ │ │ └── paragraph.png │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── static │ │ │ │ └── images │ │ │ │ ├── logo.png │ │ │ │ └── wireframe │ │ │ │ ├── media-paragraph.png │ │ │ │ └── paragraph.png │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── fixed-1440x900.png │ │ ├── fixed-375x667.png │ │ ├── fixed-640x400.png │ │ └── fixed-768x1024.png ├── homepage │ ├── html │ │ ├── index.html │ │ ├── package.json │ │ └── static │ │ │ └── images │ │ │ ├── avatar │ │ │ └── nan.jpg │ │ │ └── wireframe │ │ │ └── white-image.png │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ └── manifest.json │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── homepage-1440x900.png │ │ ├── homepage-375x667.png │ │ ├── homepage-640x400.png │ │ └── homepage-768x1024.png ├── login │ ├── README.md │ ├── html │ │ ├── index.html │ │ ├── package.json │ │ └── static │ │ │ └── images │ │ │ └── logo.png │ ├── react │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── static │ │ │ │ └── images │ │ │ │ └── logo.png │ │ ├── src │ │ │ ├── App.css │ │ │ ├── App.jsx │ │ │ ├── App.test.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ ├── logo.svg │ │ │ └── serviceWorker.js │ │ └── yarn.lock │ └── screenshots │ │ ├── login-1440x900.png │ │ ├── login-375x667.png │ │ ├── login-640x400.png │ │ └── login-768x1024.png └── sticky │ ├── html │ ├── index.html │ ├── package.json │ └── static │ │ └── images │ │ ├── logo.png │ │ └── wireframe │ │ └── square-image.png │ ├── react │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── static │ │ │ └── images │ │ │ ├── logo.png │ │ │ └── wireframe │ │ │ └── square-image.png │ ├── src │ │ ├── App.css │ │ ├── App.jsx │ │ ├── App.test.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── serviceWorker.js │ └── yarn.lock │ └── screenshots │ ├── sticky-1440x900.png │ ├── sticky-375x667.png │ ├── sticky-640x400.png │ └── sticky-768x1024.png └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | max_line_length = 80 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Numerous always-ignore extensions 3 | *.diff 4 | *.err 5 | *.orig 6 | *.log 7 | *.rej 8 | *.swo 9 | *.swp 10 | *.zip 11 | *.vi 12 | *~ 13 | *.sass-cache 14 | *.ruby-version 15 | 16 | # OS or Editor folders 17 | .DS_Store 18 | ._* 19 | Thumbs.db 20 | .cache 21 | .project 22 | .settings 23 | .tmproj 24 | .docpad.db 25 | *.esproj 26 | nbproject 27 | *.sublime-project 28 | *.sublime-workspace 29 | .build* 30 | 31 | node_modules 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) [2016-2018], [PPType, Inc.] 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | * Neither the name of the copyright holder nor the names of its 15 | contributors may be used to endorse or promote products derived from 16 | this software without specific prior written permission. 17 | 18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 21 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 22 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 23 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 24 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 25 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 26 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 27 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 28 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Semantic-UI-Forest Templates 2 | 3 | This repo containers some templates, 18 of which are imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/getting-started/#examples) and are 5 | re-implemented in [Semantic-UI](https://semantic-ui.com) to demonstrate the 6 | power of Semantic-UI. 7 | 8 | All templates provides HTML and react implementations at the same time, and 9 | I've spent a lot of time to make sure that all templates has good responsive 10 | design to mimic Bootstrap's behaviour, and at the same time to make html and 11 | react pixel equal and perfect with each other. 12 | 13 | To start the journey, make sure that 14 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 15 | and better to get [Yarn](https://yarnpkg.com/) installed. 16 | 17 | ## Templates 18 | 19 | ### Boostrap 20 | 21 | - [blog](./bootstrap/blog) 22 | - [carousel](./bootstrap/blog) 23 | - [cover](./bootstrap/blog) 24 | - [dashboard](./bootstrap/blog) 25 | - [grid](./bootstrap/blog) 26 | - [jumbotron](./bootstrap/blog) 27 | - [jumbotron-narrow](./bootstrap/blog) 28 | - [justified-nav](./bootstrap/blog) 29 | - [navbar](./bootstrap/blog) 30 | - [navbar-fixed-top](./bootstrap/blog) 31 | - [navbar-static-top](./bootstrap/blog) 32 | - [non-responsive](./bootstrap/blog) 33 | - [offcanvas](./bootstrap/blog) 34 | - [signin](./bootstrap/blog) 35 | - [starter-template](./bootstrap/blog) 36 | - [sticky-footer](./bootstrap/blog) 37 | - [sticky-footer-navbar](./bootstrap/blog) 38 | - [theme](./bootstrap/blog) 39 | 40 | ### Semantic-UI 41 | 42 | - [fixed](./semantic-ui/blog) 43 | - [homepage](./semantic-ui/blog) 44 | - [login](./semantic-ui/blog) 45 | - [sticky](./semantic-ui/blog) 46 | -------------------------------------------------------------------------------- /bootstrap/blog/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/blog template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/blog/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/blog/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/blog/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/blog/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-blog-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/blog/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/blog/react/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/blog template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/blog/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/blog/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/blog/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/blog/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-blog-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/blog/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/blog/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/blog/react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | Blog Template for Semantic-UI 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /bootstrap/blog/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/blog/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: rgb(85, 85, 85); 3 | -webkit-font-smoothing: antialiased; 4 | -moz-font-smoothing: grayscale; 5 | } 6 | 7 | .ui.borderless.menu { 8 | margin-top: 0; 9 | } 10 | 11 | .ui.inverted.pointing.menu .active.item:after { 12 | background-color: white !important; 13 | } 14 | 15 | .ui.basic.segment { 16 | padding-top: 4rem; 17 | } 18 | 19 | .ui.basic.segment > .ui.huge.header { 20 | font-size: 54px; 21 | } 22 | 23 | .eleven.wide.column { 24 | font-size: 18px; 25 | } 26 | 27 | .four.wide.column .ui.secondary.segment { 28 | border: none; 29 | } 30 | 31 | footer.ui.segment { 32 | margin-bottom: 0; 33 | padding-top: 40px; 34 | padding-bottom: 40px; 35 | } 36 | 37 | /* blockquote styles comes from bootstrap */ 38 | blockquote { 39 | padding: 0.6rem 1rem 0.4rem; 40 | margin: 0 0 0.8rem; 41 | border-left: 5px solid #eeeeee; 42 | } 43 | 44 | blockquote p { 45 | line-height: 1.2rem; 46 | margin-bottom: 0.3rem; 47 | text-align: start !important; 48 | } 49 | 50 | blockquote p:last-child { 51 | margin-bottom: 0; 52 | } 53 | 54 | blockquote ul:last-child, 55 | blockquote ol:last-child { 56 | margin-bottom: 0; 57 | } 58 | 59 | blockquote footer, 60 | blockquote small, 61 | blockquote .small { 62 | margin-bottom: 0.5rem; 63 | display: block; 64 | font-size: 80%; 65 | line-height: 1.42857; 66 | color: #999; 67 | padding: 0; 68 | } 69 | 70 | blockquote footer:before, 71 | blockquote small:before, 72 | blockquote .small:before { 73 | content: "— "; 74 | } 75 | 76 | blockquote cite:before { 77 | content: "«"; 78 | } 79 | 80 | blockquote cite:after { 81 | content: "»"; 82 | } 83 | -------------------------------------------------------------------------------- /bootstrap/blog/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/blog/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/blog/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/blog/screenshots/blog-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/blog/screenshots/blog-1440x900.png -------------------------------------------------------------------------------- /bootstrap/blog/screenshots/blog-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/blog/screenshots/blog-375x667.png -------------------------------------------------------------------------------- /bootstrap/blog/screenshots/blog-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/blog/screenshots/blog-640x400.png -------------------------------------------------------------------------------- /bootstrap/blog/screenshots/blog-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/blog/screenshots/blog-768x1024.png -------------------------------------------------------------------------------- /bootstrap/carousel/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/carousel template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/carousel/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/carousel/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/carousel/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/carousel/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-carousel-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/carousel/html/static/images/wireframe/square-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/carousel/html/static/images/wireframe/square-image.png -------------------------------------------------------------------------------- /bootstrap/carousel/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/carousel/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/carousel/react/README.md -------------------------------------------------------------------------------- /bootstrap/carousel/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-carousel-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "react-slick": "^0.23.2", 10 | "semantic-ui-css": "^2.4.1", 11 | "semantic-ui-react": "0.85.0" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": [ 23 | ">0.2%", 24 | "not dead", 25 | "not ie <= 11", 26 | "not op_mini all" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /bootstrap/carousel/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/carousel/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/carousel/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/carousel/react/public/static/images/wireframe/square-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/carousel/react/public/static/images/wireframe/square-image.png -------------------------------------------------------------------------------- /bootstrap/carousel/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/carousel/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/carousel/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/carousel/screenshots/carousel-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/carousel/screenshots/carousel-1440x900.png -------------------------------------------------------------------------------- /bootstrap/carousel/screenshots/carousel-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/carousel/screenshots/carousel-375x667.png -------------------------------------------------------------------------------- /bootstrap/carousel/screenshots/carousel-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/carousel/screenshots/carousel-640x400.png -------------------------------------------------------------------------------- /bootstrap/carousel/screenshots/carousel-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/carousel/screenshots/carousel-768x1024.png -------------------------------------------------------------------------------- /bootstrap/cover/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/cover template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/cover/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/cover/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/cover/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/cover/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-cover-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/cover/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/cover/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/cover/react/README.md -------------------------------------------------------------------------------- /bootstrap/cover/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-cover-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/cover/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/cover/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/cover/react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | Cover Template for Semantic-UI 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /bootstrap/cover/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/cover/react/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | import "semantic-ui-css/semantic.min.css"; 4 | 5 | import { Button, Container, Header, Menu, Segment } from "semantic-ui-react"; 6 | 7 | import "./App.css"; 8 | 9 | class App extends Component { 10 | render() { 11 | return ( 12 |
13 | 14 | 15 |
16 | Cover 17 |
18 | 19 | Home 20 | Feature 21 | Contact 22 | 23 | 24 | 25 |
26 | Cover your page. 27 |
28 |

29 | Cover is a one-page template for building simple and beautiful 30 | home pages. Download, edit the text, and add your own fullscreen 31 | background photo to make it your own. 32 |

33 | 34 | 35 | 36 | Cover template for Semantic-UI, 37 | by{" "} 38 | 39 | @Semantic-UI-Forest 40 | 41 | . 42 | 43 | 44 |
45 | ); 46 | } 47 | } 48 | 49 | export default App; 50 | -------------------------------------------------------------------------------- /bootstrap/cover/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/cover/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/cover/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/cover/screenshots/cover-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/cover/screenshots/cover-1440x900.png -------------------------------------------------------------------------------- /bootstrap/cover/screenshots/cover-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/cover/screenshots/cover-375x667.png -------------------------------------------------------------------------------- /bootstrap/cover/screenshots/cover-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/cover/screenshots/cover-640x400.png -------------------------------------------------------------------------------- /bootstrap/cover/screenshots/cover-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/cover/screenshots/cover-768x1024.png -------------------------------------------------------------------------------- /bootstrap/dashboard/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/dashboard template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/dashboard/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/dashboard/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/dashboard/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/dashboard/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-dashboard-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/dashboard/html/static/images/wireframe/square-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/dashboard/html/static/images/wireframe/square-image.png -------------------------------------------------------------------------------- /bootstrap/dashboard/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/dashboard/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/dashboard/react/README.md -------------------------------------------------------------------------------- /bootstrap/dashboard/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-dashboard-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/dashboard/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/dashboard/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/dashboard/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/dashboard/react/public/static/images/wireframe/square-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/dashboard/react/public/static/images/wireframe/square-image.png -------------------------------------------------------------------------------- /bootstrap/dashboard/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-font-smoothing: grayscale; 4 | } 5 | 6 | #sidebar { 7 | position: fixed; 8 | height: 100vh; 9 | background-color: #f5f5f5; 10 | padding-top: 68px; 11 | padding-left: 0; 12 | padding-right: 0; 13 | } 14 | 15 | #sidebar .ui.menu > a.item { 16 | padding: 10px 20px; 17 | line-height: 20px; 18 | color: #337ab7; 19 | border-radius: 0 !important; 20 | margin-top: 0; 21 | margin-bottom: 0; 22 | } 23 | 24 | #sidebar .ui.menu > a.item.active { 25 | background-color: #337ab7; 26 | color: white; 27 | border: none !important; 28 | } 29 | 30 | #sidebar .ui.menu > a.item:hover { 31 | background-color: #eee; 32 | color: #23527c; 33 | } 34 | 35 | #content { 36 | padding-top: 56px; 37 | padding-left: 20px; 38 | padding-right: 20px; 39 | } 40 | 41 | #content h1 { 42 | font-size: 36px; 43 | } 44 | 45 | #content .ui.dividing.header { 46 | width: 100%; 47 | } 48 | 49 | .ui.centered.small.circular.image { 50 | margin-top: 14px; 51 | margin-bottom: 14px; 52 | } 53 | 54 | .ui.borderless.menu { 55 | box-shadow: none; 56 | flex-wrap: wrap; 57 | border: none; 58 | padding-left: 0; 59 | padding-right: 0; 60 | } 61 | 62 | .ui.mobile.only.grid .ui.menu .ui.vertical.menu { 63 | display: none; 64 | } 65 | -------------------------------------------------------------------------------- /bootstrap/dashboard/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/dashboard/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/dashboard/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/dashboard/screenshots/dashboard-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/dashboard/screenshots/dashboard-1440x900.png -------------------------------------------------------------------------------- /bootstrap/dashboard/screenshots/dashboard-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/dashboard/screenshots/dashboard-375x667.png -------------------------------------------------------------------------------- /bootstrap/dashboard/screenshots/dashboard-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/dashboard/screenshots/dashboard-640x400.png -------------------------------------------------------------------------------- /bootstrap/dashboard/screenshots/dashboard-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/dashboard/screenshots/dashboard-768x1024.png -------------------------------------------------------------------------------- /bootstrap/grid/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/grid template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/grid/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/grid/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/grid/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/grid/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-grid-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/grid/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/grid/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/grid/react/README.md -------------------------------------------------------------------------------- /bootstrap/grid/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-grid-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/grid/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/grid/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/grid/react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | Grid Template for Semantic-UI 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /bootstrap/grid/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/grid/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-font-smoothing: grayscale; 4 | } 5 | 6 | .ui.container h1.ui.header:first-child { 7 | margin-top: 40px; 8 | font-size: 2.5rem; 9 | } 10 | 11 | .ui.container p.header { 12 | font-size: 1.4rem; 13 | color: rgb(51, 51, 51); 14 | } 15 | 16 | .ui.container .ui.grid .column { 17 | background-color: rgba(86, 61, 124, 0.15); 18 | border: solid 1px rgba(85, 61, 124, 0.2); 19 | margin-top: 1em; 20 | margin-bottom: 1em; 21 | } 22 | 23 | @media only screen and (max-width: 767px) { 24 | .ui.grid .ui.stackable.grid { 25 | margin-left: 0 !important; 26 | margin-right: 0 !important; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /bootstrap/grid/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/grid/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/grid/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/grid/screenshots/grid-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/grid/screenshots/grid-1440x900.png -------------------------------------------------------------------------------- /bootstrap/grid/screenshots/grid-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/grid/screenshots/grid-375x667.png -------------------------------------------------------------------------------- /bootstrap/grid/screenshots/grid-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/grid/screenshots/grid-640x400.png -------------------------------------------------------------------------------- /bootstrap/grid/screenshots/grid-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/grid/screenshots/grid-768x1024.png -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/jumbotron-narrow template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/jumbotron-narrow/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/jumbotron-narrow/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-jumbotron-narrow-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/jumbotron-narrow/react/README.md -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-jumbotron-narrow-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/jumbotron-narrow/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-font-smoothing: grayscale; 4 | } 5 | 6 | footer { 7 | padding-bottom: 2rem; 8 | } 9 | 10 | @media only screen and (min-width: 768px) { 11 | .ui.container { 12 | width: 730px; 13 | max-width: 730px; 14 | } 15 | } 16 | 17 | .ui.container > .ui.menu { 18 | border-width: 0 0 1px 0; 19 | border-radius: 0; 20 | height: 6rem; 21 | box-shadow: none; 22 | margin-bottom: 28px; 23 | } 24 | 25 | .ui.container > .ui.menu .header.item { 26 | padding-left: 0; 27 | font-size: 1.6rem; 28 | color: #777777; 29 | } 30 | 31 | .ui.container .right.menu .item { 32 | color: #337ab7; 33 | padding: 0.8em 0.6em; 34 | margin: 1.6em 0.2em; 35 | background: none; 36 | transition: color 0.1s ease; 37 | border-radius: 0.28571429rem; 38 | font-size: 14px; 39 | } 40 | 41 | .ui.container .right.menu .item.active { 42 | background-color: #337ab7; 43 | color: white; 44 | } 45 | 46 | .ui.container > .ui.message { 47 | background-color: rgb(238, 238, 238); 48 | box-shadow: none; 49 | padding: 4rem 2rem; 50 | } 51 | 52 | .ui.container h1.ui.header { 53 | font-size: 2.5rem; 54 | text-align: center; 55 | } 56 | 57 | @media only screen and (min-width: 768px) { 58 | .ui.container h1.ui.header { 59 | font-size: 4.5rem; 60 | } 61 | } 62 | 63 | .ui.container p.lead { 64 | font-size: 1.5rem; 65 | color: #333333; 66 | line-height: 1.4; 67 | font-weight: 300; 68 | } 69 | 70 | .ui.container .ui.grid .row { 71 | margin-bottom: 1.5rem; 72 | } 73 | -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/screenshots/jumbotron-narrow-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/jumbotron-narrow/screenshots/jumbotron-narrow-1440x900.png -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/screenshots/jumbotron-narrow-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/jumbotron-narrow/screenshots/jumbotron-narrow-375x667.png -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/screenshots/jumbotron-narrow-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/jumbotron-narrow/screenshots/jumbotron-narrow-640x400.png -------------------------------------------------------------------------------- /bootstrap/jumbotron-narrow/screenshots/jumbotron-narrow-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/jumbotron-narrow/screenshots/jumbotron-narrow-768x1024.png -------------------------------------------------------------------------------- /bootstrap/jumbotron/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/jumbotron template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/jumbotron/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/jumbotron/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/jumbotron/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/jumbotron/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-jumbotron-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/jumbotron/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/jumbotron/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/jumbotron/react/README.md -------------------------------------------------------------------------------- /bootstrap/jumbotron/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-jumbotron-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/jumbotron/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/jumbotron/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/jumbotron/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/jumbotron/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-font-smoothing: grayscale; 4 | } 5 | 6 | .ui.form .inline.fields { 7 | margin-bottom: 0; 8 | } 9 | 10 | .ui.message { 11 | background-color: #eeeeee; 12 | box-shadow: none; 13 | border-radius: 0; 14 | margin-bottom: 4rem; 15 | padding-top: 6rem; 16 | padding-bottom: 4rem; 17 | } 18 | 19 | .ui.menu > .ui.container > .header.item { 20 | font-size: 1.4rem; 21 | margin-left: -20px; 22 | } 23 | 24 | .ui.borderless.menu { 25 | box-shadow: none; 26 | flex-wrap: wrap; 27 | border: none; 28 | padding-left: 0; 29 | padding-right: 0; 30 | } 31 | 32 | .ui.mobile.only.grid .ui.menu .ui.vertical.menu { 33 | display: none; 34 | } 35 | -------------------------------------------------------------------------------- /bootstrap/jumbotron/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/jumbotron/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/jumbotron/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/jumbotron/screenshots/jumbotron-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/jumbotron/screenshots/jumbotron-1440x900.png -------------------------------------------------------------------------------- /bootstrap/jumbotron/screenshots/jumbotron-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/jumbotron/screenshots/jumbotron-375x667.png -------------------------------------------------------------------------------- /bootstrap/jumbotron/screenshots/jumbotron-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/jumbotron/screenshots/jumbotron-640x400.png -------------------------------------------------------------------------------- /bootstrap/jumbotron/screenshots/jumbotron-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/jumbotron/screenshots/jumbotron-768x1024.png -------------------------------------------------------------------------------- /bootstrap/justified-nav/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/justified-nav template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/justified-nav/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/justified-nav/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/justified-nav/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/justified-nav/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-justified-nav-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/justified-nav/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/justified-nav/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/justified-nav/react/README.md -------------------------------------------------------------------------------- /bootstrap/justified-nav/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-justified-nav-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/justified-nav/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/justified-nav/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/justified-nav/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/justified-nav/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-font-smoothing: grayscale; 4 | } 5 | 6 | .ui.grid > .row h3.header { 7 | margin-bottom: 0; 8 | margin-top: 40px; 9 | } 10 | 11 | .ui.grid > .row .ui.item.menu { 12 | border: none; 13 | } 14 | 15 | .ui.grid > .row .ui.item.menu .item { 16 | background-image: linear-gradient(to bottom, #f5f5f5 0, #e5e5e5 100%); 17 | border: 1px solid #d5d5d5; 18 | border-left-color: white; 19 | } 20 | 21 | .ui.grid > .row .ui.item.menu .item.active { 22 | border-left: 0px none #777777; 23 | box-shadow: inset 1px 4px 7px rgba(0, 0, 0, 0.15); 24 | } 25 | 26 | .ui.grid .row .ui.center.aligned.container h1 { 27 | font-size: 63px; 28 | } 29 | 30 | .ui.grid .row .ui.center.aligned.container p { 31 | font-size: 21px; 32 | line-height: 1.5; 33 | } 34 | 35 | .ui.grid .three.column.row h1 { 36 | font-size: 30px; 37 | } 38 | 39 | footer { 40 | padding-top: 2rem; 41 | padding-bottom: 2rem; 42 | } 43 | -------------------------------------------------------------------------------- /bootstrap/justified-nav/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/justified-nav/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/justified-nav/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/justified-nav/screenshots/justified-nav-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/justified-nav/screenshots/justified-nav-1440x900.png -------------------------------------------------------------------------------- /bootstrap/justified-nav/screenshots/justified-nav-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/justified-nav/screenshots/justified-nav-375x667.png -------------------------------------------------------------------------------- /bootstrap/justified-nav/screenshots/justified-nav-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/justified-nav/screenshots/justified-nav-640x400.png -------------------------------------------------------------------------------- /bootstrap/justified-nav/screenshots/justified-nav-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/justified-nav/screenshots/justified-nav-768x1024.png -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/navbar-fixed-top template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/navbar-fixed-top/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/navbar-fixed-top/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-navbar-fixed-top-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar-fixed-top/react/README.md -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-navbar-fixed-top-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar-fixed-top/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | min-height: 2000px; 3 | padding-top: 54px; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-font-smoothing: grayscale; 6 | } 7 | 8 | .ui.borderless.menu { 9 | background-color: #f8f8f8; 10 | box-shadow: none; 11 | flex-wrap: wrap; 12 | border: none; 13 | padding-left: 0; 14 | padding-right: 0; 15 | } 16 | 17 | .ui.borderless.menu .header.item { 18 | font-size: 18px; 19 | font-weight: 400; 20 | } 21 | 22 | .ui.mobile.only.grid .ui.menu .ui.vertical.menu { 23 | display: none; 24 | } 25 | 26 | .ui.mobile.only.grid .ui.vertical.menu .dropdown.icon { 27 | float: unset; 28 | } 29 | 30 | .ui.mobile.only.grid .ui.vertical.menu .dropdown.icon:before { 31 | content: "\f0d7"; 32 | } 33 | 34 | .ui.mobile.only.grid .ui.vertical.menu .ui.dropdown.item .menu { 35 | position: static; 36 | width: 100%; 37 | background-color: unset; 38 | border: none; 39 | box-shadow: none; 40 | } 41 | 42 | .ui.mobile.only.grid .ui.vertical.menu .ui.dropdown.item .menu { 43 | margin-top: 6px; 44 | } 45 | 46 | .ui.container > .ui.message { 47 | background-color: rga(238, 238, 238); 48 | box-shadow: none; 49 | padding: 5rem 4rem; 50 | margin-top: 1rem; 51 | } 52 | 53 | .ui.message h1.ui.header { 54 | font-size: 4.5rem; 55 | } 56 | 57 | .ui.message p.lead { 58 | font-size: 1.3rem; 59 | color: #333333; 60 | line-height: 1.4; 61 | font-weight: 300; 62 | } 63 | -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/screenshots/navbar-fixed-top-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar-fixed-top/screenshots/navbar-fixed-top-1440x900.png -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/screenshots/navbar-fixed-top-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar-fixed-top/screenshots/navbar-fixed-top-375x667.png -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/screenshots/navbar-fixed-top-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar-fixed-top/screenshots/navbar-fixed-top-640x400.png -------------------------------------------------------------------------------- /bootstrap/navbar-fixed-top/screenshots/navbar-fixed-top-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar-fixed-top/screenshots/navbar-fixed-top-768x1024.png -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/navbar-static-top template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/navbar-static-top/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/navbar-static-top/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/navbar-static-top/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-navbar-static-top-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar-static-top/react/README.md -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-navbar-static-top-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar-static-top/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | min-height: 2000px; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-font-smoothing: grayscale; 5 | } 6 | 7 | .ui.borderless.menu { 8 | background-color: #f8f8f8; 9 | box-shadow: none; 10 | flex-wrap: wrap; 11 | border: none; 12 | padding-left: 0; 13 | padding-right: 0; 14 | } 15 | 16 | .ui.borderless.menu .header.item { 17 | font-size: 18px; 18 | font-weight: 400; 19 | } 20 | 21 | .ui.mobile.only.grid .ui.menu .ui.vertical.menu { 22 | display: none; 23 | } 24 | 25 | .ui.mobile.only.grid .ui.vertical.menu .dropdown.icon { 26 | float: unset; 27 | } 28 | 29 | .ui.mobile.only.grid .ui.vertical.menu .dropdown.icon:before { 30 | content: "\f0d7"; 31 | } 32 | 33 | .ui.mobile.only.grid .ui.vertical.menu .ui.dropdown.item .menu { 34 | position: static; 35 | width: 100%; 36 | background-color: unset; 37 | border: none; 38 | box-shadow: none; 39 | } 40 | 41 | .ui.mobile.only.grid .ui.vertical.menu .ui.dropdown.item .menu { 42 | margin-top: 6px; 43 | } 44 | 45 | .ui.container > .ui.message { 46 | background-color: rga(238, 238, 238); 47 | box-shadow: none; 48 | padding: 5rem 4rem; 49 | margin-top: 1rem; 50 | } 51 | 52 | .ui.message h1.ui.header { 53 | font-size: 4.5rem; 54 | } 55 | 56 | .ui.message p.lead { 57 | font-size: 1.3rem; 58 | color: #333333; 59 | line-height: 1.4; 60 | font-weight: 300; 61 | } 62 | -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/screenshots/navbar-static-top-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar-static-top/screenshots/navbar-static-top-1440x900.png -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/screenshots/navbar-static-top-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar-static-top/screenshots/navbar-static-top-375x667.png -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/screenshots/navbar-static-top-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar-static-top/screenshots/navbar-static-top-640x400.png -------------------------------------------------------------------------------- /bootstrap/navbar-static-top/screenshots/navbar-static-top-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar-static-top/screenshots/navbar-static-top-768x1024.png -------------------------------------------------------------------------------- /bootstrap/navbar/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/navbar template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/navbar/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/navbar/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/navbar/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/navbar/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-navbar-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/navbar/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/navbar/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar/react/README.md -------------------------------------------------------------------------------- /bootstrap/navbar/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-navbar-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/navbar/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/navbar/react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | Navbar Template for Semantic-UI 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /bootstrap/navbar/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/navbar/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-top: 1rem; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-font-smoothing: grayscale; 5 | } 6 | 7 | .ui.borderless.menu { 8 | background-color: #f8f8f8; 9 | box-shadow: none; 10 | flex-wrap: wrap; 11 | border: none; 12 | padding-left: 0; 13 | padding-right: 0; 14 | } 15 | 16 | .ui.borderless.menu .header.item { 17 | font-size: 18px; 18 | font-weight: 400; 19 | } 20 | 21 | .ui.mobile.only.grid .ui.menu .ui.vertical.menu { 22 | display: none; 23 | } 24 | 25 | .ui.mobile.only.grid .ui.vertical.menu .dropdown.icon { 26 | float: unset; 27 | } 28 | 29 | .ui.mobile.only.grid .ui.vertical.menu .dropdown.icon:before { 30 | content: "\f0d7"; 31 | } 32 | 33 | .ui.mobile.only.grid .ui.vertical.menu .ui.dropdown.item .menu { 34 | position: static; 35 | width: 100%; 36 | background-color: unset; 37 | border: none; 38 | box-shadow: none; 39 | } 40 | 41 | .ui.mobile.only.grid .ui.vertical.menu .ui.dropdown.item .menu { 42 | margin-top: 6px; 43 | } 44 | 45 | .ui.container > .ui.message { 46 | background-color: rga(238, 238, 238); 47 | box-shadow: none; 48 | padding: 5rem 4rem; 49 | margin-top: 1rem; 50 | } 51 | 52 | .ui.message h1.ui.header { 53 | font-size: 4.5rem; 54 | } 55 | 56 | .ui.message p.lead { 57 | font-size: 1.3rem; 58 | color: #333333; 59 | line-height: 1.4; 60 | font-weight: 300; 61 | } 62 | -------------------------------------------------------------------------------- /bootstrap/navbar/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/navbar/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/navbar/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/navbar/screenshots/navbar-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar/screenshots/navbar-1440x900.png -------------------------------------------------------------------------------- /bootstrap/navbar/screenshots/navbar-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar/screenshots/navbar-375x667.png -------------------------------------------------------------------------------- /bootstrap/navbar/screenshots/navbar-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar/screenshots/navbar-640x400.png -------------------------------------------------------------------------------- /bootstrap/navbar/screenshots/navbar-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/navbar/screenshots/navbar-768x1024.png -------------------------------------------------------------------------------- /bootstrap/non-responsive/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/non-responsive template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/non-responsive/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/non-responsive/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/non-responsive/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/non-responsive/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-non-responsive-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/non-responsive/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/non-responsive/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/non-responsive/react/README.md -------------------------------------------------------------------------------- /bootstrap/non-responsive/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-non-responsive-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/non-responsive/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/non-responsive/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/non-responsive/react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 21 | Non-responsive Template for Semantic-UI 22 | 23 | 24 | 27 |
28 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /bootstrap/non-responsive/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/non-responsive/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | overflow-x: visible; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-font-smoothing: grayscale; 5 | } 6 | 7 | .ui.fixed.menu { 8 | background-color: #f5f5f5; 9 | } 10 | 11 | .ui.fixed.menu .ui.container { 12 | width: 970px; 13 | max-width: none !important; 14 | } 15 | 16 | .ui.fixed.menu .item { 17 | padding-top: 6px; 18 | padding-bottom: 6px; 19 | } 20 | 21 | .ui.container.grid { 22 | width: 970px !important; 23 | max-width: none !important; 24 | } 25 | 26 | .ui.container.grid > .row { 27 | margin-top: 4em; 28 | } 29 | 30 | .ui.container.grid h1 { 31 | font-size: 36px; 32 | } 33 | 34 | .ui.container.grid .row .ui.grid .column { 35 | background-color: rgba(86, 61, 124, 0.15); 36 | border: solid 1px rgba(85, 61, 124, 0.2); 37 | margin-top: 1em; 38 | margin-bottom: 1em; 39 | } 40 | 41 | p.lead { 42 | font-size: 16px; 43 | line-height: 1.4; 44 | } 45 | -------------------------------------------------------------------------------- /bootstrap/non-responsive/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/non-responsive/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/non-responsive/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/non-responsive/screenshots/non-responsive-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/non-responsive/screenshots/non-responsive-1440x900.png -------------------------------------------------------------------------------- /bootstrap/non-responsive/screenshots/non-responsive-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/non-responsive/screenshots/non-responsive-375x667.png -------------------------------------------------------------------------------- /bootstrap/non-responsive/screenshots/non-responsive-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/non-responsive/screenshots/non-responsive-640x400.png -------------------------------------------------------------------------------- /bootstrap/non-responsive/screenshots/non-responsive-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/non-responsive/screenshots/non-responsive-768x1024.png -------------------------------------------------------------------------------- /bootstrap/offcanvas/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/offcanvas template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/offcanvas/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/offcanvas/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/offcanvas/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/offcanvas/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-offcanvas-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/offcanvas/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/offcanvas/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/offcanvas/react/README.md -------------------------------------------------------------------------------- /bootstrap/offcanvas/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-offcanvas-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/offcanvas/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/offcanvas/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/offcanvas/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/offcanvas/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/offcanvas/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/offcanvas/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/offcanvas/screenshots/offcanvas-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/offcanvas/screenshots/offcanvas-1440x900.png -------------------------------------------------------------------------------- /bootstrap/offcanvas/screenshots/offcanvas-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/offcanvas/screenshots/offcanvas-375x667.png -------------------------------------------------------------------------------- /bootstrap/offcanvas/screenshots/offcanvas-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/offcanvas/screenshots/offcanvas-640x400.png -------------------------------------------------------------------------------- /bootstrap/offcanvas/screenshots/offcanvas-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/offcanvas/screenshots/offcanvas-768x1024.png -------------------------------------------------------------------------------- /bootstrap/signin/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/signin template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/signin/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/signin/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/signin/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/signin/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-signin-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/signin/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/signin/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/signin/react/README.md -------------------------------------------------------------------------------- /bootstrap/signin/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-signin-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/signin/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/signin/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/signin/react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | Signin Template for Semantic-UI 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /bootstrap/signin/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/signin/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #eee; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-font-smoothing: grayscale; 5 | } 6 | 7 | .ui.container { 8 | margin-top: 6rem; 9 | max-width: 22rem !important; 10 | } 11 | 12 | .ui.large.form > .field:first-child { 13 | margin-bottom: 0; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/signin/react/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | import "semantic-ui-css/semantic.min.css"; 4 | 5 | import { 6 | Button, 7 | Checkbox, 8 | Container, 9 | Form, 10 | Grid, 11 | Header 12 | } from "semantic-ui-react"; 13 | 14 | import "./App.css"; 15 | 16 | class App extends Component { 17 | render() { 18 | return ( 19 |
20 | 21 | 22 |
Please sign in
23 |
24 | 29 | 34 | 35 | 36 | 37 | 40 | 41 |
42 | 43 |
44 | ); 45 | } 46 | } 47 | 48 | export default App; 49 | -------------------------------------------------------------------------------- /bootstrap/signin/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/signin/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/signin/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/signin/screenshots/signin-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/signin/screenshots/signin-1440x900.png -------------------------------------------------------------------------------- /bootstrap/signin/screenshots/signin-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/signin/screenshots/signin-375x667.png -------------------------------------------------------------------------------- /bootstrap/signin/screenshots/signin-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/signin/screenshots/signin-640x400.png -------------------------------------------------------------------------------- /bootstrap/signin/screenshots/signin-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/signin/screenshots/signin-768x1024.png -------------------------------------------------------------------------------- /bootstrap/starter-template/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/starter-template template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/starter-template/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/starter-template/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/starter-template/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/starter-template/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-starter-template-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/starter-template/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/starter-template/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/starter-template/react/README.md -------------------------------------------------------------------------------- /bootstrap/starter-template/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-starter-template-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/starter-template/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/starter-template/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/starter-template/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/starter-template/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-font-smoothing: grayscale; 4 | } 5 | 6 | .ui.center.aligned.container { 7 | margin-top: 4em; 8 | } 9 | 10 | p.lead { 11 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 12 | font-size: 1.3em; 13 | color: #333333; 14 | line-height: 1.4; 15 | font-weight: 300; 16 | } 17 | 18 | .ui.huge.header { 19 | font-size: 36px; 20 | } 21 | 22 | .ui.inverted.menu { 23 | border-radius: 0; 24 | flex-wrap: wrap; 25 | border: none; 26 | padding-left: 0; 27 | padding-right: 0; 28 | } 29 | 30 | .ui.mobile.only.grid .ui.menu .ui.vertical.menu { 31 | display: none; 32 | } 33 | 34 | .ui.inverted.menu .item { 35 | color: rgb(157, 157, 157); 36 | font-size: 16px; 37 | } 38 | 39 | .ui.inverted.menu .active.item { 40 | background-color: #080808; 41 | } 42 | -------------------------------------------------------------------------------- /bootstrap/starter-template/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/starter-template/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/starter-template/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/starter-template/screenshots/starter-template-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/starter-template/screenshots/starter-template-1440x900.png -------------------------------------------------------------------------------- /bootstrap/starter-template/screenshots/starter-template-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/starter-template/screenshots/starter-template-375x667.png -------------------------------------------------------------------------------- /bootstrap/starter-template/screenshots/starter-template-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/starter-template/screenshots/starter-template-640x400.png -------------------------------------------------------------------------------- /bootstrap/starter-template/screenshots/starter-template-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/starter-template/screenshots/starter-template-768x1024.png -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/sticky-footer-navbar template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/sticky-footer-navbar/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/sticky-footer-navbar/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/sticky-footer-navbar/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-sticky-footer-navbar-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/sticky-footer-navbar/react/README.md -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-sticky-footer-navbar-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/sticky-footer-navbar/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/screenshots/sticky-footer-navbar-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/sticky-footer-navbar/screenshots/sticky-footer-navbar-1440x900.png -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/screenshots/sticky-footer-navbar-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/sticky-footer-navbar/screenshots/sticky-footer-navbar-375x667.png -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/screenshots/sticky-footer-navbar-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/sticky-footer-navbar/screenshots/sticky-footer-navbar-640x400.png -------------------------------------------------------------------------------- /bootstrap/sticky-footer-navbar/screenshots/sticky-footer-navbar-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/sticky-footer-navbar/screenshots/sticky-footer-navbar-768x1024.png -------------------------------------------------------------------------------- /bootstrap/sticky-footer/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/sticky-footer template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/sticky-footer/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/sticky-footer/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/sticky-footer/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-sticky-footer-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/sticky-footer/react/README.md -------------------------------------------------------------------------------- /bootstrap/sticky-footer/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-sticky-footer-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/sticky-footer/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/sticky-footer/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer/react/src/App.css: -------------------------------------------------------------------------------- 1 | html { 2 | position: relative; 3 | min-height: 100%; 4 | height: unset; 5 | } 6 | 7 | body { 8 | padding-bottom: 14px; 9 | margin-bottom: 60px; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-font-smoothing: grayscale; 12 | } 13 | 14 | .ui.container h1.ui.huge.header { 15 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 16 | font-weight: 500; 17 | margin-top: 40px; 18 | font-size: 36px; 19 | } 20 | 21 | footer { 22 | position: absolute; 23 | bottom: 0; 24 | width: 100%; 25 | height: 60px; 26 | padding-top: 20px; 27 | padding-bottom: 20px; 28 | background-color: #f5f5f5; 29 | margin-top: 0; 30 | margin-bottom: 0; 31 | } 32 | 33 | footer p { 34 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 35 | color: #777777; 36 | } 37 | 38 | p.lead { 39 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 40 | font-size: 21px; 41 | color: #333333; 42 | line-height: 1.4; 43 | font-weight: 300; 44 | } 45 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer/react/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | import "semantic-ui-css/semantic.min.css"; 4 | 5 | import { Container, Header } from "semantic-ui-react"; 6 | 7 | import "./App.css"; 8 | 9 | class App extends Component { 10 | render() { 11 | return ( 12 |
13 | 14 |
15 | Sticky footer 16 |
17 |

18 | Pin a fixed-height footer to the bottom of the viewport in desktop 19 | browsers with this custom HTML and CSS. 20 |

21 | 22 |
23 | 24 |

Place sticky footer content here.

25 | 26 |
27 |
28 | ); 29 | } 30 | } 31 | 32 | export default App; 33 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/sticky-footer/screenshots/sticky-footer-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/sticky-footer/screenshots/sticky-footer-1440x900.png -------------------------------------------------------------------------------- /bootstrap/sticky-footer/screenshots/sticky-footer-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/sticky-footer/screenshots/sticky-footer-375x667.png -------------------------------------------------------------------------------- /bootstrap/sticky-footer/screenshots/sticky-footer-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/sticky-footer/screenshots/sticky-footer-640x400.png -------------------------------------------------------------------------------- /bootstrap/sticky-footer/screenshots/sticky-footer-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/sticky-footer/screenshots/sticky-footer-768x1024.png -------------------------------------------------------------------------------- /bootstrap/theme/README.md: -------------------------------------------------------------------------------- 1 | ## Bootstrap/theme template 2 | 3 | This is a demo template imported from 4 | [Bootstrap](https://getbootstrap.com/docs/3.3/examples/theme/) to demonstrate 5 | the power of [Semantic-UI](https://semantic-ui.com). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have 11 | [Node.js](https://nodejs.org/en/download/package-manager/) installed, 12 | and better to get [Yarn](https://yarnpkg.com/) installed. 13 | 14 | Besides, if you want to derive your work based on this template, I suggest you 15 | to install the awesome [Browsersync](https://browsersync.io/) tool. 16 | 17 | ### HTML 18 | 19 | ```sh 20 | git clone http://github.com/semantic-ui-forest/forest-templates 21 | cd forest-templates/bootstrap/theme/html/ 22 | browser-sync start --server --files="**/*" 23 | ``` 24 | 25 | ### React 26 | 27 | ```sh 28 | git clone http://github.com/semantic-ui-forest/forest-templates 29 | cd forest-templates/bootstrap/theme/react/ 30 | yarn # npm install 31 | yarn start # npm start 32 | ``` 33 | 34 | ### Screenshots 35 | 36 | computer sized screen, 1440x900 for example: 37 | 38 | 39 | 40 | tablet sized screen, 768x1024 for example: 41 | 42 | 43 | 44 | mobile sized screen, 375x667 for example: 45 | 46 | 47 | -------------------------------------------------------------------------------- /bootstrap/theme/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-theme-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/theme/html/static/images/wireframe/square-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/theme/html/static/images/wireframe/square-image.png -------------------------------------------------------------------------------- /bootstrap/theme/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /bootstrap/theme/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/theme/react/README.md -------------------------------------------------------------------------------- /bootstrap/theme/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-bootstrap-theme-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /bootstrap/theme/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/theme/react/public/favicon.ico -------------------------------------------------------------------------------- /bootstrap/theme/react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | Theme Template for Semantic-UI 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /bootstrap/theme/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /bootstrap/theme/react/public/static/images/wireframe/square-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/theme/react/public/static/images/wireframe/square-image.png -------------------------------------------------------------------------------- /bootstrap/theme/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | -webkit-font-smoothing: antialiased; 3 | -moz-font-smoothing: grayscale; 4 | } 5 | 6 | .ui.jumbotron.message .ui.huge.header { 7 | font-size: 4em; 8 | } 9 | 10 | .ui.secondary.compact.menu#badges .item { 11 | margin: 0; 12 | } 13 | 14 | .ui.fluid.vertical.menu > .item > .ui.header { 15 | margin-bottom: 5px; 16 | } 17 | 18 | .ui.jumbotron.message { 19 | padding: 6em 4em; 20 | box-shadow: none; 21 | background-color: #eeeeee; 22 | } 23 | 24 | .ui.jumbotron.message p { 25 | font-size: 1.5em; 26 | font-weight: 200; 27 | } 28 | 29 | .ui.dividing.header { 30 | margin-top: 2em; 31 | margin-bottom: 1em; 32 | } 33 | 34 | #content { 35 | margin-top: 5em; 36 | padding-bottom: 4em; 37 | } 38 | 39 | .ui.celled.table tr td:first-child, 40 | .ui.celled.table tr th:first-child { 41 | border-left: 1px solid rgba(34, 36, 38, 0.1); 42 | } 43 | 44 | .ui.borderless.menu { 45 | box-shadow: none; 46 | flex-wrap: wrap; 47 | padding-left: 0; 48 | padding-right: 0; 49 | } 50 | 51 | .ui.mobile.only.grid .ui.menu .ui.vertical.menu { 52 | display: none; 53 | } 54 | 55 | .ui.mobile.only.grid .ui.vertical.menu .dropdown.icon { 56 | float: unset; 57 | } 58 | 59 | .ui.mobile.only.grid .ui.vertical.menu .dropdown.icon:before { 60 | content: "\f0d7"; 61 | } 62 | 63 | .ui.mobile.only.grid .ui.vertical.menu .ui.dropdown.item .menu { 64 | position: static; 65 | width: 100%; 66 | background-color: unset; 67 | border: none; 68 | box-shadow: none; 69 | margin-top: 6px; 70 | } 71 | 72 | .ui.mobile.only.grid .ui.inverted.vertical.menu .ui.dropdown.item .menu .header, 73 | .ui.mobile.only.grid .ui.inverted.vertical.menu .ui.dropdown.item .menu .item { 74 | color: rgba(255, 255, 255, 0.9) !important; 75 | } 76 | -------------------------------------------------------------------------------- /bootstrap/theme/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /bootstrap/theme/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /bootstrap/theme/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /bootstrap/theme/screenshots/theme-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/theme/screenshots/theme-1440x900.png -------------------------------------------------------------------------------- /bootstrap/theme/screenshots/theme-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/theme/screenshots/theme-375x667.png -------------------------------------------------------------------------------- /bootstrap/theme/screenshots/theme-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/theme/screenshots/theme-640x400.png -------------------------------------------------------------------------------- /bootstrap/theme/screenshots/theme-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/bootstrap/theme/screenshots/theme-768x1024.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-templates", 3 | "description": "Semantic-UI Forest Templates", 4 | "version": "0.1.0", 5 | "scripts": { 6 | "capture": "node scripts/capture.js", 7 | "format": "prettier --write {bootstrap,semantic-ui}/*/html/*.html {bootstrap,semantic-ui}/*/react/src/*.jsx {bootstrap,semantic-ui}/*/react/src/*.css", 8 | "upgrade-react": "node scripts/upgrade-react.js", 9 | "upgrade-html": "node scripts/upgrade-html.js" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/semantic-ui-forest/forest-templates.git" 14 | }, 15 | "keywords": [ 16 | "Semantic-UI", 17 | "Templaltes", 18 | "Bootstrap", 19 | "CSS" 20 | ], 21 | "author": "PPType, Inc.", 22 | "license": "BSD-3-Clause", 23 | "bugs": { 24 | "url": "https://github.com/semantic-ui-forest/forest-templates/issues" 25 | }, 26 | "homepage": "https://github.com/semantic-ui-forest/forest-templates#readme", 27 | "devDependencies": { 28 | "codesandbox": "^1.3.6", 29 | "console-stamp": "^0.2.7", 30 | "prettier": "^1.15.3", 31 | "puppeteer": "^1.11.0", 32 | "sharp": "^0.21.3" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /scripts/upgrade-html.js: -------------------------------------------------------------------------------- 1 | require('console-stamp')(console, { colors: { stamp: 'yellow' } }); 2 | 3 | const fs = require("fs"); 4 | const path = require("path"); 5 | 6 | function main() { 7 | if (process.argv.length !== 4) { 8 | process.stderr.write("wrong number of arguments.\n"); 9 | process.stderr.write( 10 | "node upgrade-html-react.js oldSemanticUIVersion newSemanticUIVersion\n" 11 | ); 12 | process.exit(-1); 13 | } 14 | 15 | let content, srcHtmlPath, destHtmlPath; 16 | 17 | const oldSemanticUIVersion = process.argv[2]; 18 | const newSemanticUIVersion = process.argv[3]; 19 | 20 | for (let category of ["bootstrap", "semantic-ui"]) { 21 | for (let template of fs.readdirSync(category)) { 22 | console.log( 23 | `Upgrade ${category}/${template} html semantic to from` + 24 | ` ${oldSemanticUIVersion} to ${newSemanticUIVersion}...` 25 | ); 26 | srcHtmlPath = path.join(category, template, "html/index.html"); 27 | destHtmlPath = path.join(category, template, "html/index.html"); 28 | content = fs.readFileSync(srcHtmlPath, "utf-8"); 29 | fs.writeFileSync( 30 | destHtmlPath, 31 | content.replace( 32 | `semantic-ui/${oldSemanticUIVersion}/semantic.min.css`, 33 | `semantic-ui/${newSemanticUIVersion}/semantic.min.css` 34 | ) 35 | ); 36 | } 37 | } 38 | } 39 | 40 | main(); 41 | -------------------------------------------------------------------------------- /scripts/upgrade-react.js: -------------------------------------------------------------------------------- 1 | require('console-stamp')(console, { colors: { stamp: 'yellow' } }); 2 | 3 | const { execSync } = require("child_process"); 4 | const fs = require("fs"); 5 | const path = require("path"); 6 | 7 | function main() { 8 | for (let category of ["bootstrap", "semantic-ui"]) { 9 | for (let template of fs.readdirSync(category)) { 10 | console.log(`Upgrade ${category}/${template} react to latest version...`); 11 | execSync("yarn upgrade --latest semantic-ui-react", { 12 | cwd: path.join(category, template, "react") 13 | }); 14 | } 15 | } 16 | } 17 | 18 | main(); 19 | -------------------------------------------------------------------------------- /semantic-ui/fixed/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-semantic-ui-fixed-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /semantic-ui/fixed/html/static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/fixed/html/static/images/logo.png -------------------------------------------------------------------------------- /semantic-ui/fixed/html/static/images/wireframe/media-paragraph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/fixed/html/static/images/wireframe/media-paragraph.png -------------------------------------------------------------------------------- /semantic-ui/fixed/html/static/images/wireframe/paragraph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/fixed/html/static/images/wireframe/paragraph.png -------------------------------------------------------------------------------- /semantic-ui/fixed/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /semantic-ui/fixed/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/fixed/react/README.md -------------------------------------------------------------------------------- /semantic-ui/fixed/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-semantic-ui-fixed-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /semantic-ui/fixed/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/fixed/react/public/favicon.ico -------------------------------------------------------------------------------- /semantic-ui/fixed/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /semantic-ui/fixed/react/public/static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/fixed/react/public/static/images/logo.png -------------------------------------------------------------------------------- /semantic-ui/fixed/react/public/static/images/wireframe/media-paragraph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/fixed/react/public/static/images/wireframe/media-paragraph.png -------------------------------------------------------------------------------- /semantic-ui/fixed/react/public/static/images/wireframe/paragraph.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/fixed/react/public/static/images/wireframe/paragraph.png -------------------------------------------------------------------------------- /semantic-ui/fixed/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #ffffff; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-font-smoothing: grayscale; 5 | } 6 | -------------------------------------------------------------------------------- /semantic-ui/fixed/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /semantic-ui/fixed/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /semantic-ui/fixed/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /semantic-ui/fixed/screenshots/fixed-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/fixed/screenshots/fixed-1440x900.png -------------------------------------------------------------------------------- /semantic-ui/fixed/screenshots/fixed-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/fixed/screenshots/fixed-375x667.png -------------------------------------------------------------------------------- /semantic-ui/fixed/screenshots/fixed-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/fixed/screenshots/fixed-640x400.png -------------------------------------------------------------------------------- /semantic-ui/fixed/screenshots/fixed-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/fixed/screenshots/fixed-768x1024.png -------------------------------------------------------------------------------- /semantic-ui/homepage/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-semantic-ui-homepage-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /semantic-ui/homepage/html/static/images/avatar/nan.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/homepage/html/static/images/avatar/nan.jpg -------------------------------------------------------------------------------- /semantic-ui/homepage/html/static/images/wireframe/white-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/homepage/html/static/images/wireframe/white-image.png -------------------------------------------------------------------------------- /semantic-ui/homepage/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /semantic-ui/homepage/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/homepage/react/README.md -------------------------------------------------------------------------------- /semantic-ui/homepage/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-semantic-ui-homepage-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /semantic-ui/homepage/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/homepage/react/public/favicon.ico -------------------------------------------------------------------------------- /semantic-ui/homepage/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /semantic-ui/homepage/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: rgb(85, 85, 85); 3 | -webkit-font-smoothing: antialiased; 4 | -moz-font-smoothing: grayscale; 5 | } 6 | 7 | .ui.inverted.pointing.menu .active.item:after { 8 | background-color: white !important; 9 | } 10 | 11 | /* blockquote styles comes from bootstrap */ 12 | blockquote { 13 | padding: 0.6rem 1rem 0.4rem; 14 | margin: 0 0 0.8rem; 15 | border-left: 5px solid #eeeeee; 16 | } 17 | blockquote p { 18 | line-height: 1.2rem; 19 | margin-bottom: 0.3rem; 20 | text-align: start !important; 21 | } 22 | blockquote p:last-child { 23 | margin-bottom: 0; 24 | } 25 | blockquote ul:last-child, 26 | blockquote ol:last-child { 27 | margin-bottom: 0; 28 | } 29 | blockquote footer, 30 | blockquote small, 31 | blockquote .small { 32 | margin-bottom: 0.5rem; 33 | display: block; 34 | font-size: 80%; 35 | line-height: 1.42857; 36 | color: #999; 37 | padding: 0; 38 | } 39 | blockquote footer:before, 40 | blockquote small:before, 41 | blockquote .small:before { 42 | content: "— "; 43 | } 44 | blockquote cite:before { 45 | content: "«"; 46 | } 47 | blockquote cite:after { 48 | content: "»"; 49 | } 50 | -------------------------------------------------------------------------------- /semantic-ui/homepage/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /semantic-ui/homepage/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /semantic-ui/homepage/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /semantic-ui/homepage/screenshots/homepage-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/homepage/screenshots/homepage-1440x900.png -------------------------------------------------------------------------------- /semantic-ui/homepage/screenshots/homepage-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/homepage/screenshots/homepage-375x667.png -------------------------------------------------------------------------------- /semantic-ui/homepage/screenshots/homepage-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/homepage/screenshots/homepage-640x400.png -------------------------------------------------------------------------------- /semantic-ui/homepage/screenshots/homepage-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/homepage/screenshots/homepage-768x1024.png -------------------------------------------------------------------------------- /semantic-ui/login/README.md: -------------------------------------------------------------------------------- 1 | ## Semantic-UI templates 2 | 3 | This is a template imported from 4 | [Semantic-UI](https://semantic-ui.com/examples/login.html) and 5 | [Semantic-UI-React](https://react.semantic-ui.com/layouts/login). 6 | 7 | In includes two versions, one implemented in plain html, the other implemented 8 | by [Semantic-UI-React](https://react.semantic-ui.com/). 9 | 10 | Want to try yourself? Make sure that you have [Node.js](https://nodejs.org/en/download/package-manager/) installed, and better to get 11 | [Yarn](https://yarnpkg.com/) installed. 12 | 13 | ### HTML 14 | 15 | ```sh 16 | git clone http://github.com/semantic-ui-forest/forest-templates 17 | cd forest-templates/semantic-ui/login/html/ 18 | browser-sync start --server --files="**/*" 19 | ``` 20 | 21 | ### React 22 | 23 | ```sh 24 | git clone http://github.com/semantic-ui-forest/forest-templates 25 | cd forest-templates/semantic-ui/login/react/ 26 | yarn # npm install 27 | yarn start # npm start 28 | ``` 29 | 30 | Right now, Semantic-UI-React lacks official support for [form validation](https://github.com/Semantic-Org/Semantic-UI-React/issues/678), so this is just 31 | some layout demonstration. 32 | -------------------------------------------------------------------------------- /semantic-ui/login/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-semantic-ui-login-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /semantic-ui/login/html/static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/login/html/static/images/logo.png -------------------------------------------------------------------------------- /semantic-ui/login/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /semantic-ui/login/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/login/react/README.md -------------------------------------------------------------------------------- /semantic-ui/login/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-semantic-ui-login-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /semantic-ui/login/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/login/react/public/favicon.ico -------------------------------------------------------------------------------- /semantic-ui/login/react/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 22 | Login Template for Semantic-UI 23 | 24 | 25 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /semantic-ui/login/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /semantic-ui/login/react/public/static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/login/react/public/static/images/logo.png -------------------------------------------------------------------------------- /semantic-ui/login/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #dadada; 3 | -webkit-font-smoothing: antialiased; 4 | -moz-font-smoothing: grayscale; 5 | } 6 | 7 | body > div, 8 | body > div > div, 9 | body > div > div > .ui.grid { 10 | height: 100%; 11 | } 12 | -------------------------------------------------------------------------------- /semantic-ui/login/react/src/App.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | import "semantic-ui-css/semantic.min.css"; 4 | 5 | import { 6 | Button, 7 | Form, 8 | Grid, 9 | Header, 10 | Message, 11 | Segment 12 | } from "semantic-ui-react"; 13 | 14 | import "./App.css"; 15 | 16 | class App extends Component { 17 | render() { 18 | return ( 19 |
20 | 21 | 22 |
23 | logo{" "} 24 | Log-in to your account 25 |
26 |
27 | 28 | 34 | 41 | 44 | 45 |
46 | 47 | New to us? Sign Up 48 | 49 | 50 | 51 |
52 | ); 53 | } 54 | } 55 | 56 | export default App; 57 | -------------------------------------------------------------------------------- /semantic-ui/login/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /semantic-ui/login/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /semantic-ui/login/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /semantic-ui/login/screenshots/login-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/login/screenshots/login-1440x900.png -------------------------------------------------------------------------------- /semantic-ui/login/screenshots/login-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/login/screenshots/login-375x667.png -------------------------------------------------------------------------------- /semantic-ui/login/screenshots/login-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/login/screenshots/login-640x400.png -------------------------------------------------------------------------------- /semantic-ui/login/screenshots/login-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/login/screenshots/login-768x1024.png -------------------------------------------------------------------------------- /semantic-ui/sticky/html/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-semantic-ui-sticky-html", 3 | "version": "0.1.0", 4 | "private": true, 5 | "main": "index.html", 6 | "scripts": { 7 | "start": "parcel index.html --open", 8 | "build": "parcel build index.html" 9 | }, 10 | "dependencies": {}, 11 | "devDependencies": { 12 | "parcel-bundler": "^1.6.1" 13 | }, 14 | "keywords": [] 15 | } 16 | -------------------------------------------------------------------------------- /semantic-ui/sticky/html/static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/sticky/html/static/images/logo.png -------------------------------------------------------------------------------- /semantic-ui/sticky/html/static/images/wireframe/square-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/sticky/html/static/images/wireframe/square-image.png -------------------------------------------------------------------------------- /semantic-ui/sticky/react/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env.local 15 | .env.development.local 16 | .env.test.local 17 | .env.production.local 18 | 19 | npm-debug.log* 20 | yarn-debug.log* 21 | yarn-error.log* 22 | -------------------------------------------------------------------------------- /semantic-ui/sticky/react/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/sticky/react/README.md -------------------------------------------------------------------------------- /semantic-ui/sticky/react/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "forest-template-semantic-ui-sticky-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.5.2", 7 | "react-dom": "^16.5.2", 8 | "react-scripts": "2.0.5", 9 | "semantic-ui-css": "^2.4.1", 10 | "semantic-ui-react": "0.85.0" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /semantic-ui/sticky/react/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/sticky/react/public/favicon.ico -------------------------------------------------------------------------------- /semantic-ui/sticky/react/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /semantic-ui/sticky/react/public/static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/sticky/react/public/static/images/logo.png -------------------------------------------------------------------------------- /semantic-ui/sticky/react/public/static/images/wireframe/square-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/sticky/react/public/static/images/wireframe/square-image.png -------------------------------------------------------------------------------- /semantic-ui/sticky/react/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | color: rgb(85, 85, 85); 3 | -webkit-font-smoothing: antialiased; 4 | -moz-font-smoothing: grayscale; 5 | } 6 | 7 | .ui.inverted.pointing.menu .active.item:after { 8 | background-color: white !important; 9 | } 10 | 11 | /* blockquote styles comes from bootstrap */ 12 | blockquote { 13 | padding: 0.6rem 1rem 0.4rem; 14 | margin: 0 0 0.8rem; 15 | border-left: 5px solid #eeeeee; 16 | } 17 | blockquote p { 18 | line-height: 1.2rem; 19 | margin-bottom: 0.3rem; 20 | text-align: start !important; 21 | } 22 | blockquote p:last-child { 23 | margin-bottom: 0; 24 | } 25 | blockquote ul:last-child, 26 | blockquote ol:last-child { 27 | margin-bottom: 0; 28 | } 29 | blockquote footer, 30 | blockquote small, 31 | blockquote .small { 32 | margin-bottom: 0.5rem; 33 | display: block; 34 | font-size: 80%; 35 | line-height: 1.42857; 36 | color: #999; 37 | padding: 0; 38 | } 39 | blockquote footer:before, 40 | blockquote small:before, 41 | blockquote .small:before { 42 | content: "— "; 43 | } 44 | blockquote cite:before { 45 | content: "«"; 46 | } 47 | blockquote cite:after { 48 | content: "»"; 49 | } 50 | -------------------------------------------------------------------------------- /semantic-ui/sticky/react/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /semantic-ui/sticky/react/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /semantic-ui/sticky/react/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /semantic-ui/sticky/screenshots/sticky-1440x900.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/sticky/screenshots/sticky-1440x900.png -------------------------------------------------------------------------------- /semantic-ui/sticky/screenshots/sticky-375x667.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/sticky/screenshots/sticky-375x667.png -------------------------------------------------------------------------------- /semantic-ui/sticky/screenshots/sticky-640x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/sticky/screenshots/sticky-640x400.png -------------------------------------------------------------------------------- /semantic-ui/sticky/screenshots/sticky-768x1024.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/semantic-ui-forest/forest-templates/b8a63e3c5f573143431a7fa42404f0bc83c419b2/semantic-ui/sticky/screenshots/sticky-768x1024.png --------------------------------------------------------------------------------