This project serves as a sample project (called PrimeTime, a timesheet tool) for a CSS & PrimeNG workshop covering best practices and patterns with Angular 12 and PrimeNG 9 and CSS in general.
It also includes additional design, UX, and CSS resources.
This project was generated with Angular CLI version 12.0.0.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via a platform of your choice.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
- A guide to the Golden Ratio for designers
- Sidebar: Visual Design Principles
- Designing with White Space: Why 1+1=3
- Color Theory for Designers, Part 1: The Meaning of Color
- Color Theory For Designers, Part 2: Understanding Concepts And Color Terminology
- Typography Essentials – A Getting Started Guide
- Better web typography in 13 simple steps
- Web Design is 95% Typography
- Laws of UX
- CSS-Tricks
- CSS in Depth by Estelle Weyl
- CSS Specificity
- Specifics on CSS Specificity
- Specificity Calculator
- CSS Properties Index
- Common CSS Properties Reference
- The stacking context (z-index)
- Fluid Grids by Ethan Marcotte
- Don’t Overthink It Grids
- A Complete Guide to Grid
- A Complete Guide to Flexbox
- Flexbox vs. CSS Grid: Which Should You Use and When?
- Should I use Grid or Flexbox?
- Does CSS Grid Replace Flexbox?
- Layoutit! - CSS Grid Generator
- Interactive CSS Flexbox Generator · Loading.io
- https://stackoverflow.com/questions/49790092/prime-ng-auto-complete-css-style-applying
- https://stackoverflow.com/questions/46350302/primeng-how-to-use-styleclass
- https://stackoverflow.com/questions/59627838/primeng-table-p-table-column-and-data-overlapping-issue-on-browser-window-resizi
- https://stackoverflow.com/questions/49493888/change-primeng-panelmenu-styles
- https://stackoverflow.com/questions/41354416/primeng-p-dropdown-stretch-100/41374306#41374306
- https://stackoverflow.com/questions/57191749/how-to-increase-width-of-ptooltip-in-primeng
- https://stackoverflow.com/questions/43282053/primeng-p-datatable-height-set-by-number-of-rows/45305591#45305591
- https://stackoverflow.com/questions/63332598/when-zoom-in-browser-cause-one-div-container-expand-how-to-adjust-other-div-con
- https://stackoverflow.com/questions/46033307/overflow-text-in-primeng-datatabel-cell
- https://stackoverflow.com/questions/57768227/sticky-header-not-working-with-resizable-column-in-primeng/57809413#57809413
- https://stackoverflow.com/questions/51600175/primeng-accordion-doesnt-work-and-display-properly
- https://stackoverflow.com/questions/47444899/primeng-make-scrollable-datatable-height-responsive
- https://stackoverflow.com/questions/41721523/overflow-the-primeng-dialogmodule-with-the-calendarmodule/41764764#41764764
- https://stackoverflow.com/questions/56046857/how-to-fit-p-dropdown-inside-of-a-table-cell
- https://stackoverflow.com/questions/44148075/primeng-styling-size-and-alignment-of-p-panel
Includes software from the following resources:
- https://github.com/glenasmith/pluralsight-primeng, released under the MIT License, Copyright (c) 2017 Glen Smith.
- https://github.com/primefaces/primeng, released under the MIT License, Copyright (c) 2016-2020 PrimeTek.