CSS BlueTrip Framework
Having opened some time ago on Wikipedia, a list of existing css frameworks in order to pick up something convenient for prototyping (and ideally for making up fellow layout designers) was amazed at their number. In the process of studying links, the BlueTrip project, which existed at that time solely as a blog entry, stood out in particular. The concept of BlueTrip, according to the author, could be expressed as “take the convenience from other frameworks and customize them”. Alas, the framework at that time was damp and much had to be ruled, but after returning back some time later, I discovered that it had acquired its own website and got rid of childhood diseases.
BlueTrip is a combination of Blueprint and Tripoli , Hartija print styles, 960.gs simplicity and Elements icons for links.
BlueTrip turns a page into a 24-column 950px grid. On this grid, you can "add" divs using a special convention of class names.
A small example, for the simplest understanding:
What does this mean styles:
container - the root element of the BlueTrip being processed
showgrid - enables grid visibility
span-24, span-18, span-5 - denotes the elements occupying 24, 18 and 5 columns of the grid, respectively
last - the identifier of the last element in the string (actually acts as br)
suffix-1 - leaves a 1-column gap after the element (each ordinary column also has a column for gaps)
')
This code creates a page with a header, a basement and two columns of 18 and 5 columns with a space between them. At the same time, in addition to the classes set by the framework, you can naturally apply any of your classes to elements.
Thus, it is very easy to create a page frame, but the BlueTrip functionality does not end there.
For styling content on pages, BlueTrip provides styles for
The pages are validated xhtml 1.0 and have the corresponding doctype
BlueTrip is an excellent tool for prototyping pages, especially for programmers who hate writing style decorations. :) With this, it can be successfully used as a base for creating your own unique style set, the blessing inside is made clear and neat.
I advise you to get acquainted with the ancestral frameworks, they are also very interesting.
BlueTrip is a combination of Blueprint and Tripoli , Hartija print styles, 960.gs simplicity and Elements icons for links.
How BlueTrip works
BlueTrip turns a page into a 24-column 950px grid. On this grid, you can "add" divs using a special convention of class names.
A small example, for the simplest understanding:
<body>
<div class="container showgrid">
<div class="span-24 last"></div>
<hr />
<div class="span-18 suffix-1"> </div>
<div class="span-5 last"> </div>
<div class="span-24 last"></div>
</div>
</body>
What does this mean styles:
container - the root element of the BlueTrip being processed
showgrid - enables grid visibility
span-24, span-18, span-5 - denotes the elements occupying 24, 18 and 5 columns of the grid, respectively
last - the identifier of the last element in the string (actually acts as br)
suffix-1 - leaves a 1-column gap after the element (each ordinary column also has a column for gaps)
')
This code creates a page with a header, a basement and two columns of 18 and 5 columns with a space between them. At the same time, in addition to the classes set by the framework, you can naturally apply any of your classes to elements.
Thus, it is very easy to create a page frame, but the BlueTrip functionality does not end there.
For styling content on pages, BlueTrip provides styles for
- H1-H6 headers (including those that make all letters uppercase)
- quotes
- lists
- tables (including cell headings)
- links (with support for link types)
- Forms (including confirmation / cancel buttons and status messages)
- all other elements leading them to the overall style
The pages are validated xhtml 1.0 and have the corresponding doctype
findings
BlueTrip is an excellent tool for prototyping pages, especially for programmers who hate writing style decorations. :) With this, it can be successfully used as a base for creating your own unique style set, the blessing inside is made clear and neat.
I advise you to get acquainted with the ancestral frameworks, they are also very interesting.
Source: https://habr.com/ru/post/46418/
All Articles