└── README.md /README.md: -------------------------------------------------------------------------------- 1 | cssObjects 2 | ========== 3 | 4 | cssObjects is designed as a new and clear methodology for CSS development. It encompases the naming, structuring and managing of css components. 5 | 6 | cssObjects should be: 7 | 8 | - **Independent**: 9 | All objects can be used as stand alone components and can be included in any existing project, even if you are not using the complete methodology 10 | 11 | - **Extendable**: 12 | Components can be extended with new functionality without breaking any code 13 | 14 | - **Reusable**: 15 | Code should be written with reusability in mind first. Reusable through semantics & pattern design. 16 | 17 | Introduction 18 | ------------ 19 | CSS was originally designed to decorate html, but the vision of css evolved over the years. In later versions, CSS was also used to 'structure' content in addition to decorating it. New ideas like the flexbox show, that the big idea of css still holds, to separate form from function, but that the definition of the term 'form' is now much broader. 20 | 21 | CSS is build on 2 very basic design concepts that are very much at the core of the technology: 22 | 23 | 1. **the cascading mechanism** 24 | 2. **the inheritance of properties** 25 | 26 | Like CSS, cssObjects is build on that concept. Every component in cssObjects has been designed to complement the cascading mechanism and the inheritance of properties. 27 | 28 | The layered architecture 29 | ------------ 30 | It's helpful to view cssObjects as a set of layers. The lowest layer provides the fundamental setup of any project, while the subsequent layers are specialized for the project at hand. Each layer inherits from the layer below. 31 | 32 | cssObjects has 4 layers 33 | 34 | 1. **Document** 35 | 2. **Theme** 36 | 3. **Structure** 37 | 4. **Object** 38 | 39 | ### 1. Document 40 | 41 | The Document layer prepares the browser for the project, it can contain files like: 42 | 43 | - **normalize.css**: make browsers render all elements more consistently and in line with modern standards. 44 | - **global.css**: initialize global variables that can be used project wide. 45 | 46 | Document files should normaly not be changed after it has been set up. 47 | 48 | ### 2. Theme 49 | 50 | Every project has a unique look and feel, this look is captured in the 'theme' layer. 51 | 52 | Instead of styling every component individually the theme layer is used to share visual properties. All components hereafter inherit the properties of this layer so that the visual style can remain consistent throughout the entire project. 53 | 54 | The theme layer can include these files: 55 | 56 | - **typography**: attachment of @font-face fonts and typographical settings for the project 57 | - **color**: font colors used in the theme 58 | - **background**: setup of background colors, gradients and images 59 | 60 | ### 3. Structure 61 | 62 | The structure is responsible for holding content and objects in some way or form. It responds to the media you are using to view the structure, and it adjusts through the use of media queries. 63 | 64 | There are 3 objects that hold a project's content: 65 | 66 | - **layout** 67 | - **grid** 68 | - **model** 69 | 70 | #### Layout 71 | Layouts set the parameters of the main wrapper of the project using the ```
``` tag. This wrapper can contain the ```
``` and ```